Replaced buttons' temporary text with icons

Sankeyfactory · Aug 17, 2024 · 874bd1a · 874bd1a
1 parent 4f6a364
commit 874bd1a
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 5 deletions.
diff --git a/dist/index.html b/dist/index.html
@@ -25,16 +25,35 @@
                 <p id="ratio-display">Zoom: 1.0x</p>
             </div>
             <div class="row">
-                <div class="button" id="create-node">Create</div>
-                <div class="button" id="lock-viewport">Lock</div>
+                <div class="button" id="create-node">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+                        <path
+                            d="M440-440H240q-17 0-28.5-11.5T200-480q0-17 11.5-28.5T240-520h200v-200q0-17 11.5-28.5T480-760q17 0 28.5 11.5T520-720v200h200q17 0 28.5 11.5T760-480q0 17-11.5 28.5T720-440H520v200q0 17-11.5 28.5T480-200q-17 0-28.5-11.5T440-240v-200Z" />
+                    </svg>
+                </div>
+                <div class="button" id="lock-viewport">
+                    <svg class="unlocked" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+                        <path
+                            d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h360v-80q0-50-35-85t-85-35q-42 0-73.5 25.5T364-751q-4 14-16.5 22.5T320-720q-17 0-28.5-11t-8.5-26q14-69 69-116t128-47q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM240-160v-400 400Z" />
+                    </svg>
+                    <svg class="locked hidden" xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+                        <path
+                            d="M240-80q-33 0-56.5-23.5T160-160v-400q0-33 23.5-56.5T240-640h40v-80q0-83 58.5-141.5T480-920q83 0 141.5 58.5T680-720v80h40q33 0 56.5 23.5T800-560v400q0 33-23.5 56.5T720-80H240Zm0-80h480v-400H240v400Zm240-120q33 0 56.5-23.5T560-360q0-33-23.5-56.5T480-440q-33 0-56.5 23.5T400-360q0 33 23.5 56.5T480-280ZM360-640h240v-80q0-50-35-85t-85-35q-50 0-85 35t-35 85v80ZM240-160v-400 400Z" />
+                    </svg>
+                </div>
             </div>
         </div>
 
         <div class="dimming hidden" id="node-creation-container">
             <div id="node-creation-modal">
                 <div class="title-row">
                     <h2 class="title">Select a recipe</h2>
-                    <div class="close" id="node-creation-close">X</div>
+                    <div class="close" id="node-creation-close">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960">
+                            <path
+                                d="M480-424 284-228q-11 11-28 11t-28-11q-11-11-11-28t11-28l196-196-196-196q-11-11-11-28t11-28q11-11 28-11t28 11l196 196 196-196q11-11 28-11t28 11q11 11 11 28t-11 28L536-480l196 196q11 11 11 28t-11 28q-11 11-28 11t-28-11L480-424Z" />
+                        </svg>
+                    </div>
                 </div>
                 <div class="columns">
                     <div class="content">

diff --git a/dist/style.css b/dist/style.css
@@ -211,6 +211,16 @@ div.controls {
     border-radius: 999px;
 }
 
+.controls .button svg {
+    width: 32px;
+    height: auto;
+    fill: var(--foreground);
+}
+
+.controls .button:hover svg {
+    fill: var(--foreground-accent);
+}
+
 .controls .zoom-controls p#ratio-display {
     margin: 0;
 }
@@ -285,6 +295,16 @@ div#node-creation-modal {
     font-weight: 500;
 }
 
+#node-creation-modal .title-row .close svg {
+    width: 28px;
+    height: auto;
+    fill: var(--foreground);
+}
+
+#node-creation-modal .title-row .close:hover svg {
+    fill: var(--foreground-accent);
+}
+
 #node-creation-modal .title-row div.close:hover {
     color: var(--foreground-accent);
 

diff --git a/src/main.ts b/src/main.ts
@@ -57,20 +57,26 @@ async function main()
 
     let isLocked: boolean = false;
     let lockButton = document.querySelector("div.button#lock-viewport") as HTMLDivElement;
+    let unlockedIcon = document.querySelector("div.button#lock-viewport>svg.unlocked") as SVGElement;
+    let lockedIcon = document.querySelector("div.button#lock-viewport>svg.locked") as SVGElement;
 
     lockButton.onclick = () =>
     {
         if (isLocked)
         {
             panContext.resume();
             isLocked = false;
-            lockButton.innerText = "Lock";
+
+            unlockedIcon.classList.remove("hidden");
+            lockedIcon.classList.add("hidden");
         }
         else
         {
             panContext.pause();
             isLocked = true;
-            lockButton.innerText = "Unlock";
+
+            unlockedIcon.classList.add("hidden");
+            lockedIcon.classList.remove("hidden");
         }
     };