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

add settings color input

Browse source
This commit is contained in:
Send_Nukez 2021-10-23 11:43:20 +02:00
parent c2b4d95070
commit 7ec7a88e98
2 changed files with 33 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
dribbblish.js
View file

@ -3,7 +3,7 @@
class ConfigMenu {
/**
* @typedef {Object} DribbblishConfigItem
* @property {"checkbox" | "select" | "button" | "slider" | "number" | "text" | "time"} type
* @property {"checkbox" | "select" | "button" | "slider" | "number" | "text" | "time" | "color"} type
* @property {String|DribbblishConfigArea} [area={name: "Main Settings", order: 0}]
* @property {any} [data={}]
* @property {Number} [order=0] order < 0 = Higher up | order > 0 = Lower Down
@ -268,6 +268,18 @@ class ConfigMenu {
this.set(options.key, e.target.value);
options.onChange(this.get(options.key));
});
} else if (options.type == "color") {
// Validate
if (options.defaultValue == null) options.defaultValue = "#000000";
const input = /* html */ `
<input type="color" id="dribbblish-config-input-${options.key}" name="${options.name}" value="${this.get(options.key)}">
`;
this.addInputHTML({ ...options, input });
document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("input", (e) => {
this.set(options.key, e.target.value);
options.onChange(this.get(options.key));
});
} else {
throw new Error(`Config Type "${options.type}" invalid`);
}

20
user.css
View file

@ -174,6 +174,26 @@ input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(calc(1 - var(--is_light)));
}
input[type=color] {
position: relative;
padding: 0px;
border: none;
}
input[type=color]::before {
z-index: -1;
content: "";
position: absolute;
inset: -5px;
border-radius: 4px;
background-color: rgba(var(--spice-rgb-selected-row), .4);
}
input[type=color]:hover::before,
input[type=color]:active::before {
background-color: rgba(var(--spice-rgb-selected-row), .6);
}
.x-searchInput-searchInputSearchIcon,
.x-searchInput-searchInputClearButton {
color: var(--spice-text) !important;