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

Use options dialog style

Browse Source
This commit is contained in:
eight 2017-09-06 05:33:08 +08:00
parent 4e0f4b34bb
commit bf455752ec
6 changed files with 111 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
manage.html
View File

@ -5,6 +5,7 @@
<title i18n-text="manageTitle"></title> <title i18n-text="manageTitle"></title>
<link rel="stylesheet" href="manage/manage.css"> <link rel="stylesheet" href="manage/manage.css">
<link rel="stylesheet" href="msgbox/msgbox.css"> <link rel="stylesheet" href="msgbox/msgbox.css">
<link rel="stylesheet" href="options/onoffswitch.css">
<style id="style-overrides"></style> <style id="style-overrides"></style>

18
manage/config-dialog.js
View File

@ -7,7 +7,7 @@ function configDialog(style) {
const form = buildConfigForm(); const form = buildConfigForm();
return messageBox({ return messageBox({
title: `Configure ${style.name}`, title: style.name,
className: 'config-dialog', className: 'config-dialog',
contents: form.el, contents: form.el,
buttons: [ buttons: [
@ -42,14 +42,21 @@ function configDialog(style) {
va.value = colorParser.format(color); va.value = colorParser.format(color);
va.inputColor.style.opacity = color.a; va.inputColor.style.opacity = color.a;
}; };
appendChild = [va.label, va.inputColor, va.inputAlpha]; appendChild = [
$element({appendChild: [va.inputColor, va.inputAlpha]})
];
} else if (va.type === 'checkbox') { } else if (va.type === 'checkbox') {
va.input = $element({tag: 'input', type: 'checkbox'}); va.input = $element({tag: 'input', type: 'checkbox'});
va.input.onchange = () => { va.input.onchange = () => {
va.dirty = true; va.dirty = true;
va.value = String(Number(va.input.checked)); va.value = String(Number(va.input.checked));
}; };
appendChild = [va.input, $element({tag: 'span', appendChild: va.label})]; appendChild = [
$element({tag: 'span', className: 'onoffswitch', appendChild: [
va.input,
$element({tag: 'span'})
]})
];
} else if (va.type === 'select') { } else if (va.type === 'select') {
va.input = $element({ va.input = $element({
tag: 'select', tag: 'select',
@ -61,15 +68,16 @@ function configDialog(style) {
va.dirty = true; va.dirty = true;
va.value = va.input.value; va.value = va.input.value;
}; };
appendChild = [va.label, va.input]; appendChild = [va.input];
} else { } else {
va.input = $element({tag: 'input', type: 'text'}); va.input = $element({tag: 'input', type: 'text'});
va.input.oninput = () => { va.input.oninput = () => {
va.dirty = true; va.dirty = true;
va.value = va.input.value; va.value = va.input.value;
}; };
appendChild = [va.label, va.input]; appendChild = [va.input];
} }
appendChild.unshift($element({tag: 'span', appendChild: va.label}));
labels.push($element({ labels.push($element({
tag: 'label', tag: 'label',
className: `config-${va.type}`, className: `config-${va.type}`,

56
manage/manage.css
View File

@ -642,30 +642,48 @@ fieldset > *:not(legend) {
} }
/* config dialog */ /* config dialog */
#message-box.config-dialog input, .config-dialog label {
#message-box.config-dialog select { display: flex;
display: block; padding: .75em 0;
align-items: center;
border-top: 1px dotted #ccc;
}
.config-dialog label:first-child {
padding-top: 0;
border-top: none;
}
.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 {
width: 100%; width: 100%;
margin: .4rem 0 .6rem; margin: 0;
padding-left: .25rem; height: 2em;
border-radius: .25rem; box-sizing: border-box;
border-width: 1px;
} }
#message-box.config-dialog .config-checkbox::after { .config-dialog input[type="text"] {
content: ""; padding-left: 0.25em;
display: block;
} }
#message-box.config-dialog .config-checkbox > * { .config-dialog label > :last-child {
display: inline-block; width: 60px;
vertical-align: middle; box-sizing: border-box;
margin: .4rem 0 .6rem; flex-shrink: 0;
}
#message-box.config-dialog input[type=checkbox] {
width: auto;
margin-right: 0.4em;
} }
@keyframes fadein { @keyframes fadein {

1
options.html
View File

@ -3,6 +3,7 @@
<head> <head>
<title i18n-text-append="optionsHeading">Stylus </title> <title i18n-text-append="optionsHeading">Stylus </title>
<link rel="stylesheet" href="options/options.css"> <link rel="stylesheet" href="options/options.css">
<link rel="stylesheet" href="options/onoffswitch.css">
<script src="js/dom.js"></script> <script src="js/dom.js"></script>
<script src="js/messaging.js"></script> <script src="js/messaging.js"></script>
<script src="js/localization.js"></script> <script src="js/localization.js"></script>

59
options/onoffswitch.css Normal file
View File

@ -0,0 +1,59 @@
/* On/Off FlipSwitch https://proto.io/freebies/onoff/ */
.onoffswitch {
position: relative;
margin: 1ex 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch input {
display: none;
}
.onoffswitch span {
display: block;
overflow: hidden;
cursor: pointer;
height: 12px;
padding: 0;
line-height: 12px;
border: 0 solid #E3E3E3;
border-radius: 12px;
background-color: #E0E0E0;
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
}
.onoffswitch span::before {
content: "";
display: block;
width: 18px;
height: 18px;
margin: -3px;
background: #efefef;
position: absolute;
top: 0;
bottom: 0;
right: 46px;
border-radius: 18px;
box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0.4);
}
.onoffswitch input:checked + span {
background-color: #CAEBE3;
}
.onoffswitch input:checked + span, .onoffswitch input:checked + span::before {
border-color: #CAEBE3;
}
.onoffswitch input:checked + span .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch input:checked + span::before {
right: 0;
background-color: #04BA9F;
box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);
}

60
options/options.css
View File

@ -212,63 +212,3 @@ sup {
25% { opacity: 1 } 25% { opacity: 1 }
100% { opacity: 0 } 100% { opacity: 0 }
} }
/* On/Off FlipSwitch https://proto.io/freebies/onoff/ */
.onoffswitch {
position: relative;
margin: 1ex 0;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.onoffswitch input {
display: none;
}
.onoffswitch span {
display: block;
overflow: hidden;
cursor: pointer;
height: 12px;
padding: 0;
line-height: 12px;
border: 0 solid #E3E3E3;
border-radius: 12px;
background-color: #E0E0E0;
box-shadow: inset 2px 2px 4px rgba(0,0,0,0.1);
}
.onoffswitch span::before {
content: "";
display: block;
width: 18px;
height: 18px;
margin: -3px;
background: #efefef;
position: absolute;
top: 0;
bottom: 0;
right: 46px;
border-radius: 18px;
box-shadow: 0 3px 13px 0 rgba(0, 0, 0, 0.4);
}
.onoffswitch input:checked + span {
background-color: #CAEBE3;
}
.onoffswitch input:checked + span, .onoffswitch input:checked + span::before {
border-color: #CAEBE3;
}
.onoffswitch input:checked + span .onoffswitch-inner {
margin-left: 0;
}
.onoffswitch input:checked + span::before {
right: 0;
background-color: #04BA9F;
box-shadow: 3px 6px 18px 0 rgba(0, 0, 0, 0.2);
}