diff options
Diffstat (limited to 'html')
| -rw-r--r-- | html/base.css | 18 | ||||
| -rw-r--r-- | html/item_list.html | 12 | ||||
| -rw-r--r-- | html/item_list.js | 6 | ||||
| -rw-r--r-- | html/item_preview.html | 4 | ||||
| -rw-r--r-- | html/payload_create.html | 8 | ||||
| -rw-r--r-- | html/settings.html | 152 | ||||
| -rw-r--r-- | html/settings.js | 125 | ||||
| -rw-r--r-- | html/text_entry_list.html | 37 |
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> |