Projet

Général

Profil

Actions

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.

Statut:
Fermé
Priorité:
Normal
Assigné à:
Catégorie:
IHM
Version cible:
Début:
03/10/2019
Echéance:
% réalisé:

100%

Temps estimé:

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


Demandes liées 3 (0 ouverte3 fermées)

Lié à Galette - R&D #1331: Improve texts management UIRejeté18/10/2019

Actions
Lié à Galette - R&D #1341: Javascript dependency managementFerméJohan Cwiklinski29/10/2019

Actions
Lié à Galette - Evolution #1123: Compatibilité Safari mobileRejeté10/12/2017

Actions

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

Mis à jour par Johan Cwiklinski il y a environ 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 plus de 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
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 :)

Mis à jour par Guillaume AGNIERAY il y a plus de 3 ans

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 plus de 3 ans

  • Fichier galette-0.9.5-ihm-experimental-20210915-41e6b52cb6.part1.rar supprimé

Mis à jour par Guillaume AGNIERAY il y a plus de 3 ans

  • Fichier galette-0.9.5-ihm-experimental-20210915-41e6b52cb6.part2.rar supprimé

Mis à jour par Johan Cwiklinski il y a environ 3 ans

  • Assigné à mis à Johan Cwiklinski
  • Version cible mis à 1.0.0

Mis à jour par Johan Cwiklinski il y a environ 3 ans

  • Statut changé de In Progress à Résolu
  • % réalisé changé de 0 à 100

Work merged in develop branch as of now :)

Mis à jour par Johan Cwiklinski il y a plus de 2 ans

  • Statut changé de Résolu à Fermé
Actions

Formats disponibles : Atom PDF