From 654d6070bc6d9a45fdee4528963502d440bd88f9 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Wed, 4 Sep 2024 14:59:09 +0200
Subject: [PATCH] sectioned page - add custom section background color

---
 assets/css/panel.css              |  3 ++-
 assets/css/src/page-sectioned.css |  1 +
 site/blueprints/pages/section.yml | 19 +++++++++++--------
 site/templates/sectioned.php      |  7 +++++--
 4 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/assets/css/panel.css b/assets/css/panel.css
index 685c903..f6b5e6c 100644
--- a/assets/css/panel.css
+++ b/assets/css/panel.css
@@ -19,10 +19,11 @@ body,
   --color-yellow: #d6ff00;
   --color-brown: #d6cfbe;
   --color-grey: #c4c9cc;
+  --color-mint: #45e6ba;
 }
 
 .k-panel-menu {
-  background-color: var(--color-yellow);
+  background-color: var(--color-mint);
 }
 
 .k-field-name-herotext .k-block-type-heading-input[data-level="h3"] .k-text {
diff --git a/assets/css/src/page-sectioned.css b/assets/css/src/page-sectioned.css
index bde7fb9..26438e8 100644
--- a/assets/css/src/page-sectioned.css
+++ b/assets/css/src/page-sectioned.css
@@ -1,5 +1,6 @@
 [data-template="sectioned"] section {
   scroll-margin-top: 6rem;
+  background-color: var(--color);
 }
 
 [data-template="sectioned"] .section__row {
diff --git a/site/blueprints/pages/section.yml b/site/blueprints/pages/section.yml
index 4274719..c373a34 100644
--- a/site/blueprints/pages/section.yml
+++ b/site/blueprints/pages/section.yml
@@ -6,6 +6,16 @@ tabs:
     label: Constructeur
     icon: dashboard
     fields:
+      isIndexed:
+        label: Indexée
+        type: toggle
+        default: true
+        help: Les titres des sections indéxés sont affichés dans le menu développé et dans le bandeau d'ancres.
+        width: 1/4
+      backgroundColor:
+        extends: fields/color
+        label: Couleur de fond
+        width: 3/4
       section:
         label: Section
         type: layout
@@ -18,12 +28,5 @@ tabs:
           - text
           - image
           - links-list
-  paramsTab:
-    label: Paramètres
-    icon: cog
-    fields:
-      isIndexed:
-        label: Titre de section affichée dans le menu développé ?
-        type: toggle
-        default: true
+
   filesTab: tabs/files
diff --git a/site/templates/sectioned.php b/site/templates/sectioned.php
index d6be7d8..1708d6c 100644
--- a/site/templates/sectioned.php
+++ b/site/templates/sectioned.php
@@ -5,12 +5,15 @@
 </section>
 
 <?php foreach($page->children() as $sectionPage): ?>
-  <section id="<?= $sectionPage->slug() ?>">
+  <section id="<?= $sectionPage->slug() ?>" <?= e($sectionPage->backgroundColor()->isNotEmpty() == 'true', ' style="--color: ' . $sectionPage->backgroundColor() . ';"') ?>>
     <?php if ($sectionPage->isIndexed() != 'false'): ?>
       <h2 class="h3"><?= $sectionPage->title() ?></h2>
     <?php endif ?>
     <?php foreach ($sectionPage->section()->toLayouts() as $layout): ?>
-    <div class="section__row grid" id="<?= $layout->id() ?>">
+    <div 
+      class="section__row grid" 
+      id="<?= $layout->id() ?>"
+    >
       <?php foreach ($layout->columns() as $column): ?>
       <div class="grid__item" style="--span:<?= $column->span() ?>">
         <div class="blocks">