diff --git a/manage.html b/manage.html index 028805eb..49518966 100644 --- a/manage.html +++ b/manage.html @@ -148,37 +148,6 @@

-
- - - - - - - - - - - - - - - - - - - - - - - -

- - - -

-
-
@@ -292,6 +261,42 @@
+
+
+

+
+
+ + + + + + + + + + + + + + + + + + + + + + + +
+

+ + + +

+
+
diff --git a/manage/manage.css b/manage/manage.css index d5afa899..cde592b1 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -55,10 +55,6 @@ a:hover { z-index: 9; } -#update-all { - margin-bottom: .5rem; -} - #check-all-updates { max-width: calc(100% - 30px); } @@ -69,8 +65,7 @@ a:hover { } #header h1 { - margin-top: 0; - margin-bottom: .3em; + margin: 0; } #actions { @@ -94,8 +89,7 @@ a:hover { } #actions a:hover { color: var(--cmin); - border-color: var(--accent-3); - background-color: hsla(180, 100%, 30%, .2); + background-color: hsla(0, 0%, 50%, .2); } #actions svg { cursor: auto; @@ -118,6 +112,34 @@ a:hover { fill: transparent; stroke: var(--fg); } +#actions-toggle:not([open]) { + position: absolute; + margin-top: 4px; +} +#actions-toggle:not([open]) h2 { + display: none; +} +#actions-toggle[open] + div { + display: block; + text-align: left; + --max-w: none; +} +#actions-toggle[open] + div > a { + display: block; + text-align: left; + border: none; + margin: 0 0 0 -4px; + padding: 1px 0 1px 4px; + border-radius: 0; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} +#actions-toggle[open] + div > a::after { + content: attr(data-title); + margin-left: .5em; + vertical-align: middle; +} #installed { position: relative; diff --git a/manage/manage.js b/manage/manage.js index fcf9e3c2..a253d17e 100644 --- a/manage/manage.js +++ b/manage/manage.js @@ -78,6 +78,7 @@ newUI.renderClass(); sorter.init(); router.update(); prefs.subscribe(newUI.ids.map(newUI.prefKeyForId), () => switchUI()); + prefs.subscribe('manage.actions.expanded', toggleActionTitles, {runNow: true}); switchUI({styleOnly: true}); // translate CSS manually document.styleSheets[0].insertRule( @@ -105,6 +106,15 @@ newUI.renderClass(); '/manage/incremental-search', '/manage/updater-ui', ]); + + function toggleActionTitles(_, isOpen) { + const from = `${isOpen ? '' : 'data-'}title`; + const to = `${isOpen ? 'data-' : ''}title`; + for (const el of $$(`#actions [${from}]`)) { + el.setAttribute(to, el.getAttribute(from)); + el.removeAttribute(from); + } + } })(); msg.onExtension(onRuntimeMessage);