Add config dialog to popup (#283)

This commit is contained in:
eight 2017-12-06 05:14:21 +08:00 committed by tophf
parent db621b8657
commit 07a0518586
10 changed files with 240 additions and 125 deletions

View File

@ -6,6 +6,7 @@
<title i18n-text="manageTitle"></title>
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="manage/manage.css">
<link rel="stylesheet" href="manage/config-dialog.css">
<link rel="stylesheet" href="msgbox/msgbox.css">
<link rel="stylesheet" href="options/onoffswitch.css">
<link rel="stylesheet" href="vendor-overwrites/colorpicker/colorpicker.css">

102
manage/config-dialog.css Normal file
View File

@ -0,0 +1,102 @@
/* config dialog */
.config-dialog .config-heading {
float: right;
margin: -1.25rem 0 0 0;
font-size: 0.9em;
}
.config-dialog label {
display: flex;
padding: .75em 0;
align-items: center;
}
.config-dialog .select-resizer {
position: static;
}
.config-dialog label:first-child {
padding-top: 0;
}
.config-dialog label:last-child {
padding-bottom: 0;
}
.config-dialog label:not(:first-child) {
border-top: 1px dotted #ccc;
}
.config-dialog label > :first-child {
margin-right: 8px;
flex-grow: 1;
}
.config-dialog label:not([disabled]) > :first-child {
cursor: default;
}
.config-dialog label:not([disabled]):hover > :first-child {
text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
cursor: pointer;
}
.config-dialog input,
.config-dialog select,
.config-dialog .onoffswitch {
width: var(--onoffswitch-width);
margin: 0;
height: 2em;
box-sizing: border-box;
vertical-align: middle;
}
.config-dialog .select-resizer,
.config-dialog select {
width: auto;
min-width: var(--onoffswitch-width);
max-width: 124px;
left: auto;
position: relative;
}
.config-dialog .onoffswitch {
height: auto;
margin: calc((2em - 12px) / 2) 0;
}
.config-dialog input[type="text"] {
padding-left: 0.25em;
}
.config-dialog label > :last-child {
box-sizing: border-box;
flex-shrink: 0;
}
.config-dialog label > :last-child:not(.onoffswitch):not(.select-resizer) > :not(:last-child) {
margin-right: 4px;
}
.cm-colorview::before,
.color-swatch {
width: var(--onoffswitch-width) !important;
height: 20px !important;
}
.cm-colorview::before {
margin: 1px !important;
}
.color-swatch {
position: absolute;
border: 1px solid gray;
margin-top: -22px;
cursor: pointer;
}
.colorpicker-popup {
z-index: 2147483647 !important;
border: none !important;
box-shadow: 3px 3px 50px rgba(0,0,0,.5) !important;
}

View File

@ -865,109 +865,6 @@ input[id^="manage.newUI"] {
text-overflow: ellipsis;
}
/* config dialog */
.config-dialog .config-heading {
float: right;
margin: -1.25rem 0 0 0;
font-size: 0.9em;
}
.config-dialog label {
display: flex;
padding: .75em 0;
align-items: center;
}
.config-dialog .select-resizer {
position: static;
}
.config-dialog label:first-child {
padding-top: 0;
}
.config-dialog label:last-child {
padding-bottom: 0;
}
.config-dialog label:not(:first-child) {
border-top: 1px dotted #ccc;
}
.config-dialog label > :first-child {
margin-right: 8px;
flex-grow: 1;
}
.config-dialog label:not([disabled]) > :first-child {
cursor: default;
}
.config-dialog label:not([disabled]):hover > :first-child {
text-shadow: 0 0 0.01px rgba(0, 0, 0, .25);
cursor: pointer;
}
.config-dialog input,
.config-dialog select,
.config-dialog .onoffswitch {
width: var(--onoffswitch-width);
margin: 0;
height: 2em;
box-sizing: border-box;
vertical-align: middle;
}
.config-dialog .select-resizer,
.config-dialog select {
width: auto;
min-width: var(--onoffswitch-width);
max-width: 124px;
left: auto;
position: relative;
}
.config-dialog .onoffswitch {
height: auto;
margin: calc((2em - 12px) / 2) 0;
}
.config-dialog input[type="text"] {
padding-left: 0.25em;
}
.config-dialog label > :last-child {
box-sizing: border-box;
flex-shrink: 0;
}
.config-dialog label > :last-child:not(.onoffswitch):not(.select-resizer) > :not(:last-child) {
margin-right: 4px;
}
.cm-colorview::before,
.color-swatch {
width: var(--onoffswitch-width) !important;
height: 20px !important;
}
.cm-colorview::before {
margin: 1px !important;
}
.color-swatch {
position: absolute;
border: 1px solid gray;
margin-top: -22px;
cursor: pointer;
}
.colorpicker-popup {
z-index: 2147483647 !important;
border: none !important;
box-shadow: 3px 3px 50px rgba(0,0,0,.5) !important;
}
@keyframes fadein {
from {
opacity: 0;

View File

@ -132,6 +132,25 @@
margin: 0 .375rem;
}
/* popup */
#message-box.stylus-popup {
margin: 0;
align-items: center;
justify-content: center;
}
#message-box.stylus-popup > div {
max-width: 90vw;
top: auto;
right: auto;
}
#message-box.calculate-size {
white-space: nowrap;
}
#message-box.calculate-size > div {
max-width: none;
max-height: none;
}
@keyframes fadein {
from {
opacity: 0;

View File

@ -12,6 +12,25 @@ function messageBox({
bindGlobalListeners();
createElement();
document.body.appendChild(messageBox.element);
if (location.href.includes('popup.html')) {
messageBox.isPopup = true;
messageBox.element.classList.add('stylus-popup');
// calculate size
messageBox.element.classList.add('calculate-size');
const {offsetWidth, offsetHeight} = messageBox.element.children[0];
messageBox.element.classList.remove('calculate-size');
// for colorpicker
const MIN_WIDTH = 350;
const MIN_HEIGHT = 250;
const width = Math.max(Math.min(offsetWidth / 0.9 + 2, 800), MIN_WIDTH);
const height = Math.max(Math.min(offsetHeight / 0.9 + 2, 600), MIN_HEIGHT);
document.body.style.minWidth = `${width}px`;
document.body.style.minHeight = `${height}px`;
}
if (onshow) {
onshow(messageBox.element);
}
@ -96,6 +115,10 @@ function messageBox({
messageBox.element.remove();
messageBox.element = null;
messageBox.resolve = null;
if (messageBox.isPopup) {
document.body.style.minWidth = '';
document.body.style.minHeight = '';
}
}
}

View File

@ -4,7 +4,6 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="global.css">
<link rel="stylesheet" href="popup/popup.css">
<style id="firefox-transitions-bug-suppressor">
/* restrict to FF */
@ -33,6 +32,11 @@
<div class="actions">
<a href="#" class="enable" i18n-text="enableStyleLabel"></a>
<a href="#" class="disable" i18n-text="disableStyleLabel"></a>
<a href="#" class="configure" i18n-title="configureStyle">
<svg class="svg-icon config" viewBox="0 0 14 16">
<path d="m6.2578 1.1191c-0.4526 0-0.81641 0.36381-0.81641 0.81641v0.69531a5.5932 5.5932 0 0 0-1.1328 0.47266l-0.49414-0.49414c-0.16002-0.16002-0.36907-0.24023-0.57812-0.24023-0.20905 0-0.41811 0.080216-0.57812 0.24023l-1.0488 1.0488c-0.32004 0.32004-0.32004 0.83621 0 1.1562l0.49023 0.49023a5.5932 5.5932 0 0 0-0.4668 1.1348h-0.69726c-0.4526 0-0.81641 0.36576-0.81641 0.81836v1.4844c0 0.4526 0.36381 0.81641 0.81641 0.81641h0.69726a5.5932 5.5932 0 0 0 0.4707 1.1328l-0.49414 0.49414c-0.32004 0.32004-0.32004 0.83426 0 1.1543l1.0488 1.0508c0.32004 0.32003 0.83621 0.32003 1.1562 0l0.49023-0.49024a5.5932 5.5932 0 0 0 1.1367 0.4668v0.69727c0 0.4526 0.36381 0.81641 0.81641 0.81641h1.4844c0.4526 0 0.81641-0.36381 0.81641-0.81641v-0.69727a5.5932 5.5932 0 0 0 1.1328-0.4707l0.49414 0.49414c0.32004 0.32003 0.83622 0.32003 1.1562 0l1.0488-1.0508c0.32004-0.32004 0.32004-0.83426 0-1.1543l-0.49023-0.49023a5.5932 5.5932 0 0 0 0.4668-1.1367h0.69726c0.4526 0 0.81641-0.36381 0.81641-0.81641v-1.4844c0-0.4526-0.36381-0.81836-0.81641-0.81836h-0.69726a5.5932 5.5932 0 0 0-0.4707-1.1309l0.49414-0.49414c0.32004-0.32004 0.32004-0.83621 0-1.1562l-1.0488-1.0488c-0.16002-0.16002-0.36907-0.24023-0.57812-0.24023s-0.41811 0.080216-0.57812 0.24023l-0.49023 0.49023a5.5932 5.5932 0 0 0-1.1367-0.4668v-0.69727c0-0.4526-0.36381-0.81641-0.81641-0.81641zm0.56836 0.7793h0.34766c0.22291 0 0.40234 0.17943 0.40234 0.40234v1.1621a4.5763 4.5763 0 0 1 2.2227 0.92383l0.82422-0.82422c0.15762-0.15762 0.41074-0.15762 0.56836 0l0.24609 0.24609c0.15762 0.15762 0.15762 0.41074 0 0.56836l-0.82226 0.82227a4.5763 4.5763 0 0 1 0.91797 2.2246h1.166c0.22291 0 0.40234 0.17943 0.40234 0.40234v0.34766c0 0.22291-0.17943 0.40234-0.40234 0.40234h-1.1641a4.5763 4.5763 0 0 1-0.92188 2.2227l0.82422 0.82422c0.15762 0.15762 0.15762 0.41074 0 0.56836l-0.24609 0.24609c-0.15762 0.15763-0.41074 0.15763-0.56836 0l-0.82227-0.82226a4.5763 4.5763 0 0 1-2.2246 0.91797v1.166c0 0.22291-0.17943 0.40234-0.40234 0.40234h-0.34766c-0.22291 0-0.40234-0.17943-0.40234-0.40234v-1.1641a4.5763 4.5763 0 0 1-2.2227-0.92188l-0.82422 0.82422c-0.15762 0.15763-0.41074 0.15763-0.56836 0l-0.24609-0.24609c-0.15762-0.15762-0.15762-0.41074 0-0.56836l0.82226-0.82226a4.5763 4.5763 0 0 1-0.91797-2.2246h-1.166c-0.22291 0-0.40234-0.17943-0.40234-0.40234v-0.34766c0-0.22291 0.17943-0.40234 0.40234-0.40234h1.1641a4.5763 4.5763 0 0 1 0.92188-2.2227l-0.82422-0.82422c-0.15762-0.15762-0.15762-0.41074 0-0.56836l0.24609-0.24609c0.15762-0.15762 0.41074-0.15762 0.56836 0l0.82227 0.82227a4.5763 4.5763 0 0 1 2.2246-0.91797v-1.166c0-0.22291 0.17943-0.40234 0.40234-0.40234zm0.17383 2.7109a3.3898 3.3898 0 0 0-3.3906 3.3906 3.3898 3.3898 0 0 0 3.3906 3.3887 3.3898 3.3898 0 0 0 3.3906-3.3887 3.3898 3.3898 0 0 0-3.3906-3.3906zm0 1.1875a2.2034 2.2034 0 0 1 2.2031 2.2031 2.2034 2.2034 0 0 1-2.2031 2.2031 2.2034 2.2034 0 0 1-2.2031-2.2031 2.2034 2.2034 0 0 1 2.2031-2.2031z"/>
</svg>
</a>
<a class="style-edit-link" href="edit.html?id=" i18n-title="editStyleLabel">
<svg class="svg-icon edit" viewBox="0 0 14 16">
<path fill-rule="evenodd" d="M0 12v3h3l8-8-3-3-8 8zm3 2H1v-2h1v1h1v1zm10.3-9.3L12 6 9 3l1.3-1.3a.996.996 0 0 1 1.41 0l1.59 1.59c.39.39.39 1.02 0 1.41z"/>
@ -81,11 +85,23 @@
</div>
</template>
<link rel="stylesheet" href="vendor-overwrites/colorpicker/colorpicker.css">
<script src="vendor-overwrites/colorpicker/colorpicker.js"></script>
<link rel="stylesheet" href="msgbox/msgbox.css">
<script src="msgbox/msgbox.js"></script>
<link rel="stylesheet" href="options/onoffswitch.css">
<link rel="stylesheet" href="manage/config-dialog.css">
<script src="manage/config-dialog.js"></script>
<script src="js/dom.js"></script>
<script src="js/messaging.js"></script>
<script src="js/localization.js"></script>
<script src="js/prefs.js"></script>
<script src="content/apply.js"></script>
<link rel="stylesheet" href="popup/popup.css">
<script src="popup/popup.js"></script>
<script src="popup/hotkeys.js"></script>
</head>

View File

@ -1,18 +1,36 @@
/* global applyOnMessage installed */
'use strict';
window.addEventListener('showStyles:done', function _() {
window.removeEventListener('showStyles:done', _);
// eslint-disable-next-line no-var
var hotkeys = (() => {
let togglablesShown;
let togglables;
let enabled = false;
let ready = false;
let togglablesShown = true;
let togglables = getTogglables();
window.addEventListener('showStyles:done', function _() {
window.removeEventListener('showStyles:done', _);
togglablesShown = true;
togglables = getTogglables();
ready = true;
setState(true);
initHotkeyInfo();
});
window.addEventListener('keydown', onKeyDown);
initHotkeyInfo();
return;
return {setState};
function setState(newState = !enabled) {
if (!ready) {
throw new Error('hotkeys no ready');
}
if (newState !== enabled) {
window[`${newState ? 'add' : 'remove'}EventListener`]('keydown', onKeyDown);
enabled = newState;
}
}
function onKeyDown(event) {
if (event.ctrlKey || event.altKey || event.metaKey) {
if (event.ctrlKey || event.altKey || event.metaKey || !enabled) {
return;
}
let entry;
@ -165,4 +183,4 @@ window.addEventListener('showStyles:done', function _() {
});
}
}
});
})();

View File

@ -1,3 +1,12 @@
:root {
--header-width: 280px;
--checkbox-width: 24px;
--name-padding-left: 40px;
--name-padding-right: 40px;
--actions-width: 75px;
--onoffswitch-width: 60px;
}
html, body {
height: min-content;
}
@ -14,7 +23,7 @@ body {
color: #000;
}
body > div:not(#installed) {
body > div:not(#installed):not(#message-box):not(.colorpicker-popup) {
margin-left: 9px;
margin-right: 9px;
}
@ -216,14 +225,15 @@ html[style] .entry:nth-child(10):before {
content: "0";
}
.entry .style-edit-link {
margin-right: 2px;
.entry .actions {
margin-left: -1px;
margin-right: -1px;
}
.entry .style-edit-link,
.entry .delete {
.entry .actions > * {
display: inline-block;
padding: 0 1px 0;
padding: 0 1px;
margin: 0 1px;
}
.not-applied .checker,
@ -331,8 +341,8 @@ body.blocked .actions > .main-controls {
/* Never shown, but can be enabled with a style */
.enable,
.disable {
.entry .actions > .enable,
.entry .actions > .disable {
display: none;
}

View File

@ -1,3 +1,5 @@
/* global configDialog hotkeys */
'use strict';
let installed;
@ -245,6 +247,7 @@ function createStyleElement({
Object.assign(entry, {
id: ENTRY_ID_PREFIX_RAW + style.id,
styleId: style.id,
styleIsUsercss: Boolean(style.usercssData),
className: entry.className + ' ' + (style.enabled ? 'enabled' : 'disabled'),
onmousedown: handleEvent.maybeEdit,
});
@ -275,9 +278,18 @@ function createStyleElement({
}
});
const config = $('.configure', entry);
if (!style.usercssData && style.updateUrl && style.updateUrl.includes('?') && style.url) {
config.href = style.url;
config.target = '_blank';
} else if (!style.usercssData || !Object.keys(style.usercssData.vars || {}).length) {
config.style.display = 'none';
}
$('.enable', entry).onclick = handleEvent.toggle;
$('.disable', entry).onclick = handleEvent.toggle;
$('.delete', entry).onclick = handleEvent.delete;
$('.configure', entry).onclick = handleEvent.configure;
invokeOrPostpone(!postponeDetect, detectSloppyRegexps, {entry, style});
@ -347,6 +359,18 @@ Object.assign(handleEvent, {
}
},
configure(event) {
const {styleId, styleIsUsercss} = handleEvent.getClickedStyleElement(event);
if (styleIsUsercss) {
getStylesSafe({id: styleId}).then(([style]) => {
hotkeys.setState(false);
configDialog(style).then(() => {
hotkeys.setState(true);
});
});
}
},
indicator(event) {
const entry = handleEvent.getClickedStyleElement(event);
const info = template.regexpProblemExplanation.cloneNode(true);

View File

@ -550,10 +550,7 @@
}
function onMouseUp(event) {
if (releaseMouse(event, ['saturation', 'hue', 'opacity']) &&
!event.target.closest('.codemirror-colorview, .colorpicker-popup, .CodeMirror')) {
hide();
}
releaseMouse(event, ['saturation', 'hue', 'opacity']);
}
function onMouseMove(event) {
@ -604,6 +601,12 @@
}
}
function onMouseDown(event) {
if (!event.target.closest('.colorpicker-popup')) {
hide();
}
}
//endregion
//region Event utilities
@ -660,6 +663,7 @@
function registerEvents() {
window.addEventListener('keydown', onKeyDown, true);
window.addEventListener('mousedown', onMouseDown, true);
window.addEventListener('close-colorpicker-popup', onCloseRequest, true);
$root.addEventListener('mouseleave', snooze);
$root.addEventListener('mouseenter', stopSnoozing);
@ -681,6 +685,7 @@
function unregisterEvents() {
window.removeEventListener('keydown', onKeyDown, true);
window.removeEventListener('mousedown', onMouseDown, true);
window.removeEventListener('close-colorpicker-popup', hide, true);
$root.removeEventListener('mouseleave', snooze);
$root.removeEventListener('mouseenter', stopSnoozing);