From 6b15972e3b06d6c2a95639a98e2a09a7bf806d6a Mon Sep 17 00:00:00 2001 From: Bertrand Benjamin Date: Sat, 1 Aug 2026 11:03:18 +0200 Subject: [PATCH] =?UTF-8?q?Rendre=20la=20barre=20cumulative=20identique,?= =?UTF-8?q?=20pli=C3=A9e=20ou=20d=C3=A9pli=C3=A9e?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Elle s'épaississait en mode plié, au motif qu'elle y était seule sur sa ligne. Mais plier un couloir ne change rien à ce que cette barre représente : la voir changer d'aspect au pli laissait croire à deux objets différents. Elle garde donc partout la hauteur de sa version dépliée, plus mince qu'une barre de phase — puisqu'elle voisine avec elles dès que le projet est déplié, et qu'elle ne se glisse pas. `--hauteur-cumulative` remonte dans `:root` : la barre et le fantôme qui la double sont frères et non imbriqués, la variable doit donc vivre au-dessus des deux. Co-Authored-By: Claude Opus 5 --- README.md | 5 +++-- css/style.css | 38 +++++++++++++++++--------------------- docs/decisions.md | 10 ++++++++-- js/timeline.js | 11 ++++------- 4 files changed, 32 insertions(+), 32 deletions(-) diff --git a/README.md b/README.md index 0209914..6e09d0f 100644 --- a/README.md +++ b/README.md @@ -97,9 +97,10 @@ par les champs du panneau de détail. un statut, des notes libres. Une phase peut être un **jalon** (une date unique, rendue en losange). - **Une frise commune**, les projets empilés en couloirs, pour les comparer d'un coup d'œil. - **Une barre cumulative par projet**, segmentée en teintes selon le statut de chaque phase : la - forme d'ensemble, toujours visible sur la ligne du projet. Elle ne se glisse pas. + forme d'ensemble, toujours visible sur la ligne du projet et toujours rendue pareil. Elle ne se + glisse pas. - **Couloirs pliables** : déplié, chaque phase occupe sa ligne sous la barre cumulative ; plié, il - ne reste que celle-ci, en plus épais. + ne reste que celle-ci. - **Manipulation directe** : glisser une barre pour la décaler, tirer ses bords pour changer sa durée. Les barres s'accrochent au lundi ; pour une date exacte, on passe par le panneau de détail. - **Planning de référence** : une fois le planning validé, on le fige. La frise affiche alors une diff --git a/css/style.css b/css/style.css index b758326..152e685 100644 --- a/css/style.css +++ b/css/style.css @@ -23,6 +23,9 @@ --aujourdhui: #ef4444; --hauteur-barre: 26px; + /* Barre cumulative d'un projet, et fantôme qui la double. Ils sont frères, + pas imbriqués : la variable doit donc vivre au-dessus des deux. */ + --hauteur-cumulative: 9px; --hauteur-ligne: 38px; --hauteur-entete: 66px; /* trois bandes de 22 px : année, mois, semaine */ /* Doit rester en accord avec `LARGEUR_LIBELLES.defaut` (app.js), sur lequel @@ -697,15 +700,18 @@ button[aria-pressed="true"] { /* --- barre cumulative d'un projet ---------------------------------------- */ /* Barre unique segmentée par phase, affichée que le projet soit plié ou - déplié. Lecture seule : voir docs/decisions.md, section 8. */ + déplié, et rendue à l'identique dans les deux cas — c'est le même objet, il + n'a pas à changer d'aspect quand on ouvre le couloir. + Volontairement plus mince qu'une barre de phase : elle voisine avec elles + dès que le projet est déplié, et ne se glisse pas. + Lecture seule : voir docs/decisions.md, section 8. */ .barre-cumulative { position: absolute; - top: calc((var(--hauteur-ligne) - var(--hauteur-barre)) / 2); - height: var(--hauteur-barre); - border-radius: 4px; + top: calc((var(--hauteur-ligne) - var(--hauteur-cumulative)) / 2); + height: var(--hauteur-cumulative); + border-radius: 3px; overflow: hidden; display: flex; - box-shadow: var(--ombre); background: color-mix(in srgb, var(--couleur-projet) 15%, var(--surface)); cursor: default; z-index: 2; @@ -735,17 +741,6 @@ button[aria-pressed="true"] { opacity: 0.85; } -/* Dépliée, la barre cumulative coiffe les phases du projet : elle s'amincit - pour ne pas se faire passer pour l'une d'elles — elle ne se glisse pas. */ -.barre-cumulative--fine { - --hauteur-cumulative: 9px; - - top: calc((var(--hauteur-ligne) - var(--hauteur-cumulative)) / 2); - height: var(--hauteur-cumulative); - border-radius: 3px; - box-shadow: none; -} - /* --- barre fantôme de référence ------------------------------------------ */ .fantome { @@ -766,11 +761,12 @@ button[aria-pressed="true"] { z-index: 1; } -/* Le fantôme suit la barre qu'il double : sous une barre cumulative amincie, - il flotterait sinon dans le vide. Déclaré après `.fantome`, dont il partage - la spécificité — l'ordre est ce qui le fait gagner. */ -.fantome--fin { - top: calc((var(--hauteur-ligne) + 9px) / 2); +/* Le fantôme suit la barre qu'il double. Sous la barre cumulative, plus mince + qu'une barre de phase, il flotterait sinon dans le vide. Déclaré après + `.fantome`, dont il partage la spécificité — l'ordre est ce qui le fait + gagner. */ +.fantome--cumulatif { + top: calc((var(--hauteur-ligne) + var(--hauteur-cumulative)) / 2); height: 4px; } diff --git a/docs/decisions.md b/docs/decisions.md index 62b22c4..1221f60 100644 --- a/docs/decisions.md +++ b/docs/decisions.md @@ -104,8 +104,14 @@ sur les phases. **Elle est affichée que le projet soit plié ou déplié.** Elle ne l'était d'abord qu'en mode plié, ce qui obligeait à replier pour savoir où en était le projet entier — donc à perdre la vue qu'on était -en train d'éditer. Dépliée, elle voisine avec les barres de phases : elle s'amincit alors pour qu'on -ne la prenne pas pour l'une d'elles, et le fantôme de référence s'amincit avec elle. +en train d'éditer. + +**Et elle est rendue à l'identique dans les deux cas.** Une première version l'épaississait en mode +plié, au motif qu'elle y était seule sur sa ligne. C'était une erreur : plier un couloir ne change +rien à ce que cette barre représente, et la voir changer d'aspect au pli laissait croire à deux +objets différents. Elle garde donc partout la même hauteur, plus mince qu'une barre de phase — +puisqu'elle voisine avec elles dès que le projet est déplié, et qu'elle ne se glisse pas. Le fantôme +de référence se cale dessous, d'où sa variante `--cumulatif`. ## 9. Accroche à la semaine diff --git a/js/timeline.js b/js/timeline.js index 9bc2833..482272a 100644 --- a/js/timeline.js +++ b/js/timeline.js @@ -568,10 +568,7 @@ function construireBarreCumulative(projet, echelle) { if (!bornes) return null; const conteneur = document.createElement('div'); - // Dépliée, elle voisine avec les barres de phases : elle s'amincit pour - // qu'on ne la prenne pas pour l'une d'elles et qu'on n'essaie pas de la - // glisser. Pliée, elle est seule sur sa ligne et porte toute l'information. - conteneur.className = `barre-cumulative${projet.collapsed ? '' : ' barre-cumulative--fine'}`; + conteneur.className = 'barre-cumulative'; conteneur.style.left = `${echelle.x(bornes.start)}px`; conteneur.style.width = `${echelle.largeurDe(bornes.start, bornes.end)}px`; @@ -605,9 +602,9 @@ function construireFantome(projet, echelle) { if (!reference) return null; const fantome = document.createElement('div'); - // Le fantôme se cale sous la barre qu'il double : il doit suivre celle-ci - // quand elle s'amincit, sans quoi il flotterait sous elle. - fantome.className = `fantome${projet.collapsed ? '' : ' fantome--fin'}`; + // Se cale sous la barre cumulative, plus mince qu'une barre de phase : sans + // cette variante, il flotterait dans le vide sous elle. + fantome.className = 'fantome fantome--cumulatif'; fantome.style.left = `${echelle.x(reference.start)}px`; fantome.style.width = `${echelle.largeurDe(reference.start, reference.end)}px`; fantome.title = `Référence : ${formaterDateLongue(reference.start)} → ${formaterDateLongue(reference.end)}`;