From bf455752ec8f3828625470c5597bceb52e06e830 Mon Sep 17 00:00:00 2001 From: eight Date: Wed, 6 Sep 2017 05:33:08 +0800 Subject: [PATCH] Use options dialog style --- manage.html | 1 + manage/config-dialog.js | 18 +++++++++---- manage/manage.css | 56 +++++++++++++++++++++++++------------- options.html | 1 + options/onoffswitch.css | 59 ++++++++++++++++++++++++++++++++++++++++ options/options.css | 60 ----------------------------------------- 6 files changed, 111 insertions(+), 84 deletions(-) create mode 100644 options/onoffswitch.css diff --git a/manage.html b/manage.html index 308c954f..6db1a624 100644 --- a/manage.html +++ b/manage.html @@ -5,6 +5,7 @@ + diff --git a/manage/config-dialog.js b/manage/config-dialog.js index 6c7d9905..6386629c 100644 --- a/manage/config-dialog.js +++ b/manage/config-dialog.js @@ -7,7 +7,7 @@ function configDialog(style) { const form = buildConfigForm(); return messageBox({ - title: `Configure ${style.name}`, + title: style.name, className: 'config-dialog', contents: form.el, buttons: [ @@ -42,14 +42,21 @@ function configDialog(style) { va.value = colorParser.format(color); 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') { va.input = $element({tag: 'input', type: 'checkbox'}); va.input.onchange = () => { va.dirty = true; 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') { va.input = $element({ tag: 'select', @@ -61,15 +68,16 @@ function configDialog(style) { va.dirty = true; va.value = va.input.value; }; - appendChild = [va.label, va.input]; + appendChild = [va.input]; } else { va.input = $element({tag: 'input', type: 'text'}); va.input.oninput = () => { va.dirty = true; va.value = va.input.value; }; - appendChild = [va.label, va.input]; + appendChild = [va.input]; } + appendChild.unshift($element({tag: 'span', appendChild: va.label})); labels.push($element({ tag: 'label', className: `config-${va.type}`, diff --git a/manage/manage.css b/manage/manage.css index 5b04087f..02f4495f 100644 --- a/manage/manage.css +++ b/manage/manage.css @@ -642,30 +642,48 @@ fieldset > *:not(legend) { } /* config dialog */ -#message-box.config-dialog input, -#message-box.config-dialog select { - display: block; +.config-dialog label { + display: flex; + 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%; - margin: .4rem 0 .6rem; - padding-left: .25rem; - border-radius: .25rem; - border-width: 1px; + margin: 0; + height: 2em; + box-sizing: border-box; } -#message-box.config-dialog .config-checkbox::after { - content: ""; - display: block; +.config-dialog input[type="text"] { + padding-left: 0.25em; } -#message-box.config-dialog .config-checkbox > * { - display: inline-block; - vertical-align: middle; - margin: .4rem 0 .6rem; -} - -#message-box.config-dialog input[type=checkbox] { - width: auto; - margin-right: 0.4em; +.config-dialog label > :last-child { + width: 60px; + box-sizing: border-box; + flex-shrink: 0; } @keyframes fadein { diff --git a/options.html b/options.html index a32e4663..d2e078ad 100644 --- a/options.html +++ b/options.html @@ -3,6 +3,7 @@ Stylus + diff --git a/options/onoffswitch.css b/options/onoffswitch.css new file mode 100644 index 00000000..72630602 --- /dev/null +++ b/options/onoffswitch.css @@ -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); +} diff --git a/options/options.css b/options/options.css index 9ccd6a7d..3d59def4 100644 --- a/options/options.css +++ b/options/options.css @@ -212,63 +212,3 @@ sup { 25% { opacity: 1 } 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); -}