/ - Diff - Haketilo - Hydrilla issue tracker

« Previous | Next »

Revision 544c6df3

Added by koszko about 2 years ago

ID 544c6df3ab1e331c6b6779b76ad33180a06b0b4d
Parent a43c3fe2
Child 453ba039

add styling for options page\n\nThis does not include styling for contents of the import popup

      * Redistribution terms are gathered in the `copyright' file.
      */
     html {
         font-family: sans-serif;
+    }
     textarea {
         font-family: monospace;
+    }
     input[type="checkbox"], input[type="radio"], .hide {
         display: none;
+    }
-...
         display: inline-block;
         padding: 6px 12px;
         margin: 2px 0px;
         -moz-user-select: none;
         user-select: none;
+    }
     button.slimbutton, .button.slimbutton {
-...
     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);
+    }
     aside {
         background: #3f8dc6;
         margin: 5px 0;
         padding: 0.3em 1em;
         border-radius: 3px;
         color: #fff;
+    }
     textarea: {
         resize: none;
+    }

     <!doctype html>
     <!--
         Copyright (C) 2021 Wojtek Kosior
         Copyright (C) 2021 Nicholas Johnson
         Redistribution terms are gathered in the `copyright' file.
       -->
     <html>
-...
         <link type="text/css" rel="stylesheet" href="reset.css" />
         <link type="text/css" rel="stylesheet" href="base.css" />
         <style>
           /* pages list */
           #page_components_ul {
     	  max-height: 80vh;
     	  overflow-y: auto;
+          }
           #page_components_ul li.dragover_li {
     	  border-top: 2px solid blue;
+          }
           #page_components_ul li {
     	  border-top: 2px solid white;
+          }
           li[draggable=true] * {
     	  pointer-events: none;
+          }
           li[draggable=true] label,
           li[draggable=true] button {
     	  pointer-events: auto;
           body {
     	  background-color: #f0f0f0;
     	  color: #555;
     	  overflow: auto;
     	  width: 100%;
+          }
           /* tabbed view */
-...
     	  display: none;
+          }
           #show_repos:checked ~ #repos_lbl,
           #show_pages:checked ~ #pages_lbl,
           #show_bags:checked ~ #bags_lbl,
           #show_scripts:checked ~ #scripts_lbl {
           #show_repos:checked ~ div #repos_lbl,
           #show_pages:checked ~ div #pages_lbl,
           #show_bags:checked ~ div #bags_lbl,
           #show_scripts:checked ~ div #scripts_lbl {
     	  background: #4CAF50;
               color: white;
+          }
           body > div {
     	  border-top: 6px solid #4CAF50;
           #tab_heads>* {
     	  font-size: 130%;
     	  padding: 10px;
     	  display: inline-block;
     	  -moz-user-select: none;
     	  user-select: none;
+          }
           .tab_head {
     	  display: inline-block;
           #import_but {
     	  font: unset;
     	  font-size: 130%;
     	  float: right;
     	  margin: 0;
     	  border-radius: 0;
+          }
           #tab_heads::after {
     	  display: block;
     	  height: 8px;
     	  content: "";
     	  background: linear-gradient(#555, transparent);
+          }
           div.tab {
     	  min-width: 50vw;
     	  width: fit-content;
     	  padding-left: 6px;
+          }
           /* popup window with list of selectable components */
-...
     	  height: 100vh;
     	  left: 0;
     	  top: 0;
     	  background-color: rgba(0,0,0,0.4);
     	  background-color: rgba(60,60,60,0.4);
     	  z-index: 1;
     	  overflow: auto;
     	  vertical-align: center;
