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 config time input

Browse source
This commit is contained in:
Send_Nukez 2021-10-10 04:24:50 +02:00
parent 5957564db1
commit 1ecc7c6b89
2 changed files with 24 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
dribbblish.js
View file

@ -3,7 +3,7 @@
class ConfigMenu {
/**
* @typedef {Object} DribbblishConfigOptions
* @property {"checkbox" | "select" | "button" | "slider" | "number" | "text"} type
* @property {"checkbox" | "select" | "button" | "slider" | "number" | "text" | "time"} type
* @property {String?} area
* @property {any?} data
* @property {String?} key
@ -205,6 +205,20 @@ class ConfigMenu {
this.set(options.key, e.target.value);
options.onChange(e.target.value);
});
} else if (options.type == "time") {
// Validate
if (options.defaultValue == null) options.defaultValue = "00:00";
const input = /* html */ `
<input type="time" id="dribbblish-config-input-${options.key}" name="${options.name}" value="${this.get(options.key, options.defaultValue)}">
`;
this.addInputHTML({ ...options, input });
document.getElementById(`dribbblish-config-input-${options.key}`).addEventListener("input", (e) => {
document.getElementById(`dribbblish-config-input-${options.key}`).setAttribute("value", e.target.value);
this.set(options.key, e.target.value);
options.onChange(e.target.value);
});
} else {
throw new Error(`Config Type "${options.type}" invalid`);
}

11
user.css
View file

@ -151,7 +151,8 @@ input[type=range]::-webkit-slider-runnable-track {
}
input[type=number],
input[type=text] {
input[type=text],
input[type=time] {
height: 32px;
border: none;
border-radius: 4px !important;
@ -163,10 +164,16 @@ input[type=text] {
input[type=number]:hover,
input[type=number]:active,
input[type=text]:hover,
input[type=text]:active {
input[type=text]:active,
input[type=time]:hover,
input[type=time]:active {
background-color: rgba(var(--spice-rgb-selected-row), .6) !important;
}
input[type="time"]::-webkit-calendar-picker-indicator {
filter: invert(calc(1 - var(--is_light)));
}
.x-searchInput-searchInputSearchIcon,
.x-searchInput-searchInputClearButton {
color: var(--spice-text) !important;