dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-05-25 04:52:10 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

improve settings ui

Browse source
This commit is contained in:
Send_Nukez 2021-11-15 04:47:54 +01:00
parent aaeb51a6ca
commit f50ccaaf10
4 changed files with 123 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
CHANGELOG.md
View file

@ -9,6 +9,7 @@ Fixed:
- Playing icon position being wrong when listening to a playlist that is inside a folder ([#106 (comment)](https://github.com/JulienMaille/dribbblish-dynamic-theme/issues/106#issuecomment-967208507))
Improved:
- The settings UI now better represents grouped items
- Settings that have been changed from default will now show a line next to them. Inspired by the [Visual Studio Code settings UI](https://d33wubrfki0l68.cloudfront.net/d1f1ea4def506997ced23d3d912154794e530e1c/063d2/assets/img/blog/2020-09-17-vscode-settings/settings-ui.png)
- Checkbox / Switch input styles are now more in line with other input styles
- Available updates are now shown as a clickable button next to your user icon instead of having to open the user menu

85
src/js/ConfigMenu.js
View file

@ -20,6 +20,7 @@ export default class ConfigMenu {
* @property {Boolean} [insertOnTop=false]
* @property {Boolean} [fireInitialChange=true]
* @property {Boolean} [save=true]
* @property {validate} [validate]
* @property {showChildren} [showChildren]
* @property {onAppended} [onAppended]
* @property {onChange} [onChange]
@ -34,6 +35,13 @@ export default class ConfigMenu {
* @property {Boolean} [toggleable=true]
*/
/**
* @callback validate
* @this {DribbblishConfigItem}
* @param {any} value
* @returns {Boolean | String[]}
*/
/**
* @callback showChildren
* @this {DribbblishConfigItem}
@ -116,6 +124,7 @@ export default class ConfigMenu {
elem.setAttribute("type", options.type);
if (options.hidden) elem.setAttribute("hidden", true);
if (options.childOf) elem.setAttribute("parent", options.childOf);
if (options.children.length > 0) elem.setAttribute("children", options.children.map((c) => c.key).join(" "));
elem.innerHTML = /* html */ `
${
options.name != null && options.description != null
@ -177,6 +186,7 @@ export default class ConfigMenu {
insertOnTop: false,
fireInitialChange: true,
save: true,
validate: () => true,
showChildren: () => true,
onAppended: () => {},
onChange: () => {},
@ -205,6 +215,18 @@ export default class ConfigMenu {
this.#config[options.key] = options;
function validate(val) {
const isValid = options.validate.call(options, val);
$(`.dribbblish-config-item[key="${options.key}"]`).attr("invalid", !isValid ? "" : null);
return isValid;
}
const change = (val) => {
if (!validate(val)) return;
this.set(options.key, val, options.save);
options.onChange(val);
};
if (options.type == "checkbox") {
const input = /* html */ `
<input id="dribbblish-config-input-${options.key}" class="x-toggle-input" type="checkbox"${this.get(options.key) ? " checked" : ""}>
@ -215,8 +237,7 @@ export default class ConfigMenu {
this.#addInputHTML({ ...options, input });
$(`#dribbblish-config-input-${options.key}`).on("change", (e) => {
this.set(options.key, e.target.checked, options.save);
options.onChange(this.get(options.key));
change(e.target.checked);
});
} else if (options.type == "select") {
// Validate
@ -233,8 +254,7 @@ export default class ConfigMenu {
this.#addInputHTML({ ...options, input });
$(`#dribbblish-config-input-${options.key}`).on("change", (e) => {
this.set(options.key, e.target.value, options.save);
options.onChange(this.get(options.key));
change(e.target.value);
});
} else if (options.type == "button") {
if (typeof options.data != "string") options.data = options.name;
@ -257,9 +277,9 @@ export default class ConfigMenu {
} else if (options.type == "number") {
// Validate
if (options.defaultValue == null) options.defaultValue = 0;
const val = this.get(options.key);
if (options.data.min != null && val < options.data.min) this.set(options.key, options.data.min, options.save);
if (options.data.max != null && val > options.data.max) this.set(options.key, options.data.max, options.save);
const _val = this.get(options.key);
if (options.data.min != null && _val < options.data.min) this.set(options.key, options.data.min, options.save);
if (options.data.max != null && _val > options.data.max) this.set(options.key, options.data.max, options.save);
const input = /* html */ `
<input
@ -282,8 +302,7 @@ export default class ConfigMenu {
if (options.data.min != null && e.target.value < options.data.min) e.target.value = options.data.min;
if (options.data.max != null && e.target.value > options.data.max) e.target.value = options.data.max;
this.set(options.key, Number(e.target.value), options.save);
options.onChange(this.get(options.key));
change(Number(e.target.value));
});
} else if (options.type == "text") {
if (options.defaultValue == null) options.defaultValue = "";
@ -294,9 +313,10 @@ export default class ConfigMenu {
this.#addInputHTML({ ...options, input });
$(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
// TODO: maybe add an validation function via `data.validate`
this.set(options.key, e.target.value, options.save);
options.onChange(this.get(options.key));
const val = e.target.value;
if (!validate(val)) return;
this.set(options.key, val, options.save);
options.onChange(val);
});
} else if (options.type == "textarea") {
if (options.defaultValue == null) options.defaultValue = "";
@ -307,9 +327,7 @@ export default class ConfigMenu {
this.#addInputHTML({ ...options, input });
$(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
// TODO: maybe add an validation function via `data.validate`
this.set(options.key, e.target.value, options.save);
options.onChange(this.get(options.key));
change(e.target.value);
});
} else if (options.type == "slider") {
// Validate
@ -336,8 +354,7 @@ export default class ConfigMenu {
$(`#dribbblish-config-input-${options.key}`).attr("tooltip", `${e.target.value}${options.data?.suffix ?? ""}`);
$(`#dribbblish-config-input-${options.key}`).attr("value", e.target.value);
this.set(options.key, Number(e.target.value), options.save);
options.onChange(this.get(options.key));
change(Number(e.target.value));
});
} else if (options.type == "time") {
// Validate
@ -350,8 +367,7 @@ export default class ConfigMenu {
$(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
$(`#dribbblish-config-input-${options.key}`).attr("value", e.target.value);
this.set(options.key, e.target.value, options.save);
options.onChange(this.get(options.key));
change(e.target.value);
});
} else if (options.type == "color") {
// Validate
@ -362,8 +378,7 @@ export default class ConfigMenu {
this.#addInputHTML({ ...options, input });
$(`#dribbblish-config-input-${options.key}`).on("input", (e) => {
this.set(options.key, e.target.value, options.save);
options.onChange(this.get(options.key));
change(e.target.value);
});
} else {
throw new Error(`Config Type "${options.type}" invalid`);
@ -372,6 +387,7 @@ export default class ConfigMenu {
// Re-write internal config since some values may have changed
this.#config[options.key] = options;
validate(this.get(options.key));
$(`.dribbblish-config-item[key="${options.key}"]`).attr("changed", options.save && this.get(options.key) != options.defaultValue ? "" : null);
options.children.forEach((child) => this.register(child));
@ -466,7 +482,32 @@ export default class ConfigMenu {
*/
#setHidden(key, hidden) {
this.#config[key].hidden = hidden;
$(`.dribbblish-config-item[key="${key}"]`).attr("hidden", hidden ? "" : null);
const $elem = $(`.dribbblish-config-item[key="${key}"]`);
$elem.attr("hidden", hidden ? "" : null);
// If element has children or a parent
if ($elem.attr("parent") != null || $elem.attr("children") != null) {
// Get parent of element block
const $parent = $elem.attr("parent") != null ? $(`[children~="${key}"]`) : $elem;
const $nextChildren = $parent.nextAll(`[parent="${$parent.attr("key")}"]`);
// Make parent connect on bottom when children are visible
$parent.attr("connect-bottom", $nextChildren.filter(":not([hidden])").length > 0 ? "" : null);
// Reset all children's bottom connection
$nextChildren.each(function () {
$(this).attr("connect-bottom", null);
});
// Add bottom connection to all but the last visible child
$nextChildren
.filter(":not([hidden])")
.slice(0, -1)
.each(function () {
$(this).attr("connect-bottom", "");
});
//* NOTE: All children automatically have a top connection
}
}
getOptions(key) {

7
src/styles/Colors.scss
View file

@ -46,10 +46,13 @@ $props-to-transition: ("sidebar", "main", "text", "button");
}
// Color Function
@function spiceColor($key, $alpha: 1) {
// $light-offset is added when in light mode
@function spiceColor($key, $alpha: 1, $light-offset: 0) {
@if $alpha == 1 {
@return var(--spice-#{$key});
} @else {
} @else if $light-offset == 0 {
@return rgba(var(--spice-rgb-#{$key}), $alpha);
} @else {
@return rgba(var(--spice-rgb-#{$key}), calc($alpha + var(--is_light) * $light-offset));
}
}

70
src/styles/ConfigMenu.scss
View file

@ -23,7 +23,7 @@
z-index: 1;
position: relative;
width: clamp(500px, 50%, 650px);
background-color: spiceColor("main", 0.9);
background-color: spiceColor("main", 0.95);
backdrop-filter: blur(3px);
padding: 20px 15px;
border-radius: var(--main-corner-radius);
@ -44,22 +44,23 @@
display: flex;
width: 100%;
flex-direction: column;
gap: 16px;
gap: 8px;
max-height: 60vh;
overflow-y: auto;
padding: 0px 50px;
padding: 0px 25px;
.dribbblish-config-area {
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
gap: 8px;
&[collapsed] {
overflow: hidden;
min-height: 38px; //for some reason height alone isn't enough
height: 38px;
> h2 svg {
.dribbblish-config-area-header svg {
transform: rotate(270deg);
}
}
@ -71,6 +72,7 @@
.dribbblish-config-area-header {
position: relative;
text-align: center;
width: fit-content;
height: 38px;
display: flex;
gap: 10px;
@ -89,7 +91,8 @@
.dribbblish-config-area-items {
display: flex;
flex-direction: column;
gap: 16px;
gap: 8px;
width: 100%;
.dribbblish-config-item {
position: relative;
@ -99,23 +102,58 @@
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 8px 16px;
&[hidden] {
display: none;
}
&[parent] {
padding-left: 16px;
}
&[changed]::before {
&::before {
z-index: -1;
content: "";
position: absolute;
left: -13px;
top: -3px;
bottom: -3px;
width: 3px;
background-color: spiceColor("sidebar");
inset: 0px;
border-radius: var(--main-corner-radius);
background-color: spiceColor("subtext", 0.03, 0.04);
}
&[parent]::before {
top: -8px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
&[connect-bottom]::before {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
&[invalid]::before {
background-color: rgba(red, 0.2);
}
&[changed] {
&::after {
content: "";
position: absolute;
left: 0px;
top: 0px;
bottom: 0px;
width: 5px;
background-color: spiceColor("text");
border-top-left-radius: var(--main-corner-radius);
border-bottom-left-radius: var(--main-corner-radius);
}
&[parent]::after {
top: -4px;
border-top-left-radius: 0px;
}
&[connect-bottom]::after {
bottom: -4px;
border-bottom-left-radius: 0px;
}
}
.dribbblish-config-item-header {