Add run button (#9)

* add button * make run button work * ux clarity
pastagang · Jan 1, 2025 · 14b26fe · 14b26fe
1 parent 8d411b8
commit 14b26fe
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 4 deletions.
diff --git a/index.html b/index.html
@@ -15,6 +15,7 @@
             <option value="strudel">strudel</option>
             <option value="hydra">hydra</option>
           </select>
+          <button class="run">▶ Run</button>
         </header>
         <div class="editor"></div>
       </div>
@@ -24,6 +25,7 @@
             <option value="strudel">strudel</option>
             <option value="hydra">hydra</option>
           </select>
+          <button class="run">▶ Run</button>
         </header>
         <div class="editor"></div>
       </div>
@@ -33,6 +35,7 @@
             <option value="strudel">strudel</option>
             <option value="hydra">hydra</option>
           </select>
+          <button class="run">▶ Run</button>
         </header>
         <div class="editor"></div>
       </div>
@@ -42,6 +45,7 @@
             <option value="strudel">strudel</option>
             <option value="hydra">hydra</option>
           </select>
+          <button class="run">▶ Run</button>
         </header>
         <div class="editor"></div>
       </div>
@@ -51,6 +55,7 @@
             <option value="strudel">strudel</option>
             <option value="hydra">hydra</option>
           </select>
+          <button class="run">▶ Run</button>
         </header>
         <div class="editor"></div>
       </div>
@@ -60,6 +65,7 @@
             <option value="strudel">strudel</option>
             <option value="hydra">hydra</option>
           </select>
+          <button class="run">▶ Run</button>
         </header>
         <div class="editor"></div>
       </div>
@@ -69,6 +75,7 @@
             <option value="strudel">strudel</option>
             <option value="hydra">hydra</option>
           </select>
+          <button class="run">▶ Run</button>
         </header>
         <div class="editor"></div>
       </div>
@@ -78,6 +85,7 @@
             <option value="strudel">strudel</option>
             <option value="hydra">hydra</option>
           </select>
+          <button class="run">▶ Run</button>
         </header>
         <div class="editor"></div>
       </div>

diff --git a/src/main.js b/src/main.js
@@ -79,6 +79,11 @@ const createEditor = (doc) => {
   doc.session.on(`change-target:${doc.id}`, () => {
     targetEl.value = doc.target;
   });
+
+  const runButton = document.querySelector(`#slot-${doc.id} .run`);
+  runButton.addEventListener("click", () => {
+    doc.evaluate(doc.content);
+  });
 };
 
 const handleEvalHydra = (msg) => {

diff --git a/src/style.css b/src/style.css
@@ -62,15 +62,17 @@ body {
 
 .slot header {
   background-color: black;
-  padding: 3px;
-  padding-top: 6px;
+  padding: 6px 0px;
+  padding-right: 6px;
+  display: flex;
+  gap: 6px;
 }
 select {
   width: fit-content;
   background-color: #111;
   border: none;
   color: white;
-  font-size: 18px;
+  font-size: 16px;
   outline: 2px solid white;
   outline-offset: -2px;
   padding: 4px;
@@ -83,7 +85,24 @@ select:hover {
   background-color: #333;
   border-right: 5px solid #333;
 }
-select:focus {
+select:focus,
+button:focus {
   outline: 3px solid rgb(0, 100, 255);
   border-radius: 4px;
 }
+/* same as select basically */
+button {
+  background-color: #111;
+  border: none;
+  color: white;
+  font-size: 16px;
+  border: 2px solid white;
+  padding: 4px;
+  cursor: pointer;
+  height: 30px;
+  flex-shrink: 0;
+}
+
+button:hover {
+  background-color: #333;
+}