extern/nightTab
1
0
Fork 0
mirror of https://github.com/zombieFox/nightTab.git synced 2025-02-16 18:20:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

add saturation and contrast slider styles

Browse Source
This commit is contained in:
zombieFox 2021-09-12 23:04:03 +01:00
parent e8381981d3
commit a3bc9ff495
4 changed files with 92 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/component/control/slider/index.js
View File

@ -19,13 +19,13 @@ export const Control_slider = function({
path = false,
id = 'name',
labelText = 'Name',
hue = false,
value = 0,
defaultValue = false,
min = 0,
max = 100,
step = 1,
action = false,
style = false,
focusAction = false,
blurAction = false,
sliderAction = false,
@ -42,8 +42,24 @@ export const Control_slider = function({
const classList = [];
if (hue) {
classList.push('input-range-hue-spectrum');
if (style) {
switch (style) {
case 'hue':
classList.push('input-range-hue-spectrum');
break;
case 'saturation':
classList.push('input-range-saturation-spectrum');
break;
case 'contrast':
classList.push('input-range-contrast-spectrum');
break;
};
};
this.range = form.input.range({

3
src/component/control/sliderDouble/index.js
View File

@ -18,6 +18,7 @@ import { minMax } from '../../../utility/minMax';
export const Control_sliderDouble = function({
object = {},
labelText = 'Name',
style = false,
left = {
path: false,
id: 'name',
@ -93,6 +94,7 @@ export const Control_sliderDouble = function({
min: left.min,
max: left.max,
step: left.step,
style: style,
action: () => {
if (get({ object: state.get.current(), path: left.path }) > get({ object: state.get.minMax(), path: left.path }).max - 10) {
@ -133,6 +135,7 @@ export const Control_sliderDouble = function({
min: right.min,
max: right.max,
step: right.step,
style: style,
action: () => {
if (get({ object: state.get.current(), path: right.path }) < get({ object: state.get.minMax(), path: right.path }).min + 10) {

67
src/component/form/input/range/index.css
View File

@ -17,6 +17,57 @@
--form-range-hue: linear-gradient(to right, hsl(0, 100%, 50%), hsl(30, 100%, 50%), hsl(60, 100%, 50%), hsl(90, 100%, 50%), hsl(120, 100%, 50%), hsl(150, 100%, 50%), hsl(180, 100%, 50%), hsl(210, 100%, 50%), hsl(240, 100%, 50%), hsl(270, 100%, 50%), hsl(300, 100%, 50%), hsl(330, 100%, 50%), hsl(360, 100%, 50%));
}
:root {
--form-range-saturation: linear-gradient(to right, hsl(var(--theme-primary-1-h), 0%, 50%), hsl(var(--theme-primary-1-h), 50%, 50%), hsl(var(--theme-primary-1-h), 100%, 50%));
}
:root {
--form-range-contrast-low-to-high:
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 0%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 10%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 20%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 30%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 40%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 50%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 60%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 70%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 80%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 90%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 100%);
--form-range-contrast-high-to-low:
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 100%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 90%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 80%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 70%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 60%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 50%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 40%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 30%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 20%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 10%),
hsl(var(--theme-primary-1-h), calc(var(--theme-primary-1-s) * 1%), 0%);
}
.is-theme-style-light {
--form-range-contrast: linear-gradient(to right, var(--form-range-contrast-high-to-low));
}
.is-theme-style-dark {
--form-range-contrast: linear-gradient(to right, var(--form-range-contrast-low-to-high));
}
@media (prefers-color-scheme: light) {
.is-theme-style-system {
--form-range-contrast: linear-gradient(to right, var(--form-range-contrast-high-to-low));
}
}
@media (prefers-color-scheme: dark) {
.is-theme-style-system {
--form-range-contrast: linear-gradient(to right, var(--form-range-contrast-low-to-high));
}
}
input[type="range"] {
background-color: transparent;
padding: 0;
@ -107,6 +158,14 @@ input[type="range"].input-range-hue-spectrum::-webkit-slider-runnable-track {
background-image: var(--form-range-hue);
}
input[type="range"].input-range-saturation-spectrum::-webkit-slider-runnable-track {
background-image: var(--form-range-saturation);
}
input[type="range"].input-range-contrast-spectrum::-webkit-slider-runnable-track {
background-image: var(--form-range-contrast);
}
input[type="range"]:disabled.input-range-hue-spectrum::-webkit-slider-runnable-track {
background-image: none;
background-color: hsl(var(--form-range-track-background-disabled));
@ -170,6 +229,14 @@ input[type="range"].input-range-hue-spectrum::-moz-range-track {
background-image: var(--form-range-hue);
}
input[type="range"].input-range-saturation-spectrum::-moz-range-track {
background-image: var(--form-range-saturation);
}
input[type="range"].input-range-contrast-spectrum::-moz-range-track {
background-image: var(--form-range-contrast);
}
input[type="range"]:disabled.input-range-hue-spectrum::-moz-range-track {
background-image: none;
background-color: hsl(var(--form-range-track-background-disabled));

4
src/component/menuContent/themeSetting/index.js
View File

@ -465,11 +465,11 @@ themeSetting.colour = (parent) => {
path: 'theme.color.range.primary.h',
id: 'theme-color-range-primary-h',
labelText: 'Primary colour',
hue: true,
value: state.get.current().theme.color.range.primary.h,
defaultValue: state.get.default().theme.color.range.primary.h,
min: state.get.minMax().theme.color.range.primary.h.min,
max: state.get.minMax().theme.color.range.primary.h.max,
style: 'hue',
action: () => {
theme.color.render();
data.save();
@ -484,6 +484,7 @@ themeSetting.colour = (parent) => {
defaultValue: state.get.default().theme.color.range.primary.s,
min: state.get.minMax().theme.color.range.primary.s.min,
max: state.get.minMax().theme.color.range.primary.s.max,
style: 'saturation',
action: () => {
theme.color.render();
data.save();
@ -494,6 +495,7 @@ themeSetting.colour = (parent) => {
contrast: new Control_sliderDouble({
object: state.get.current(),
labelText: 'Contrast range',
style: 'contrast',
left: {
path: 'theme.color.contrast.start',
id: 'theme-color-contrast-start',