Move extension buttons to a separate toolbar

02df7d78e24bd080df1345cc6765592039d9e130

Cohee <18619528+Cohee1207@users.noreply.github.com>

Parents: 216c698610d2ca556c323f05e783abab7fbf0e13

public/css/extensions-panel.css+12 -0 Viewed

 .extensions_info .extension_actions {
     flex-wrap: nowrap;
+}
+.extensions_toolbar {
+    top: 0;
+    position: sticky;
+    display: flex;
+    flex-direction: row;
+    background-color: var(--SmartThemeBlurTintColor);
+    gap: 5px;
+    z-index: 1;
+    margin-bottom: 10px;
+    padding: 5px;
+}

public/scripts/extensions.js+30 -24 Viewed

             .append(htmlExternal)
             .append(getModuleInformation());
-        /** @type {import('./popup.js').CustomPopupButton} */
+        {
-        const updateAllButton = {
+            const updateAction = async (force) => {
-            text: t`Update all`,
-            action: async () => {
                 requiresReload = true;
-                await autoUpdateExtensions(true);
+                await autoUpdateExtensions(force);
                 await popup.complete(POPUP_RESULT.AFFIRMATIVE);
-            },
             };
-        /** @type {import('./popup.js').CustomPopupButton} */
+            const toolbar = document.createElement('div');
-        const updateEnabledOnlyButton = {
+            toolbar.classList.add('extensions_toolbar');
-            text: t`Update enabled only`,
-            action: async () => {
-                requiresReload = true;
-                await autoUpdateExtensions(false);
-                await popup.complete(POPUP_RESULT.AFFIRMATIVE);
-            },
-        };
-        /** @type {import('./popup.js').CustomPopupButton} */
+            const updateAllButton = document.createElement('button');
-        const sortOrderButton = {
+            updateAllButton.classList.add('menu_button', 'menu_button_icon');
-            text: sortByName ? t`Sort: Display Name` : t`Sort: Loading Order`,
+            updateAllButton.textContent = t`Update all`;
-            action: async () => {
+            updateAllButton.addEventListener('click', () => updateAction(true));
+            const updateEnabledOnlyButton = document.createElement('button');
+            updateEnabledOnlyButton.classList.add('menu_button', 'menu_button_icon');
+            updateEnabledOnlyButton.textContent = t`Update enabled`;
+            updateEnabledOnlyButton.addEventListener('click', () => updateAction(false));
+            const flexExpander = document.createElement('div');
+            flexExpander.classList.add('expander');
+            const sortOrderButton = document.createElement('button');
+            sortOrderButton.classList.add('menu_button', 'menu_button_icon');
+            sortOrderButton.textContent = sortByName ? t`Sort: Display Name` : t`Sort: Loading Order`;
+            sortOrderButton.addEventListener('click', async () => {
                 abortController.abort();
                 accountStorage.setItem(sortOrderKey, sortByName ? 'false' : 'true');
                 await showExtensionsDetails();
-            },
+            });
-        };
+            toolbar.append(updateAllButton, updateEnabledOnlyButton, flexExpander, sortOrderButton);
+            html.prepend(toolbar);
+        }
         let waitingForSave = false;

             okButton: t`Close`,
             wide: true,
             large: true,
-            customButtons: [sortOrderButton, updateEnabledOnlyButton, updateAllButton],
+            customButtons: [],
             allowVerticalScrolling: true,
             onClosing: async () => {
                 if (waitingForSave) {

     for (const [id, manifest] of Object.entries(manifests)) {
         const isDisabled = extension_settings.disabledExtensions.includes(id);
         if (isDisabled) {
-            console.debug(`Skipping extension: ${manifest.display_name} (${id}) for non-admin user`)
+            console.debug(`Skipping extension: ${manifest.display_name} (${id}) for non-admin user`);
             continue;
+        }
         const isGlobal = getExtensionType(id) === 'global';

     for (const [id, manifest] of Object.entries(manifests)) {
         const isDisabled = extension_settings.disabledExtensions.includes(id);
         if (!forceAll && isDisabled) {
-            console.debug(`Skipping extension: ${manifest.display_name} (${id}) for non-admin user`)
+            console.debug(`Skipping extension: ${manifest.display_name} (${id}) for non-admin user`);
             continue;
+        }
         const isGlobal = getExtensionType(id) === 'global';