From 77b4ee29e6142903d5d72e7dffeeaec8f482dba0 Mon Sep 17 00:00:00 2001 From: Spark Date: Thu, 5 Nov 2026 05:05:11 +0000 Subject: [PATCH 1/2] =?UTF-8?q?Flowdeck=207.84.14=20:=20barre=20v0.4.0=20?= =?UTF-8?q?=E2=80=94=20ic=C3=B4nes=20monoline=20du=20menu=20compte,=20vend?= =?UTF-8?q?ange=20verbatim=20(HUB-11)=20+=20garde=20+=20version/changelog?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 7 ++++ VERSION | 2 +- static/css/draco-barre.css | 13 +++++++ static/js/vendor/draco-barre.js | 69 +++++++++++++++++++++++++++++++++ tests/test_draco_bar_texte.py | 17 ++++++++ 5 files changed, 107 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 67c6a1a..ef35411 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +## v7.84.14 (2026-11-05) — Barre commune v0.4.0 : icônes monoline du menu compte (HUB-11) + +- **Barre d'apps v0.4.0 vendangée (dracodev-commons, branche `menu-compte-icones-v0-4-0`, PR commons #10)** : `static/css/draco-barre.css` et `static/js/vendor/draco-barre.js` remplacés verbatim par la v0.4.0 ; le fragment `app/templates/_draco_bar.html` est inchangé (aucune clé d'URL nouvelle). +- **Menu compte à icônes** : **Télécharger**, **À Propos**, **Aides**, **Profil** et **Déconnexion** reçoivent des **icônes SVG monoline** (contour, trait fin, `currentColor`, ~18 px, couleur atténuée suivant le survol) dans le style des icônes du rail de la console Spark — aucun emoji. L'en-tête d'identité reste sans icône ; les liens Hub et le relais « Déconnexion » sont inchangés. +- **Cache** : le bump 7.84.13 → 7.84.14 change aussi `asset_version`, donc les navigateurs ne garderont pas l'ancienne barre. +- Tests : `tests/test_draco_bar_texte.py` étendu (marqueurs v0.4.0 du JS et du CSS vendangés). + ## v7.84.13 (2026-11-04) — Barre commune v0.3.0 : liens Hub du menu compte (HUB-1) - **Barre d'apps v0.3.0 vendangée (dracodev-commons, branche `hub-menu-compte-v0-3-0`, PR commons #9)** : `static/css/draco-barre.css` et `static/js/vendor/draco-barre.js` remplacés verbatim par la v0.3.0 ; fragment `app/templates/_draco_bar.html` porté (note de vendange + `urls.hub` dans la configuration), le reste de l'intégration Flowdeck inchangé. diff --git a/VERSION b/VERSION index 2215e34..4319d65 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -7.84.13 +7.84.14 diff --git a/static/css/draco-barre.css b/static/css/draco-barre.css index c01145f..ba8aa62 100644 --- a/static/css/draco-barre.css +++ b/static/css/draco-barre.css @@ -24,6 +24,10 @@ compte (Télécharger, À Propos, Aides, Profil) réutilisent .draco-menu-item (déjà ancre-compatible : text-decoration none) et le séparateur .draco-menu-sep du menu des applications. + v0.4.0 (HUB-11) : .draco-menu-icone — les icônes monoline des + items du menu compte (SVG inline construit par le JS) : 18 px, + replacées à gauche du libellé par order: -1 (l'item est en + flex), couleur atténuée --ink-2, pleine --ink au survol/focus. Jetons repris du prototype validé Console v7.2. Thème : clair par défaut, sombre via [data-theme="dark"] sur ou prefers-color-scheme si l'app intégratrice ne force rien @@ -94,6 +98,15 @@ text-decoration: none; cursor: pointer; } .draco-menu-item:hover, .draco-menu-item:focus-visible { background: var(--surface-2); } +/* Icônes monoline du menu compte (v0.4.0) : appendues après le + libellé dans le DOM, replacées à gauche par order: -1. */ +.draco-menu-icone { + order: -1; flex: none; display: inline-flex; align-items: center; + width: 18px; height: 18px; color: var(--ink-2); +} +.draco-menu-icone svg { display: block; width: 18px; height: 18px; } +.draco-menu-item:hover .draco-menu-icone, +.draco-menu-item:focus-visible .draco-menu-icone { color: var(--ink); } .draco-menu-sep { height: 1px; margin: 6px 10px; background: var(--line); } .draco-compte-nom { padding: 8px 10px 10px; font-weight: 700; font-size: 14px; diff --git a/static/js/vendor/draco-barre.js b/static/js/vendor/draco-barre.js index 3de0f03..582e088 100644 --- a/static/js/vendor/draco-barre.js +++ b/static/js/vendor/draco-barre.js @@ -29,6 +29,13 @@ * l'ouverture des menus. Le Hub n'a pas d'onglet dans la barre : * comme spark, sa clé est résolue et exposée via DRACO_BAR.urls, * sans étape « href rendu » (voir « URL » ci-dessous). + * v0.4.0 (carte HUB-11, fusion #125) : icônes monoline dans le + * menu compte — chaque item (les 4 liens du Hub et « Déconnexion ») + * reçoit un glyphe SVG inline dans le style des icônes du rail de + * la console (contour, trait fin régulier, currentColor, aucun + * remplissage), aligné à gauche du libellé via .draco-menu-icone. + * L'en-tête d'identité ne reçoit pas d'icône. Aucun changement de + * comportement : liens résolus et Déconnexion relayée inchangés. * * Aucun gestionnaire inline : un seul écouteur délégué sur le document * (patron validé par le prototype — les onclick du HTML généré sont @@ -483,6 +490,66 @@ if (!appsMenu.hidden) lastOpener = brand; } + /* Icônes monoline du menu compte (v0.4.0) — glyphes contour + * dans le style des icônes du rail de la console : viewBox 24, + * stroke currentColor, remplissage nul, extrémités rondes. + * Chaque glyphe est une liste de primitives [balise, attributs] + * construites en DOM (jamais d'innerHTML), comme le reste du + * fichier. Le libellé reste le nœud texte de l'item ; l'icône, + * appendue après, est replacée à gauche par le CSS (order: -1 + * sur .draco-menu-icone, l'item étant déjà en flex). */ + var MENU_ICONES = { + /* Flèche vers le bas dans un plateau. */ + "telecharger": [ + ["path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }], + ["polyline", { points: "7 10 12 15 17 10" }], + ["line", { x1: "12", y1: "15", x2: "12", y2: "3" }] + ], + /* Cercle d'information. */ + "a-propos": [ + ["circle", { cx: "12", cy: "12", r: "9" }], + ["line", { x1: "12", y1: "11", x2: "12", y2: "16" }], + ["line", { x1: "12", y1: "8", x2: "12.01", y2: "8" }] + ], + /* Cercle d'interrogation. */ + "aide": [ + ["circle", { cx: "12", cy: "12", r: "9" }], + ["path", { d: "M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" }], + ["line", { x1: "12", y1: "17", x2: "12.01", y2: "17" }] + ], + /* Personne : tête + épaules. */ + "profil": [ + ["path", { d: "M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2" }], + ["circle", { cx: "12", cy: "7", r: "4" }] + ], + /* Flèche sortant d'un cadre (porte). */ + "deconnexion": [ + ["path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }], + ["polyline", { points: "16 17 21 12 16 7" }], + ["line", { x1: "21", y1: "12", x2: "9", y2: "12" }] + ] + }; + function menuIcone(nom) { + var span = document.createElement("span"); + span.className = "draco-menu-icone"; + span.setAttribute("aria-hidden", "true"); + var svg = document.createElement("svg"); + svg.setAttribute("viewBox", "0 0 24 24"); + svg.setAttribute("fill", "none"); + svg.setAttribute("stroke", "currentColor"); + svg.setAttribute("stroke-width", "1.8"); + svg.setAttribute("stroke-linecap", "round"); + svg.setAttribute("stroke-linejoin", "round"); + svg.setAttribute("focusable", "false"); + (MENU_ICONES[nom] || []).forEach(function (spec) { + var el = document.createElement(spec[0]); + for (var k in spec[1]) el.setAttribute(k, spec[1][k]); + svg.appendChild(el); + }); + span.appendChild(svg); + return span; + } + /* Menu compte (v0.1.6 ; v0.3.0 pour les liens) — en-tête * d'identité, puis les liens du Hub (Télécharger, À Propos, * Aides, Profil — vrais , même patron que le menu des @@ -508,6 +575,7 @@ a.setAttribute("data-hub-link", pair[0]); a.setAttribute("role", "menuitem"); a.textContent = pair[1]; + a.appendChild(menuIcone(pair[0])); compteMenu.appendChild(a); }); var sep = document.createElement("div"); @@ -520,6 +588,7 @@ b.setAttribute("data-compte-act", "deconnexion"); b.setAttribute("role", "menuitem"); b.textContent = "Déconnexion"; + b.appendChild(menuIcone("deconnexion")); compteMenu.appendChild(b); bar.appendChild(compteMenu); } diff --git a/tests/test_draco_bar_texte.py b/tests/test_draco_bar_texte.py index 4558f39..0094ce5 100644 --- a/tests/test_draco_bar_texte.py +++ b/tests/test_draco_bar_texte.py @@ -72,6 +72,23 @@ def test_barre_v030_liens_hub_menu_compte(): assert 'urls: { hub: "{{ draco_urls().hub }}/" }' in rendu +def test_barre_v040_icones_menu_compte(): + """Barre v0.4.0 (commons, HUB-11 / fusion #125) : les items du + menu compte portent des icônes SVG monoline (construites en DOM, + currentColor, sans remplissage) ; le libellé reste un nœud + texte ; l'en-tête d'identité reste sans icône.""" + js = (ROOT / "static/js/vendor/draco-barre.js").read_text() + assert "MENU_ICONES" in js + for nom in ("telecharger", "a-propos", "aide", "profil", "deconnexion"): + assert f"{nom}:" in js + assert "draco-menu-icone" in js + assert 'setAttribute("stroke", "currentColor")' in js + assert 'setAttribute("fill", "none")' in js + css = (ROOT / "static/css/draco-barre.css").read_text() + assert ".draco-menu-icone" in css + assert "width: 18px" in css + + def test_barre_intacte_apres_suppression(): """Le 5e onglet Console Spark et la marque survivent a la suppression.""" gabarit = (ROOT / "app/templates/_draco_bar.html").read_text() -- 2.54.0 From e7c65b6f494a4fdc20314ec59312d50c2ec71fca Mon Sep 17 00:00:00 2001 From: Spark Date: Thu, 5 Nov 2026 05:05:32 +0000 Subject: [PATCH 2/2] =?UTF-8?q?Flowdeck=207.84.14=20:=20garde=20v0.4.0=20c?= =?UTF-8?q?orrig=C3=A9e=20(cl=C3=A9s=20JS=20quot=C3=A9es=20dans=20MENU=5FI?= =?UTF-8?q?CONES)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/test_draco_bar_texte.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tests/test_draco_bar_texte.py b/tests/test_draco_bar_texte.py index 0094ce5..c8784f3 100644 --- a/tests/test_draco_bar_texte.py +++ b/tests/test_draco_bar_texte.py @@ -80,7 +80,7 @@ def test_barre_v040_icones_menu_compte(): js = (ROOT / "static/js/vendor/draco-barre.js").read_text() assert "MENU_ICONES" in js for nom in ("telecharger", "a-propos", "aide", "profil", "deconnexion"): - assert f"{nom}:" in js + assert f'"{nom}"' in js assert "draco-menu-icone" in js assert 'setAttribute("stroke", "currentColor")' in js assert 'setAttribute("fill", "none")' in js -- 2.54.0