-...
+          }
           .popup_frame {
     	  background-color: white;
     	  width: 50vw;
     	  background-color: #f0f0f0;
     	  margin: 5vh auto;
     	  padding: 15px;
     	  border: solid #333 4px;
     	  border-radius: 15px;
     	  width: -moz-fit-content;
     	  width: fit-content;
+          }
           div.ul_container {
     	  background-color: #f0f0f0;
     	  width: -moz-fit-content;
     	  width: fit-content;
     	  margin: 6px 0;
+          }
           div.ul_container::after, div.ul_container::before {
     	  display: block;
     	  height: 6px;
     	  content: "";
     	  background: linear-gradient(transparent, #555);
+          }
           div.ul_container::after {
     	  background: linear-gradient(#555, transparent);
+          }
           .work_li div.ul_container::before {
     	  background: linear-gradient(#e0f0f0, #555);
+          }
           .work_li div.ul_container::after {
     	  background: linear-gradient(#555, #e0f0f0);
+          }
           div.ul_container>.always_scrollbar{
     	  border-left: solid #454 8px;
     	  max-height: 80vh;
     	  overflow-y: scroll;
+          }
           div.ul_container table {
     	  border-collapse: unset;
+          }
           div.ul_container, div.ul_container>*, div.ul_container table>tbody {
     	  width: -moz-min-content;
     	  width: min-content;
+          }
           div.ul_container div.ul_container>.always_scrollbar,
           .popup_frame div.ul_container>.always_scrollbar {
     	  max-height: 60vh;
+          }
           .popup_frame div.ul_container table {
     	  min-width: 30vw;
+          }
           .popup_frame div.ul_container {
     	  margin: 0 auto;
+          }
           tr:nth-child(odd) {
     	  background-color: #e5e5e5;
+          }
           td {
     	  vertical-align: middle;
     	  min-width: fit-content;
     	  min-width: -moz-fit-content;
     	  width: 1%;
+          }
           tr>td:first-child {
     	  padding: 3px 10px 6px;
     	  max-width: 70vw;
     	  overflow: hidden;
     	  width: 100%;
     	  white-space: nowrap;
+          }
           tr.work_li>td:first-child {
     	  padding-right: 0;
     	  max-width: unset;
+          }
           tr.work_li>td>div {
     	  background-color: #e0f0f0;
     	  border-left: solid #454 5px;
     	  border-right: solid #454 2px;
     	  padding: 5px 10px;
+          }
           .form_grid {
     	  display: grid;
     	  grid-template-columns: auto auto;
+          }
           .form_grid>label {
     	  grid-column: 1 / span 1;
     	  margin-right: 10px;
+          }
           .form_grid label {
     	  line-height: 34px; /* center text vertically */
+          }
           .form_grid>input, .form_grid>span {
     	  grid-column: 2 / span 1;
+          }
           .form_grid>label[for="script_contents_field"],
           .form_grid>* {
     	  grid-column: 1 / span 2;
+          }
           .form_grid>textarea {
     	  min-width: 70vw;
     	  resize: none;
+          }
           td>div.button {
     	  margin-right: 4px;
+          }
           input[type="radio"]:not(:checked)+.import_window_content {
-...
       </head>
       <body>
         <template>
           <li id="item_li">
     	<span></span>
     	<button> Edit </button>
     	<button> Remove </button>
     	<button> Export </button>
           </li>
           <li id="bag_component_li">
     	<span></span>
     	<button> Remove </button>
           </li>
           <li id="chbx_component_li">
     	<input type="checkbox" style="display: inline;"></input>
     	<span></span>
           </li>
           <li id="radio_component_li">
     	<input type="radio" style="display: inline;" name="page_components"></input>
     	<span></span>
           </li>
           <tr id="item_li">
     	<td></td>
     	<td><div class="button"> Edit </div></td>
     	<td><div class="button"> Remove </div></td>
     	<td><div class="button"> Export </div></td>
           </tr>
           <tr id="bag_component_li">
     	<td></td>
     	<td><div class="button"> Remove </div></td>
           </tr>
           <tr id="chbx_component_li">
     	<td>
     	  <input type="checkbox" style="display: inline;"></input>
     	  <span></span>
     	</td>
           </tr>
           <tr id="radio_component_li">
     	<td>
     	  <input type="radio" style="display: inline;" name="page_components"></input>
     	  <span></span>
     	</td>
           </tr>
         </template>
         <!-- Mind the show_*s ids below - their format is assumed in js code -->
-...
         <input type="radio" name="tabs" id="show_pages" checked></input>
         <input type="radio" name="tabs" id="show_bags"></input>
         <input type="radio" name="tabs" id="show_scripts"></input>
         <label for="show_repos" id="repos_lbl"
     	   class="tab_head"> Repos </label>
         <label for="show_pages" id="pages_lbl"
     	   class="tab_head"> Pages </label>
         <label for="show_bags" id="bags_lbl"
     	   class="tab_head"> Bags </label>
         <label for="show_scripts" id="scripts_lbl"
     	   class="tab_head"> Scripts </label>
         <div id="repos">
           <ul id="repos_ul">
     	<li id="work_repo_li" class="hide">
     	  <label for="repo_url_field">URL: </label>
     	  <input id="repo_url_field"></input>
     	  <br/>
     	  <button id="save_repo_but" type="button"> Save </button>
     	  <button id="discard_repo_but" type="button"> Cancel </button>
     	</li>
           </ul>
         <div id="tab_heads">
           <label for="show_repos" id="repos_lbl"> Repos </label>
           <label for="show_pages" id="pages_lbl"> Pages </label>
           <label for="show_bags" id="bags_lbl"> Bags </label>
           <label for="show_scripts" id="scripts_lbl"> Scripts </label>
           <button id="import_but" style="margin-left: 40px;"> Import </button>
         </div>
         <div id="repos" class="tab">
           <div class="ul_container">
     	<div>
     	  <table>
     	    <tbody id="repos_ul">
     	      <tr id="work_repo_li" class="hide work_li">
     		<td colspan="4">
     		  <div class="form_grid">
     		    <label for="repo_url_field">URL: </label>
     		    <input id="repo_url_field"></input>
     		    <div>
     		      <button id="save_repo_but" type="button"> Save </button>
     		      <button id="discard_repo_but" type="button"> Cancel </button>
     		    </div>
     		  </div>
     		</td>
     	      </tr>
     	    </tbody>
     	  </table>
     	</div>
           </div>
           <button id="add_repo_but" type="button"> Add repository </button>
         </div>
         <div id="pages">
           <ul id="pages_ul">
     	<li id="work_page_li" class="hide">
     	  <label for="page_url_field">URL: </label>
     	  <input id="page_url_field"></input>
     	  <br/>
     	  <label>Payload: </label>
     	  <span id="page_payload"></span>
     	  <button id="select_page_components_but">
     	    Choose payload
     	  </button>
     	  <br/>
     	  <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input>
     	  <label for="page_allow_chbx">Allow native scripts</label>
     	  <br/>
     	  <button id="save_page_but" type="button"> Save </button>
     	  <button id="discard_page_but" type="button"> Cancel </button>
     	</li>
           </ul>
         <div id="pages" class="tab">
           <div class="ul_container">
     	<div>
     	  <table>
     	    <tbody id="pages_ul">
     	      <tr id="work_page_li" class="hide work_li">
     		<td colspan="4">
     		  <div class="form_grid">
     		    <label for="page_url_field">URL: </label>
     		    <input id="page_url_field"></input>
     		    <label>Payload: </label>
     		    <span>
     		      <span id="page_payload"></span>
     		      <button id="select_page_components_but">
     			Choose payload
     		      </button>
     		    </span>
     		    <div>
     		      <input id="page_allow_chbx" type="checkbox" style="display: inline;"></input>
     		      <label for="page_allow_chbx">Allow native scripts</label>
     		    </div>
     		    <div>
     		      <button id="save_page_but" type="button"> Save </button>
     		      <button id="discard_page_but" type="button"> Cancel </button>
     		    </div>
     		  </div>
     		</td>
     	      </tr>
     	    </tbody>
     	  </table>
     	</div>
           </div>
           <button id="add_page_but" type="button"> Add page </button>
         </div>
         <div id="bags">
           <ul id="bags_ul">
     	<li id="work_bag_li" class="hide">
     	  <label for="bag_name_field"> Name: </label>
     	  <input id="bag_name_field"></input>
     	  <ul id="bag_components_ul">
     	    <li id="empty_bag_component_li" class="hide"></li>
     	  </ul>
     	  <button id="select_bag_components_but">
     	    Add scripts
     	  </button>
     	  <br/>
     	  <button id="save_bag_but"> Save </button>
     	  <button id="discard_bag_but"> Cancel </button>
     	</li>
           </ul>
         <div id="bags" class="tab">
           <div class="ul_container">
     	<div>
     	  <table>
     	    <tbody id="bags_ul">
     	      <tr id="work_bag_li" class="hide work_li">
     		<td colspan="4">
     		  <div class="form_grid">
     		    <label for="bag_name_field"> Name: </label>
     		    <input id="bag_name_field"></input>
     		    <div class="ul_container">
     		      <div>
     			<table>
     			  <tbody id="bag_components_ul">
     			    <tr id="empty_bag_component_li" class="hide"></tr>
     			  </tbody>
     			</table>
     		      </div>
     		    </div>
     		    <div>
     		      <button id="select_bag_components_but">
     			Add scripts
     		      </button>
     		    </div>
     		    <div>
     		      <button id="save_bag_but"> Save </button>
     		      <button id="discard_bag_but"> Cancel </button>
     		    </div>
     		  </div>
     		</td>
     	      </tr>
     	    </tbody>
     	  </table>
     	</div>
           </div>
           <button id="add_bag_but" type="button"> Add bag </button>
         </div>
         <div id="scripts">
           <ul id="scripts_ul">
     	<li id="work_script_li" class="hide">
     	  <label for="script_name_field"> Name: </label>
     	  <input id="script_name_field"></input>
     	  <br/>
     	  <label for="script_url_field"> URL: </label>
     	  <input id="script_url_field"></input>
     	  <br/>
     	  <label for="script_sha256_field"> sha256: </label>
     	  <input id="script_sha256_field"></input>
     	  <br/>
     	  <label for="script_contents_field"> contents: </label>
     	  <textarea id="script_contents_field" rows="20" cols="80"></textarea>
     	  <br/>
     	  <button id="save_script_but"> Save </button>
     	  <button id="discard_script_but"> Cancel </button>
     	</li>
           </ul>
         <div id="scripts" class="tab">
           <div class="ul_container">
     	<div>
     	  <table>
     	    <tbody id="scripts_ul">
     	      <tr id="work_script_li" class="hide work_li">
     		<td colspan="4">
     		  <div class="form_grid">
     		    <label for="script_name_field"> Name: </label>
     		    <input id="script_name_field"></input>
     		    <label for="script_url_field"> URL: </label>
     		    <input id="script_url_field"></input>
     		    <label for="script_sha256_field"> SHA256: </label>
     		    <input id="script_sha256_field"></input>
     		    <aside>
     		      Note: URL and SHA256 are ignored if script text is provided.
     		    </aside>
     		    <label for="script_contents_field"> contents: </label>
     		    <textarea id="script_contents_field" rows="20" cols="80"></textarea>
     		    <div>
     		      <button id="save_script_but"> Save </button>
     		      <button id="discard_script_but"> Cancel </button>
     		    </div>
     		  </div>
     		</td>
     	      </tr>
     	    </tbody>
     	  </table>
     	</div>
           </div>
           <button id="add_script_but" type="button"> Add script </button>
         </div>
         <button id="import_but" style="margin-top: 40px;"> Import </button>
         <div id="chbx_components_window" class="hide popup" position="absolute">
           <div class="popup_frame">
     	<ul id="chbx_components_ul">
     	</ul>
     	<div class="ul_container">
     	  <div>
     	    <table>
     	      <tbody id="chbx_components_ul">
     	      </tbody>
     	    </table>
     	  </div>
     	</div>
     	<button id="commit_bag_components_but"> Add </button>
     	<button id="cancel_bag_components_but"> Cancel </button>
           </div>
-...
         <div id="radio_components_window" class="hide popup" position="absolute">
           <div class="popup_frame">
     	<ul id="radio_components_ul">
     	  <li id="radio_component_none_li">
     	    <input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input>
     	    <span>(None)</span>
     	  </li>
     	</ul>
     	<div class="ul_container">
     	  <div class="always_scrollbar">
     	    <table>
     	      <tbody id="radio_components_ul">
     		<tr id="radio_component_none_li">
     		  <td>
     		    <input id="radio_component_none_input" type="radio" style="display: inline;" name="page_components"></input>
     		    <span>(None)</span>
     		  </td>
     		</tr>
     	      </tbody>
     	    </table>
     	  </div>
     	</div>
     	<button id="commit_page_components_but"> Choose </button>
     	<button id="cancel_page_components_but"> Cancel </button>
           </div>

     chbx_component_li_template.removeAttribute("id");
     radio_component_li_template.removeAttribute("id");
     function list_set_scrollbar(list_elem)
+    {
         const op = ((list_elem.children.length === 1 &&
     		 list_elem.children[0].classList.contains("hide")) ||
     		list_elem.children.length < 1) ? "remove" : "add";
         list_elem.parentElement.parentElement.classList[op]("always_scrollbar");
+    }
     function item_li_id(prefix, item)
+    {
         return `li_${prefix}_${item}`;
-...
     		continue;
     	    ul.ul.insertBefore(li, element);
     	    return;
     	    break;
+    	}
+        }
         if (!li.parentElement)
     	ul.ul.appendChild(li);
         ul.ul.appendChild(li);
         list_set_scrollbar(ul.ul);
+    }
     const chbx_components_ul = by_id("chbx_components_ul");
-...
         li.setAttribute("data-prefix", prefix);
         li.setAttribute("data-name", name);
         let chbx = li.firstElementChild;
         let chbx = li.firstElementChild.firstElementChild;
         let span = chbx.nextElementSibling;
         span.textContent = nice_name(prefix, name);
         chbx_components_ul.appendChild(li);
         list_set_scrollbar(chbx_components_ul);
+    }
     var radio_component_none_li = by_id("radio_component_none_li");
-...
         li.setAttribute("data-prefix", prefix);
         li.setAttribute("data-name", name);
         let radio = li.firstElementChild;
         let radio = li.firstElementChild.firstElementChild;
         let span = radio.nextElementSibling;
         span.textContent = nice_name(prefix, name);
         radio_components_ul.insertBefore(li, radio_component_none_li);
         radio_component_none_li.before(li);
         list_set_scrollbar(radio_components_ul);
+    }
     /* Used to reset edited repo. */
-...
     const empty_bag_component_li = by_id("empty_bag_component_li");
     var bag_components_ul = by_id("bag_components_ul");
     function remove_bag_component_entry(entry)
+    {
         const list = entry.parentElement;
         entry.remove();
         list_set_scrollbar(list);
+    }
     /* Used to construct and update components list of edited bag. */
     function add_bag_components(components)
+    {
-...
     	let li = bag_component_li_template.cloneNode(true);
     	li.setAttribute("data-prefix", prefix);
     	li.setAttribute("data-name", name);
     	let span = li.firstElementChild;
     	span.textContent = nice_name(prefix, name);
     	let remove_but = span.nextElementSibling;
     	remove_but.addEventListener("click", () =>
     				    bag_components_ul.removeChild(li));
     	remove_but.addEventListener("click",
     				    () => remove_bag_component_entry(li));
     	bag_components_ul.appendChild(li);
+        }
         bag_components_ul.appendChild(empty_bag_component_li);
         list_set_scrollbar(bag_components_ul);
+    }
     /* Used to reset edited bag. */
