Merge pull request #3775 from SillyTavern/feat/ext-manager-toolbar Move extension buttons to a separate toolbar

26d0f01d6925923f06258b6fb1fc3366a49bf38a

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

Signed

Parents: 469c731ff469d74b29a83050ed21d000e3c6085a 572b60d0c13dbf3ba4a2ab47c0a80f6905d3c8d1

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+28 -22 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(trueforce);
                 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],
             allowVerticalScrolling: true,
             onClosing: async () => {
                 if (waitingForSave) {