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); filter: grayscale(0);
} }
#newUIoptions {
display: none;
}
.newUI #newUIoptions {
display: initial;
}
#newUIoptions label { #newUIoptions label {
display: flex; display: flex;
align-items: center; align-items: center;

4
manage.html
View File

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

21
manage.js
View File

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