P4Pillon/Krys4lide
4
2
Fork 0
Code Issues 27 Pull Requests 3 Actions Packages Projects 1 Releases Activity

Ajout d'un système de pages pour la barre de navigation #42

Merged
florian_briand merged 2 commits from feat/8_implement_main_ui_part2 into main 2024-08-06 21:50:21 +02:00
Conversation 6 Commits 2 Files Changed 19 +402 -18
florian_briand commented 2024-08-06 00:26:16 +02:00
Owner
Copy Link

Détails

Cette PR explore une organisation en "pages" pour le rendu des différents "onglets" de la navbar.

Contrairement à la PR précédente (#40), les composants ajoutés viennent de la bibliothèque Flowbite

En plus des pages, cette PR :

  • remplace le texte de chargement Chargement... par des skeleton (sorte de placeholder visuels)
  • utilise le système HTMX de hx-swap-oob pour changer le titre dynamiquement

Pourquoi ?

No response

Documentation

No response

### Détails Cette PR explore une organisation en "pages" pour le rendu des différents "onglets" de la navbar. Contrairement à la PR précédente (#40), les composants ajoutés viennent de la bibliothèque [Flowbite](https://flowbite.com) En plus des pages, cette PR : - remplace le texte de chargement `Chargement...` par des `skeleton` (sorte de placeholder visuels) - utilise le système HTMX de `hx-swap-oob` pour changer le titre dynamiquement ### Pourquoi ? _No response_ ### Documentation _No response_
P4pillonKrys4lidePR8.gif
73 KiB
P4pillonKrys4lidePR8.gif
florian_briand added 1 commit 2024-08-06 00:26:16 +02:00
florian_briand added the
enhancement
module/frontend
 labels 2024-08-06 00:28:46 +02:00
kosssi approved these changes 2024-08-06 11:18:56 +02:00
kosssi left a comment
Owner
Copy Link

A part l'import de la librairie par le CDN je n'ai rien vu de spécifique.

J'ai testé la branche localement en tout cas, ça marche nickel.
J'ai été surpris lorsque l'on clique plusieurs fois sur un des menu, ça fait un appel à chaque fois.

Sinon au niveau des templates je n'arrive pas trop à comprendre comment vous voulez travailler mais j'imaginais que l'on se fixe un template de base qui fait déjà pas mal de chose comme par exemple flowbite-admin-dashboard, pour que chacun puisse prendre des bouts quand il en a besoin.

A part l'import de la librairie par le CDN je n'ai rien vu de spécifique. J'ai testé la branche localement en tout cas, ça marche nickel. J'ai été surpris lorsque l'on clique plusieurs fois sur un des menu, ça fait un appel à chaque fois. Sinon au niveau des templates je n'arrive pas trop à comprendre comment vous voulez travailler mais j'imaginais que l'on se fixe un template de base qui fait déjà pas mal de chose comme par exemple [flowbite-admin-dashboard](https://www.tailwindawesome.com/resources/flowbite-admin-dashboard/demo), pour que chacun puisse prendre des bouts quand il en a besoin.
crates/app/templates/base.html Outdated
@ -6,6 +6,8 @@
<script src="/assets/js/htmx.min.js"></script>
<script src="//unpkg.com/alpinejs" defer></script>
<link href="/assets/css/style.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/flowbite@2.5.1/dist/flowbite.min.css" rel="stylesheet" />
kosssi commented 2024-08-06 09:51:19 +02:00
Owner
Copy Link

Librairie à importer directement dans le projet comme htmx

Librairie à importer directement dans le projet comme htmx
florian_briand commented 2024-08-06 11:54:53 +02:00
Author
Owner
Copy Link

Tu as cramé ma flemme ^^

Je comptais procrastiner cette tâche à plus tard, mais ... ok, je vais le faire 😂

  • Regarder la licence flowbit
  • Embarquer les dépendances flowbit
  • Embarquer alpinejs
Tu as cramé ma flemme ^^ Je comptais procrastiner cette tâche à plus tard, mais ... ok, je vais le faire 😂 - [x] Regarder la licence flowbit - [x] Embarquer les dépendances flowbit - [x] Embarquer alpinejs
kosssi commented 2024-08-06 11:56:28 +02:00
Owner
Copy Link

D'ailleurs j'ai vu que c'était pareil pour alpinejs mais j'ai pas voulu en parler vu que ce n'était pas dans cette DA 🙂

D'ailleurs j'ai vu que c'était pareil pour `alpinejs` mais j'ai pas voulu en parler vu que ce n'était pas dans cette DA 🙂
florian_briand marked this conversation as resolved
florian_briand commented 2024-08-06 11:59:31 +02:00
Author
Owner
Copy Link

J'ai été surpris lorsque l'on clique plusieurs fois sur un des menu, ça fait un appel à chaque fois.

  • Vérifier / corriger l'appel multiple (désactiver le lien quand on est sur l'onglet current ?)

Sinon au niveau des templates je n'arrive pas trop à comprendre comment vous voulez travailler mais j'imaginais que l'on se fixe un template de base qui fait déjà pas mal de chose comme par exemple flowbite-admin-dashboard, pour que chacun puisse prendre des bouts quand il en a besoin.

Perso, je ne vois aucune utilité et avantage à s'appuyer sur un tel template. C'est, globalement, des composants flowbite standard et un thème tailwind. Ça revient presque à partir sur un ERP : on te fout plein de trucs dont t'as pas besoin dans les pattes, et tu te prends les pieds dedans dès que tu veux faire les trucs à ta manière ^^

Autant s'appuyer directement sur Flowbite pour récupérer des composants, et construire notre propre thème au fur et à mesure ?

> J'ai été surpris lorsque l'on clique plusieurs fois sur un des menu, ça fait un appel à chaque fois. - [x] Vérifier / corriger l'appel multiple (désactiver le lien quand on est sur l'onglet `current` ?) > Sinon au niveau des templates je n'arrive pas trop à comprendre comment vous voulez travailler mais j'imaginais que l'on se fixe un template de base qui fait déjà pas mal de chose comme par exemple [flowbite-admin-dashboard](https://www.tailwindawesome.com/resources/flowbite-admin-dashboard/demo), pour que chacun puisse prendre des bouts quand il en a besoin. Perso, je ne vois aucune utilité et avantage à s'appuyer sur un tel template. C'est, globalement, des composants flowbite standard et un thème tailwind. Ça revient presque à partir sur un ERP : on te fout plein de trucs dont t'as pas besoin dans les pattes, et tu te prends les pieds dedans dès que tu veux faire les trucs à ta manière ^^ Autant s'appuyer directement sur Flowbite pour récupérer des composants, et construire notre propre thème au fur et à mesure ?
kosssi commented 2024-08-06 14:20:27 +02:00
Owner
Copy Link

