Browse Source

mustard: notifs: Refactor layout pagina gestione notifiche.

* web/mustard/notifs.php: Aggiunto layout con CSS Grid,
[script]: Aggiunta logica per mostare/nascondere i bottoni per operare
su multiple notifiche.
paul 4 years ago
parent
commit
aefa4ebf54
1 changed files with 64 additions and 38 deletions
  1. 64 38
      web/mustard/notifs.php

+ 64 - 38
web/mustard/notifs.php

@@ -60,16 +60,40 @@ if ($filtordon) {
     <script language="JavaScript">
         <!--
         <?php if ($account['Level'] != 'guest') require('js/notifs.js.php'); ?>
+
+        function setBtnsVisibility(state) {
+            let btns = document.querySelectorAll("#notifs-list-controls .control-btn");
+            btns.forEach(function (btn) {
+                btn.style.visibility = state;
+            });
+        }
+
         function toggleState(check) {
-            let checkboxes = document.querySelectorAll("div#notifs-list > div > input.seen-checkbox");
+            if (check.checked) {
+                setBtnsVisibility("visible");
+            } else {
+                setBtnsVisibility("hidden")
+            }
+            let checkboxes = document.querySelectorAll("div.notif > input.seen-checkbox");
             checkboxes.forEach(function (box) {
                 box.checked = check.checked;
-            })
+            });
         }
+
+        function notifSelect(check) {
+            let checkboxes = Array.from(document.querySelectorAll("div.notif > input.seen-checkbox"));
+            if (check.checked) {
+                setBtnsVisibility("visible");
+            } else if (checkboxes.every(box => !box.checked)) {
+                setBtnsVisibility("hidden");
+            }
+        }
+
         // -->
     </script>
 
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css" integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fork-awesome@1.1.7/css/fork-awesome.min.css"
+          integrity="sha256-gsmEoJAws/Kd3CjuOQzLie5Q3yshhvmo7YNtBG7aaEY=" crossorigin="anonymous">
 </head>
 <body>
 
@@ -88,43 +112,45 @@ if ($filtordon) {
 
 <?php echo($notifs['div']); ?>
 
-<div id="fullscreen">
-    <div id="middlerow">
-        <div id="notifs-list-controls">
-            <input id="global-selector" type="checkbox" onclick="toggleState(this)">
-            <button onclick="applyAllSelected(markread)"><i class="fa fa-envelope-open-o" aria-hidden="true"></i>Segna come letto</button>
-            <button onclick="applyAllSelected(markdeleted)"><i class="fa fa-trash-o" aria-hidden="true"></i>Cancella</button>
-        </div>
-        <div id="notifs-list">
-            <?php
-            if ($account['Level'] != 'guest') {
-                // Questi valori sono un po' a naso,
-                // dovrebbero avere senso ma non ho
-                // indagato troppo
-                $sev_classes = array(
-                    1 => "sev-normal",
-                    2 => "sev-warning",
-                    3 => "sev-error"
-                );
-                $seen_class = array(
-                    0 => "unseen",
-                    1 => "seen"
-                );
-                foreach ($notifs['notifs'] as $n) {
-                    echo("<div id=\"notif-" . $n["ID"] .
-                        "\" class=\"" . $sev_classes[$n["Severity"]] . " " . $seen_class[$n["Seen"]] . "\">" .
-                        "<input type=\"checkbox\" class=\"seen-checkbox\">" .
-                        $n["Notification"] .
-                        "<button type='button' onclick='markread(this.parentElement)'>&#x2715</button>" .
-                        "</div>\n");
-                }
-            } ?>
-        </div>
-
+<div id="notifs-grid">
+    <div id="notifs-list-controls">
+        <input id="global-selector" type="checkbox" onclick="toggleState(this)">
+        <button class="control-btn" onclick="applyAllSelected(markread)"><i class="fa fa-envelope-open-o"
+                                                                            aria-hidden="true"></i>
+        </button>
+        <button class="control-btn" onclick="applyAllSelected(markdeleted)"><i class="fa fa-trash-o"
+                                                                               aria-hidden="true"></i>
+        </button>
+    </div>
+    <h1 class="control-btn">CIAONEE</h1>
+    <div id="notifs-list">
+        <?php
+        if ($account['Level'] != 'guest') {
+            // Questi valori sono un po' a (n|c)aso,
+            // dovrebbero avere senso ma non ho
+            // indagato troppo
+            $sev_classes = array(
+                1 => "sev-normal",
+                2 => "sev-warning",
+                3 => "sev-error"
+            );
+            $seen_class = array(
+                0 => "unseen",
+                1 => "seen"
+            );
+            foreach ($notifs['notifs'] as $n) {
+                echo("<div id=\"notif-" . $n["ID"] .
+                    "\" class=\"" . "notif " . $sev_classes[$n["Severity"]] . " " . $seen_class[$n["Seen"]] . "\">" .
+                    "<input type=\"checkbox\" class=\"seen-checkbox\" onclick='notifSelect(this)'>" .
+                    "<button type='button' onclick='markread(this.parentElement)'><i class=\"fa fa-envelope-open-o\" aria-hidden=\"true\"></i></button>" .
+                    "<button type='button' onclick='markdeleted(this.parentElement)'><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i></button>" .
+                    "<p>" . $n["Notification"] . "</p>" .
+                    "</div>\n");
+            }
+        } ?>
     </div>
-</div>
-</div>
 
+</div>
 </body>
 </html>