open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use details to toggle action's captions

Browse Source
This commit is contained in:
tophf 2022-03-02 02:53:19 +03:00
parent 606b0e1769
commit 424ff6df95
3 changed files with 76 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
manage.html
View File

@ -148,37 +148,6 @@
<h1 id="manage-heading" i18n="manageHeading"></h1>
<div id="manage-settings">
<div id="actions">
<a id="check-all-updates" i18n="title:checkAllUpdates" tabindex="0">
<svg class="svg-icon"><use xlink:href="#svg-icon-check-update"/></svg>
<span id="update-progress"></span>
</a>
<a id="update-history-button" i18n="title:genericHistoryLabel" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
</svg>
</a>
<a id="manage-options-button" i18n="title:openOptions" tabindex="0">
<svg class="svg-icon"><use xlink:href="#svg-icon-config"/></svg>
</a>
<a id="injection-order-button" i18n="title:styleInjectionOrder" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M2,18h8v-6H2V18z M4,14h4v2H4V14z M2,7h8V1H2V7z M4,3h4v2H4V3z M15,13v3l-4-3.5L15,9v3h2V5h-6V4h7v9H15z M10,11H2v-1h8V11zM10,9H2V8h8V9z"/>
</svg>
</a>
<a href="edit.html?uc=0" i18n="title:addStyleLabel" tabindex="0">
<svg class="svg-icon"><use xlink:href="#svg-icon-add"/></svg>
</a>
<a href="edit.html?uc=1" id="write-usercss" i18n="title:optionsAdvancedNewStyleAsUsercss" tabindex="0">
<svg class="svg-icon"><use xlink:href="#svg-icon-add"/></svg>
</a>
<p id="update-all">
<button id="apply-all-updates" class="hidden" i18n="applyAllUpdates"></button>
<span id="update-all-no-updates" class="hidden" i18n="updateAllCheckSucceededNoUpdate"></span>
<button id="check-all-updates-force" class="hidden" i18n="checkAllUpdatesForce"></button>
</p>
</div>
<div class="settings-column">
<details id="filters" data-pref="manage.filters.expanded">
<summary>
@ -292,6 +261,42 @@
</div>
</div>
<div class="settings-column">
<details id="actions-toggle" data-pref="manage.actions.expanded">
<summary><h2 i18n="optionsActions"></h2></summary>
</details>
<div id="actions">
<a id="check-all-updates" i18n="title:checkAllUpdates" tabindex="0">
<svg class="svg-icon"><use xlink:href="#svg-icon-check-update"/></svg>
<span id="update-progress"></span>
</a>
<a id="update-history-button" i18n="title:updateCheckHistory" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M13,7H7V6h6Zm6,6.5A5.5,5.5,0,0,1,8.61,16H4V3H16V8.61A5.5,5.5,0,0,1,19,13.5ZM8,14c0-.16,0-.84,0-1H7V12H8.21a5.46,5.46,0,0,1,.39-1H7V10H9.26a5.55,5.55,0,0,1,1.09-1H7V8h7V5H6v9Zm10-.5A4.5,4.5,0,1,0,13.5,18,4.5,4.5,0,0,0,18,13.5ZM14,13V10H13v4h4V13Z"/>
</svg>
</a>
<a id="manage-options-button" i18n="title:openOptions" tabindex="0">
<svg class="svg-icon"><use xlink:href="#svg-icon-config"/></svg>
</a>
<a id="injection-order-button" i18n="title:styleInjectionOrder" tabindex="0">
<svg class="svg-icon" viewBox="0 0 20 20">
<path d="M2,18h8v-6H2V18z M4,14h4v2H4V14z M2,7h8V1H2V7z M4,3h4v2H4V3z M15,13v3l-4-3.5L15,9v3h2V5h-6V4h7v9H15z M10,11H2v-1h8V11zM10,9H2V8h8V9z"/>
</svg>
</a>
<a href="edit.html?uc=0" i18n="title:addStyleLabel" tabindex="0">
<svg class="svg-icon"><use xlink:href="#svg-icon-add"/></svg>
</a>
<a href="edit.html?uc=1" id="write-usercss" i18n="title:optionsAdvancedNewStyleAsUsercss" tabindex="0">
<svg class="svg-icon"><use xlink:href="#svg-icon-add"/></svg>
</a>
</div>
<p id="update-all">
<button id="apply-all-updates" class="hidden" i18n="applyAllUpdates"></button>
<span id="update-all-no-updates" class="hidden" i18n="updateAllCheckSucceededNoUpdate"></span>
<button id="check-all-updates-force" class="hidden" i18n="checkAllUpdatesForce"></button>
</p>
</div>
<div class="settings-column">
<details id="backup" data-pref="manage.backup.expanded">
<summary>

38
manage/manage.css
View File

@ -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;

10
manage/manage.js
View File

@ -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);