From 54f54dc937a1f2b96a804d637282495cd78bfb90 Mon Sep 17 00:00:00 2001
From: Alexander Wang <alex@terrastruct.com>
Date: Wed, 4 Sep 2024 09:02:23 -0600
Subject: [PATCH] update sketch icon for mobile

---
 src/assets/.DS_Store        | Bin 0 -> 6148 bytes
 src/assets/icons/sketch.svg |   5 +++++
 src/css/main.css            |   2 ++
 src/css/responsive.css      |  20 +++++++++++++++++++-
 src/index.html              |   6 +++++-
 src/js/modules/sketch.js    |  20 +++++++++++++++++---
 6 files changed, 48 insertions(+), 5 deletions(-)
 create mode 100644 src/assets/.DS_Store
 create mode 100644 src/assets/icons/sketch.svg

diff --git a/src/assets/.DS_Store b/src/assets/.DS_Store
new file mode 100644
index 0000000000000000000000000000000000000000..d8d844af3d0e5ad8739cc0c55cf1aa5c1b2c9724
GIT binary patch
literal 6148
zcmeHKI|>3Z5S{S@f{mqRuHX%V=n1@lpdf;*plH37=kjR2`83O7r-kwcCNG)HOUNsB
zc0@#%xBWt7CL$BKp*(Epo9&zTY>*KJ!g0p+zPU7~b93nBz6%(4EJxYNS(*;tc4$<9
z3Qz$mKn1A4rxnNwJDGm^V4g<>sKC!FVBd!VH>`<mpnp0rcnbg=A?${^_Y%Nj0bosR
z0}+8~P=P_!Y%w(Gh?mT(iEUueMYH+PyjinDQNJDM7f%<hfgGs-73eB3jOEPg{~G?L
z|L>Bxq5@RluN2VHYO`A6Nm*NakF#1^;9I!mJmF@TI|YN6W1yE~EUX;QJt^{v&9Pq-
U+d!uy?sOo3222+k75KISFBrfS)c^nh

literal 0
HcmV?d00001

diff --git a/src/assets/icons/sketch.svg b/src/assets/icons/sketch.svg
new file mode 100644
index 0000000..3e5b557
--- /dev/null
+++ b/src/assets/icons/sketch.svg
@@ -0,0 +1,5 @@
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="9.24619" y="17.6719" width="5.89436" height="17.6831" rx="0.4" transform="rotate(-135 9.24619 17.6719)" stroke="#2E3346"/>
+<path d="M11.0095 15.9084C9.38186 14.2807 8.46929 13.3681 6.8416 11.7404M20.3073 6.61067L16.1393 2.44273M8.60496 17.0305L4.98059 18.8427C4.29295 19.1865 3.56346 18.457 3.90728 17.7694L5.71947 14.145L8.60496 17.0305Z" stroke="#2E3346"/>
+<ellipse cx="13.5745" cy="9.17566" rx="1.13353" ry="4.98754" transform="rotate(-135 13.5745 9.17566)" stroke="#2E3346"/>
+</svg>
diff --git a/src/css/main.css b/src/css/main.css
index 3dcc2d8..7dfc6b9 100644
--- 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
index 0501154..e5e0476 100644
--- 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
index 75f1a3c..d662384 100644
--- 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
index 6e52dbe..b23739f 100644
--- 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() {