feat(ui): add wrapper around tool setting content

EGRrqq · Feb 6, 2024 · 04caf66 · 04caf66
1 parent 7be29b9
commit 04caf66
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 38 deletions.
diff --git a/src/index.html b/src/index.html
@@ -1,29 +1,31 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Little Notes</title>
-  </head>
-
-  <body>
-    <canvas-dropdown isopen="false">
-      <span slot="dropdown__btn-text">M</span>
-
-      <button id="menu__open" slot="dropdown__section-el">open</button>
-      <button id="menu__save" slot="dropdown__section-el">save to</button>
-      <hr class="menu__divider" slot="dropdown__section-el" />
-      <button id="menu__clear" slot="dropdown__section-el">clear canvas</button>
-    </canvas-dropdown>
-
-    <canvas-dropdown id="settings-dropdown" isopen="false">
-      <span slot="dropdown__btn-text">S</span>
-
-      <input slot="dropdown__section-el" type="color" />
-      <input slot="dropdown__section-el" type="range" />
-
-      <div slot="dropdown__section-el">
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Little Notes</title>
+</head>
+
+<body>
+  <canvas-dropdown isopen="false">
+    <span slot="dropdown__btn-text">M</span>
+
+    <button id="menu__open" slot="dropdown__section-el">open</button>
+    <button id="menu__save" slot="dropdown__section-el">save to</button>
+    <hr class="menu__divider" slot="dropdown__section-el" />
+    <button id="menu__clear" slot="dropdown__section-el">clear canvas</button>
+  </canvas-dropdown>
+
+  <canvas-dropdown id="settings-dropdown" isopen="false">
+    <span slot="dropdown__btn-text">S</span>
+
+    <div class="dropdown__section-wrapper" slot="dropdown__section-el">
+      <input type="color" />
+      <input type="range" />
+
+      <div>
         <label for="line-cap">line cap:</label>
         <select name="line-cap" id="line-cap">
           <option value="butt">Butt</option>
@@ -32,27 +34,31 @@
         </select>
       </div>
 
-      <div slot="dropdown__section-el">
+      <div>
         <label for="line-join">line join:</label>
         <select name="line-join" id="line-join">
           <option value="bevel">Bevel</option>
           <option value="miter">Miter</option>
           <option value="round">Round</option>
         </select>
       </div>
-    </canvas-dropdown>
+    </div>
+  </canvas-dropdown>
+
+  <template id="dropdown">
+    <button id="dropdown__btn">
+      <slot name="dropdown__btn-text">toggle btn</slot>
+    </button>
+
+    <section id="dropdown__section">
+      <slot name="dropdown__section-el"></slot>
+    </section>
 
-    <template id="dropdown">
-      <button id="dropdown__btn">
-        <slot name="dropdown__btn-text">toggle btn</slot>
-      </button>
+    <slot name="bruh" id="gruh"></slot>
+  </template>
 
-      <section id="dropdown__section">
-        <slot name="dropdown__section-el"></slot>
-      </section>
-    </template>
+  <canvas id="board"></canvas>
+  <script type="module" src="/index.ts"></script>
+</body>
 
-    <canvas id="board"></canvas>
-    <script type="module" src="/index.ts"></script>
-  </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -45,7 +45,7 @@ button:hover {
   bottom: 0;
 }
 
-#tool-settings-dropdown {
+.dropdown__section-wrapper {
   display: grid;
   gap: 1rem;