From 81f5dfcf2d353b83d9d7dfdaa207f206b9d903ad Mon Sep 17 00:00:00 2001
From: Simon Vieille <simon@deblan.fr>
Date: Fri, 4 Nov 2022 18:50:45 +0100
Subject: [PATCH] add compatibility badges for each options

---
 css/admin.css                     |  41 ++++-
 templates/settings/admin-form.php | 276 ++++++++++++++++++------------
 2 files changed, 208 insertions(+), 109 deletions(-)

diff --git a/css/admin.css b/css/admin.css
index 086d0d7..5332c4e 100644
--- a/css/admin.css
+++ b/css/admin.css
@@ -73,7 +73,7 @@
 
 .side-menu-setting-list {
   margin: 10px 4px 4px 0px;
-  border: 1px solid var(--color-border-dark);
+  border: 2px solid var(--color-border-dark);
   border-radius: 15px;
 }
 
@@ -175,3 +175,42 @@
 .btn-reset--progress {
   transform: rotate(-359deg);
 }
+
+.badges {
+  margin-bottom: 14px;
+  margin-top: 4px;
+}
+
+.badge {
+  border-size: 1px;
+  padding: 2px 8px;
+  margin-right: 2px;
+  margin-bottom: 5px;
+  display: inline-block;
+  border-radius: 4px;
+  font-size: 13px;
+}
+
+.badge-1 {
+  background: #d4ce14;
+  border-color: #cad413;
+  color: #373a05;
+}
+
+.badge-2 {
+  background: #96d47f;
+  border-color: #7ed49b;
+  color: #333;
+}
+
+.badge-3 {
+  background: #d4540a;
+  border-color: #d4700c;
+  color: #fff;
+}
+
+.badge-4 {
+  background: #9d81d4;
+  border-color: #c681d4;
+  color: #fff;
+}
diff --git a/templates/settings/admin-form.php b/templates/settings/admin-form.php
index 5a55946..5d1d088 100644
--- a/templates/settings/admin-form.php
+++ b/templates/settings/admin-form.php
@@ -41,8 +41,104 @@ $choicesSizes = [
 
 $labelShowHideApps = 'Show and hide the list of applications';
 $labelReset = 'Reset to default';
+
 ?>
 <div id="side-menu-section">
+
+    <div class="section">
+        <h2>
+            <?php p($l->t('Panel')); ?>
+        </h2>
+
+        <?php
+            $displays = [
+                'default' => !$_['always-displayed'] && !$_['big-menu'] && !$_['side-with-categories'],
+                'always-displayed' => $_['always-displayed'] && !$_['big-menu'] && !$_['side-with-categories'],
+                'side-with-categories' => $_['side-with-categories'] && !$_['always-displayed'] && !$_['big-menu'],
+                'big-menu' => $_['big-menu'] && !$_['always-displayed'] && !$_['side-with-categories'],
+            ];
+        ?>
+
+        <div>
+            <label>
+                <?php p($l->t('Default')); ?>
+            </label>
+        </div>
+        <p>
+            <img
+                class="side-menu-display <?php echo $displays['default'] ? 'is-active' : '' ?>"
+                data-alwaysdiplayed="0"
+                data-bigmenu="0"
+                data-sidewithcategories="0"
+                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-default.svg')); ?>" alt="<?php p($l->t('Default')); ?>">
+        </p>
+
+        <div>
+            <label>
+                <?php p($l->t('With categories')); ?>
+            </label>
+        </div>
+        <p>
+            <img
+                class="side-menu-display <?php echo $displays['side-with-categories'] ? 'is-active' : '' ?>"
+                data-alwaysdiplayed="0"
+                data-bigmenu="0"
+                data-sidewithcategories="1"
+                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-side-with-categories.svg')); ?>" alt="<?php p($l->t('With categories')); ?>">
+        </p>
+
+        <div>
+            <label for="side-menu-opener">
+                <?php p($l->t('Big menu')); ?>
+            </label>
+        </div>
+        <p>
+            <img
+                class="side-menu-display <?php echo $displays['big-menu'] ? 'is-active' : '' ?>"
+                data-alwaysdiplayed="0"
+                data-bigmenu="1"
+                data-sidewithcategories="0"
+                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-big-menu.svg')); ?>" alt="<?php p($l->t('Big menu')); ?>">
+        </p>
+
+        <div>
+            <label for="side-menu-opener">
+                <?php p($l->t('Always displayed')); ?>
+            </label>
+        </div>
+        <p><em><?php p($l->t('Not compatible with touch screens.')); ?></em></p>
+        <p>
+            <img
+                class="side-menu-display <?php echo $displays['always-displayed'] ? 'is-active' : '' ?>"
+                data-alwaysdiplayed="1"
+                data-bigmenu="0"
+                data-sidewithcategories="0"
+                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-always-displayed.svg')); ?>" alt="<?php p($l->t('Always displayed')); ?>">
+        </p>
+
+        <input
+            type="hidden"
+            class="side-menu-setting"
+            name="always-displayed"
+            id="side-menu-always-displayed"
+            value="<?php echo (int) $_['always-displayed'] ?>"
+        >
+        <input
+            type="hidden"
+            class="side-menu-setting"
+            name="big-menu"
+            id="side-menu-big-menu"
+            value="<?php echo (int) $_['big-menu'] ?>"
+        >
+        <input
+            type="hidden"
+            class="side-menu-setting"
+            name="side-with-categories"
+            id="side-menu-side-with-categories"
+            value="<?php echo (int) $_['side-with-categories'] ?>"
+        >
+    </div>
+
     <div class="section">
         <h2>
             <?php p($l->t('Colors')); ?>
@@ -50,6 +146,13 @@ $labelReset = 'Reset to default';
             <small><span class="info"><?php p($l->t('Live preview')); ?></span></small>
         </h2>
 
+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+            <span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
+            <span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
+            <span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
+        </div>
+
         <div class="side-menu-setting-table">
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label side-menu-setting-label-short">
@@ -234,6 +337,13 @@ $labelReset = 'Reset to default';
             <?php p($l->t('Dark mode colors')); ?>
         </h2>
 
+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+            <span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
+            <span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
+            <span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
+        </div>
+
         <p>
             <?php echo $l->t('This parameters are used when Dark theme or Breeze Dark Theme are enabled.'); ?>
         </p>
@@ -422,6 +532,13 @@ $labelReset = 'Reset to default';
             <?php p($l->t('Opener')); ?>
         </h2>
 
+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+            <span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
+            <span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
+            <span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
+        </div>
+
         <div class="side-menu-setting-table">
             <div class="side-menu-setting-row">
                 <?php
@@ -473,105 +590,7 @@ $labelReset = 'Reset to default';
                     </select>
                 </div>
             </div>
-        </div>
-    </div>
 
-    <div class="section">
-        <h2>
-            <?php p($l->t('Panel')); ?>
-        </h2>
-
-        <?php
-            $displays = [
-                'default' => !$_['always-displayed'] && !$_['big-menu'] && !$_['side-with-categories'],
-                'always-displayed' => $_['always-displayed'] && !$_['big-menu'] && !$_['side-with-categories'],
-                'side-with-categories' => $_['side-with-categories'] && !$_['always-displayed'] && !$_['big-menu'],
-                'big-menu' => $_['big-menu'] && !$_['always-displayed'] && !$_['side-with-categories'],
-            ];
-        ?>
-
-        <div>
-            <label>
-                <?php p($l->t('Default')); ?>
-            </label>
-        </div>
-        <p>
-            <img
-                class="side-menu-display <?php echo $displays['default'] ? 'is-active' : '' ?>"
-                data-alwaysdiplayed="0"
-                data-bigmenu="0"
-                data-sidewithcategories="0"
-                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-default.svg')); ?>" alt="<?php p($l->t('Default')); ?>">
-        </p>
-
-        <div>
-            <label>
-                <?php p($l->t('With categories')); ?>
-            </label>
-        </div>
-        <p>
-            <img
-                class="side-menu-display <?php echo $displays['side-with-categories'] ? 'is-active' : '' ?>"
-                data-alwaysdiplayed="0"
-                data-bigmenu="0"
-                data-sidewithcategories="1"
-                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-side-with-categories.svg')); ?>" alt="<?php p($l->t('With categories')); ?>">
-        </p>
-
-        <div>
-            <label for="side-menu-opener">
-                <?php p($l->t('Big menu')); ?>
-            </label>
-        </div>
-        <p>
-            <img
-                class="side-menu-display <?php echo $displays['big-menu'] ? 'is-active' : '' ?>"
-                data-alwaysdiplayed="0"
-                data-bigmenu="1"
-                data-sidewithcategories="0"
-                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-big-menu.svg')); ?>" alt="<?php p($l->t('Big menu')); ?>">
-        </p>
-
-        <div>
-            <label for="side-menu-opener">
-                <?php p($l->t('Always displayed')); ?>
-            </label>
-        </div>
-        <p><em><?php p($l->t('Not compatible with touch screens.')); ?></em></p>
-        <p>
-            <img
-                class="side-menu-display <?php echo $displays['always-displayed'] ? 'is-active' : '' ?>"
-                data-alwaysdiplayed="1"
-                data-bigmenu="0"
-                data-sidewithcategories="0"
-                src="<?php print_unescaped(image_path('side_menu', 'admin/layout-always-displayed.svg')); ?>" alt="<?php p($l->t('Always displayed')); ?>">
-        </p>
-
-        <input
-            type="hidden"
-            class="side-menu-setting"
-            name="always-displayed"
-            id="side-menu-always-displayed"
-            value="<?php echo (int) $_['always-displayed'] ?>"
-        >
-        <input
-            type="hidden"
-            class="side-menu-setting"
-            name="big-menu"
-            id="side-menu-big-menu"
-            value="<?php echo (int) $_['big-menu'] ?>"
-        >
-        <input
-            type="hidden"
-            class="side-menu-setting"
-            name="side-with-categories"
-            id="side-menu-side-with-categories"
-            value="<?php echo (int) $_['side-with-categories'] ?>"
-        >
-        <br>
-
-
-        <div class="side-menu-setting-table">
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label">
                     <?php p($l->t('Open the menu when the mouse is hover the opener (automatically disabled on touch screens)')); ?>
@@ -589,16 +608,18 @@ $labelReset = 'Reset to default';
                     </select>
                 </div>
             </div>
+        </div>
+    </div>
 
+    <div class="section">
+        <div class="side-menu-setting-table">
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label">
                     <?php p($l->t('Display the logo')); ?>
-                    <br>
-                    <em>
-                        <?php echo $l->t('This feature is not compatible with the <code>big menu</code> display.'); ?>
-                        <br>
-                        <?php p($l->t('The logo will be hidden when the menu is always displayed.')); ?>
-                    </em>
+
+                    <div class="badges">
+                        <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+                    </div>
                 </div>
                 <div class="side-menu-setting-form">
                     <select id="side-menu-display-logo" name="display-logo" class="side-menu-setting">
@@ -614,6 +635,10 @@ $labelReset = 'Reset to default';
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label">
                     <?php p($l->t('Use the avatar instead of the logo')); ?>
+
+                    <div class="badges">
+                        <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+                    </div>
                 </div>
                 <div class="side-menu-setting-form">
                     <select id="side-menu-use-avatar" name="use-avatar" class="side-menu-setting">
@@ -629,6 +654,10 @@ $labelReset = 'Reset to default';
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label">
                     <?php p($l->t('The logo is a link to the default app')); ?>
+
+                    <div class="badges">
+                        <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+                    </div>
                 </div>
                 <div class="side-menu-setting-form">
                     <select id="side-menu-add-logo-link" name="add-logo-link" class="side-menu-setting">
@@ -644,8 +673,11 @@ $labelReset = 'Reset to default';
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label">
                     <?php p($l->t('Apps that should not be displayed in the menu')); ?>
-                    <br>
-                    <em><?php echo $l->t('This feature is only compatible with the <code>big menu</code> display.'); ?></em>
+
+                    <div class="badges">
+                        <span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
+                        <span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
+                    </div>
                 </div>
                 <div class="side-menu-setting-form">
                     <a class="side-menu-toggler" data-target="#big-menu-hidden-apps" href="#_">
@@ -765,10 +797,17 @@ $labelReset = 'Reset to default';
             <?php p($l->t('Top menu')); ?>
         </h2>
 
+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+            <span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
+            <span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
+            <span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
+        </div>
+
         <div class="side-menu-setting-table">
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label">
-                    <?php p($l->t('Apps only visible in the top menu')); ?>
+                    <?php p($l->t('Applications kept in the top menu')); ?>
                 </div>
                 <div class="side-menu-setting-form">
                     <a class="side-menu-toggler" data-target="#top-menu-apps" href="#_">
@@ -799,7 +838,9 @@ $labelReset = 'Reset to default';
 
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label">
-                    <?php p($l->t('Apps visible in the top and side menus')); ?>
+                    <?php p($l->t('Applications kept in the top menu but also shown in side menu')); ?>
+                    <br>
+                    <em><?php p($l->t('These applications must be selected in the previous option.')); ?></em>
                 </div>
                 <div class="side-menu-setting-form">
                     <a class="side-menu-toggler" data-target="#top-side-menu-apps" href="#_">
@@ -835,6 +876,13 @@ $labelReset = 'Reset to default';
             <?php p($l->t('Applications')); ?>
         </h2>
 
+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+            <span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
+            <span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
+            <span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
+        </div>
+
         <div class="side-menu-setting-table">
             <div class="side-menu-setting-row">
                 <div class="side-menu-setting-label">
@@ -875,6 +923,11 @@ $labelReset = 'Reset to default';
             <?php p($l->t('Categories')); ?>
         </h2>
 
+        <div class="badges">
+            <span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
+            <span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
+        </div>
+
         <div class="side-menu-setting-table">
             <div class="side-menu-setting-row">
                 <?php
@@ -985,6 +1038,13 @@ $labelReset = 'Reset to default';
             <?php p($l->t('Tips')); ?>
         </h2>
 
+        <div class="badges">
+            <span class="badge badge-1"><?php p($l->t('Default')); ?></span>
+            <span class="badge badge-2"><?php p($l->t('With categories')); ?></span>
+            <span class="badge badge-3"><?php p($l->t('Big menu')); ?></span>
+            <span class="badge badge-4"><?php p($l->t('Always displayed')); ?></span>
+        </div>
+
         <p>
             <em><?php echo $l->t('Use the shortcut <span class="keyboard-key">Ctrl</span>+<span class="keyboard-key">o</span> to open and to hide the side menu. Use <span class="keyboard-key">tab</span> to navigate.'); ?></em>
         </p>