-...
         let old_components_ul = bag_components_ul;
         bag_components_ul = old_components_ul.cloneNode(false);
         ul.work_li.insertBefore(bag_components_ul, old_components_ul);
         ul.work_li.removeChild(old_components_ul);
         old_components_ul.replaceWith(bag_components_ul);
         add_bag_components(components);
+    }
-...
     /* Used to get edited bag data for saving. */
     function work_bag_li_data(ul)
+    {
         let components_ul = ul.work_name_input.nextElementSibling;
         let component_li = components_ul.firstElementChild;
         let component_li = bag_components_ul.firstElementChild;
         let components = [];
-...
+        }
         ul.work_li.classList.add("hide");
         ul.ul.append(ul.work_li);
         list_set_scrollbar(ul.ul);
         ul.state = UL_STATE.IDLE;
+    }
-...
         ul.ul.insertBefore(ul.work_li, li);
         ul.ul.removeChild(li);
         ul.work_li.classList.remove("hide");
         list_set_scrollbar(ul.ul);
         ul.state = UL_STATE.EDITING_ENTRY;
         ul.edited_item = item;
-...
         ul.reset_work_li(ul);
         ul.work_li.classList.remove("hide");
         ul.ul.appendChild(ul.work_li);
         list_set_scrollbar(ul.ul);
         if (name !== undefined)
     	ul.work_name_input.value = name;
