feat(UI): remove load buttons from screens.

Closing the screen loads the settings.
live-codes · Apr 2, 2024 · 94ee5d6 · 94ee5d6
1 parent 5eb6cca
commit 94ee5d6
Show file tree

Hide file tree

Showing 8 changed files with 13 additions and 39 deletions.
diff --git a/src/livecodes/UI/info.ts b/src/livecodes/UI/info.ts
@@ -21,7 +21,6 @@ export const createProjectInfoUI = async (
   config: Config,
   storage: ProjectStorage,
   modal: ReturnType<typeof createModal>,
-  eventsManager: ReturnType<typeof createEventsManager>,
   onUpdate: (
     title: string,
     description: string,
@@ -33,7 +32,7 @@ export const createProjectInfoUI = async (
   const div = document.createElement('div');
   div.innerHTML = infoScreen;
   const projectInfoContainer = div.firstChild as HTMLElement;
-  modal.show(projectInfoContainer);
+  modal.show(projectInfoContainer, { onClose: () => updateInfo() });
 
   const titleInput = UI.getInfoTitleInput();
   titleInput.value = config.title;
@@ -54,7 +53,7 @@ export const createProjectInfoUI = async (
   const tagsInput = UI.getInfoTagsInput();
   tagsInput.value = removeDuplicates(config.tags).join(', ');
 
-  eventsManager.addEventListener(UI.getUpdateInfoButton(), 'click', async () => {
+  const updateInfo = async () => {
     UI.getProjectTitleElement().textContent = titleInput.value;
     onUpdate(
       titleInput.value,
@@ -63,8 +62,7 @@ export const createProjectInfoUI = async (
       htmlAttrsTextarea.value,
       getTags(tagsInput.value),
     );
-    modal.close();
-  });
+  };
 
   loadStylesheet(tagifyBaseUrl + 'tagify.css', 'tagify-styles');
   await loadScript(tagifyBaseUrl + 'tagify.min.js', 'Tagify');

diff --git a/src/livecodes/UI/resources.ts b/src/livecodes/UI/resources.ts
@@ -5,11 +5,7 @@ import type { Config, CssPresetId, PkgInfo } from '../models';
 import { resourcesScreen } from '../html';
 import { pkgInfoService } from '../services/pkgInfo';
 import { debounce, hideOnClickOutside } from '../utils/utils';
-import {
-  getExternalResourcesCssPresetInputs,
-  getExternalResourcesTextareas,
-  getLoadResourcesButton,
-} from './selectors';
+import { getExternalResourcesCssPresetInputs, getExternalResourcesTextareas } from './selectors';
 
 interface PkgInfoWithDefaultFiles extends PkgInfo {
   files: {
@@ -38,7 +34,7 @@ export const createExternalResourcesUI = ({
   const div = document.createElement('div');
   div.innerHTML = resourcesScreen;
   const resourcesContainer = div.firstChild as HTMLElement;
-  modal.show(resourcesContainer);
+  modal.show(resourcesContainer, { onClose: () => updateResources() });
 
   const externalResources = getExternalResourcesTextareas();
   externalResources.forEach((textarea) => {
@@ -266,7 +262,7 @@ export const createExternalResourcesUI = ({
     });
   });
 
-  eventsManager.addEventListener(getLoadResourcesButton(), 'click', async () => {
+  const updateResources = async () => {
     externalResources.forEach((textarea) => {
       const resource = textarea.dataset.resource as ResourceType;
       deps.setConfig({
@@ -289,5 +285,5 @@ export const createExternalResourcesUI = ({
     });
 
     deps.loadResources();
-  });
+  };
 };
diff --git a/src/livecodes/UI/selectors.ts b/src/livecodes/UI/selectors.ts
@@ -258,24 +258,15 @@ export const getInfoDescription = /* @__PURE__ */ () =>
 export const getInfoTagsInput = /* @__PURE__ */ () =>
   document.querySelector('#info-container input#tags-input') as HTMLInputElement;
 
-export const getUpdateInfoButton = /* @__PURE__ */ () =>
-  document.querySelector<HTMLElement>('#info-container #info-update-btn');
-
 export const getExternalResourcesTextareas = /* @__PURE__ */ () =>
   document.querySelectorAll<HTMLTextAreaElement>('#resources-container textarea');
 
 export const getExternalResourcesCssPresetInputs = /* @__PURE__ */ () =>
   document.querySelectorAll<HTMLInputElement>('#resources-container input[type="radio"]');
 
-export const getLoadResourcesButton = /* @__PURE__ */ () =>
-  document.querySelector<HTMLElement>('#resources-container #resources-load-btn');
-
 export const getCustomSettingsEditor = /* @__PURE__ */ () =>
   document.querySelector<HTMLElement>('#custom-settings-container #custom-settings-editor');
 
-export const getLoadCustomSettingsButton = /* @__PURE__ */ () =>
-  document.querySelector<HTMLElement>('#custom-settings-container #custom-settings-load-btn');
-
 export const getTestEditor = /* @__PURE__ */ () =>
   document.querySelector<HTMLElement>('#test-editor-container #test-editor');
 

diff --git a/src/livecodes/core.ts b/src/livecodes/core.ts
@@ -3186,13 +3186,7 @@ const handleProjectInfo = () => {
     dispatchChangeEvent();
   };
   const createProjectInfo = () =>
-    createProjectInfoUI(
-      getConfig(),
-      stores.projects || fakeStorage,
-      modal,
-      eventsManager,
-      onUpdate,
-    );
+    createProjectInfoUI(getConfig(), stores.projects || fakeStorage, modal, onUpdate);
 
   eventsManager.addEventListener(UI.getProjectInfoLink(), 'click', createProjectInfo, false);
   registerScreen('info', createProjectInfo);
@@ -3425,7 +3419,6 @@ const handleExternalResources = () => {
     const loadResources = async () => {
       setExternalResourcesMark();
       await setSavedStatus();
-      modal.close();
       if (getConfig().autoupdate) {
         await run();
       }
@@ -3466,7 +3459,8 @@ const handleCustomSettings = () => {
     div.innerHTML = customSettingsScreen;
     const customSettingsContainer = div.firstChild as HTMLElement;
     modal.show(customSettingsContainer, {
-      onClose: () => {
+      onClose: async () => {
+        await loadCustomSettings();
         customSettingsEditor?.destroy();
       },
     });
@@ -3490,7 +3484,7 @@ const handleCustomSettings = () => {
     customSettingsEditor = await createEditor(options);
     customSettingsEditor?.focus();
 
-    eventsManager.addEventListener(UI.getLoadCustomSettingsButton(), 'click', async () => {
+    const loadCustomSettings = async () => {
       let customSettings: CustomSettings = {};
       const editorContent = customSettingsEditor?.getValue() || '{}';
       try {
@@ -3516,12 +3510,11 @@ const handleCustomSettings = () => {
         }
       }
       customSettingsEditor?.destroy();
-      modal.close();
       if (getConfig().autoupdate) {
         await run();
       }
       dispatchChangeEvent();
-    });
+    };
   };
   eventsManager.addEventListener(
     UI.getCustomSettingsLink(),

diff --git a/src/livecodes/html/custom-settings.html b/src/livecodes/html/custom-settings.html
@@ -4,7 +4,6 @@
     <div class="modal-screen">
       <label>Custom Settings JSON</label>
       <div id="custom-settings-editor" class="editor custom-editor"></div>
-      <button id="custom-settings-load-btn" class="wide-button">Load</button>
     </div>
     <!-- TODO: add link to documentations -->
     <!-- <div class="description">See documentations for details.</div> -->

diff --git a/src/livecodes/html/external-resources.html b/src/livecodes/html/external-resources.html
@@ -60,8 +60,6 @@
           <label class="radio-label" for="resources-css-preset-reset-css">Reset CSS</label>
         </span>
       </div>
-
-      <button id="resources-load-btn" class="wide-button">Load</button>
     </div>
   </div>
 </div>
diff --git a/src/livecodes/html/project-info.html b/src/livecodes/html/project-info.html
@@ -15,7 +15,6 @@
       <textarea id="html-attrs-textarea" placeholder='lang="en" class="my-class"'></textarea>
       <label for="tags-input">Tags</label>
       <input id="tags-input" type="text" />
-      <button id="info-update-btn" class="wide-button">Update</button>
     </div>
   </div>
 </div>
diff --git a/src/livecodes/styles/app.scss b/src/livecodes/styles/app.scss
@@ -1968,7 +1968,7 @@ i.arrow {
     box-shadow: 0 3px 6px rgba(0, 0, 0, 0.176);
     margin-bottom: 1em;
     min-height: calc(80% - 100px);
-    padding: 0.7em;
+    padding: 1.5em 0.7em;
   }
 
   .tab-content {