From 352c98bab3a210a7c0f52f6ef514d6ad68391d72 Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Thu, 14 Sep 2023 19:16:12 +0200 Subject: [PATCH 1/4] Replace use of 'raw' range input with our range-slider --- src/fontra/client/web-components/ui-form.js | 188 ++++---------------- 1 file changed, 31 insertions(+), 157 deletions(-) diff --git a/src/fontra/client/web-components/ui-form.js b/src/fontra/client/web-components/ui-form.js index 2ebf45f23..ee39c3b7e 100644 --- a/src/fontra/client/web-components/ui-form.js +++ b/src/fontra/client/web-components/ui-form.js @@ -3,6 +3,7 @@ import { hyphenatedToCamelCase, round } from "../core/utils.js"; import { SimpleElement } from "../core/unlit.js"; import * as html from "../core/unlit.js"; import { themeColorCSS } from "./theme-support.js"; +import { RangeSlider } from "/web-components/range-slider.js"; const colors = { "ui-form-input-foreground-color": ["black", "white"], @@ -15,115 +16,15 @@ export class Form extends SimpleElement { static styles = ` ${themeColorCSS(colors)} - input[type="range"] { - --slider-track-width: 10em; - --slider-track-height: 0.3em; - --slider-track-color: #0008; - --slider-track-border-radius: 0px; - --slider-thumb-width: 15px; - --slider-thumb-height: 10px; - --slider-thumb-border-radius: 8px; - } - - input[type="range"] { - height: var(--slider-track-height); - -webkit-appearance: none; - margin: 5px 10px; - width: var(--slider-track-width); - } - input[type="range"]:focus { - outline: none; - } - - input[type="range"]::-webkit-slider-runnable-track { - width: var(--slider-track-width); - height: var(--slider-track-height); - cursor: pointer; - animate: 0.2s; - box-shadow: 0px 0px 0px #000000; - background: var(--slider-track-color); - border-radius: var(--slider-track-border-radius); - border: 0px solid #000000; - } - input[type="range"]::-webkit-slider-thumb { - box-shadow: 0px 0px 0px #000000; - border: 0px solid #000000; - height: var(--slider-thumb-height); - width: var(--slider-thumb-width); - border-radius: var(--slider-thumb-border-radius); - background: var(--slider-thumb-color); - cursor: pointer; - -webkit-appearance: none; - margin-top: -3px; - } - input[type="range"]:focus::-webkit-slider-runnable-track { - background: var(--slider-track-color); - } - input[type="range"]::-moz-range-track { - /* width: var(--slider-track-width); */ - height: var(--slider-track-height); - cursor: pointer; - animate: 0.2s; - box-shadow: 0px 0px 0px #000000; - background: var(--slider-track-color); - border-radius: var(--slider-track-border-radius); - border: 0px solid #000000; - } - input[type="range"]::-moz-range-thumb { - box-shadow: 0px 0px 0px #000000; - border: 0px solid #000000; - height: var(--slider-thumb-height); - width: var(--slider-thumb-width); - border-radius: var(--slider-thumb-border-radius); - background: var(--slider-thumb-color); - cursor: pointer; - } - input[type="range"]::-ms-track { - width: var(--slider-track-width); - height: var(--slider-track-height); - cursor: pointer; - animate: 0.2s; - background: transparent; - border-color: transparent; - color: transparent; - } - input[type="range"]::-ms-fill-lower { - background: var(--slider-track-color); - border: 0px solid #000000; - border-radius: var(--slider-thumb-border-radius); - box-shadow: 0px 0px 0px #000000; - } - input[type="range"]::-ms-fill-upper { - background: var(--slider-track-color); - border: 0px solid #000000; - border-radius: var(--slider-thumb-border-radius); - box-shadow: 0px 0px 0px #000000; - } - input[type="range"]::-ms-thumb { - margin-top: 1px; - box-shadow: 0px 0px 0px #000000; - border: 0px solid #000000; - height: var(--slider-thumb-height); - width: var(--slider-thumb-width); - border-radius: var(--slider-thumb-border-radius); - background: var(--slider-thumb-color); - cursor: pointer; - } - - input[type="range"]:focus::-ms-fill-lower { - background: var(--slider-track-color); - } - - input[type="range"]:focus::-ms-fill-upper { - background: var(--slider-track-color); - } - .ui-form { display: grid; - grid-template-columns: 32% 68%; + grid-template-columns: 30% auto; + box-sizing: border-box; gap: 0.35rem 0.35rem; overflow-x: hidden; overflow-y: auto; + margin: 0em; + padding: 0em; } .ui-form-label { @@ -149,22 +50,26 @@ export class Form extends SimpleElement { text-align: left; } + input { + box-sizing: border-box; + } + + .ui-form-value { + box-sizing: border-box; + } + .ui-form-value input { font-family: "fontra-ui-regular"; border: solid 1px var(--ui-form-input-border-color); background-color: var(--ui-form-input-background-color); color: var(--ui-form-input-foreground-color); - width: 9.5em; + width: min(100%, 9.5em); } .ui-form-value input[type="number"] { width: 4em; } - .ui-form-value input[type="range"] { - width: 7em; - } - .ui-form-value.text { white-space: normal; } @@ -256,69 +161,38 @@ export class Form extends SimpleElement { } _addEditNumberSlider(valueElement, fieldItem) { - const inputElement = document.createElement("input"); - const sliderElement = document.createElement("input"); - inputElement.type = "number"; - sliderElement.type = "range"; - for (const el of [inputElement, sliderElement]) { - el.step = "any"; - el.min = fieldItem.minValue; - el.max = fieldItem.maxValue; - el.value = fieldItem.value; - el.disabled = fieldItem.disabled; - } + const rangeElement = new RangeSlider(); + rangeElement.minValue = fieldItem.minValue; + rangeElement.value = fieldItem.value; + rangeElement.maxValue = fieldItem.maxValue; { // Slider change closure let valueStream = undefined; - let savedCanvasElement; - sliderElement.oninput = (event) => { - // Continuous changes - inputElement.value = round(sliderElement.value, 3); - const value = parseFloat(inputElement.value); - if (!valueStream) { + + rangeElement.onChangeCallback = (event) => { + const value = event.value; + if (event.dragBegin) { valueStream = new QueueIterator(5, true); this._fieldChanging(fieldItem.key, value, valueStream); } - valueStream.put(value); - this._dispatchEvent("doChange", { key: fieldItem.key, value: value }); - }; - sliderElement.onchange = (event) => { - // Single change, or final change after continuous changes + if (valueStream) { + valueStream.put(value); + this._dispatchEvent("doChange", { key: fieldItem.key, value: value }); + } else { + this._fieldChanging(fieldItem.key, value, undefined); + } + + if (event.dragEnd) { valueStream.done(); valueStream = undefined; this._dispatchEvent("endChange", { key: fieldItem.key }); } }; - sliderElement.onmousedown = (event) => { - const activeElement = document.activeElement; - savedCanvasElement = - activeElement?.id === "edit-canvas" ? activeElement : undefined; - }; - sliderElement.onmouseup = (event) => { - // sliderElement.onchange is ONLY triggered when the final slider value - // is different from the initial value. However, we may have been in - // a live drag, and we need to handle the end of the slider drag no - // matter what the final value. To work around this, we also listen to - // "mouseup". - sliderElement.onchange(event); - savedCanvasElement?.focus(); - }; } - inputElement.onchange = (event) => { - sliderElement.value = inputElement.value; - inputElement.value = sliderElement.value; // Use slider's clamping - this._fieldChanging(fieldItem.key, parseFloat(inputElement.value), undefined); - }; - this._fieldGetters[fieldItem.key] = () => sliderElement.value; - this._fieldSetters[fieldItem.key] = (value) => { - inputElement.value = value; - sliderElement.value = value; - }; - valueElement.appendChild(inputElement); - valueElement.appendChild(sliderElement); + valueElement.appendChild(rangeElement); } addEventListener(eventName, handler, options) { From f6fd2b16db1408672fea032468fdb4d75b3318de Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Thu, 14 Sep 2023 19:26:45 +0200 Subject: [PATCH 2/4] Make text entry styling more like other places in Fontra --- src/fontra/client/web-components/ui-form.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/fontra/client/web-components/ui-form.js b/src/fontra/client/web-components/ui-form.js index ee39c3b7e..6afc5629f 100644 --- a/src/fontra/client/web-components/ui-form.js +++ b/src/fontra/client/web-components/ui-form.js @@ -18,7 +18,7 @@ export class Form extends SimpleElement { .ui-form { display: grid; - grid-template-columns: 30% auto; + grid-template-columns: 32% auto; box-sizing: border-box; gap: 0.35rem 0.35rem; overflow-x: hidden; @@ -52,6 +52,14 @@ export class Form extends SimpleElement { input { box-sizing: border-box; + background-color: red; + background-color: var(--text-input-background-color); + color: var(--text-input-foreground-color); + border-radius: 0.25em; + border: none; + outline: none; + padding: 0.1em 0.3em; + font-family: "fontra-ui-regular"; } .ui-form-value { @@ -59,10 +67,6 @@ export class Form extends SimpleElement { } .ui-form-value input { - font-family: "fontra-ui-regular"; - border: solid 1px var(--ui-form-input-border-color); - background-color: var(--ui-form-input-background-color); - color: var(--ui-form-input-foreground-color); width: min(100%, 9.5em); } From 6afbd2ac0c90e40a3575259a248e4c774297254b Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Thu, 14 Sep 2023 19:27:43 +0200 Subject: [PATCH 3/4] Get rid of unused theme colors --- src/fontra/client/web-components/ui-form.js | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/fontra/client/web-components/ui-form.js b/src/fontra/client/web-components/ui-form.js index 6afc5629f..81bd90700 100644 --- a/src/fontra/client/web-components/ui-form.js +++ b/src/fontra/client/web-components/ui-form.js @@ -5,17 +5,8 @@ import * as html from "../core/unlit.js"; import { themeColorCSS } from "./theme-support.js"; import { RangeSlider } from "/web-components/range-slider.js"; -const colors = { - "ui-form-input-foreground-color": ["black", "white"], - "ui-form-input-background-color": ["white", "#333"], - "ui-form-input-border-color": ["#888", "#222"], - "slider-thumb-color": ["#444", "#bbb"], -}; - export class Form extends SimpleElement { static styles = ` - ${themeColorCSS(colors)} - .ui-form { display: grid; grid-template-columns: 32% auto; From f417703e5e044abaea26ca2f60eef3442daae43c Mon Sep 17 00:00:00 2001 From: Just van Rossum Date: Thu, 14 Sep 2023 19:29:13 +0200 Subject: [PATCH 4/4] Clean up imports --- src/fontra/client/web-components/ui-form.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/fontra/client/web-components/ui-form.js b/src/fontra/client/web-components/ui-form.js index 81bd90700..f9a068f66 100644 --- a/src/fontra/client/web-components/ui-form.js +++ b/src/fontra/client/web-components/ui-form.js @@ -1,8 +1,7 @@ import { QueueIterator } from "../core/queue-iterator.js"; -import { hyphenatedToCamelCase, round } from "../core/utils.js"; +import { hyphenatedToCamelCase } from "../core/utils.js"; import { SimpleElement } from "../core/unlit.js"; import * as html from "../core/unlit.js"; -import { themeColorCSS } from "./theme-support.js"; import { RangeSlider } from "/web-components/range-slider.js"; export class Form extends SimpleElement {