R&D #1324
closedRely on a UI framework
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
Files
Updated by Johan Cwiklinski about 5 years ago
- Vote set to https://vote.galette.eu/posts/52/rework-ui-and-use-a-framework
Updated by Johan Cwiklinski almost 5 years ago
- Related to R&D #1331: Improve texts management UI added
Updated by Johan Cwiklinski almost 5 years ago
- Related to R&D #1341: Javascript dependency management added
Updated by Johan Cwiklinski almost 5 years ago
- Related to Evolution #1123: Compatibilité Safari mobile added
Updated by Johan Cwiklinski almost 5 years ago
- Status changed from Nouveau to 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
Updated by Guillaume AGNIERAY about 3 years ago
- File galette-0.9.5-ihm-experimental-20210915-41e6b52cb6.part1.rar added
- File galette-0.9.5-ihm-experimental-20210915-41e6b52cb6.part2.rar added
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 :)
Updated by Guillaume AGNIERAY about 3 years ago
- File galette-0.9.5-ihm-experimental-20210921-a820643414.part1.rar galette-0.9.5-ihm-experimental-20210921-a820643414.part1.rar added
- File galette-0.9.5-ihm-experimental-20210921-a820643414.part2.rar galette-0.9.5-ihm-experimental-20210921-a820643414.part2.rar added
- File galette-plugin-maps-1.6.0-ihm-experimental-20210921-fced640da7.tar.bz2 galette-plugin-maps-1.6.0-ihm-experimental-20210921-fced640da7.tar.bz2 added
- File galette-plugin-paypal-1.9.0-ihm-experimental-20210921-044a343e5.tar.bz2 galette-plugin-paypal-1.9.0-ihm-experimental-20210921-044a343e5.tar.bz2 added
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.
Updated by Guillaume AGNIERAY about 3 years ago
- File deleted (
galette-0.9.5-ihm-experimental-20210915-41e6b52cb6.part1.rar)
Updated by Guillaume AGNIERAY about 3 years ago
- File deleted (
galette-0.9.5-ihm-experimental-20210915-41e6b52cb6.part2.rar)
Updated by Johan Cwiklinski almost 3 years ago
- Assignee set to Johan Cwiklinski
- Target version set to 1.0.0
Updated by Johan Cwiklinski almost 3 years ago
Updated by Johan Cwiklinski almost 3 years ago
- Status changed from In Progress to Résolu
- % Done changed from 0 to 100
Work merged in develop branch as of now :)
Updated by Johan Cwiklinski over 2 years ago
- Status changed from Résolu to Fermé