search

darcosion / Echosounder

petit programme marrant
MIT License
14 stars 1 forks source link

Ajouter différents thèmes et proposer un basculement de thèmes pour Echosounder. #76

Closed darcosion closed 2 years ago

darcosion commented 2 years ago

Actuellement, il n'y a qu'un "dark theme". Il est principalement porté par les variables CSS de couleur ici : https://github.com/darcosion/Echosounder/issues/3#issuecomment-1037173459

Il serait intéressant de mettre en place différents thèmes avec un menu à coté du titre echosounder pour proposer leurs application, qui changeraient les couleurs appliqués aux variables CSS.

Cette fonctionnalité risque par ailleurs de mener à des refactoring divers, notamment pour la partie CSS du graphe ainsi que pour la partie CSS pur où beaucoup de conversions ne fonctionnaient pas avec l'opacité et où il a été obligatoire d'effectuer de l'écriture en dur de rgb()

darcosion commented 2 years ago

darcosion commented 2 years ago

Cette découverte : https://github.com/darcosion/Echosounder/issues/3#issuecomment-1100954629 a permis d'intégrer la palette de couleur à l'intégralité du CSS actuel.

Le soucis de la palette est qu'elle est désigné en terme de variable CSS sous la forme de "couleur". Il faut la transformer pour conserver des notions de "background", "front", "widget", et surtout "contraste" et d'autres terminologies de ce genre (à creuser en UI/UX).

darcosion commented 2 years ago

Avant de basculer sur les thèmes, une dernière refacto est à faire : cytoscape utilise des couleurs inscrites en dur.

Il faut donc s'arranger pour que le thème employé par cytoscape soit "dynamique" et employé par tous les services. Peut-être l'occasion dans ParentCtrl de faire un objet "thème" ?

darcosion commented 2 years ago

L'issue 9ac7eedb182d2289d10b5e01c45c1db4111c58df nous fais avancer sur le sujet, on a le chargement pour la partie cytoscape, il nous reste le basculement d'un thème à l'autre, la création de plusieurs thèmes et tout sera bon.

darcosion commented 2 years ago

Le commit a3b875c72b894d9c88ac873a6978d2a06b35d744 fait avancer les choses. Néanmoins beaucoup de problèmes à relever.

Pour commencer, la gestion de thème se fait au niveau recommandation selon csstricks : https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/ Via des valeur html[data-theme='darkgreen'] { }. Mon thème de base est donc le darkgreen. Les prochains seront du "redviolent", et "bluehack". A chaque transformation de thème, je dois remplacer également le RGB, c'est très fatiguant (à automatiser donc).

Un bug vraiment étrange de CSS était la non prise en compte des thèmes.

Quand j'avais ce code : 

html[data-theme='darkgreen'] { ... };

html[data-theme='white'] { ... };

html[data-theme='whitehard'] { ... };

Une partie de mon affichage dans le menu de config avait des bug et impossible de switcher de thème.

Mais avec : 

html[data-theme='darkgreen'] { ... }

html[data-theme='white'] { ... }

html[data-theme='whitehard'] { ... };

Donc sans les ;, mystérieusement, cela fonctionne. Ce qui m'amène à m'interroger : A QUOI SERVENT LES ; ???

Pour finir, dans le graphNetwork une fonction loadStyle() a été créé et est appelé par un event à chaque changement de thème.

darcosion commented 2 years ago

Ce dernier commit donne un exemple et une couleur de debug : 2a3a0b24f9ba8b3c6a2b4114614c274a90dfafa9

Pour moi, la fonctionnalité est achevée.