Style and script changes to addressbook:

Make tables drop-down items in javascript-enabled browsers. The rules are: no javascript, all tables start expanded. This is the default. If javascript is enabled and the addressbook is empty, expand the "Add new host" section by default. If javascript is enabled and the addressbook is not empty, then collapse all sections but leave the headings visible. Improvements to addressbook CSS for consistency with rest of light theme. Add drop-down arrows to headings on drop-downable sections.
2021-03-24 14:09:07 -04:00
parent 5f39426073
commit 8af64ddef1
4 changed files with 141 additions and 26 deletions
--- a/apps/susidns/src/js/messages.js
+++ b/apps/susidns/src/js/messages.js
@@ -16,8 +16,107 @@ function HideMessages() {
  }
 }

+function ToggleStoragePathView() {
+  var storagePathView = document.getElementById("storagepath");
+  if (storagePathView != null) {
+    storagePathView.classList.toggle("invisible");
+  }
+  clickableHeadline = document.getElementById("addrtitle");
+  if (clickableHeadline != null) {
+    clickableHeadline.classList.toggle("expanded");
+  }
+
+}
+
+function ToggleAddFormTableView() {
+  var buttonView = document.getElementById("addnewaddrbutton");
+  if (buttonView != null) {
+    buttonView.classList.toggle("invisible");
+  }
+  var tableView = document.getElementById("addnewaddrtable");
+  if (tableView != null) {
+    tableView.classList.toggle("invisible");
+  }
+  clickableForm = document.getElementById("addnewaddr");
+  if (clickableForm != null) {
+    clickableForm.classList.toggle("expanded");
+  }
+}
+
+function ToggleImportFormTableView() {
+  var buttonView = document.getElementById("importhostsform");
+  if (buttonView != null) {
+    buttonView.classList.toggle("invisible");
+  }
+  var tableView = document.getElementById("importhostsbuttons");
+  if (tableView != null) {
+    tableView.classList.toggle("invisible");
+  }
+  clickableForm2 = document.getElementById("importhosts");
+  if (clickableForm2 != null) {
+    clickableForm2.classList.toggle("expanded");
+  }
+}
+
+function initClickables() {
+
+  /*Hide the storage path by default, show it if someone clicks on the header*/
+  var storagePathView = document.getElementById("storagepath");
+  if (storagePathView != null) {
+    storagePathView.classList.add("invisible");
+  }
+  clickableHeadline = document.getElementById("addrtitle");
+  if (clickableHeadline != null) {
+    clickableHeadline.addEventListener('click', ToggleStoragePathView, true);
+  }
+
+  /*If the hostname field is empty, hide the add host form and show it when
+  the user clicks on the form header.*/
+  var d = document.getElementById("emptybook");
+  if (d == null) {
+    var x = document.getElementsByName("hostname");
+    var i;
+    for (i = 0; i < x.length; i++) {
+      if (x[i].value == "") {
+        var buttonView = document.getElementById("addnewaddrbutton");
+        if (buttonView != null) {
+          buttonView.classList.add("invisible");
+        }
+        var tableView = document.getElementById("addnewaddrtable");
+        if (tableView != null) {
+          tableView.classList.add("invisible");
+        }
+      }
+    }
+    clickableForm = document.getElementById("addnewaddr");
+    if (clickableForm != null) {
+      clickableForm.addEventListener('click', ToggleAddFormTableView, true);
+    }
+  }else{
+    clickableForm = document.getElementById("addnewaddr");
+    if (clickableForm != null) {
+      clickableForm.classList.toggle("expanded");
+    }
+  }
+
+  /* Set up the Import Hosts form to be collapsible.*/
+  var ibuttonView = document.getElementById("importhostsform");
+  if (ibuttonView != null) {
+    ibuttonView.classList.add("invisible");
+  }
+  var itableView = document.getElementById("importhostsbuttons");
+  if (itableView != null) {
+    itableView.classList.add("invisible");
+  }
+  clickableForm2 = document.getElementById("importhosts");
+  if (clickableForm2 != null) {
+    clickableForm2.addEventListener('click', ToggleImportFormTableView, true);
+  }
+}
+
 document.addEventListener("DOMContentLoaded", function() {
    document.body.addEventListener('click', HideMessages, true);
+    initClickables();
 }, true);

 /* @license-end */
--- a/apps/susidns/src/jsp/addressbook.jsp
+++ b/apps/susidns/src/jsp/addressbook.jsp
@@ -74,15 +74,8 @@
 </div>
 <hr>
 <div class="headline" id="addressbook">
-<h3><%=intl._t("Address book")%>: <%=intl._t(book.getBook())%></h3>
-<h4><%=intl._t("Storage")%>: ${book.displayName}</h4>
-</div>
-
-<div id="messages">${book.messages}<%
-   if (importMessages != null) {
-       %><%=importMessages%><%
-   }
-%></div>
+<h3 id="addrtitle"><%=intl._t("Address book")%>: <%=intl._t(book.getBook())%></h3>
+<h4 id="storagepath"><%=intl._t("Storage")%>: ${book.displayName}</h4>

 ${book.loadBookMessages}

@@ -102,6 +95,14 @@ ${book.loadBookMessages}
 </form>
 <% } /* book.getEntries().length() > 0 */ %>

+</div>
+
+<div id="messages">${book.messages}<%
+   if (importMessages != null) {
+       %><%=importMessages%><%
+   }
+%></div>
+
 <div id="filter">
 <c:if test="${book.hasFilter}">
 <span><%=intl._t("Current filter")%>: <b>${book.filter}</b>
@@ -239,8 +240,8 @@ ${book.loadBookMessages}
 <input type="hidden" name="begin" value="0">
 <input type="hidden" name="end" value="49">
 <div id="add">