Pourquoi nous ajoutons Flowbite ?

Pourquoi nous ajoutons Flowbite ?
theo approved these changes 2024-08-06 20:57:37 +02:00
Dismissed
florian_briand commented 2024-08-06 20:58:50 +02:00
Author
Owner
Copy Link

Pourquoi nous ajoutons Flowbite ?

Flowbite est + une piste de solution pour des composants d'interface, qu'un choix définitif.
C'est une techno un peu plus "haut niveau" que tailwindcss, sans être aussi "opinionated" qu'un "template kit"/"UI Kit" qui fournit un ensemble de composants + haut niveau mais avec un thème graphique donné.

Pour le POC, ça fera assez bien l'affaire : c'est une source de composants assez large, en licence MIT, et ça nous permettra de créer assez rapidement des bouts d'interface répondant aux besoins, tout en nous permettant d'explorer l'intégration que ça implique, l'usage de tailwind, etc.

Pour le plus long terme, on verra avec les personnes en charge du design si Flowbite leur convient, si un UI Kit leur convient, ou si on va chercher un autre design system basé sur tailwind mais + aligné avec les ambitions design.

> Pourquoi nous ajoutons Flowbite ? Flowbite est + une piste de solution pour des composants d'interface, qu'un choix définitif. C'est une techno un peu plus "haut niveau" que tailwindcss, sans être aussi "opinionated" qu'un "template kit"/"UI Kit" qui fournit un ensemble de composants + haut niveau mais avec un thème graphique donné. Pour le POC, ça fera assez bien l'affaire : c'est une source de composants assez large, en licence MIT, et ça nous permettra de créer assez rapidement des bouts d'interface répondant aux besoins, tout en nous permettant d'explorer l'intégration que ça implique, l'usage de tailwind, etc. Pour le plus long terme, on verra avec les personnes en charge du design si Flowbite leur convient, si un UI Kit leur convient, ou si on va chercher un autre design system basé sur tailwind mais + aligné avec les ambitions design.
theo approved these changes 2024-08-06 21:05:20 +02:00
theo commented 2024-08-06 21:09:45 +02:00
Owner
Copy Link

J'ai approve mais il faudrait qu'on créer un ticket pour changer les dépendances a du loca, comme a soulever @kosssi. Ca permettrai d'avoir un build plus reproductible qui dépend pas de ressources externe :)

