R&D #1324
ferméRely on a UI framework
Ajouté par Johan Cwiklinski il y a environ 5 ans. Mis à jour il y a plus de 2 ans.
100%
Description
Maybe it would be a good thing to switch the UI to a Framework like SemanticUI.
I did some R&D for my job, it appears than several frameworks could do the job, but I've been seduced by SemanticUI, and I think this may fit Galette needs.
Guillaume A. tell us on the mailing list that SemanticUI is noo longer maintained, but there is a fork that exists and is maintained:
https://github.com/fomantic/Fomantic-UI
Fichiers
galette-0.9.5-ihm-experimental-20210921-a820643414.part2.rar (2,49 Mo) galette-0.9.5-ihm-experimental-20210921-a820643414.part2.rar | Guillaume AGNIERAY, 21/09/2021 16:49 | ||
galette-plugin-maps-1.6.0-ihm-experimental-20210921-fced640da7.tar.bz2 (247 ko) galette-plugin-maps-1.6.0-ihm-experimental-20210921-fced640da7.tar.bz2 | Guillaume AGNIERAY, 21/09/2021 16:49 | ||
galette-plugin-paypal-1.9.0-ihm-experimental-20210921-044a343e5.tar.bz2 (42,7 ko) galette-plugin-paypal-1.9.0-ihm-experimental-20210921-044a343e5.tar.bz2 | Guillaume AGNIERAY, 21/09/2021 16:49 | ||
galette-0.9.5-ihm-experimental-20210921-a820643414.part1.rar (4 Mo) galette-0.9.5-ihm-experimental-20210921-a820643414.part1.rar | Guillaume AGNIERAY, 21/09/2021 16:50 |
Mis à jour par Johan Cwiklinski il y a environ 5 ans
- Vote mis à https://vote.galette.eu/posts/52/rework-ui-and-use-a-framework
Mis à jour par Johan Cwiklinski il y a environ 5 ans
- Lié à R&D #1331: Improve texts management UI ajouté
Mis à jour par Johan Cwiklinski il y a environ 5 ans
- Lié à R&D #1341: Javascript dependency management ajouté
Mis à jour par Johan Cwiklinski il y a environ 5 ans
- Lié à Evolution #1123: Compatibilité Safari mobile ajouté
Mis à jour par Johan Cwiklinski il y a presque 5 ans
- Statut changé de Nouveau à In Progress
See feature proposal from Guillaume on the devel list: https://listengine.tuxfamily.org/lists.galette.eu/devel/2019/10/msg00000.html
I've reently worked a bit on his branch, see: https://github.com/galette/galette/tree/feature/ihm
Mis à jour par Guillaume AGNIERAY il y a environ 3 ans
- Fichier galette-0.9.5-ihm-experimental-20210915-41e6b52cb6.part1.rar ajouté
- Fichier galette-0.9.5-ihm-experimental-20210915-41e6b52cb6.part2.rar ajouté
Work on this feature continues :)
I am attaching to this request a working build based on the latest commit from the develop branch as of this writing (9341140c).
Some observations after the work accomplished so far:- replacing the HTML markup in galette by the one of the framework is not a significant problem
- at this point I only needed to make 2 or 3 tiny edits in the core to accommodate the markup or the classes returned in templates variables
- even if some additional functions would be very useful for the templates, no addition in the core of galette has been necessary for the moment
- the project is still active and maintained:
https://github.com/fomantic/Fomantic-UI/releases - I find it very intuitive to use, and its elements are well documented
- it has all the UI elements currently in use, except jqueryui.sortable and jstree
- most of these elements only require easy changes in templates and js
- fontawesome is included
- selectize: Fomantic UI has an element to override it, but it requires a deep rewrite of the javascript code wherever selectize is used:
https://fomantic-ui.com/modules/dropdown.html#behavior - jqueryui.dialog: replaceable whenever ajax is not needed (eg table captions). Otherwise it requires a complete rewrite of the javascript code to use Fomantic UI's modals and API
https://fomantic-ui.com/modules/modal.html
https://fomantic-ui.com/behaviors/api.html - jquery ui.tabs: replaceable whenever ajax is not needed (eg preferences). Otherwise it requires a complete rewrite of the javascript code
https://fomantic-ui.com/modules/tab.html#with-an-api-behavior
At the moment, these libraries coexist without problem with Fomantic UI.
First, it would be enough to adjust their CSS so that they "merge" with the interface of Fomantic UI.
In this case, perhaps we could make a custom build of jqueryui and keep only the dialog, tabs and sortable components with gulp: https://stackoverflow.com/a/43396428 (exemple using grunt)
This would make it possible to modernize the Galette interface in the more or less short term.
In the longer term, getting rid of these libraries entirely can be done; this is what will require the most work.
Your opinion and suggestions are welcome !
I'm going to have a look at the impacts on plugins side now :)
Mis à jour par Guillaume AGNIERAY il y a environ 3 ans
- Fichier galette-0.9.5-ihm-experimental-20210921-a820643414.part1.rar galette-0.9.5-ihm-experimental-20210921-a820643414.part1.rar ajouté
- Fichier galette-0.9.5-ihm-experimental-20210921-a820643414.part2.rar galette-0.9.5-ihm-experimental-20210921-a820643414.part2.rar ajouté
- Fichier galette-plugin-maps-1.6.0-ihm-experimental-20210921-fced640da7.tar.bz2 galette-plugin-maps-1.6.0-ihm-experimental-20210921-fced640da7.tar.bz2 ajouté
- Fichier galette-plugin-paypal-1.9.0-ihm-experimental-20210921-044a343e5.tar.bz2 galette-plugin-paypal-1.9.0-ihm-experimental-20210921-044a343e5.tar.bz2 ajouté
Guillaume Agnieray a écrit (#note-6):
I'm going to have a look at the impacts on plugins side now :)
So. Nothing to worry about!
All official plugins can follow the principles used to rewrite Galette's HTML markup.
As Fullcard doesn't have an interface, nothing to do for this one.
Paypal and Maps have very few and simple screens.
Events, Objectslend and Auto are more complex, but they have nothing that has not already been done on Galette.
The 3rd party library used in Events (fullcalendar) has no equivalent in the framework and works flawlessly.
The one used in Objectslend to display the photo of an item (featherlight) can be replaced by the Modal element.
Attached you will find a new build, as well as builds of the Paypal and Maps plugins.
Mis à jour par Guillaume AGNIERAY il y a environ 3 ans
- Fichier
galette-0.9.5-ihm-experimental-20210915-41e6b52cb6.part1.rarsupprimé
Mis à jour par Guillaume AGNIERAY il y a environ 3 ans
- Fichier
galette-0.9.5-ihm-experimental-20210915-41e6b52cb6.part2.rarsupprimé
Mis à jour par Johan Cwiklinski il y a presque 3 ans
- Assigné à mis à Johan Cwiklinski
- Version cible mis à 1.0.0
Mis à jour par Johan Cwiklinski il y a presque 3 ans
Mis à jour par Johan Cwiklinski il y a presque 3 ans
- Statut changé de In Progress à Résolu
- % réalisé changé de 0 à 100
Work merged in develop branch as of now :)