Move extension buttons to a separate toolbar

02df7d78e24bd080df1345cc6765592039d9e130

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

Parents: 216c698610d2ca556c323f05e783abab7fbf0e13
2 files changed, +43 -25Ignore whitespace
public/css/extensions-panel.css+12 -0
@@ -146,3 +146,15 @@ input.extension_missing[type="checkbox"] {
146146.extensions_info .extension_actions {
147147 flex-wrap: nowrap;
148148}
149+
150+.extensions_toolbar {
151+ top: 0;
152+ position: sticky;
153+ display: flex;
154+ flex-direction: row;
155+ background-color: var(--SmartThemeBlurTintColor);
156+ gap: 5px;
157+ z-index: 1;
158+ margin-bottom: 10px;
159+ padding: 5px;
160+}
public/scripts/extensions.js+31 -25
@@ -783,35 +783,41 @@ async function showExtensionsDetails() {
783783 .append(htmlExternal)
784784 .append(getModuleInformation());
785785
786- /** @type {import('./popup.js').CustomPopupButton} */
786+ {
787- const updateAllButton = {
787+ const updateAction = async (force) => {
788- text: t`Update all`,
789- action: async () => {
790788 requiresReload = true;
791789 await autoUpdateExtensions(trueforce);
792790 await popup.complete(POPUP_RESULT.AFFIRMATIVE);
793791 },;
794- };
795792
796- /** @type {import('./popup.js').CustomPopupButton} */
793+ const toolbar = document.createElement('div');
797- const updateEnabledOnlyButton = {
794+ toolbar.classList.add('extensions_toolbar');
798- text: t`Update enabled only`,
795+
799- action: async () => {
796+ const updateAllButton = document.createElement('button');
800- requiresReload = true;
797+ updateAllButton.classList.add('menu_button', 'menu_button_icon');
801- await autoUpdateExtensions(false);
798+ updateAllButton.textContent = t`Update all`;
802- await popup.complete(POPUP_RESULT.AFFIRMATIVE);
799+ updateAllButton.addEventListener('click', () => updateAction(true));
803- },
804- };
805800
806- /** @type {import('./popup.js').CustomPopupButton} */
801+ const updateEnabledOnlyButton = document.createElement('button');
807- const sortOrderButton = {
802+ updateEnabledOnlyButton.classList.add('menu_button', 'menu_button_icon');
808- text: sortByName ? t`Sort: Display Name` : t`Sort: Loading Order`,
803+ updateEnabledOnlyButton.textContent = t`Update enabled`;
809- action: async () => {
804+ updateEnabledOnlyButton.addEventListener('click', () => updateAction(false));
805+
806+ const flexExpander = document.createElement('div');
807+ flexExpander.classList.add('expander');
808+
809+ const sortOrderButton = document.createElement('button');
810+ sortOrderButton.classList.add('menu_button', 'menu_button_icon');
811+ sortOrderButton.textContent = sortByName ? t`Sort: Display Name` : t`Sort: Loading Order`;
812+ sortOrderButton.addEventListener('click', async () => {
810813 abortController.abort();
811814 accountStorage.setItem(sortOrderKey, sortByName ? 'false' : 'true');
812815 await showExtensionsDetails();
813816 },);
814- };
817+
818+ toolbar.append(updateAllButton, updateEnabledOnlyButton, flexExpander, sortOrderButton);
819+ html.prepend(toolbar);
820+ }
815821
816822 let waitingForSave = false;
817823
@@ -819,7 +825,7 @@ async function showExtensionsDetails() {
819825 okButton: t`Close`,
820826 wide: true,
821827 large: true,
822828 customButtons: [sortOrderButton, updateEnabledOnlyButton, updateAllButton],
823829 allowVerticalScrolling: true,
824830 onClosing: async () => {
825831 if (waitingForSave) {
@@ -1230,7 +1236,7 @@ async function checkForExtensionUpdates(force) {
12301236 for (const [id, manifest] of Object.entries(manifests)) {
12311237 const isDisabled = extension_settings.disabledExtensions.includes(id);
12321238 if (isDisabled) {
12331239 console.debug(`Skipping extension: ${manifest.display_name} (${id}) for non-admin user`);
12341240 continue;
12351241 }
12361242 const isGlobal = getExtensionType(id) === 'global';
@@ -1277,7 +1283,7 @@ async function autoUpdateExtensions(forceAll) {
12771283 for (const [id, manifest] of Object.entries(manifests)) {
12781284 const isDisabled = extension_settings.disabledExtensions.includes(id);
12791285 if (!forceAll && isDisabled) {
12801286 console.debug(`Skipping extension: ${manifest.display_name} (${id}) for non-admin user`);
12811287 continue;
12821288 }
12831289 const isGlobal = getExtensionType(id) === 'global';