[Galette-devel] Présentation et proposition d'interface

[Guillaume AGNIERAY <dev@xxxxxxxxxxxx>]

Bonjour à tou-te-s!

[ Ceci est mon premier message sur la liste. Il est un peu long.
  Veuillez m'en excuser]

Tout d'abord je me présente. 

Je m'appelle Guillaume. Je travaille comme auto-entrepreneur dans la
réalisation de sites web principalement sous Drupal, et j'assiste
également mes clients dans d'autres tâches informatiques diverses.. J'ai
donc parfois du temps à tuer :D 

Et comme j'aime mon métier (principalement de l'intégration en front et
des petits devs) mais que comme beaucoup je fais trop souvent de
l'"alimentaire", j'ai besoin de revenir à des choses simples et terre à
terre quand je fais ça sur mon temps libre, et surtout de le faire en
collaboration et plus seulement dans mon coin :)

J'ai découvert Galette il y a un an et je l'expérimente depuis
plusieurs mois dans le cadre d'un Système d'Échange Local dont je suis
membre dans ma région (https://www.seldopale.fr). Notre petit groupe
devrait le valider prochainement et la télémétrie vous parvenir
également ;)

J'ai aussi proposé à une association de médecins nutritionnistes pour
qui je travaille régulièrement de leur cuisiner une galette pour la
gestion de leurs cotisations. C'est en bonne voie. L'import simple de
leur base d'adhérents et de l'historique des cotisations depuis 4 ans
(anciens compris) est réalisé \o/ Reste à traiter les autres données
spécifiques dans des champs dynamiques...

Ce sont donc ces 2 projets qui m'ont poussé à m'intéresser d'un peu
plus près au développement de Galette. Avec le premier, j'ai d'abord
rapidement fait un petit plugin pour un annuaire des adhérents privé
qui répond plus précisément à nos besoins, puis plus récemment, des
petits correctifs pour des problèmes auxquels nous étions confrontés et
déjà remontés sur le tracker.

Dans les 2 cas, je me suis aussi penché sur la documentation, car c'est
par ce biais qu'à titre personnel est né mon intérêt pour votre
logiciel. Comme je la cite souvent aux utilisateurs, j'ai aussi souvent
eu l'occasion de recevoir les mêmes remarques à son sujet. Apporter les
corrections nécessaires étant dans mes cordes, et comme je vais être
amené à faire du support pour mon SEL et mon client à l'avenir :p, ce
n'est donc pas en pur philanthrope que j'ai mis mon nez dedans je vous
l'avoue :D

Mais comme je l'ai dit à Johan suite à ses remerciements, ce fut en
tout cas avec très un grand plaisir (et doublement bénéfique pour moi,
car dans mon boulot, éditer mes documentations de cette manière me sera
extrêmement utile désormais).

Je continuerai donc tant que ça me sera possible à vous proposer des
contributions.

Et en parlant de contribution justement, j'ai une **feature** à vous
soumettre :)

Je me suis amusé sur l'une des branches du dépôt de Johan (pour
diverses raisons qu'il est inutile de détailler ici). Après en avoir
discuté ensemble, je m'étais dit que je continuerai à jouer avec pour
voir jusqu'où je pouvais pousser les choses (et parce qu'à la base,
c'est twig qui m'a fait de l'œil). Mais finalement c'est trop
"expérimental", et j'ai réalisé que je m'amuserai plus en faisant la
même chose directement sur la branche develop avec smarty. Et aussi que
ça aurait peut-être plus de chances d'être intégré un jour dans une
prochaine fournée !

Ce que je propose, c'est une refonte de la navigation et l'utilisation
d'un framework CSS/JS pour simplifier les templates et offrir une
version mobile plus moderne et plus homogène de Galette.

Le choix qu'avait fait Johan sur la branche que j'ai repris
initialement (Semantic UI) s'avère après quelques recherches un très
bon choix (mis à part le fait que le projet initial est à l'abandon et
qu'un fork communautaire a pris le relais ; mais ça tient bien la route
visiblement et le fork est actif :
https://github.com/fomantic/Fomantic-UI/issues/1044).

Dans notre discussion, Johan exprimait ses craintes à juste titre sur
les complications que peuvent poser l'utilisation d'un tel framework
dans Galette. De ce point de vue, un avantage de Semantic UI c'est
qu'on peut prendre uniquement les composants qui nous intéressent
parmi tous ceux qui existent.

Pour l'expérience, j'ai donc pour le moment uniquement utilisé les
composants nécessaires pour mettre en place une grille responsive, des
menus, et des listes. Et quelques modifs HTML et CSS plus tard (modifs
reprises de mes expérimentations sur la branche de Johan), voilà une
toute nouvelle navigation et une mise en page responsive et "mobile
first" pour Galette ! :)

Je n'ai touché à rien d'autre. Juste enlevé/déplacé quelques élements
de navigation qui faisaient doublon ou devenaient superflus suite à mes
modifs principales.

Pour l'exemple, le tableau de bord a aussi fait l'objet d'une petite
modif pour une présentation en colonnes. Et le pied de page bénéficie
d'un lifting superficiel par l'utilisation des listes.

Je pense vraiment que c'est une piste très intéressante. Elle
permettrait assez rapidement une refonte assez conséquente de l'IHM.
Une bonne partie des composants jquery-ui pourraient dans l'absolu être
remplacés progressivement par ce biais si leur équivalent dans Semantic
UI ne remet pas totalement en cause la partie fonctionnelle en place.
Et si ce n'est pas possible simplement il peuvent continuer à coexister
ensemble (de ce que j'ai pu expérimenter, je ne suis tombé sur aucun
conflit pour le moment).

Si vous avez le temps de tester, n'hésitez pas à me remonter les
anomalies que vous constaterez, vos suggestions ou vos questions.

Tout est dispo sur un dépôt public à cette addresse :

git://git.agnieray.net/galette.git 

J'ai mis en place un gitweb si vous voulez juste lire le code :

https://git.agnieray.net/?p=galette.git

Les branches qui vous intéresseront :

* feature/twig-fomanticui ; la branche "expérimentale" que j'abandonne.

* feature/ihm ; la branche à laquelle je me consacrerai maintenant.

Dans les 2 cas une étape supplémentaire est nécessaire après le clone
et composer install : il faut installer les dépendances de Fomantic UI
et compiler les CSS et JS. La première commande doit être lancée dans
le dossier galette où se trouvent les fichiers package.json et
semantic.json.

$ npm install
$ cd semantic
$ gulp build


Merci d'avoir lu ce message jusqu'au bout.
Je suis impatient de lire vos réponses et vos avis :)
-- 

Guillaume AGNIERAY

--
Galette development - http://galette.eu/

List documentation: https://listengine.tuxfamily.org/lists.galette.eu/devel/