chore: more styling, js and html structure

nobkd · nobkd · commit 4753840ce6d9 · 2023-04-19T17:20:26.000+02:00
diff --git a/src/options.html b/src/options.html
@@ -6,29 +6,22 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
         <meta name="color-scheme" content="dark light" />
         <link rel="stylesheet" href="/styles/options.css" />
-        <!--<script src="" type="module"></script>-->
+        <script src="/options/options.ts" type="module"></script>
         <title>Replace Maps Options</title>
     </head>
     <body>
-        <form action="">
-            <input
-                type="text"
-                pattern="^\S+\.[^\s\.]+$"
-                placeholder="Hostname following the schema: ((sub.)sub.)domain.tld"
-                name="hostname"
-                id="hostname"
-                required />
-            <input type="submit" value="Disable" />
-        </form>
-        <div id="table">
-            <div>
-                <p>a</p>
-                <p>b</p>
-            </div>
-            <div>b</div>
-            <div>c</div>
-            <div>d</div>
-            <div>e</div>
-        </div>
+        <section class="form">
+            <form action="">
+                <input
+                    type="text"
+                    pattern="^\S+\.[^\s\.]+$"
+                    placeholder="Hostname following the schema: (sub.)domain.tld"
+                    name="hostname"
+                    id="hostname"
+                    required />
+                <input type="submit" value="Disable" />
+            </form>
+        </section>
+        <section class="table"></section>
     </body>
 </html>
diff --git a/src/options/options.ts b/src/options/options.ts
@@ -0,0 +1,21 @@
+import { disabledHosts, invertHostState } from '../bg/utils/storage';
+
+const table = document.querySelector('.table');
+
+function tableEntries() {
+    const tableItems: HTMLDivElement[] = disabledHosts.map(createEntry);
+    tableItems.forEach((div) => table?.insertAdjacentElement('beforeend', div));
+}
+
+function createEntry(entryText: string, index: number): HTMLDivElement {
+    const div = document.createElement('div');
+    div.innerHTML = `<span>${entryText}</span><button onclick="removeEntry(${index})"></button>`;
+    return div;
+}
+
+// TODO: function shouldn't be removed (because 'unused')
+function removeEntry(index: number) {
+    invertHostState(disabledHosts[index]).then(() => document.location.reload());
+}
+
+tableEntries();
diff --git a/src/styles/options.css b/src/styles/options.css
@@ -8,17 +8,17 @@ body {
     --text: black;
     --bg: white;
 
-    --table-even: lightgrey;
-    --table-odd: lightslategrey;
+    --table-even: #e3e2eb;
+    --table-odd: #c3c2cb;
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
         --text: #ccc;
         --bg: #1c1b22;
 
-        --table-even: grey;
-        --table-odd: slategrey;
+        --table-even: #53525b;
+        --table-odd: #33323b;
     }
 }
 
@@ -32,13 +32,13 @@ body {
     gap: 0.5rem;
 }
 
-body > * {
+body > section {
     padding: 0.5rem;
     gap: 0.25rem;
     display: grid;
 }
 
-#table > * {
+.table > * {
     display: flex;
     align-items: center;
     justify-content: space-between;
@@ -47,14 +47,30 @@ body > * {
     padding: 0.5rem 1rem;
 }
 
-#table > :nth-child(even) {
+.table > :nth-child(even) {
     background-color: var(--table-even);
 }
 
-#table > :nth-child(odd) {
+.table > :nth-child(odd) {
     background-color: var(--table-odd);
 }
 
+.table button {
+    width: 2rem;
+    height: 2rem;
+}
+
+.table button::before {
+    content: 'rm';
+}
+
+.form {
+    position: sticky;
+    top: 0;
+    background-color: var(--bg);
+    box-shadow: var(--text) 0 0 0.25rem;
+}
+
 form {
     display: flex;
     box-sizing: border-box;
