update sketch icon for mobile

terrastruct · Sep 4, 2024 · 54f54dc · 54f54dc
1 parent ca83aca
commit 54f54dc
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 5 deletions.
diff --git a/src/assets/.DS_Store b/src/assets/.DS_Store
diff --git a/src/assets/icons/sketch.svg b/src/assets/icons/sketch.svg
diff --git a/src/css/main.css b/src/css/main.css
@@ -36,6 +36,8 @@
   --blue-400: #6b8afb;
   --blue-500: #4a6ff3;
   --blue-600: #234cda;
+  --blue-600-filter: brightness(0) saturate(100%) invert(21%) sepia(100%) saturate(3335%)
+    hue-rotate(227deg) brightness(88%) contrast(94%);
   --alert-100: #ffcfd8;
   --alert-200: #ff8096;
   --alert-300: #f35471;

diff --git a/src/css/responsive.css b/src/css/responsive.css
@@ -21,8 +21,26 @@
     display: none;
   }
   #sketch {
+    display: none;
+  }
+  #sketch-mobile {
+    display: flex !important;
     flex-direction: column;
-    gap: 2px;
+    align-items: center;
+    padding: 0.4rem;
+    border-radius: 4px;
+  }
+  #sketch-mobile-icon {
+    margin-top: 2px;
+  }
+  .sketch-mobile-activated {
+    background: var(--blue-050);
+    #sketch-mobile-icon {
+      filter: var(--blue-600-filter);
+    }
+  }
+  #download-cli {
+    display: none;
   }
   #zoom-container {
     display: none;

diff --git a/src/index.html b/src/index.html
@@ -87,6 +87,7 @@
         >
         <a
           class="nav-menu-item"
+          id="download-cli"
           target="_blank"
           href="https://github.com/terrastruct/d2#install"
         >
@@ -215,6 +216,9 @@
                     </label>
                   </div>
                 </div>
+                <div id="sketch-mobile" style="display: none">
+                  <img id="sketch-mobile-icon" src="assets/icons/sketch.svg" class="btn-icon" />
+                </div>
               </div>
               <div id="render-toolbar-right" class="workstation-toolbar-right">
                 <div id="export" class="btn-menu-container">
@@ -330,7 +334,7 @@
           </a>
         </div>
         <div class="footer-vertical-divider">|</div>
-        <div class="footer-bottom-content">&copy; 2023 Terrastruct, Inc.</div>
+        <div class="footer-bottom-content">&copy; 2024 Terrastruct, Inc.</div>
       </div>
     </div>
     <script src="js/vendor/panzoom.js"></script>

diff --git a/src/js/modules/sketch.js b/src/js/modules/sketch.js
@@ -4,7 +4,9 @@ import QueryParams from "../lib/queryparams";
 
 function init() {
   readQueryParam();
-  document.getElementById("sketch-checkbox").addEventListener("change", toggleSketch);
+  document.getElementById("sketch-checkbox").addEventListener("change", (e) => toggleSketch(e.target.checked));
+  document.getElementById("sketch-mobile-icon").addEventListener("click", () => toggleSketch(QueryParams.get("sketch") === "0"));
+  updateMobileIcon(QueryParams.get("sketch") === "1");
 }
 
 function readQueryParam() {
@@ -24,9 +26,9 @@ function readQueryParam() {
   }
 }
 
-function toggleSketch(e) {
+function toggleSketch(on) {
   const icon = document.getElementById("sketch-toggle-icon");
-  if (e.target.checked) {
+  if (on) {
     icon.src = "assets/icons/toggle_check.svg";
     QueryParams.set("sketch", "1");
   } else {
@@ -36,6 +38,18 @@ function toggleSketch(e) {
   if (Editor.getDiagramSVG()) {
     Editor.compile();
   }
+
+  updateMobileIcon(on);
+}
+
+function updateMobileIcon(on) {
+  const icon = document.getElementById("sketch-mobile");
+
+  if (on) {
+    icon.classList.add("sketch-mobile-activated");
+  } else {
+    icon.classList.remove("sketch-mobile-activated");
+  }
 }
 
 function getValue() {