dan/dribbblish-dynamic-theme
1
0
Fork 0
mirror of https://github.com/danbulant/dribbblish-dynamic-theme synced 2026-06-07 16:52:00 +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 { class ConfigMenu {
/** /**
* @typedef {Object} DribbblishConfigOptions * @typedef {Object} DribbblishConfigOptions
* @property {"checkbox" | "select" | "button" | "slider" | "number" | "text"} type * @property {"checkbox" | "select" | "button" | "slider" | "number" | "text" | "time"} type
* @property {String?} area * @property {String?} area
* @property {any?} data * @property {any?} data
* @property {String?} key * @property {String?} key
@ -205,6 +205,20 @@ class ConfigMenu {
this.set(options.key, e.target.value); this.set(options.key, e.target.value);
options.onChange(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 { } else {
throw new Error(`Config Type "${options.type}" invalid`); 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=number],
input[type=text] { input[type=text],
input[type=time] {
height: 32px; height: 32px;
border: none; border: none;
border-radius: 4px !important; border-radius: 4px !important;
@ -163,10 +164,16 @@ input[type=text] {
input[type=number]:hover, input[type=number]:hover,
input[type=number]:active, input[type=number]:active,
input[type=text]:hover, 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; 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-searchInputSearchIcon,
.x-searchInput-searchInputClearButton { .x-searchInput-searchInputClearButton {
color: var(--spice-text) !important; color: var(--spice-text) !important;