add settings page with styling

8 files changed, 345 insertions, 17 deletions

diff --git a/html/base.css b/html/base.css
index e5e4660..4575b10 100644
--- a/html/base.css
+++ b/html/base.css
@@ -41,6 +41,7 @@ body {
 h1, h2, h3 {
     margin: 0.3em;
     text-shadow: 0 0 0 #454;
+    text-align: center;
 }
 
 h2 {
@@ -61,7 +62,7 @@ li:first-child {
 }
 
 .hide {
-    display: none;
+    display: none !important;
 }
 
 button {
@@ -79,6 +80,19 @@ button {
     font: 400 0.9em sans-serif;
 }
 
-button:hover, .button:hover {
+button:hover {
     box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
 }
+
+body {
+    --line-height: 0.4em;
+}
+
+div.bottom_line {
+    height: var(--line-height);
+    background: linear-gradient(#555, transparent);
+}
+div.top_line {
+    height: var(--line-height);
+    background: linear-gradient(transparent, #555);
+}
diff --git a/html/item_list.html b/html/item_list.html
index 4e23868..cae783a 100644
--- a/html/item_list.html
+++ b/html/item_list.html
@@ -41,9 +41,16 @@
 #LOADCSS html/base.css
 #LOADCSS html/grid.css
 <style>
+  .item_list, .preview_scroll_box {
+      overflow-y: auto;
+      padding-top: 0.4em;
+      height: calc(var(--content-height) - 0.4em);
+  }
   .item_list {
       overflow-y: scroll;
+      min-width: 7em;
   }
+
   .item_list>li {
       cursor: pointer;
       padding: 0.15em 0.3em;
@@ -73,8 +80,9 @@
 <template>
   <div id="item_list" data-template="main_div" class="grid_2 list_main_view">
     <ul data-template="ul" class="item_list"></ul>
-    <div>
-      <div data-template="preview_container" class="hide">
+    <div class="preview_scroll_box">
+      <div data-template="preview_container"
+	   class="hide item_preview_container">
 	<!-- preview div will be dynamically inserted here -->
 	<div class="list_buttons">
 	  <button data-template="remove_but">Remove</button>
diff --git a/html/item_list.js b/html/item_list.js
index 198e0f9..51950d5 100644
--- a/html/item_list.js
+++ b/html/item_list.js
@@ -94,7 +94,7 @@ function item_cmp(def1, def2)
 	coll.compare(def1.identifier, def2.identifier);
 }
 
-function find_item_idx(definition)
+function find_item_idx(list_ctx, definition)
 {
     /* Perform a binary search of item's (new or not) index in sorted array. */
     let left = 0, right = list_ctx.items.length;
@@ -115,7 +115,7 @@ function item_changed(list_ctx, change)
     /* Remove item. */
     const old_item = list_ctx.by_identifier.get(change.key);
     if (old_item !== undefined) {
-	list_ctx.items.splice(find_item_idx(old_item.definition), 1);
+	list_ctx.items.splice(find_item_idx(list_ctx, old_item.definition), 1);
 	list_ctx.by_identifier.delete(change.key);
 	old_item.li.remove();
 
@@ -129,7 +129,7 @@ function item_changed(list_ctx, change)
 	return;
 
     const new_item = insert_item(list_ctx, change.new_val,
-				 find_item_idx(change.new_val));
+				 find_item_idx(list_ctx, change.new_val));
     if (list_ctx.previewed_item === old_item)
 	preview_item(list_ctx, new_item, true);
 }
diff --git a/html/item_preview.html b/html/item_preview.html
index 160c01d..c631f37 100644
--- a/html/item_preview.html
+++ b/html/item_preview.html
@@ -39,7 +39,7 @@
 #LOADCSS html/grid.css
 <style>
   .preview_main_div {
-      margin: 0.8em 0.8em;
+      margin: 1.3em 0.8em 1em 0.8em;
   }
 </style>
 <template>
@@ -78,7 +78,7 @@
     <span data-template="version" class="grid_col_2">...</span>
     <label class="grid_col_1">description:</label>
     <span data-template="description" class="grid_col_2">...</span>
-    <label class="grid_col_both">payloads:</label>
+    <label class="grid_col_1">payloads:</label>
     <div data-template="payloads" class="grid_col_both grid_2"></div>
     <label class="grid_col_1">source name:</label>
     <span data-template="source_name" class="grid_col_2">...</span>
diff --git a/html/payload_create.html b/html/payload_create.html
index 44fa4e2..0a5577e 100644
--- a/html/payload_create.html
+++ b/html/payload_create.html
@@ -40,8 +40,13 @@
 #LOADCSS html/base.css
 #LOADCSS html/grid.css
 <style>
+  .payload_create_main_view {
+      overflow-y:auto;
+      height: var(--content-height);
+  }
   .payload_create_form {
       margin: 0 0.6em;
+      padding-top: 1em;
   }
   .payload_create_form>* {
       margin: 0.3em 0;
@@ -54,7 +59,7 @@
       height: 18em;
       font-family: monospace;
   }
-  .payload_create_buts, .payload_create_heading {
+  .payload_create_buts {
       text-align: center;
       margin: 0.5em 0;
   }
@@ -64,7 +69,6 @@
        class="payload_create_main_view">
     <div data-template="form_container">
       <div class="grid_1 payload_create_form">
-	<h3 class="payload_create_heading">Create payload</h3>
 	<span>
 	  <label>identifier*</label>
 	  (may only contain digits 0-9, lowercase letters a-z and hyphens '-';
diff --git a/html/settings.html b/html/settings.html
new file mode 100644
index 0000000..0bba5e3
--- /dev/null
+++ b/html/settings.html
@@ -0,0 +1,152 @@
+<!DOCTYPE html>
+<!--
+    SPDX-License-Identifier: GPL-3.0-or-later OR CC-BY-SA-4.0
+
+    Haketilo's settings page
+
+    This file is part of Haketilo.
+
+    Copyright (C) 2022 Wojtek Kosior <koszko@koszko.org>
+
+    File is dual-licensed. You can choose either GPLv3+, CC BY-SA or both.
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+    I, Wojtek Kosior, thereby promise not to sue for violation of this file's
+    licenses. Although I request that you do not make use of this code in a
+    proprietary program, I am not going to enforce this in court.
+  -->
+<html>
+  <head>
+    <meta charset="utf-8"/>
+    <title>Haketilo options</title>
+#LOADCSS html/reset.css
+#LOADCSS html/base.css
+#LOADCSS html/table.css
+#LOADCSS html/grid.css
+    <style>
+      /* Style top menu items. */
+      #tab_heads>* {
+	  background-color: #70AF70;
+	  font-size: 115%;
+	  padding: 0.6em;
+	  display: inline-block;
+	  cursor: pointer;
+	  margin: 0.25em 0 0 0;
+      }
+      body {
+	  /* 0.25em margin + 1em height + 2*0.6em padding, multiple font size */
+	  --heading-height: calc(2.45em * 1.15);
+	  --tab-content-height: calc(100vh - var(--heading-height));
+      }
+      #tab_heads>:hover {
+	  box-shadow: 0 6px 8px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+      }
+      #tab_heads>.active_head {
+	  background-color: #65A065;
+	  color: #222;
+	  box-shadow: none;
+	  cursor: default;
+      }
+
+      /* Style the top menu itself. */
+      #tab_heads {
+	  -moz-user-select: none;
+	  user-select: none;
+	  background-color: #e0e0e0;
+      }
+      #top_menu_line {
+	  position: absolute;
+	  width: 100vw;
+	  z-index: 1;
+      }
+
+      /* Style content */
+      body {
+	  --content-max-width: 1000px;
+	  height: 100vh;
+	  overflow-x: hidden;
+	  overflow-y: hidden;
+      }
+      div.tab {
+	  display: none;
+      }
+      div.tab.active_tab {
+	  display: block;
+      }
+
+      /* Style the Script blocking and Repositories tabs. */
+      #blocking_list_container, #allowing_list_container,
+      #default_policy_dialog, #blocking_dialog_container,
+      #repos_list_container, #repos_dialog_container {
+	  padding: 0.8em 0.4em 0.4em 0.4em;
+      }
+      #default_policy_dialog {
+	  text-align: center;
+      }
+      #blocking_editable_container, #blocking_dialog_container,
+      #repos_list_container, #repos_dialog_container {
+	  max-width: var(--content-max-width);
+	  margin: 0 auto;
+      }
+      #blocking_editable_container {
+	  /* Leave space for default policy dialog and headings. */
+	  --content-height: calc(var(--tab-content-height) - 3em);
+      }
+      
+      /* Pass height information to html in all tabs. */
+      .tab {
+	  --content-height: var(--tab-content-height);
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Those contain just templates, we can include them at the top -->
+#INCLUDE html/dialog.html
+#INCLUDE html/item_list.html
+#INCLUDE html/item_preview.html
+#INCLUDE html/text_entry_list.html
+#INCLUDE html/payload_create.html
+    <ul id="tab_heads" class="has_bottom_line">
+      <li id="blocking_head"> Blocking </li>
+      <li id="mappings_head"> Mappings </li>
+      <li id="resources_head"> Resources </li>
+      <li id="new_payload_head" class="active_head"> New payload </li>
+      <li id="repos_head"> Repositories </li>
+    </ul>
+    <div id="top_menu_line" class="bottom_line"></div>
+    <div id="blocking_tab" class="tab">
+      <div id="blocking_editable_container" class="grid_2">
+	<div id="blocking_list_container">
+	  <h3>Block scripts on</h3>
+	</div>
+	<div id="allowing_list_container">
+	  <h3>Allow scripts on</h3>
+	</div>
+	<div id="default_policy_dialog" class="grid_col_both">
+#INCLUDE html/default_blocking_policy.html
+	</div>
+      </div>
+      <div id="blocking_dialog_container" class="hide"></div>
+    </div>
+    <div id="mappings_tab" class="tab"></div>
+    <div id="resources_tab" class="tab"></div>
+    <div id="new_payload_tab" class="tab active_tab"></div>
+    <div id="repos_tab" class="tab">
+      <div id="repos_list_container"></div>
+      <div id="repos_dialog_container" class="hide"></div>
+    </div>
+#LOADJS html/settings.js
+  </body>
+</html>
diff --git a/html/settings.js b/html/settings.js
new file mode 100644
index 0000000..36eeb47
--- /dev/null
+++ b/html/settings.js
@@ -0,0 +1,125 @@
+/**
+ * This file is part of Haketilo.
+ *
+ * Function: Driving Haketilo's settings page.
+ *
+ * Copyright (C) 2022 Wojtek Kosior
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * As additional permission under GNU GPL version 3 section 7, you
+ * may distribute forms of that code without the copy of the GNU
+ * GPL normally required by section 4, provided you include this
+ * license notice and, in case of non-source distribution, a URL
+ * through which recipients can access the Corresponding Source.
+ * If you modify file(s) with this exception, you may extend this
+ * exception to your version of the file(s), but you are not
+ * obligated to do so. If you do not wish to do so, delete this
+ * exception statement from your version.
+ *
+ * As a special exception to the GPL, any HTML file which merely
+ * makes function calls to this code, and for that purpose
+ * includes it by reference shall be deemed a separate work for
+ * copyright law purposes. If you modify this code, you may extend
+ * this exception to your version of the code, but you are not
+ * obligated to do so. If you do not wish to do so, delete this
+ * exception statement from your version.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ *
+ * I, Wojtek Kosior, thereby promise not to sue for violation of this file's
+ * license. Although I request that you do not make use of this code in a
+ * proprietary program, I am not going to enforce this in court.
+ */
+
+#IMPORT html/dialog.js
+
+#FROM html/DOM_helpers.js     IMPORT by_id
+#FROM html/text_entry_list.js IMPORT blocking_allowing_lists, repo_list
+#FROM html/item_list.js       IMPORT mapping_list, resource_list
+#FROM html/payload_create.js  IMPORT payload_create_form
+
+let tab_names = ["blocking", "mappings", "resources", "new_payload", "repos"];
+let current_tab_name = "new_payload";
+
+const [tabs, heads] = [{}, {}];
+
+for (const tab_name of tab_names) {
+    tabs[tab_name] = by_id(`${tab_name}_tab`);
+    heads[tab_name] = by_id(`${tab_name}_head`);
+}
+
+function switch_to_tab(target_tab_name) {
+    if (current_tab_name == target_tab_name)
+	return;
+
+    tabs[current_tab_name].classList.remove("active_tab");
+    heads[current_tab_name].classList.remove("active_head");
+
+    current_tab_name = target_tab_name;
+    tabs[current_tab_name].classList.add("active_tab");
+    heads[current_tab_name].classList.add("active_head");
+}
+
+for (const [tab_name, head] of Object.entries(heads))
+    head.addEventListener("click", () => switch_to_tab(tab_name));
+
+async function set_up_blocking_tab() {
+    const containers = ["editable", "dialog"]
+	  .map(n => by_id(`blocking_${n}_container`));
+
+    function show_container(idx) {
+	containers[idx].classList.remove("hide");
+	containers[1 - idx].classList.add("hide");
+    }
+
+    const dialog_ctx = dialog.make(...[1, 0].map(n => () => show_container(n)));
+    containers[1].append(dialog_ctx.main_div);
+
+    const [blocking_list, allowing_list] =
+	  await blocking_allowing_lists(dialog_ctx);
+
+    by_id("blocking_list_container").append(blocking_list.main_div);
+    by_id("allowing_list_container").append(allowing_list.main_div);
+}
+
+async function set_up_mappings_tab() {
+    tabs["mappings"].append((await mapping_list()).main_div);
+}
+
+async function set_up_resources_tab() {
+    tabs["resources"].append((await resource_list()).main_div);
+}
+
+function set_up_new_payload_tab() {
+    tabs["new_payload"].append(payload_create_form().main_div);
+}
+
+async function set_up_repos_tab() {
+    const containers = ["list", "dialog"]
+	  .map(n => by_id(`repos_${n}_container`));
+
+    function show_container(idx) {
+	containers[idx].classList.remove("hide");
+	containers[1 - idx].classList.add("hide");
+    }
+
+    const dialog_ctx = dialog.make(...[1, 0].map(n => () => show_container(n)));
+    containers[1].append(dialog_ctx.main_div);
+    containers[0].append((await repo_list(dialog_ctx)).main_div);
+}
+
+set_up_blocking_tab();
+set_up_mappings_tab();
+set_up_resources_tab();
+set_up_new_payload_tab();
+set_up_repos_tab();
diff --git a/html/text_entry_list.html b/html/text_entry_list.html
index 21e1604..77be5cb 100644
--- a/html/text_entry_list.html
+++ b/html/text_entry_list.html
@@ -40,17 +40,41 @@
 #LOADCSS html/grid.css
 <style>
   .text_entry {
-      height: 3em;
-      padding: 0 0.5em;
+      padding: 0.1em 0.2em;
+  }
+  .text_entry button {
+      margin: 0.1em 0 0.1em 0.2em;
+  }
+  .text_entry_editable, .text_entry_noneditable {
+      display: grid;
+      grid-template-columns: 1fr auto auto;
+  }
+  .text_entry_noneditable {
+      grid-template-columns: 1fr auto;
+  }
+
+  .text_entries {
+      min-height: 3em;
+      background: #cfcfcf;
+      overflow-y: scroll;
+      min-width: 10em;
+      margin: 0.2em 0;
+      height: calc(var(--content-height) - 5em);
+  }
+  .text_entries>:nth-child(2n) {
+      background-color:#dadada;
+  }
+  .text_entries span {
+      padding: 0.4em;
   }
 </style>
 <template>
-  <div id="text_entry" data-template="main_div">
-    <div data-template="noneditable_view">
+  <div id="text_entry" data-template="main_div" class="text_entry">
+    <div data-template="noneditable_view" class="text_entry_noneditable">
       <span data-template="text"></span>
       <button data-template="remove_but">Remove</button>
     </div>
-    <div data-template="editable_view" class="hide">
+    <div data-template="editable_view" class="hide text_entry_editable">
       <input data-template="input">
       <button data-template="add_but" class="hide">Add</button>
       <button data-template="save_but">Save</button>
@@ -58,7 +82,8 @@
     </div>
   </div>
   <div id="text_entry_list" data-template="main_div" class="grid_1">
-    <div data-template="list_div" class="grid_1"></div>
+    <div data-template="list_div" class="text_entries">
+    </div>
     <button data-template="new_but">New</button>
   </div>
 </template>