Project

General

Profile

R&D #1324

Rely on a UI framework

Added by Johan Cwiklinski about 2 years ago. Updated 2 months ago.

Status:
In Progress
Priority:
Normal
Assignee:
-
Category:
IHM
Target version:
-
Start date:
10/03/2019
Due date:
% Done:

0%

Estimated time:

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


Related issues

Related to Galette - R&D #1331: Improve texts management UINouveau10/18/2019

Actions
Related to Galette - R&D #1341: Javascript dependency managementFerméJohan Cwiklinski10/29/2019

Actions
Related to Galette - Evolution #1123: Compatibilité Safari mobileRejeté12/10/2017

Actions
#1

Updated by Johan Cwiklinski about 2 years ago

  • Vote set to https://vote.galette.eu/posts/52/rework-ui-and-use-a-framework
#2

Updated by Johan Cwiklinski about 2 years ago

  • Related to R&D #1331: Improve texts management UI added
#3

Updated by Johan Cwiklinski about 2 years ago

  • Related to R&D #1341: Javascript dependency management added
#4

Updated by Johan Cwiklinski about 2 years ago

#5

Updated by Johan Cwiklinski about 2 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

#6

Updated by Guillaume Agnieray 2 months 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
Regarding Fomantic UI:
  • 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
Currently, the "duplicated" 3rd party js libraries that could not be removed are:

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 :)

#7

Updated by Guillaume Agnieray 2 months ago

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.

#8

Updated by Guillaume Agnieray 2 months ago

  • File deleted (galette-0.9.5-ihm-experimental-20210915-41e6b52cb6.part1.rar)
#9

Updated by Guillaume Agnieray 2 months ago

  • File deleted (galette-0.9.5-ihm-experimental-20210915-41e6b52cb6.part2.rar)

Also available in: Atom PDF