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

manage: don't flicker newUI sub-options

Browse Source
This commit is contained in:
tophf 2017-04-08 14:03:54 +03:00
parent e3b461a9e8
commit 4f5e56bc55
3 changed files with 24 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
manage.css
View File

@ -306,6 +306,14 @@ summary {
filter: grayscale(0);
}
#newUIoptions {
display: none;
}
.newUI #newUIoptions {
display: initial;
}
#newUIoptions label {
display: flex;
align-items: center;

4
manage.html
View File

@ -78,6 +78,7 @@
<script src="apply.js"></script>
<script src="dom.js"></script>
<script src="localization.js"></script>
<script src="manage.js"></script>
</head>
<body id="stylus-manage" i18n-dragndrop-hint="dragDropMessage">
@ -112,7 +113,7 @@
<div id="options">
<h2 id="options-heading" i18n-text="optionsHeading"></h2>
<label><input id="manage.newUI" type="checkbox"><span i18n-text="manageNewUI"></span></label>
<div id="newUIoptions" class="hidden">
<div id="newUIoptions">
<label><input id="manage.newUI.favicons" type="checkbox"><span i18n-text="manageFavicons"></span></label>
<label><input id="manage.newUI.targets" type="number" min="1" max="99"><span i18n-text="manageMaxTargets"></span></label>
</div>
@ -172,7 +173,6 @@
</svg>
<script src="manage.js"></script>
<script src="backup/fileSaveLoad.js"></script>
<script src="msgbox/msgbox.js"></script>

21
manage.js
View File

@ -1,12 +1,17 @@
/* global messageBox */
'use strict';
const installed = $('#installed');
let installed;
const newUI = {
enabled: prefs.get('manage.newUI'),
favicons: prefs.get('manage.newUI.favicons'),
targets: prefs.get('manage.newUI.targets'),
renderClass() {
document.documentElement.classList.toggle('newUI', newUI.enabled);
},
};
newUI.renderClass();
const TARGET_TYPES = ['domains', 'urls', 'urlPrefixes', 'regexps'];
const GET_FAVICON_URL = 'https://www.google.com/s2/favicons?domain=';
@ -14,10 +19,12 @@ const OWN_ICON = chrome.app.getDetails().icons['16'];
const handleEvent = {};
getStylesSafe()
.then(showStyles)
.then(initGlobalEvents);
Promise.all([
getStylesSafe(),
onDOMready().then(initGlobalEvents),
]).then(([styles]) => {
showStyles(styles);
});
chrome.runtime.onMessage.addListener(msg => {
@ -34,6 +41,7 @@ chrome.runtime.onMessage.addListener(msg => {
function initGlobalEvents() {
installed = $('#installed');
installed.onclick = handleEvent.entryClicked;
$('#check-all-updates').onclick = checkUpdateAll;
$('#apply-all-updates').onclick = applyUpdateAll;
@ -371,9 +379,8 @@ function switchUI({styleOnly} = {}) {
Object.assign(newUI, {enabled, favicons, targets});
installed.classList.toggle('newUI', enabled);
newUI.renderClass();
installed.classList.toggle('has-favicons', favicons);
$('#newUIoptions').classList.toggle('hidden', !enabled);
$('#style-overrides').textContent = `
.newUI .targets {
max-height: ${newUI.targets * 18}px;