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

author: Wojtek Kosior <koszko@koszko.org> 2021-08-30 11:54:47 +0200
committer: Wojtek Kosior <koszko@koszko.org> 2021-08-30 11:54:47 +0200
commit: 544c6df3ab1e331c6b6779b76ad33180a06b0b4d (patch)
tree: 07d3eff9fbe6fa89b1414353afadc7ff37457392 /html/options.html
parent: a43c3fe265bc7462fa4715e7e26d221826935c14 (diff)
download: browser-extension-544c6df3ab1e331c6b6779b76ad33180a06b0b4d.tar.gz
browser-extension-544c6df3ab1e331c6b6779b76ad33180a06b0b4d.zip
1 files changed, 328 insertions, 135 deletions
diff --git a/html/options.html b/html/options.html
index e7dc3aa..e0c3c23 100644
--- a/html/options.html
+++ b/html/options.html
@@ -1,7 +1,6 @@
 <!doctype html>
 <!--
     Copyright (C) 2021 Wojtek Kosior
-    Copyright (C) 2021 Nicholas Johnson
     Redistribution terms are gathered in the `copyright' file.
   -->
 <html>
@@ -11,23 +10,11 @@
     <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 */
@@ -38,20 +25,41 @@
 	  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 */
@@ -61,7 +69,7 @@
 	  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;
@@ -69,8 +77,130 @@
       }
 
       .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 {
@@ -80,24 +210,28 @@
   </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 -->
@@ -105,98 +239,150 @@
     <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>
@@ -204,13 +390,20 @@
 
     <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>
author	Wojtek Kosior <koszko@koszko.org>	2021-08-30 11:54:47 +0200
committer	Wojtek Kosior <koszko@koszko.org>	2021-08-30 11:54:47 +0200
commit	544c6df3ab1e331c6b6779b76ad33180a06b0b4d (patch)
tree	07d3eff9fbe6fa89b1414353afadc7ff37457392 /html/options.html
parent	a43c3fe265bc7462fa4715e7e26d221826935c14 (diff)
download	browser-extension-544c6df3ab1e331c6b6779b76ad33180a06b0b4d.tar.gz browser-extension-544c6df3ab1e331c6b6779b76ad33180a06b0b4d.zip