feat(UI): add editor settings button to editor toolbar

live-codes · Dec 10, 2023 · 213cfc9 · 213cfc9
1 parent 078e963
commit 213cfc9
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 11 deletions.
diff --git a/src/livecodes/UI/selectors.ts b/src/livecodes/UI/selectors.ts
@@ -46,6 +46,8 @@ export const getExternalResourcesBtn = /* @__PURE__ */ () =>
   document.querySelector('#editor-tools #external-resources-btn') as HTMLElement;
 export const getExternalResourcesMark = /* @__PURE__ */ () =>
   document.querySelector('#editor-tools #external-resources-mark') as HTMLElement;
+export const getEditorSettingsBtn = /* @__PURE__ */ () =>
+  document.querySelector('#editor-tools #editor-settings-btn') as HTMLElement;
 export const getResultButton = /* @__PURE__ */ () =>
   document.querySelector('#result-button') as HTMLElement;
 export const getFullscreenButton = /* @__PURE__ */ () =>

diff --git a/src/livecodes/assets/images/gear.svg b/src/livecodes/assets/images/gear.svg
diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
@@ -2161,6 +2161,14 @@ const handleEditorTools = () => {
   eventsManager.addEventListener(UI.getEditorStatus(), 'click', () => {
     showScreen('editor-settings', { scrollToSelector: 'label[data-name="editorMode"]' });
   });
+
+  eventsManager.addEventListener(UI.getExternalResourcesBtn(), 'click', () => {
+    showScreen('resources');
+  });
+
+  eventsManager.addEventListener(UI.getEditorSettingsBtn(), 'click', () => {
+    showScreen('editor-settings');
+  });
 };
 
 const handleProcessors = () => {
@@ -3370,12 +3378,6 @@ const handleExternalResources = () => {
     createExrenalResourcesUI,
     false,
   );
-  eventsManager.addEventListener(
-    UI.getExternalResourcesBtn(),
-    'click',
-    createExrenalResourcesUI,
-    false,
-  );
   registerScreen('resources', createExrenalResourcesUI);
 };
 

diff --git a/src/livecodes/html/app.html b/src/livecodes/html/app.html
@@ -146,9 +146,12 @@
               <span data-status="script"></span>
             </span>
             <span id="external-resources-btn" class="hint--top-left" data-hint="External Resources">
-              <img src="{{baseUrl}}assets/images/script-sheet.svg" alt="External Resources" />
+              <img src="{{baseUrl}}assets/images/script-sheet.svg" alt="external resources" />
               <span id="external-resources-mark" class="mark"></span>
             </span>
+            <span id="editor-settings-btn" class="hint--top-left" data-hint="Editor Settings">
+              <img src="{{baseUrl}}assets/images/gear.svg" alt="editor settings" />
+            </span>
           </div>
           <button id="code-run-button" class="hint--top-left" data-hint="Run (Shift + Enter)">
             <img

diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
@@ -389,6 +389,10 @@ a {
     display: none;
   }
 
+  #editor-settings-btn {
+    display: none;
+  }
+
   @media only screen and (max-width: 1080px) {
     #buttons {
       width: 30% !important;
@@ -565,10 +569,6 @@ a {
         margin: auto 4px;
       }
     }
-
-    #external-resources-btn {
-      right: 1em;
-    }
   }
 }