Thx

J'ai approve mais il faudrait qu'on créer un ticket pour changer les dépendances a du loca, comme a soulever @kosssi. Ca permettrai d'avoir un build plus reproductible qui dépend pas de ressources externe :) Thx
florian_briand closed this pull request 2024-08-06 21:12:33 +02:00
florian_briand reopened this pull request 2024-08-06 21:18:38 +02:00
florian_briand changed target branch from feat/8_implement_main_ui to main 2024-08-06 21:18:55 +02:00
florian_briand force-pushed feat/8_implement_main_ui_part2 from dafae11c0a to e084372b44 2024-08-06 21:19:41 +02:00 Compare
florian_briand commented 2024-08-06 21:43:38 +02:00
Author
Owner
Copy Link

J'ai approve mais il faudrait qu'on créer un ticket pour changer les dépendances a du loca, comme a soulever @kosssi. Ca permettrai d'avoir un build plus reproductible qui dépend pas de ressources externe :)

Thx

Je l'ai finalement fait dans cette PR

> J'ai approve mais il faudrait qu'on créer un ticket pour changer les dépendances a du loca, comme a soulever @kosssi. Ca permettrai d'avoir un build plus reproductible qui dépend pas de ressources externe :) > > Thx Je l'ai finalement fait dans cette PR
florian_briand commented 2024-08-06 21:47:32 +02:00
Author
Owner
Copy Link

J'ai été surpris lorsque l'on clique plusieurs fois sur un des menu, ça fait un appel à chaque fois.

J'ai regardé rapidement et je confirme le comportement.

Dans crates/app/templates/layout/nav/nav-menu-items.html, j'ai trouvé une manière de gérer la situation en :

  • utilisant un href="#"
  • utilisant un hx-disabled conditionné à item.current pour désactiver la gestion du lien par htmx

Mais en l'état, ça casse la navigation, car le système de current n'est pas fonctionnel : quand on clic sur CPS par exemple, ça ne vient pas rafraichir le menu et changer le statut current.

Gardons nous ça pour plus tard.

> J'ai été surpris lorsque l'on clique plusieurs fois sur un des menu, ça fait un appel à chaque fois. J'ai regardé rapidement et je confirme le comportement. Dans `crates/app/templates/layout/nav/nav-menu-items.html`, j'ai trouvé une manière de gérer la situation en : - utilisant un `href="#"` - utilisant un `hx-disabled` conditionné à `item.current` pour désactiver la gestion du lien par htmx Mais en l'état, ça casse la navigation, car le système de `current` n'est pas fonctionnel : quand on clic sur `CPS` par exemple, ça ne vient pas rafraichir le menu et changer le statut `current`. Gardons nous ça pour plus tard.
florian_briand added 1 commit 2024-08-06 21:48:09 +02:00
florian_briand merged commit b10fc30984 into main 2024-08-06 21:50:21 +02:00
florian_briand deleted branch feat/8_implement_main_ui_part2 2024-08-06 21:50:21 +02:00
Sign in to join this conversation.
Reviewers
No reviewers
kosssi
theo
Labels
Clear labels   
bug

Something is not working

  
duplicate

This issue or pull request already exists

  
enhancement

New feature

  
help wanted

Need some help

  
independant

Tickets réalisables indépendaments des travaux prévus dans la roadmap - très approprié pour des contributions ponctuelles

  
invalid

Something is wrong

  
module/autre

Pour toute autre partie du produit non lié aux autres étiquettes disponibles

  
module/backend

Serveur backend, opérant les accès données et système

  
module/desktop

Encapsulation de la webview dans Tauri

  
module/docs

Documentation (docs)

  
module/frontend

Interfaces utilisateur⋅ices

  
module/scripts

Scripts utiles au setup et/ou au build (scripts)

  
module/sesam-vitale

Moteur SESAM-Vitale

  
module/utils

Librairie de fonctions utilitaires

  
open-source

Les tâches contribuant à l'ouverture et au partage du code

  
question

More information is needed

  
to-triage

À trier

  
wontfix

This won't be fixed

No Label
bug
duplicate
enhancement
help wanted
independant
invalid
module/autre
module/backend
module/desktop
module/docs
module/frontend
module/scripts
module/sesam-vitale
module/utils
open-source
question
to-triage
wontfix
Milestone
Clear milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
No Assignees
3 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: P4Pillon/Krys4lide#42
No description provided.
Delete Branch "feat/8_implement_main_ui_part2"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?