Move extension buttons to a separate toolbar

This commit is contained in:
Cohee
2025-03-27 21:51:35 +02:00
parent 216c698610
commit 02df7d78e2
2 changed files with 43 additions and 25 deletions

View File

@ -146,3 +146,15 @@ input.extension_missing[type="checkbox"] {
.extensions_info .extension_actions { .extensions_info .extension_actions {
flex-wrap: nowrap; 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;
}

View File

@ -783,35 +783,41 @@ async function showExtensionsDetails() {
.append(htmlExternal) .append(htmlExternal)
.append(getModuleInformation()); .append(getModuleInformation());
/** @type {import('./popup.js').CustomPopupButton} */ {
const updateAllButton = { const updateAction = async (force) => {
text: t`Update all`,
action: async () => {
requiresReload = true; requiresReload = true;
await autoUpdateExtensions(true); await autoUpdateExtensions(force);
await popup.complete(POPUP_RESULT.AFFIRMATIVE); 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(); abortController.abort();
accountStorage.setItem(sortOrderKey, sortByName ? 'false' : 'true'); accountStorage.setItem(sortOrderKey, sortByName ? 'false' : 'true');
await showExtensionsDetails(); await showExtensionsDetails();
}, });
};
toolbar.append(updateAllButton, updateEnabledOnlyButton, flexExpander, sortOrderButton);
html.prepend(toolbar);
}
let waitingForSave = false; let waitingForSave = false;
@ -819,7 +825,7 @@ async function showExtensionsDetails() {
okButton: t`Close`, okButton: t`Close`,
wide: true, wide: true,
large: true, large: true,
customButtons: [sortOrderButton, updateEnabledOnlyButton, updateAllButton], customButtons: [],
allowVerticalScrolling: true, allowVerticalScrolling: true,
onClosing: async () => { onClosing: async () => {
if (waitingForSave) { if (waitingForSave) {
@ -1230,7 +1236,7 @@ async function checkForExtensionUpdates(force) {
for (const [id, manifest] of Object.entries(manifests)) { for (const [id, manifest] of Object.entries(manifests)) {
const isDisabled = extension_settings.disabledExtensions.includes(id); const isDisabled = extension_settings.disabledExtensions.includes(id);
if (isDisabled) { 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; continue;
} }
const isGlobal = getExtensionType(id) === 'global'; const isGlobal = getExtensionType(id) === 'global';
@ -1277,7 +1283,7 @@ async function autoUpdateExtensions(forceAll) {
for (const [id, manifest] of Object.entries(manifests)) { for (const [id, manifest] of Object.entries(manifests)) {
const isDisabled = extension_settings.disabledExtensions.includes(id); const isDisabled = extension_settings.disabledExtensions.includes(id);
if (!forceAll && isDisabled) { 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; continue;
} }
const isGlobal = getExtensionType(id) === 'global'; const isGlobal = getExtensionType(id) === 'global';