From 3441e7c9f7f9919bb8577feacecb1c20ecb54d2a Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Mon, 18 Jul 2022 13:50:14 +0200 Subject: [PATCH] Add elevator icons --- UI/Input/Slider.ts | 15 ++++++--- assets/svg/license_info.json | 10 ++++++ css/index-tailwind-output.css | 62 +++++++++++++++++++---------------- index.css | 27 ++++++++++----- test.ts | 9 +++-- 5 files changed, 77 insertions(+), 46 deletions(-) diff --git a/UI/Input/Slider.ts b/UI/Input/Slider.ts index 68503e722..e6e2f4a55 100644 --- a/UI/Input/Slider.ts +++ b/UI/Input/Slider.ts @@ -4,9 +4,10 @@ import {UIEventSource} from "../../Logic/UIEventSource"; export default class Slider extends InputElement { private readonly _value: UIEventSource - private min: number; - private max: number; - private step: number; + private readonly min: number; + private readonly max: number; + private readonly step: number; + private readonly vertical: boolean; /** * Constructs a slider input element for natural numbers @@ -16,13 +17,15 @@ export default class Slider extends InputElement { */ constructor(min: number, max: number, options?: { value?: UIEventSource, - step?: 1 | number + step?: 1 | number, + vertical?: false | boolean }) { super(); this.max = max; this.min = min; this._value = options?.value ?? new UIEventSource(min) this.step = options?.step ?? 1; + this.vertical = options?.vertical ?? false; } GetValue(): UIEventSource { @@ -39,6 +42,10 @@ export default class Slider extends InputElement { el.oninput = () => { valuestore.setData(Number(el.value)) } + if(this.vertical){ + el.classList.add("vertical") + el.setAttribute('orient','vertical'); // firefox only workaround... + } valuestore.addCallbackAndRunD(v => el.value = ""+valuestore.data) return el; } diff --git a/assets/svg/license_info.json b/assets/svg/license_info.json index 58f491f57..44f3be2e1 100644 --- a/assets/svg/license_info.json +++ b/assets/svg/license_info.json @@ -387,6 +387,16 @@ ], "sources": [] }, + { + "path": "elevator.svg", + "license": "CC-BY-SA 4.0", + "authors": [ + "Yveltal" + ], + "sources": [ + "https://commons.wikimedia.org/wiki/File:HZM_elevator_icon.svg" + ] + }, { "path": "envelope.svg", "license": "CC0; trivial", diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index bc51523d4..b8b950474 100644 --- a/css/index-tailwind-output.css +++ b/css/index-tailwind-output.css @@ -811,6 +811,10 @@ video { margin: 0.25rem; } +.m-2 { + margin: 0.5rem; +} + .m-4 { margin: 1rem; } @@ -831,10 +835,6 @@ video { margin: 0.75rem; } -.m-2 { - margin: 0.5rem; -} - .m-6 { margin: 1.5rem; } @@ -858,6 +858,14 @@ video { margin-bottom: 0.75rem; } +.mb-0 { + margin-bottom: 0px; +} + +.mt-8 { + margin-top: 2rem; +} + .ml-3 { margin-left: 0.75rem; } @@ -954,10 +962,6 @@ video { margin-right: 0.25rem; } -.mb-0 { - margin-bottom: 0px; -} - .box-border { box-sizing: border-box; } @@ -1046,6 +1050,10 @@ video { height: 2.5rem; } +.h-14 { + height: 3.5rem; +} + .h-full { height: 100%; } @@ -1432,10 +1440,6 @@ video { border-bottom-width: 1px; } -.border-solid { - border-style: solid; -} - .border-blue-500 { --tw-border-opacity: 1; border-color: rgba(59, 130, 246, var(--tw-border-opacity)); @@ -1475,11 +1479,6 @@ video { --tw-border-opacity: 0.5; } -.bg-blue-200 { - --tw-bg-opacity: 1; - background-color: rgba(191, 219, 254, var(--tw-bg-opacity)); -} - .bg-white { --tw-bg-opacity: 1; background-color: rgba(255, 255, 255, var(--tw-bg-opacity)); @@ -2031,7 +2030,7 @@ a { height: min-content; } -/* alex */ +/* slider */ input[type="range"].vertical { -webkit-writing-mode: bt-lr; @@ -2045,24 +2044,31 @@ input[type="range"].vertical { padding: 0 5px; } -/* .elevatorslider::-webkit-slider-thumb { - -webkit-appearance: none; - appearance: none; - width: 23px; - height: 24px; + width: 100px; + height: 100px; border: 0; - background: url("../MapComplete/assets/svg/bug.svg"); + background-color: #00000000 !important; + background-image: url("/assets/svg/elevator.svg"); + background-size: contain; + background-position: center center; + background-repeat: no-repeat; cursor: pointer; + position: relative; + z-index: 2; } .elevatorslider::-moz-range-thumb { - width: 23px; - height: 25px; + width: 100px; + height: 100px; border: 0; - background: url("../MapComplete/assets/svg/bug.svg"); + background-color: #00000000 !important; + background-image: url("/assets/svg/elevator.svg"); + background-size: contain; + background-position: center center; + background-repeat: no-repeat; cursor: pointer; -} */ +} .border-detail { border-color: var(--foreground-color); diff --git a/index.css b/index.css index f1a4ce83e..e4471ff1e 100644 --- a/index.css +++ b/index.css @@ -237,22 +237,31 @@ input[type="range"].vertical { padding: 0 5px; } -/* .elevatorslider::-webkit-slider-thumb { - appearance: none; - width: 23px; - height: 24px; +.elevatorslider::-webkit-slider-thumb { + width: 100px; + height: 100px; border: 0; - background: url("/assets/svg/bug.svg") !important; + background-color: #00000000 !important; + background-image: url("/assets/svg/elevator.svg"); + background-size: contain; + background-position: center center; + background-repeat: no-repeat; cursor: pointer; + position: relative; + z-index: 2; } .elevatorslider::-moz-range-thumb { - width: 23px; - height: 25px; + width: 100px; + height: 100px; border: 0; - background: url("/assets/svg/bug.svg") !important; + background-color: #00000000 !important; + background-image: url("/assets/svg/elevator.svg"); + background-size: contain; + background-position: center center; + background-repeat: no-repeat; cursor: pointer; -} */ +} .border-detail { border-color: var(--foreground-color); diff --git a/test.ts b/test.ts index 21ba35181..507d46550 100644 --- a/test.ts +++ b/test.ts @@ -8,7 +8,7 @@ import Slider from "./UI/Input/Slider"; import Toggle, { ClickableToggle } from "./UI/Input/Toggle"; const testData = ["-1", "0", "0.5", "1", "1.5", "2"] -let slider = new Slider(0, testData.length - 1); +let slider = new Slider(0, testData.length - 1, {vertical: true}); const toggleClass = "flex border-2 border-blue-500 rounded-full w-10 h-10 place-content-center items-center" @@ -23,11 +23,10 @@ const values = testData.map((data, i) => new ClickableToggle( } )) .ToggleOnClick() - .SetClass("flex flex-column bg-slate-200 m-4 w-10 h-10")) + .SetClass("flex flex-column bg-slate-200 m-2 w-10 h-10")) const valCombine = new Combine(values.reverse()) -slider.SetClass("flex vertical m-4 elevatorslider") - -new Combine([valCombine, slider]).SetClass("flex flex-row h-10").AttachTo("extradiv") +slider.SetClass("flex m-4 elevatorslider mb-0").SetStyle("height: "+3.25*testData.length+"rem") +new Combine([valCombine.SetClass("mt-8"), slider]).SetClass("flex flex-row h-14").AttachTo("extradiv")