From 1f3649fc14a5add36c90bc1e090f6cf560f3252c Mon Sep 17 00:00:00 2001 From: isUnknown Date: Mon, 9 Mar 2026 17:04:05 +0100 Subject: [PATCH 1/4] fix element popup toggle: remove/re-enable cycle + inherited CSS comments MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Remove pre-toggle snapshot system that was re-adding CSS values after removeProps, causing toggles to not properly disable styles and breaking the off/on/off cycle. Reset refs to defaults on toggle-off so displayed CSS shows inherited values. Fix hasInCss to exclude commented blocks. Replace "valeur par défaut" with "hérité de la page" comments. Co-Authored-By: Claude Opus 4.6 --- src/composables/useElementSettings.js | 90 ++++++++++++++------------- 1 file changed, 48 insertions(+), 42 deletions(-) diff --git a/src/composables/useElementSettings.js b/src/composables/useElementSettings.js index 162256a..a32e61c 100644 --- a/src/composables/useElementSettings.js +++ b/src/composables/useElementSettings.js @@ -236,33 +236,30 @@ export function useElementSettings({ margin, padding, basePopup }) { } }; - // --- Pre-toggle CSS snapshot --- - // Saves the CSS values for a group before toggle ON, restores them on toggle OFF - const preToggleSnapshots = new Map(); // key: `${selector}::${group}` → { cssProp: extractedValue } - - const savePreToggleSnapshot = (group) => { - const key = `${selector.value}::${group}`; - const cssProps = settingGroups[group]; - const snapshot = {}; - for (const cssProp of cssProps) { - const val = stylesheetStore.extractValue(selector.value, cssProp); - if (val) snapshot[cssProp] = val; - } - preToggleSnapshots.set(key, snapshot); - }; - - const restorePreToggleSnapshot = (group) => { - const key = `${selector.value}::${group}`; - const snapshot = preToggleSnapshots.get(key); - if (!snapshot) return; - for (const [cssProp, val] of Object.entries(snapshot)) { - if (typeof val === 'object' && 'value' in val) { - updateProp(cssProp, val.value, val.unit); - } else { - updateProp(cssProp, val); + // --- Reset refs to inherited/default values when toggle is turned off --- + const resetRefsToDefaults = (group) => { + if (group === 'font') { + fontFamily.value = textDefaults.fontFamily; + italic.value = ELEMENT_DEFAULTS.italic; + bold.value = ELEMENT_DEFAULTS.bold; + // Re-apply inline defaults if applicable + const inlineDefaults = INLINE_DEFAULTS[currentTag.value]; + if (inlineDefaults) { + if (inlineDefaults.fontStyle === 'italic') italic.value = true; + if (inlineDefaults.fontWeight === 'bold') bold.value = true; } + } else if (group === 'fontSize') { + fontSize.value = textDefaults.fontSize.value; + fontSize.unit = textDefaults.fontSize.unit; + } else if (group === 'lineHeight') { + lineHeight.value = textDefaults.lineHeight.value; + lineHeight.unit = textDefaults.lineHeight.unit; + } else if (group === 'color') { + color.value = textDefaults.color; + // Re-apply inline default color if applicable + const inlineDefaults = INLINE_DEFAULTS[currentTag.value]; + if (inlineDefaults?.color) color.value = inlineDefaults.color; } - preToggleSnapshots.delete(key); }; // --- Toggle actions --- @@ -275,7 +272,6 @@ export function useElementSettings({ margin, padding, basePopup }) { settingEnabled[group] = enabled; isUpdatingFromStore = true; if (enabled) { - savePreToggleSnapshot(group); restoreFromCache(group); applyAllEnabledGroups(); } else { @@ -286,7 +282,8 @@ export function useElementSettings({ margin, padding, basePopup }) { } else { removeProps(settingGroups[group]); } - restorePreToggleSnapshot(group); + // Reset refs to defaults so displayedCss shows inherited values + resetRefsToDefaults(group); } saveElementState(); nextTick(() => { isUpdatingFromStore = false; }); @@ -353,10 +350,10 @@ export function useElementSettings({ margin, padding, basePopup }) { const INDEPENDENT_TAGS = new Set(['li', 'ul', 'ol', 'dt', 'dd', 'dl', 'table', 'tr', 'td', 'th', 'caption', 'figure', 'figcaption', 'pre', 'blockquote']); const isIndependentElement = computed(() => INDEPENDENT_TAGS.has(currentTag.value)); - // Check if the current selector has a CSS property in the store + // Check if the current selector has a CSS property in the store (active CSS only, not commented) const hasInCss = (cssProp) => { if (!selector.value) return false; - return !!stylesheetStore.extractValue(selector.value, cssProp); + return !!stylesheetStore.extractValue(selector.value, cssProp, false); }; const displayedCss = computed(() => { @@ -364,9 +361,10 @@ export function useElementSettings({ margin, padding, basePopup }) { const lines = []; for (const entry of displayedCssOrder) { if (entry.skip && entry.skip()) continue; + const groupEnabled = settingEnabled[entry.group]; // For inline elements, skip special groups (TextSettings defaults) when toggle is OFF // Exception: keep if the current tag has an inline default for this CSS property - if (entry.special && isInlineElement.value && !settingEnabled[entry.group]) { + if (entry.special && isInlineElement.value && !groupEnabled) { const tagDefaults = INLINE_DEFAULTS[currentTag.value]; const cssToDefaultKey = { 'color': 'color', 'font-family': 'fontFamily' }; const defaultKey = cssToDefaultKey[entry.css]; @@ -374,18 +372,26 @@ export function useElementSettings({ margin, padding, basePopup }) { } const val = entry.getValue(); if (val === null || val === undefined) continue; - // Show "valeur par défaut" only if the value actually matches the TextSettings default - let isTextDefault = false; - if (entry.special && !settingEnabled[entry.group]) { - const textDefaultValues = { - 'font-family': textDefaults.fontFamily === 'sans-serif' ? 'sans-serif' : `"${textDefaults.fontFamily}"`, - 'font-size': `${textDefaults.fontSize.value}${textDefaults.fontSize.unit}`, - 'line-height': `${textDefaults.lineHeight.value}${textDefaults.lineHeight.unit}`, - 'color': textDefaults.color, - }; - isTextDefault = val === textDefaultValues[entry.css]; + + // Determine inheritance comment for disabled groups + let comment = ''; + if (!groupEnabled) { + if (entry.special) { + // Special groups: show "hérité de la page" when value matches page-level default + const textDefaultValues = { + 'font-family': textDefaults.fontFamily === 'sans-serif' ? 'sans-serif' : `"${textDefaults.fontFamily}"`, + 'font-size': `${textDefaults.fontSize.value}${textDefaults.fontSize.unit}`, + 'line-height': `${textDefaults.lineHeight.value}${textDefaults.lineHeight.unit}`, + 'color': textDefaults.color, + }; + if (val === textDefaultValues[entry.css]) { + comment = ' /* hérité de la page */'; + } + } else if (hasInCss(entry.css)) { + // Non-special groups: show comment when CSS exists but toggle is off + comment = ' /* hérité de la page */'; + } } - const comment = isTextDefault ? ' /* valeur par défaut */' : ''; lines.push(` ${entry.css}: ${val};${comment}`); } for (const side of ['top', 'right', 'bottom', 'left']) { @@ -402,7 +408,7 @@ export function useElementSettings({ margin, padding, basePopup }) { }); const editableFullCss = computed(() => { - return displayedCss.value.replace(/ \/\* valeur par défaut \*\//g, ''); + return displayedCss.value.replace(/ \/\* (?:valeur par défaut|hérité de la page) \*\//g, ''); }); // --- CSS parsing & sync --- From df5e2e495c365b3620db146c91a6fa0344506488 Mon Sep 17 00:00:00 2001 From: sarahgarcin1 Date: Thu, 12 Mar 2026 10:18:08 +0100 Subject: [PATCH 2/4] modifs version web, demande alexandre --- public/assets/css/projet.css | 10 +- public/assets/css/web.css | 60 ++++++------ .../content/cohesion-des-mondes/project.txt | 4 + public/site/blueprints/pages/project.yml | 6 ++ public/site/templates/narrative-web.php | 92 +++++++++---------- public/site/templates/project.php | 6 +- 6 files changed, 91 insertions(+), 87 deletions(-) diff --git a/public/assets/css/projet.css b/public/assets/css/projet.css index 5380b18..64eae39 100644 --- a/public/assets/css/projet.css +++ b/public/assets/css/projet.css @@ -1,6 +1,6 @@ /* ═══════════════════════════════════════════════════════════ projet.css - Grille des récits — template projet.php + Grille des récits — template project.php ⚠ Ce fichier utilise UNIQUEMENT les variables définies dans style.css → --color-*, --sans-serif, --mono, --border-radius, --space-* @@ -14,8 +14,8 @@ /* ─────────────────────────────────────────── BASE BODY ─────────────────────────────────────────── */ -body[data-template="projet"] { - background-color: var(--nw-paper); +body[data-template="project"] { + background-color: var(--background-color); color: var(--nw-ink); min-height: 100vh; } @@ -143,6 +143,7 @@ body[data-template="projet"] { /*overflow: hidden;*/ transition: transform var(--nw-transition), box-shadow var(--nw-transition); border: 1px solid var(--nw-rule); + background: var(--nw-paper); /* Animation d'entrée en cascade */ opacity: 0; @@ -389,12 +390,11 @@ body[data-template="projet"] { @media (max-width: 900px) { .pj-header__content { padding: 2rem 1.5rem 2.5rem; } .pj-main { padding: 0 0 4rem; } - .pj-grid { grid-template-columns: 1fr; gap: 1px; } + .pj-grid { grid-template-columns: 1fr; padding: 0 1rem;} } @media (max-width: 600px) { .pj-card__cover { height: 180px; } - .pj-card__footer { flex-direction: column; align-items: stretch; } .pj-btn { justify-content: center; } } diff --git a/public/assets/css/web.css b/public/assets/css/web.css index 744513d..b2fc9d0 100644 --- a/public/assets/css/web.css +++ b/public/assets/css/web.css @@ -87,7 +87,6 @@ } .nw-sidenav__label { - font-family: var(--nw-font-ui); font-size: 0.89rem; font-weight: 500; letter-spacing: 0.04em; @@ -158,7 +157,6 @@ } .nw-sidenav__sub-label { - font-family: var(--nw-font-ui); font-size: 0.72rem; font-weight: 400; letter-spacing: 0.03em; @@ -216,6 +214,7 @@ top: 20px; left: 20px; transition: transform 0.2s linear; + z-index: 10; } .nw-prev-btn a{ @@ -282,7 +281,6 @@ } .nw-hero__author { - font-family: var(--nw-font-ui); font-size: 0.875rem; color: rgba(255,255,255,0.75); letter-spacing: 0.06em; @@ -304,29 +302,19 @@ /* ─────────────────────────────────────────── INTRODUCTION ─────────────────────────────────────────── */ -.nw-introduction { - padding: 4rem 1rem; - background: var(--nw-paper); -} - .nw-introduction__body { + font-family: var(--nw-font-display); + color: #fff; font-size: 1.4rem; - line-height: 1.8; - color: var(--nw-ink-soft); + line-height: 1.4; + margin: 2rem 0 0; + text-shadow: 0 2px 20px rgba(0,0,0,0.3); font-weight: 300; font-style: italic; - border-left: 3px solid var(--nw-accent); - padding-left: 2rem; } -.nw-introduction__body p:first-child::first-letter { - font-family: var(--nw-font-display); - font-size: 5.7rem; - font-weight: 800; - line-height: 0.8; - float: left; - margin: 0.05em 0.12em 0 0; - color: var(--nw-accent); +.nw-introduction__body p{ + margin-bottom: 0; } /* ─────────────────────────────────────────── @@ -410,7 +398,6 @@ } .nw-tag { - font-family: var(--nw-font-ui); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.08em; @@ -451,16 +438,24 @@ background: var(--nw-paper-warm); } -.nw-section--map .nw-container { - margin-bottom: 2rem; +.nw-section--map__wrapper{ + display: flex; + flex-wrap: wrap; +} + +.nw-section__header__wrapper{ + width: 33.3333%; +} + +.nw-map-part{ + width: 66.6666%; + margin: 1.5rem 4rem 4rem 0; } .nw-map-wrap { position: relative; - width: 100%; height: clamp(400px, 55vh, 700px); - margin: 5rem 0 2rem; - border-top: 3px solid var(--nw-accent); + border: 1px solid var(--nw-rule); overflow: hidden; } @@ -530,7 +525,6 @@ display: inline-flex; align-items: center; gap: 0.3rem; - font-family: var(--nw-font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.06em; @@ -676,6 +670,7 @@ color: var(--nw-ink-soft); } +.nw-map-marker__content a { color: var(--nw-accent); } .nw-map-marker__content p { margin: 0 0 1.1em; } .nw-map-marker__content h2, @@ -714,7 +709,6 @@ } .nw-map-marker__content figcaption { - font-family: var(--nw-font-ui); font-size: 0.78rem; color: var(--nw-ink-muted); font-style: italic; @@ -740,14 +734,13 @@ display: flex; flex-wrap: wrap; gap: 0.5rem; - padding-top: 1.5rem; + padding-top: 1rem; } .nw-file { display: inline-flex; align-items: center; gap: 0.4rem; - font-family: var(--nw-font-ui); font-size: 0.8rem; font-weight: 500; color: var(--nw-ink-soft); @@ -846,7 +839,6 @@ gap: 0.5rem; text-decoration: none; color: var(--nw-ink-soft); - font-family: var(--nw-font-ui); font-size: 0.82rem; font-weight: 500; transition: color var(--nw-transition); @@ -893,7 +885,6 @@ } .nw-chapitre__num { - font-family: var(--nw-font-ui); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; @@ -965,7 +956,6 @@ } .nw-chapitre__body figcaption { - font-family: var(--nw-font-ui); font-size: 0.8rem; color: var(--nw-ink-muted); padding: 0.5rem 1rem 0; @@ -992,6 +982,8 @@ @media (max-width: 768px) { .nw-hero__content { padding: 4rem 1.25rem 2.5rem; } .nw-container { padding: 0 1.25rem; } + .nw-section__header__wrapper {width: 100%;} + .nw-map-part {width: 100%; margin: 1.5rem 1rem;} .nw-map-wrap { height: 320px; } .nw-chapitre__body figure { margin: 1.5rem 0; } .nw-geoformat-hero { min-height: 35vh; } @@ -1000,7 +992,7 @@ } @media (max-width: 480px) { - .nw-introduction__body { padding-left: 1rem; font-size: 1rem; } + .nw-introduction__body { font-size: 1rem; } .nw-section { padding: 3rem 0; } } diff --git a/public/content/cohesion-des-mondes/project.txt b/public/content/cohesion-des-mondes/project.txt index e6801f5..7b5abc0 100644 --- a/public/content/cohesion-des-mondes/project.txt +++ b/public/content/cohesion-des-mondes/project.txt @@ -10,4 +10,8 @@ Cover: - file://glu48yweigbs4wds ---- +Background: #fff3e5 + +---- + Uuid: eybhqikol6kaorby \ No newline at end of file diff --git a/public/site/blueprints/pages/project.yml b/public/site/blueprints/pages/project.yml index 32de087..cd4787b 100644 --- a/public/site/blueprints/pages/project.yml +++ b/public/site/blueprints/pages/project.yml @@ -27,3 +27,9 @@ columns: files: label: Fichiers type: files + meta: + type: fields + fields: + background: + label: Couleur de fond + type: color diff --git a/public/site/templates/narrative-web.php b/public/site/templates/narrative-web.php index 751b129..d6035e3 100644 --- a/public/site/templates/narrative-web.php +++ b/public/site/templates/narrative-web.php @@ -123,19 +123,15 @@ foreach ($subpages as $subpage) { author()->isNotEmpty()): ?>

