2 Commits 81c3fd2722 ... 934ac2d285

Author SHA1 Message Date
  paul 934ac2d285 mustard: theme: Aggiunte regole per notifs.php. 4 years ago
  paul 9e05c76d68 mustard: notifs: Refactor layout pagina gestione notifiche. 4 years ago
3 changed files with 139 additions and 81 deletions
  1. 6 6
      web/mustard/js/notifs.js.php
  2. 64 38
      web/mustard/notifs.php
  3. 69 37
      web/mustard/theme.css

+ 6 - 6
web/mustard/js/notifs.js.php

@@ -41,18 +41,18 @@ function markread(notif) {
 }
 
 function markdeleted(notif) {
-    let xhr=new XMLHttpRequest();
-    xhr.open('GET','notifsh.php?act=delete&id='+notif.id.replace(/^notif-([0-9]+)$/,'$1'));
-    xhr.responseType='json';
+    let xhr = new XMLHttpRequest();
+    xhr.open('GET', 'notifsh.php?act=delete&id=' + notif.id.replace(/^notif-([0-9]+)$/, '$1'));
+    xhr.responseType = 'json';
     xhr.send();
-    xhr.onload=function() {
+    xhr.onload = function () {
         if (xhr.response['deleted']) {
             notif.remove();
         } else {
-            alert("Il server non ha potuto cancellare la notifica " + notif.text);
+            alert("Il server non ha potuto cancellare la notifica '" + notif.text + "'");
         }
     };
-    xhr.onerror=function() {
+    xhr.onerror = function () {
         alert('La richiesta è fallita.');
     };
 }

+ 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>
 

+ 69 - 37
web/mustard/theme.css

@@ -118,6 +118,7 @@ p {
 .bad {
 	background-color: #DE8787;
 }
+
 .neut {
 	background-color: #FFCCAA;
 }
@@ -128,42 +129,6 @@ p {
 	color: black;
 }
 
-#notifs-list-controls {
-	margin-top: 32px;
-	margin-left: 360px;
-	margin-right: 360px;
-}
-
-#notifs-list {
-	margin-left: 360px;
-	margin-right: 360px;
-}
-
-#notifs-list div {
-	padding: 3px;
-	margin:  10px;
-	min-width: 360px;
-
-	vertical-align: top;
-
-	word-break: break-word;
-
-	background-color: #87DE87;
-	border-radius: 5px;
-}
-
-#notifs-list div.sev-warning {
-	background-color: #FFEEAA;
-}
-
-#notifs-list div.sev-error {
-	background-color: #DE8787;
-}
-
-#notifs-list div.seen {
-	background-color: lightgrey;
-}
-
 .ourfield {
 	background-color: #FFB380;
 }
@@ -849,15 +814,82 @@ input {
 	color: black;
 	border-radius: 6px;
 }
+
 .message p, ul {
 	margin-bottom: 10px;
 }
 
-@media only screen and (max-width:720px) {
+#notifs-grid {
+	display: grid;
+	grid-template-columns: repeat(3, 1fr);
+	grid-gap: 10px;
+}
+
+#notifs-list-controls {
+	display: inline-block;
+	overflow: auto;
+	margin-top: 32px;
+	margin-left: 10px;
+	margin-right: 10px;
+	grid-column: 2;
+	border-radius: 5px;
+	padding: 3px;
+	background-color: #FFEEAA;
+}
+
+#global-selector {
+	width: auto;
+}
+
+.control-btn {
+	float: right;
+	visibility: hidden;
+}
+
+#notifs-list {
+	grid-column: 2;
+}
+
+div.notif {
+	padding: 5px;
+	margin: 10px;
+	word-break: break-word;
+	background-color: #87DE87;
+	border-radius: 5px;
+}
+
+div.notif p {
+	text-align: center;
+	padding: 3px;
+}
+
+
+div.notif input {
+	width: auto;
+}
+
+div.notif button {
+	float: right;
+}
+
+div.sev-warning {
+	background-color: #FFEEAA;
+}
+
+div.sev-error {
+	background-color: #DE8787;
+}
+
+div.seen {
+	background-color: lightgrey;
+}
+
+@media only screen and (max-width: 720px) {
 	.bigtab td {
 		width: 244px;
 		min-width: 244px;
 	}
+
 	.message {
 		width: 340px;
 	}