Change panels toggle button to checkbox

Author: RobiNN1

assets/css/styles.css

@@ -597,10 +597,26 @@ svg {
   }
 }
 
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
 .fixed {
   position: fixed;
 }
 
+.absolute {
+  position: absolute;
+}
+
 .relative {
   position: relative;
 }
@@ -621,6 +637,14 @@ svg {
   right: 0px;
 }
 
+.left-1 {
+  left: 0.25rem;
+}
+
+.top-1 {
+  top: 0.25rem;
+}
+
 .z-50 {
   z-index: 50;
 }
@@ -703,14 +727,14 @@ svg {
   margin-bottom: 1.25rem;
 }
 
-.mr-3 {
-  margin-right: 0.75rem;
-}
-
 .ml-1 {
   margin-left: 0.25rem;
 }
 
+.mr-3 {
+  margin-right: 0.75rem;
+}
+
 .ml-64 {
   margin-left: 16rem;
 }
@@ -739,14 +763,18 @@ svg {
   display: none;
 }
 
-.h-20 {
-  height: 5rem;
+.h-6 {
+  height: 1.5rem;
 }
 
 .h-4 {
   height: 1rem;
 }
 
+.h-20 {
+  height: 5rem;
+}
+
 .min-h-full {
   min-height: 100%;
 }
@@ -763,6 +791,14 @@ svg {
   width: 4rem;
 }
 
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-4 {
+  width: 1rem;
+}
+
 .w-20 {
   width: 5rem;
 }
@@ -771,10 +807,6 @@ svg {
   width: 0.75rem;
 }
 
-.w-4 {
-  width: 1rem;
-}
-
 .w-24 {
   width: 6rem;
 }
@@ -836,6 +868,10 @@ svg {
   align-items: center;
 }
 
+.justify-center {
+  justify-content: center;
+}
+
 .justify-between {
   justify-content: space-between;
 }
@@ -982,6 +1018,11 @@ svg {
   background-color: rgb(226 232 240 / var(--tw-bg-opacity));
 }
 
+.bg-gray-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(209 213 219 / var(--tw-bg-opacity));
+}
+
 .bg-sky-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(14 165 233 / var(--tw-bg-opacity));
@@ -1418,6 +1459,12 @@ svg {
   --tw-ring-color: rgb(125 211 252 / var(--tw-ring-opacity));
 }
 
+.transition-transform {
+  transition-property: transform;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .select {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%231f2937' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
   background-repeat: no-repeat;
@@ -1911,3 +1958,26 @@ svg {
 .\[\&\:last-child\>\*\]\:border-0:last-child>* {
   border-width: 0px;
 }
+
+.\[\&\:checked\~\.dot\]\:translate-x-full:checked~.dot {
+  --tw-translate-x: 100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.\[\&\:checked\~\.dot\]\:bg-gray-900:checked~.dot {
+  --tw-bg-opacity: 1;
+  background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+}
+
+.\[\&\:checked\~\.dot\]\:text-white:checked~.dot {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.\[\&\:checked\~\.dot\>\.open\]\:block:checked~.dot>.open {
+  display: block;
+}
+
+.\[\&\:checked\~\.dot\>\.close\]\:hidden:checked~.dot>.close {
+  display: none;
+}

assets/js/scripts.js

@@ -56,36 +56,27 @@ document.querySelectorAll('[data-panel]').forEach(panel => {
 
 let toggle_panels = document.getElementById('toggle-panels');
 if (toggle_panels) {
-    let text = toggle_panels.querySelector('.text');
     let current_dashboard = document.querySelector('[data-dashboard]');
     let panels_state = 'panels_state_' + current_dashboard.dataset.dashboard;
-    let open_state = 'open_' + current_dashboard.dataset.dashboard;
-    let close_state = 'close_' + current_dashboard.dataset.dashboard;
 
     if (!(panels_state in localStorage)) {
-        localStorage.setItem(panels_state, open_state);
+        localStorage.setItem(panels_state, 'open');
     }
 
-    if (localStorage.getItem(panels_state) === close_state) {
-        text.innerHTML = 'Show panels';
-        toggle_panels.querySelector('.icon-open').classList.remove('hidden');
-        toggle_panels.querySelector('.icon-close').classList.add('hidden');
+    if (localStorage.getItem(panels_state) === 'close') {
+        toggle_panels.checked = true;
         document.getElementById('infopanels').style.display = 'none';
     }
 
     toggle_panels.addEventListener('click', () => {
-        if (localStorage.getItem(panels_state) === open_state) {
-            text.innerHTML = 'Show panels';
-            toggle_panels.querySelector('.icon-open').classList.remove('hidden');
-            toggle_panels.querySelector('.icon-close').classList.add('hidden');
+        if (localStorage.getItem(panels_state) === 'open') {
+            toggle_panels.checked = true;
             document.getElementById('infopanels').style.display = 'none';
-            localStorage.setItem(panels_state, close_state);
+            localStorage.setItem(panels_state, 'close');
         } else {
-            text.innerHTML = 'Hide panels';
-            toggle_panels.querySelector('.icon-open').classList.add('hidden');
-            toggle_panels.querySelector('.icon-close').classList.remove('hidden');
+            toggle_panels.checked = false;
             document.getElementById('infopanels').style.display = 'block';
-            localStorage.setItem(panels_state, open_state);
+            localStorage.setItem(panels_state, 'open');
         }
     });
 }

templates/partials/info.twig

@@ -1,19 +1,23 @@
 {% if extension_version %}
-    <div class="text-xl mb-5">
+    <div class="text-xl mb-3">
         PHP <span class="font-semibold">{{ title }}</span> extension
         {{ include('components/badge.twig', {text: 'v' ~ extension_version, text_sm: true, bg: 'bg-' ~ color ~ '-500'}) }}
     </div>
 {% endif %}
 
 {% if panels_toggler is not defined %}
-    <div class="mb-3">
-        <button type="button" id="toggle-panels"
-                class="shadow text-xs py-1.5 px-3 text-white focus:ring-4 bg-{{ color }}-500 hover:bg-{{ color }}-600 focus:ring-{{ color }}-300 font-semibold rounded inline-flex items-center">
-            <span class="text mr-1">Hide panels</span>
-            <span class="icon-open hidden">{{ svg('open') }}</span>
-            <span class="icon-close">{{ svg('close') }}</span>
-        </button>
-    </div>
+    <label for="toggle-panels" class="flex items-center cursor-pointer mb-3">
+        <span class="relative block bg-gray-300 w-10 h-6 rounded-full">
+            <input type="checkbox" id="toggle-panels"
+                   class="sr-only [&:checked~.dot]:translate-x-full
+                   [&:checked~.dot]:bg-gray-900 [&:checked~.dot]:text-white [&:checked~.dot>.open]:block [&:checked~.dot>.close]:hidden">
+            <span class="dot absolute left-1 top-1 bg-gray-50 w-4 h-4 rounded-full transition-transform inline-flex items-center justify-center">
+                {{ svg('open', 10, 'open hidden') }}
+                {{ svg('close', 10, 'close') }}
+            </span>
+        </span>
+        <span class="ml-1 text-sm">Toggle panels</span>
+    </label>
 {% endif %}
 
 {% if info.panels %}