Par author()) ?>

+ + intro()->isNotEmpty()): ?> +
+ intro() ?> +
+ - -intro()->isNotEmpty()): ?> -
-
-
- intro() ?> -
-
-
-
-
-
-

title()) ?>

- tags()->isNotEmpty()): ?> -
- tags()->split(',') as $tag): ?> - - -
+
+
+
+

title()) ?>

+ tags()->isNotEmpty()): ?> +
+ tags()->split(',') as $tag): ?> + + +
+ +
+ + intro()->isNotEmpty()): ?> +
intro() ?>
-
- - intro()->isNotEmpty()): ?> -
intro() ?>
- -
- - - children()->listed()->filterBy('intendedTemplate', 'marker'); - $mapId = 'map-' . $subpage->uid(); - ?> -
-
-
- - - files()->isNotEmpty()): ?> -
-
- files() as $file): ?> - - ↓ - filename()) ?> - -
-
- + + + children()->listed()->filterBy('intendedTemplate', 'marker'); + $mapId = 'map-' . $subpage->uid(); + ?> +
+
+
+
+ + files()->isNotEmpty()): ?> +
+ files() as $file): ?> + + ↓ + filename()) ?> + + +
+ +
+ + isNotEmpty()): ?> diff --git a/public/site/templates/project.php b/public/site/templates/project.php index d935dce..7a9b86c 100644 --- a/public/site/templates/project.php +++ b/public/site/templates/project.php @@ -22,7 +22,11 @@ - + +background()->isNotEmpty()){ $background = $page->background();} +else{$background = "#FFF";}?> +
-
-
+
+

title()) ?>

tags()->isNotEmpty()): ?> @@ -158,22 +158,16 @@ foreach ($subpages as $subpage) {
- - intro()->isNotEmpty()): ?> -
intro() ?>
- -
- - - children()->listed()->filterBy('intendedTemplate', 'marker'); - $mapId = 'map-' . $subpage->uid(); - ?> -
-
-
-
- + + children()->listed()->filterBy('intendedTemplate', 'marker'); + $mapId = 'map-' . $subpage->uid(); + ?> +
+
+
+
+ files()->isNotEmpty()): ?>
files() as $file): ?> @@ -185,8 +179,13 @@ foreach ($subpages as $subpage) {
-
+ intro()->isNotEmpty()): ?> +
intro() ?>
+ + + +
isNotEmpty()): ?>