mustard: notifs: Aggiunto bottone per invertire la selezione.

* web/mustard/notifs.php: Aggiunto footer di instances.php, bottone e
  funzione JS per invertire la selezione e alcuni side effects.
* web/mustard/theme.css: Aggiunte regole per i controlli nel footer.

web/mustard/notifs.php

@@ -106,8 +106,26 @@ if ($filtordon) {
         <!--
         <?php if ($account['Level'] != 'guest') require('js/notifs.js.php'); ?>
 
+        function reverseSelection() {
+            let checkboxes = Array.from(document.querySelectorAll("div.notif > input.seen-checkbox"));
+            checkboxes.forEach(function (box) {
+                box.checked = !box.checked;
+            })
+            let n_selected = getSelectedNotifs().length;
+            if (n_selected > 0) {
+                setBtnsVisibility("visible");
+            } else if (n_selected === 0) {
+                setBtnsVisibility("hidden");
+                document.getElementById("global-selector").checked = false;
+            }
+            if (n_selected === checkboxes.length) {
+                document.getElementById("global-selector").checked = true;
+            }
+        }
+
         function setBtnsVisibility(state) {
-            let btns = document.querySelectorAll("#notifs-list-controls .control-btn");
+            let controls = document.querySelector("#notifs-list-controls");
+            let btns = Array(controls.querySelector("#read-btn"), controls.querySelector("#delete-btn"));
             btns.forEach(function (btn) {
                 btn.style.visibility = state;
             });
@@ -158,16 +176,6 @@ if ($filtordon) {
 <?php echo($notifs['div']); ?>
 
 <div id="notifs-grid">
-    <div id="notifs-list-controls">
-        <input id="global-selector" type="checkbox" onclick="toggleState(this)">
-        <button class="control-btn" onclick="readSelected()">
-            <i class="fa fa-envelope-open-o" aria-hidden="true"></i>
-        </button>
-        <button class="control-btn" onclick="deleteSelected()">
-            <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') {
@@ -191,6 +199,20 @@ if ($filtordon) {
         } ?>
     </div>
 
+    <div id="footer">
+        <div id="notifs-list-controls">
+            <input id="global-selector" type="checkbox" onclick="toggleState(this)">
+            <button id='reverse-btn' type='button' class="control-btn" onclick="reverseSelection()">
+                Inverti selezione
+            </button>
+            <button id='read-btn' type='button' class="control-btn" onclick="readSelected()">
+                <i class="fa fa-envelope-open-o" aria-hidden="true"></i>
+            </button>
+            <button id='delete-btn' type='button' class="control-btn" onclick="deleteSelected()">
+                <i class="fa fa-trash-o" aria-hidden="true"></i>
+            </button>
+        </div>
+    </div>
 </div>
 </body>
 </html>

web/mustard/theme.css

@@ -823,29 +823,46 @@ input {
 	display: grid;
 	grid-template-columns: repeat(3, 1fr);
 	grid-gap: 10px;
+	margin-top: 32px;
 }
 
 #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;
+	position: absolute;
+	left: 50%;
+	transform: translateX(-50%);
+	margin-top: 5px;
 }
 
 #global-selector {
 	width: auto;
+	margin: 2px 1px 2px 2px;
 }
 
 .control-btn {
+	margin-top: 2px;
+	margin-bottom: 2px;
+}
+
+#read-btn {
+	margin-left: 1px;
+	margin-right: 2px;
+	float: right;
+	visibility: hidden;
+}
+
+#delete-btn {
+	margin-left: 1px;
+	margin-right: 1px;
 	float: right;
 	visibility: hidden;
 }
 
+#reverse-btn {
+	margin-left: 1px;
+	margin-right: 1px;
+}
+
 #notifs-list {
 	grid-column: 2;
 }
@@ -860,10 +877,10 @@ div.notif {
 
 div.notif p {
 	text-align: center;
+	margin: 2px;
 	padding: 3px;
 }
 
-
 div.notif input {
 	width: auto;
 }