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

Change: use radio instead of select for dark/light mode

Browse Source
This commit is contained in:
eight04 2021-12-04 23:32:34 +08:00
parent 6a324eb151
commit c0fd7c53b7
3 changed files with 51 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
edit.html
View File

@ -453,15 +453,22 @@
<span class="form-label" i18n-text="styleUpdateUrlLabel"></span> <span class="form-label" i18n-text="styleUpdateUrlLabel"></span>
<input type="text"> <input type="text">
</label> </label>
<label class="form-group style-prefer-scheme"> <div class="form-group style-prefer-scheme radio-group">
<!-- FIXME: should we use a different message from install page? --> <!-- FIXME: should we use a different message from install page? -->
<span class="form-label" i18n-text="installPreferSchemeLabel"></span> <span class="form-label" i18n-text="installPreferSchemeLabel"></span>
<select> <label class="radio-item">
<option value="none" i18n-text="installPreferSchemeNone"></option> <input type="radio" name="preferScheme" value="none">
<option value="dark" i18n-text="installPreferSchemeDark"></option> <span class="radio-label" i18n-text="installPreferSchemeNone"></span>
<option value="light" i18n-text="installPreferSchemeLight"></option> </label>
</select> <label class="radio-item">
</label> <input type="radio" name="preferScheme" value="dark">
<span class="radio-label" i18n-text="installPreferSchemeDark"></span>
</label>
<label class="radio-item">
<input type="radio" name="preferScheme" value="light">
<span class="radio-label" i18n-text="installPreferSchemeLight"></span>
</label>
</div>
<div class="form-group style-include"> <div class="form-group style-include">
<div class="form-label" i18n-text="styleIncludeLabel"></div> <div class="form-label" i18n-text="styleIncludeLabel"></div>
<div class="rule-table"></div> <div class="rule-table"></div>

17
edit/settings.css
View File

@ -28,4 +28,19 @@
grid-gap: .3em; grid-gap: .3em;
margin: .3em 0; margin: .3em 0;
} }
.radio-group .form-label {
display: block;
}
.radio-item {
display: flex;
margin: 0.3em 0 .3em;
padding: 0;
align-items: center;
width: max-content;
}
.radio-item input {
margin: 0 0.6em 0 0;
}
[disabled] .radio-label {
opacity: 0.4;
}

22
edit/settings.js
View File

@ -8,7 +8,7 @@ function StyleSettings(editor) {
const inputs = [ const inputs = [
createInput('.style-update-url input', () => style.updateUrl || '', createInput('.style-update-url input', () => style.updateUrl || '',
e => API.styles.config(style.id, 'updateUrl', e.target.value)), e => API.styles.config(style.id, 'updateUrl', e.target.value)),
createInput('.style-prefer-scheme select', () => style.preferScheme || 'none', createRadio('.style-prefer-scheme input', () => style.preferScheme || 'none',
e => API.styles.config(style.id, 'preferScheme', e.target.value)), e => API.styles.config(style.id, 'preferScheme', e.target.value)),
createInput('.style-priority input', () => style.priority || 0, createInput('.style-priority input', () => style.priority || 0,
e => API.styles.config(style.id, 'priority', e.target.valueAsNumber)), e => API.styles.config(style.id, 'priority', e.target.valueAsNumber)),
@ -28,6 +28,26 @@ function StyleSettings(editor) {
inputs.forEach(i => i.update()); inputs.forEach(i => i.update());
} }
function createRadio(selector, getter, setter) {
const els = document.querySelectorAll(selector);
for (const el of els) {
el.addEventListener('change', e => {
if (el.checked) {
setter(e);
}
});
}
return {
update() {
for (const el of els) {
if (el.value === getter()) {
el.checked = true;
}
}
},
};
}
function createInput(selector, getter, setter) { function createInput(selector, getter, setter) {
const el = document.querySelector(selector); const el = document.querySelector(selector);
el.addEventListener('change', setter); el.addEventListener('change', setter);