-<h3><%=intl._t("Add new destination")%></h3>
-<table>
+<h3 id="addnewaddr" ><%=intl._t("Add new destination")%></h3>
+<table id="addnewaddrtable">
 <tr>
 <td><b><%=intl._t("Hostname")%></b></td>
 <td><input type="text" name="hostname" value="${book.hostname}" size="54"></td>
@@ -250,7 +251,7 @@ ${book.loadBookMessages}
 <td><input type="text" name="destination" value="${book.destination}" size="70"></td>
 </tr>
 </table>
-<p class="buttons">
+<p class="buttons" id="addnewaddrbutton">
 <input class="cancel" type="reset" value="<%=intl._t("Cancel")%>" >
 <input class="accept" type="submit" name="action" value="<%=intl._t("Replace")%>" >
 <% if (!book.getBook().equals("published")) { %>
@@ -268,14 +269,14 @@ ${book.loadBookMessages}
 <input type="hidden" name="begin" value="0">
 <input type="hidden" name="end" value="49">
 <div id="import">
-<h3><%=intl._t("Import from hosts.txt file")%></h3>
-<table>
+<h3 id="importhosts"><%=intl._t("Import from hosts.txt file")%></h3>
+<table id="importhostsform">
 <tr>
 <td><b><%=intl._t("File")%></b></td>
 <td><input name="file" type="file" accept=".txt" value="" /></td>
 </tr>
 </table>
-<p class="buttons">
+<p class="buttons" id="importhostsbuttons">
 <input class="cancel" type="reset" value="<%=intl._t("Cancel")%>" >
 <input class="download" type="submit" name="action" value="<%=intl._t("Import")%>" >
 </p>
--- a/apps/susidns/src/jsp/details.jsp
+++ b/apps/susidns/src/jsp/details.jsp
@@ -49,9 +49,9 @@
 <a id="config" href="config"><%=intl._t("Configuration")%></a>
 </div>
 <hr>
-<div class="headline">
+<div class="headline" id="addressbook">
 <h3><%=intl._t("Address book")%>: <%=intl._t(book.getBook())%></h3>
-<h4><%=intl._t("Storage")%>: ${book.displayName}</h4>
+<h4 id="storagepath"><%=intl._t("Storage")%>: ${book.displayName}</h4>
 </div>
 <div id="book">
 <%
--- a/apps/susidns/src/themes/light/susidns.css
+++ b/apps/susidns/src/themes/light/susidns.css
@@ -119,6 +119,12 @@ object {
     border: 1px solid #dee2e6;
     transition: ease border 0.7s
 }
+
+.invisible {
+     visibility: hidden;
+     display: none;
+}
+
 .headline {
     border: 1px solid #dee2e6;
     margin: -1px 0 -2px;
@@ -144,13 +150,13 @@ h3 {
 .headline h3 {
     font-size: 11.5pt !important;
     background: url(../images/addressbook.png) 6px center no-repeat #fcfcff;
-     background: url(../images/addressbook.png) 6px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%);
+     /*background: url(../images/addressbook.png) 6px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%);*/
     background-size: 22px 22px, 100% 100%, 100% 100%;
 }

 .headline#subscriptions h3 {
     background: url(../images/subs_24.png) 6px center no-repeat #fcfcff;
-     background: url(../images/subs_24.png) 6px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%);
+     /*background: url(../images/subs_24.png) 6px center no-repeat, linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%);*/
     background-size: 22px 22px, 100% 100%, 100% 100%;
 }

@@ -161,7 +167,7 @@ h3 {
 }

 .headline#subscriptions h3, .headline#configure h3, .headline#addressbook h3, .headline h3 {
-     margin: -8px -5px -5px;
+     /*margin: -8px -5px -5px;*/
     padding: 9px 5px 8px 32px;
     text-transform: capitalize;
 }
@@ -286,10 +292,21 @@ div.help {

 div.help h3, #add h3, #import h3 {
     border: 1px solid #dee2e6;
-     padding: 5px 10px;
+     padding: 5px 32px;
     margin: -1px -16px 0;
-     background: #fcfcff;
-     background: linear-gradient(to bottom, #fcfcff 50%, rgba(255,255,255,0.6) 50%, rgba(240,240,255,0.4)), linear-gradient(135deg, #fcfcff 5%, rgba(231, 231, 255, 0.8) 15%);
+     background: url(/themes/console/light/images/dropdown.png) #f8f8ff;
+     background-repeat: no-repeat !important;
+     background-position: .5%, 15% !important;
+}
+
+.expanded {
+     background: url(/themes/console/light/images/dropdown_active.png) #f8f8ff !important;
+     background-repeat: no-repeat !important;
+     background-position: .5%, 15% !important;
+}
+
+#addrtitle.expanded {
+     background: url(../images/addressbook.png) 6px center no-repeat #fcfcff !important;
 }

 p#help {
@@ -623,7 +640,6 @@ textarea[name="config"]:focus, textarea[name="content"]:focus {
     min-width: 300px;
     margin: -1px 10%;
     box-shadow: inset 0 0 0 1px #fff;
-     background: linear-gradient(to bottom, #fcfcff 50%, #eef 50%);
 }

 #filter span a {
@@ -663,7 +679,6 @@ form {
 }

 th {
-     background: linear-gradient(to bottom, #fcfcff 50%, #eef 50%);
     font-size: 9pt;
 }

@@ -1391,7 +1406,7 @@ td.destinations textarea {
 }

 input.export {
-     margin-top: 8px;
+     margin-top: -6px;
 }

 #host_list th:nth-child(2), #host_list td:nth-child(2),