feat(UI): add share button to toolbar

live-codes · Jan 26, 2024 · 9a1cb6d · 9a1cb6d
1 parent db877e9
commit 9a1cb6d
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 7 deletions.
diff --git a/src/livecodes/UI/selectors.ts b/src/livecodes/UI/selectors.ts
@@ -52,6 +52,8 @@ export const getCustomSettingsBtn = /* @__PURE__ */ () =>
   document.querySelector('#editor-tools #custom-settings-btn') as HTMLElement;
 export const getEditorSettingsBtn = /* @__PURE__ */ () =>
   document.querySelector('#editor-tools #editor-settings-btn') as HTMLElement;
+export const getShareButton = /* @__PURE__ */ () =>
+  document.querySelector('#share-button') as HTMLElement;
 export const getResultButton = /* @__PURE__ */ () =>
   document.querySelector('#result-button') as HTMLElement;
 export const getFullscreenButton = /* @__PURE__ */ () =>

diff --git a/src/livecodes/assets/images/share.svg b/src/livecodes/assets/images/share.svg
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
@@ -2140,6 +2140,10 @@ const handleResultButton = () => {
   eventsManager.addEventListener(UI.getResultButton(), 'click', () => split?.show('output', true));
 };
 
+const handleShareButton = () => {
+  eventsManager.addEventListener(UI.getShareButton(), 'click', () => showScreen('share'));
+};
+
 const handleEditorTools = () => {
   if (!configureEditorTools(getActiveEditor().getLanguage())) return;
 
@@ -3883,6 +3887,7 @@ const basicHandlers = () => {
   handleHotKeys();
   handleRunButton();
   handleResultButton();
+  handleShareButton();
   handleEditorTools();
   handleProcessors();
   handleResultLoading();

diff --git a/src/livecodes/html/app.html b/src/livecodes/html/app.html
@@ -65,12 +65,27 @@
               loading="lazy"
             />
           </a>
+          <a
+            href="javascript:void(0)"
+            id="share-button"
+            class="button hint--bottom"
+            data-hint="Share"
+            tabindex="10"
+          >
+            <img
+              width="20"
+              height="20"
+              alt="Run"
+              src="{{baseUrl}}assets/images/share.svg"
+              loading="lazy"
+            />
+          </a>
           <a
             href="javascript:void(0)"
             id="result-button"
             class="button hint--bottom"
             data-hint="Toggle Result"
-            tabindex="10"
+            tabindex="11"
           >
             <img
               width="28"
@@ -85,7 +100,7 @@
             id="fullscreen-button"
             class="button hint--bottom"
             data-hint="Full Screen"
-            tabindex="11"
+            tabindex="12"
           >
             <img
               width="28"
@@ -100,7 +115,7 @@
             id="settings-button"
             class="button"
             aria-label="Menu"
-            tabindex="12"
+            tabindex="13"
           >
             <img
               width="30"

diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
@@ -309,6 +309,10 @@ a {
   #toolbar {
     font-size: 0.8em;
 
+    #share-button {
+      display: none;
+    }
+
     #buttons > .button {
       margin: 3px;
       width: 35px;
@@ -391,10 +395,8 @@ a {
     display: flex !important;
   }
 
-  #settings-button {
-    display: none;
-  }
-
+  #share-button,
+  #settings-button,
   #editor-settings-btn,
   #project-info-btn,
   #custom-settings-btn {