From 8af64ddef16ed0bcb86ef84b4b7bd669f10150c1 Mon Sep 17 00:00:00 2001 From: idk Date: Wed, 24 Mar 2021 14:09:07 -0400 Subject: [PATCH] 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. --- apps/susidns/src/js/messages.js | 99 +++++++++++++++++++++++ apps/susidns/src/jsp/addressbook.jsp | 31 +++---- apps/susidns/src/jsp/details.jsp | 4 +- apps/susidns/src/themes/light/susidns.css | 33 +++++--- 4 files changed, 141 insertions(+), 26 deletions(-) diff --git a/apps/susidns/src/js/messages.js b/apps/susidns/src/js/messages.js index 713620066..740d8c970 100644 --- 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 */ diff --git a/apps/susidns/src/jsp/addressbook.jsp b/apps/susidns/src/jsp/addressbook.jsp index 4883cfd66..ac73f455c 100644 --- a/apps/susidns/src/jsp/addressbook.jsp +++ b/apps/susidns/src/jsp/addressbook.jsp @@ -74,15 +74,8 @@
-

<%=intl._t("Address book")%>: <%=intl._t(book.getBook())%>

-

<%=intl._t("Storage")%>: ${book.displayName}

-
- -
${book.messages}<% - if (importMessages != null) { - %><%=importMessages%><% - } -%>
+

<%=intl._t("Address book")%>: <%=intl._t(book.getBook())%>

+

<%=intl._t("Storage")%>: ${book.displayName}

${book.loadBookMessages} @@ -102,6 +95,14 @@ ${book.loadBookMessages} <% } /* book.getEntries().length() > 0 */ %> + + +
${book.messages}<% + if (importMessages != null) { + %><%=importMessages%><% + } +%>
+
<%=intl._t("Current filter")%>: ${book.filter} @@ -239,8 +240,8 @@ ${book.loadBookMessages}
-

<%=intl._t("Add new destination")%>

- +

<%=intl._t("Add new destination")%>

+
@@ -250,7 +251,7 @@ ${book.loadBookMessages}
<%=intl._t("Hostname")%>
-

+

" > " > <% if (!book.getBook().equals("published")) { %> @@ -268,14 +269,14 @@ ${book.loadBookMessages}

-

<%=intl._t("Import from hosts.txt file")%>

- +

<%=intl._t("Import from hosts.txt file")%>

+
<%=intl._t("File")%>
-

+

" > " >

diff --git a/apps/susidns/src/jsp/details.jsp b/apps/susidns/src/jsp/details.jsp index e50b93d59..027cc0f2f 100644 --- a/apps/susidns/src/jsp/details.jsp +++ b/apps/susidns/src/jsp/details.jsp @@ -49,9 +49,9 @@ <%=intl._t("Configuration")%>
-
+

<%=intl._t("Address book")%>: <%=intl._t(book.getBook())%>

-

<%=intl._t("Storage")%>: ${book.displayName}

+

<%=intl._t("Storage")%>: ${book.displayName}

<% diff --git a/apps/susidns/src/themes/light/susidns.css b/apps/susidns/src/themes/light/susidns.css index 064ff686a..7274b9ee4 100644 --- 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),