-...
         radio_components_window.classList.add("hide");
         for (let li of chbx_components_ul.children) {
     	let chbx = li.firstElementChild;
     	let chbx = li.firstElementChild.firstElementChild;
     	chbx.checked = false;
+        }
+    }
-...
         let selected = [];
         for (let li of chbx_components_ul.children) {
     	let chbx = li.firstElementChild;
     	let chbx = li.firstElementChild.firstElementChild;
     	if (!chbx.checked)
     	    continue;
-...
         let [prefix, item] = components;
         let li = by_id(radio_li_id(prefix, item));
         if (li === null)
     	radio_component_none_input.checked = false;
         else
     	li.firstElementChild.checked = true;
     	li.firstElementChild.firstElementChild.checked = true;
+    }
     function commit_page_components()
-...
         let components = null;
         for (let li of radio_components_ul.children) {
     	let radio = li.firstElementChild;
     	let radio = li.firstElementChild.firstElementChild;
     	if (!radio.checked)
     	    continue;
-...
         for (let [components_ul, id_creator] of uls_creators) {
     	let li = by_id(id_creator(change.prefix, change.item));
     	components_ul.removeChild(li);
     	list_set_scrollbar(components_ul);
+        }
+    }

Also available in: Unified diff

Project

General

Profile

Haketilo

Revision 544c6df3

Added by koszko about 2 years ago