rework and move newUI+theme to options.html
This commit is contained in:
tophf
parent
ee30aa1407
commit
bfe03e0e26
|
|
@ -28,9 +28,9 @@ self.prefs = self.INJECTED === 1 ? self.prefs : (() => {
|
|||
'manage.onlyLocal.invert': false, // display only externally installed styles
|
||||
'manage.onlyUsercss.invert': false, // display only non-usercss (standard) styles
|
||||
// UI element state: expanded/collapsed
|
||||
'manage.actions.expanded': true,
|
||||
'manage.backup.expanded': true,
|
||||
'manage.filters.expanded': true,
|
||||
'manage.options.expanded': true,
|
||||
// the new compact layout doesn't look good on Android yet
|
||||
'manage.newUI': !navigator.appVersion.includes('Android'),
|
||||
'manage.newUI.favicons': false, // show favicons for the sites in applies-to
|
||||
|
|
|
|||
56
manage.html
56
manage.html
|
|
@ -278,8 +278,11 @@
|
|||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="style-actions">
|
||||
<div class="settings-column">
|
||||
<details id="actions" data-pref="manage.actions.expanded">
|
||||
<summary><h2 i18n-text="optionsActions"></h2></summary>
|
||||
<div id="update-check">
|
||||
<button id="check-all-updates" i18n-text="checkAllUpdates"><span id="update-progress"></span></button>
|
||||
<a href="#" id="update-history" i18n-title="genericHistoryLabel" tabindex="0">
|
||||
|
|
@ -313,57 +316,12 @@
|
|||
</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="manage-options-button" i18n-text="openOptions"></button>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<div class="settings-column">
|
||||
<details id="options" data-pref="manage.options.expanded">
|
||||
|
||||
<summary><h2 id="options-heading" i18n-text="optionsHeading"></h2></summary>
|
||||
|
||||
<label>
|
||||
<input id="manage.newUI" type="checkbox">
|
||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
<span i18n-text="manageNewUI"></span>
|
||||
</label>
|
||||
|
||||
<div id="newUIoptions">
|
||||
<div>
|
||||
<label for="manage.newUI.favicons" i18n-text="manageFavicons">
|
||||
<input id="manage.newUI.favicons" type="checkbox">
|
||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
<a href="#" data-toggle-on-click="#faviconsHelp" tabindex="0">
|
||||
<svg class="svg-icon select-arrow">
|
||||
<title i18n-text="optionsSubheading"></title>
|
||||
<use xlink:href="#svg-icon-select-arrow"/>
|
||||
</svg>
|
||||
</a>
|
||||
</label>
|
||||
<div id="faviconsHelp" class="hidden" i18n-text="manageFaviconsHelp">
|
||||
<div>
|
||||
<label for="manage.newUI.faviconsGray" i18n-text="manageFaviconsGray">
|
||||
<input id="manage.newUI.faviconsGray" type="checkbox">
|
||||
<svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
|
||||
</div>
|
||||
|
||||
<div id="options-buttons">
|
||||
<button id="manage-options-button" i18n-text="openOptions"></button>
|
||||
<button id="manage-shortcuts-button" class="chromium-only"
|
||||
i18n-text="shortcuts"
|
||||
i18n-title="shortcutsNote"></button>
|
||||
<a id="find-editor-styles"
|
||||
href="https://userstyles.org/styles/browse/chrome-extension"
|
||||
i18n-title="editorStylesButton"
|
||||
target="_blank"><button i18n-text="cm_theme" tabindex="-1"></button></a>
|
||||
</div>
|
||||
|
||||
</details>
|
||||
|
||||
<details id="backup" data-pref="manage.backup.expanded">
|
||||
<summary><h2 id="backup-title" i18n-text="backupButtons"></h2></summary>
|
||||
<span id="backup-message" i18n-text="backupMessage"></span>
|
||||
|
|
|
|||
|
|
@ -285,14 +285,6 @@ a:hover {
|
|||
margin-top: .5rem;
|
||||
}
|
||||
|
||||
#options-buttons {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-top: .1rem;
|
||||
}
|
||||
|
||||
#options-buttons > a,
|
||||
#options-buttons > button,
|
||||
#backup-buttons button {
|
||||
margin: 0 .2rem .5rem 0;
|
||||
}
|
||||
|
|
@ -695,65 +687,6 @@ a:hover {
|
|||
filter: grayscale(0);
|
||||
}
|
||||
|
||||
#newUIoptions {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.newUI #newUIoptions {
|
||||
display: initial;
|
||||
}
|
||||
|
||||
#newUIoptions > * {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: auto;
|
||||
flex-wrap: wrap;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#newUIoptions input[type="number"] {
|
||||
width: 3em;
|
||||
margin-right: .5em;
|
||||
}
|
||||
|
||||
#newUIoptions [data-toggle-on-click="#faviconsHelp"] {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
}
|
||||
|
||||
#newUIoptions [data-toggle-on-click] > svg {
|
||||
position: static;
|
||||
}
|
||||
|
||||
#newUIoptions [data-toggle-on-click]:not([open]) > svg {
|
||||
/* note: without ">" FF52 also transforms the nested svg inside <use> */
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
html:not(.newUI) #newUIoptions + * {
|
||||
margin-top: .5em;
|
||||
}
|
||||
|
||||
input[id^="manage.newUI"] {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#faviconsHelp {
|
||||
overflow-y: auto;
|
||||
font-size: 90%;
|
||||
padding: 1ex 0 2ex 16px;
|
||||
}
|
||||
|
||||
#faviconsHelp div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-top: 1ex;
|
||||
}
|
||||
|
||||
/* Default, no update buttons */
|
||||
.updater-icons .update,
|
||||
.updater-icons .check-update {
|
||||
|
|
@ -1078,6 +1011,10 @@ input[id^="manage.newUI"] {
|
|||
animation: fadeout .25s ease-in-out;
|
||||
}
|
||||
|
||||
.settings-column {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@ global messageBox getStyleWithNoCode
|
|||
objectDiff
|
||||
configDialog
|
||||
sorter msg prefs API onDOMready $ $$ $create template setupLivePrefs
|
||||
URLS enforceInputRange t tWordBreak formatDate
|
||||
t tWordBreak formatDate
|
||||
getOwnTab getActiveTab openURL animateElement sessionStorageHash debounce
|
||||
scrollElementIntoView CHROME VIVALDI FIREFOX router
|
||||
bulkChangeTime:true bulkChangeQueue
|
||||
|
|
@ -19,15 +19,24 @@ const ENTRY_ID_PREFIX = '#' + ENTRY_ID_PREFIX_RAW;
|
|||
|
||||
const BULK_THROTTLE_MS = 100;
|
||||
|
||||
// define pref-mapped ids separately
|
||||
const newUI = {
|
||||
enabled: prefs.get('manage.newUI'),
|
||||
favicons: prefs.get('manage.newUI.favicons'),
|
||||
faviconsGray: prefs.get('manage.newUI.faviconsGray'),
|
||||
targets: prefs.get('manage.newUI.targets'),
|
||||
renderClass() {
|
||||
document.documentElement.classList.toggle('newUI', newUI.enabled);
|
||||
},
|
||||
enabled: null, // the global option should come first
|
||||
favicons: null,
|
||||
faviconsGray: null,
|
||||
targets: null,
|
||||
};
|
||||
// ...add utility functions
|
||||
Object.assign(newUI, {
|
||||
ids: Object.keys(newUI),
|
||||
prefGroup: 'manage.newUI',
|
||||
prefKeyForId: id => id === 'enabled' ? newUI.prefGroup : `${newUI.prefGroup}.${id}`,
|
||||
renderClass: () => document.documentElement.classList.toggle('newUI', newUI.enabled),
|
||||
});
|
||||
// ...read the actual values
|
||||
for (const id of newUI.ids) {
|
||||
newUI[id] = prefs.get(newUI.prefKeyForId(id));
|
||||
}
|
||||
newUI.renderClass();
|
||||
|
||||
const TARGET_TYPES = ['domains', 'urls', 'urlPrefixes', 'regexps'];
|
||||
|
|
@ -88,10 +97,6 @@ function initGlobalEvents() {
|
|||
installed.onclick = handleEvent.entryClicked;
|
||||
$('#manage-options-button').onclick = () => router.updateHash('#stylus-options');
|
||||
$('#sync-styles').onclick = () => router.updateHash('#stylus-options');
|
||||
{
|
||||
const btn = $('#manage-shortcuts-button');
|
||||
btn.onclick = btn.onclick || (() => openURL({url: URLS.configureCommands}));
|
||||
}
|
||||
$$('#header a[href^="http"]').forEach(a => (a.onclick = handleEvent.external));
|
||||
// show date installed & last update on hover
|
||||
installed.addEventListener('mouseover', handleEvent.lazyAddEntryTitle);
|
||||
|
|
@ -113,19 +118,11 @@ function initGlobalEvents() {
|
|||
};
|
||||
});
|
||||
|
||||
// triggered automatically by setupLivePrefs() below
|
||||
enforceInputRange($('#manage.newUI.targets'));
|
||||
|
||||
// N.B. triggers existing onchange listeners
|
||||
setupLivePrefs();
|
||||
sorter.init();
|
||||
|
||||
prefs.subscribe([
|
||||
'manage.newUI',
|
||||
'manage.newUI.favicons',
|
||||
'manage.newUI.faviconsGray',
|
||||
'manage.newUI.targets',
|
||||
], () => switchUI());
|
||||
prefs.subscribe(newUI.ids.map(newUI.prefKeyForId), () => switchUI());
|
||||
|
||||
switchUI({styleOnly: true});
|
||||
|
||||
|
|
@ -488,7 +485,7 @@ Object.assign(handleEvent, {
|
|||
const y = Math.max(0, top);
|
||||
const first = document.elementFromPoint(x, y);
|
||||
const lastOffset = first.offsetTop + window.innerHeight;
|
||||
const numTargets = prefs.get('manage.newUI.targets');
|
||||
const numTargets = newUI.targets;
|
||||
let entry = first && first.closest('.entry') || installed.children[0];
|
||||
while (entry && entry.offsetTop <= lastOffset) {
|
||||
favicons.push(...$$('img', entry).slice(0, numTargets).filter(img => img.dataset.src));
|
||||
|
|
@ -618,10 +615,8 @@ function switchUI({styleOnly} = {}) {
|
|||
const current = {};
|
||||
const changed = {};
|
||||
let someChanged = false;
|
||||
// ensure the global option is processed first
|
||||
for (const el of [$('#manage.newUI'), ...$$('[id^="manage.newUI."]')]) {
|
||||
const id = el.id.replace(/^manage\.newUI\.?/, '') || 'enabled';
|
||||
const value = el.type === 'checkbox' ? el.checked : Number(el.value);
|
||||
for (const id of newUI.ids) {
|
||||
const value = prefs.get(newUI.prefKeyForId(id));
|
||||
const valueChanged = value !== newUI[id] && (id === 'enabled' || current.enabled);
|
||||
current[id] = value;
|
||||
changed[id] = valueChanged;
|
||||
|
|
|
|||
49
options.html
49
options.html
|
|
@ -41,6 +41,16 @@
|
|||
|
||||
<div id="options">
|
||||
|
||||
<div class="block">
|
||||
<h1 i18n-text="cm_theme"></h1>
|
||||
<div class="items">
|
||||
<label>
|
||||
<a i18n-text="editorStylesButton" target="_blank"
|
||||
href="https://userstyles.org/styles/browse/chrome-extension"> - userstyles.org</a>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<h1 i18n-text="optionsCustomizeIcon"></h1>
|
||||
<div class="items">
|
||||
|
|
@ -125,6 +135,45 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block">
|
||||
<h1 i18n-text="openManage"></h1>
|
||||
<div class="items">
|
||||
<label>
|
||||
<span i18n-text="manageNewUI"></span>
|
||||
<span class="onoffswitch">
|
||||
<input type="checkbox" id="manage.newUI" class="slider">
|
||||
<span></span>
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
<span i18n-text="manageFavicons">
|
||||
<a data-cmd="note"
|
||||
i18n-title="manageFaviconsHelp"
|
||||
href="#"
|
||||
class="svg-inline-wrapper"
|
||||
tabindex="0">
|
||||
<svg class="svg-icon info"><use xlink:href="#svg-icon-help"/></svg>
|
||||
</a>
|
||||
</span>
|
||||
<span class="onoffswitch">
|
||||
<input type="checkbox" id="manage.newUI.favicons" class="slider">
|
||||
<span></span>
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
<span i18n-text="manageFaviconsGray"></span>
|
||||
<span class="onoffswitch">
|
||||
<input type="checkbox" id="manage.newUI.faviconsGray" class="slider">
|
||||
<span></span>
|
||||
</span>
|
||||
</label>
|
||||
<label>
|
||||
<span i18n-text="manageMaxTargets"></span>
|
||||
<input id="manage.newUI.targets" type="number" min="1" max="99">
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="block" id="updates">
|
||||
<h1 i18n-text="optionsCustomizeUpdate"></h1>
|
||||
<div class="items">
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
|
||||
setupLivePrefs();
|
||||
setupRadioButtons();
|
||||
enforceInputRange($('#popupWidth'));
|
||||
$$('input[min], input[max]').forEach(enforceInputRange);
|
||||
setTimeout(splitLongTooltips);
|
||||
|
||||
// https://github.com/openstyles/stylus/issues/822
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user