From cd54764dd51ffea11718fdaf790f999d970afca1 Mon Sep 17 00:00:00 2001 From: Quentin Rouiller Date: Sat, 25 Apr 2026 14:00:00 +0200 Subject: [PATCH] =?UTF-8?q?Version=202026.5.36=20=E2=80=94=20Sidebar=20ver?= =?UTF-8?q?ticale=20en=20vue=20horizontale=20(#horizontal-wrapper)=20[code?= =?UTF-8?q?=20interpol=C3=A9=20entre=20v2026.5.35=20et=20v2026.5.37]?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- manifest.json | 2 +- viewer.css | 149 ++++++++++++++++++++++++++++++++++++++++++++++---- viewer.js | 25 +++++++++ 3 files changed, 163 insertions(+), 13 deletions(-) diff --git a/manifest.json b/manifest.json index af274f5..5e483da 100644 --- a/manifest.json +++ b/manifest.json @@ -1,7 +1,7 @@ { "manifest_version": 3, "name": "Planification", - "version": "2026.5.35", + "version": "2026.5.36", "description": "Vue claire et rapide du planning des techniciens EasyVista. Regroupe interventions et réservations par tech, affiche horaires, contact, lieu, catégorie et statut en un coup d'œil.", "browser_specific_settings": { "gecko": { diff --git a/viewer.css b/viewer.css index 5fcd850..2d46725 100644 --- a/viewer.css +++ b/viewer.css @@ -3586,35 +3586,160 @@ html.view-classic .tech-row-stats { /* ========================================================================== v2026.5.35 : en vue horizontale, stats globales sur le CÔTÉ GAUCHE - (colonne verticale fixe) au lieu d'être au-dessus des cartes. - Libère de la hauteur verticale pour les 8 techs. + v2026.5.36 : REFONTE — les stats (et tout le reste) sont maintenant déplacés + physiquement dans .horizontal-sidebar (via JS _moveElementsToSidebar). + Le CSS ci-dessous est conservé au cas où une ancienne instance + ait encore .stats dans
, mais il ne devrait plus s'appliquer. ========================================================================== */ -html.view-horizontal main { +html.view-horizontal main#main.legacy-stats-layout { display: flex; flex-direction: row; align-items: stretch; } -html.view-horizontal .stats { +/* ========================================================================== + v2026.5.36 : Vue horizontale — sidebar verticale à gauche + Contient (haut → bas) : nav date, horloge, stats, boutons actions. + Seuls restent en haut : user-badge, titre "Planification", bouton thème. + ========================================================================== */ + +/* Topbar en vue horizontale : minimaliste */ +html.view-horizontal .topbar { + padding: 6px 12px !important; + gap: 8px; +} +/* Cacher la zone centrale (déplacée vers sidebar) */ +html.view-horizontal .topbar .app-clock, +html.view-horizontal .topbar .capture-info, +html.view-horizontal .topbar .app-session { + display: none !important; +} +/* topbar-left ne contient plus que user-badge + titre */ +html.view-horizontal .topbar-left { + gap: 10px; +} +/* topbar-right ne contient plus que le theme-toggle */ +html.view-horizontal .topbar-right { + gap: 4px; +} + +/* Sidebar verticale à gauche */ +.horizontal-sidebar { flex: 0 0 auto; width: 200px; - flex-direction: column !important; - align-items: flex-start !important; - gap: 8px !important; - padding: 12px 16px !important; - border-right: 1px solid var(--border); + min-width: 200px; + max-width: 200px; background: var(--bg-muted); + border-right: 1px solid var(--border); + padding: 10px 12px; + display: flex; + flex-direction: column; + gap: 8px; + overflow-y: auto; position: sticky; top: 0; align-self: flex-start; - min-height: calc(100vh - 80px); + max-height: calc(100vh - 48px); /* topbar ~48px */ + font-size: 12px; + box-sizing: border-box; +} + +/* Cacher la sidebar en vue classique (au cas où elle existe encore) */ +html.view-classic .horizontal-sidebar { + display: none !important; +} + +/* Layout main avec sidebar */ +html.view-horizontal main#main { + display: flex; + flex-direction: row; + align-items: stretch; +} + +/* Groupe navigation date dans la sidebar — v2026.5.36 (OBSOLÈTE v2026.5.37) + v2026.5.37 : date-nav devient display: contents pour que ses enfants + soient directement positionnables dans la sidebar (btn-today + en haut, app-clock intercalé, flèches groupées dans wrapper). + Les anciennes règles ci-dessous sont conservées pour compat + mais neutralisées par les overrides v5.37 plus bas. */ +html.view-horizontal .horizontal-sidebar .date-nav { + /* v5.37 override via display: contents ci-dessous */ +} +html.view-horizontal .horizontal-sidebar .date-nav .btn-nav { + /* v5.37 : ces règles sont conservées au cas où flèches restent dans date-nav + (pas censé arriver puisque JS les sort dans #sidebar-arrows). */ + padding: 4px 8px; +} +html.view-horizontal .horizontal-sidebar .date-nav .date-custom { + width: 100%; + justify-content: flex-start; + padding: 6px 8px; + font-size: 12px !important; +} +html.view-horizontal .horizontal-sidebar .date-nav .btn-today { + padding: 4px 10px; font-size: 12px !important; } -html.view-horizontal .stats .global-stat { +/* Horloge dans la sidebar */ +html.view-horizontal .horizontal-sidebar .app-clock { + position: static !important; + transform: none !important; + left: auto !important; + top: auto !important; + display: flex; + flex-direction: column; + align-items: flex-start; + width: 100%; + gap: 2px; + padding: 6px 8px; + background: var(--bg); + border: 1px solid var(--border); + border-radius: 4px; +} +html.view-horizontal .horizontal-sidebar .app-clock-date { + font-size: 11px !important; + color: var(--text-muted) !important; + font-weight: 500 !important; +} +html.view-horizontal .horizontal-sidebar .app-clock-date::after { + content: "" !important; /* supprimer le gros point · */ + display: none !important; +} +html.view-horizontal .horizontal-sidebar .app-clock-time { + font-size: 20px !important; + font-weight: 700 !important; + color: var(--text) !important; + font-variant-numeric: tabular-nums; +} + +/* Info capture (Synchronisé à...) */ +html.view-horizontal .horizontal-sidebar .capture-info { + display: block !important; + font-size: 11px !important; + color: var(--text-muted); + padding: 2px 4px; +} + +/* Stats globales dans la sidebar (séparateurs cachés) */ +html.view-horizontal .horizontal-sidebar #stats { + display: flex !important; + flex-direction: column !important; + gap: 4px !important; + padding: 6px 4px !important; + border-top: 1px solid var(--border); + border-bottom: 1px solid var(--border); + margin: 2px 0; + background: transparent !important; + width: 100%; + box-sizing: border-box; +} +html.view-horizontal .horizontal-sidebar #stats .global-stat { display: block; width: 100%; - padding: 4px 0; + padding: 2px 0; + font-size: 11px; + color: var(--text-muted); } html.view-horizontal .stats .global-stat-main b { font-size: 18px !important; diff --git a/viewer.js b/viewer.js index 478c966..3c32a17 100644 --- a/viewer.js +++ b/viewer.js @@ -1046,8 +1046,33 @@ function _toggleView() { _setCurrentView(next); } +/** + * v2026.5.36 : applique le mode de vue (classique/horizontal) en déplaçant + * physiquement les éléments de la topbar vers/depuis une sidebar verticale + * à gauche de l'écran. + * + * En vue horizontale : + * - Sidebar gauche verticale contenant (haut → bas) : + * · Navigation date (prev / date / next / aujourd'hui) + * · Horloge + date (compacte, une par ligne) + * · Info de synchro + * · Stats globales (interventions/techs/absents) + * · Boutons actions (Absence, Douchette, Actualiser, Tout recharger, Vider cache) + * - Topbar réduite à : user-badge + titre + theme-toggle + * + * En vue classique : + * - Tout est remis dans la topbar comme avant (topbar-left / topbar-right) + * + * On mémorise les parents d'origine sur chaque élément (data-orig-parent) + * pour restaurer proprement en vue classique. + * + * Logs [viewMode] pour debug. + */ function _applyViewMode() { const mode = _getCurrentView(); + console.log(`[viewMode] application de la vue : ${mode}`); + + // Mettre à jour la classe sur pour les règles CSS document.documentElement.classList.remove("view-classic", "view-horizontal"); document.documentElement.classList.add("view-" + mode); }