Add elevator icons

UI/Input/Slider.ts

@@ -4,9 +4,10 @@ import {UIEventSource} from "../../Logic/UIEventSource";
 export default class Slider extends InputElement<number> {
 
     private readonly _value: UIEventSource<number>
-    private min: number;
+    private readonly min: number;
-    private max: number;
+    private readonly max: number;
-    private step: 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<number> {
      */
     constructor(min: number, max: number, options?: {
         value?: UIEventSource<number>,
-        step?: 1 | number
+        step?: 1 | number,
+        vertical?: false | boolean
     }) {
         super();
         this.max = max;
         this.min = min;
         this._value = options?.value ?? new UIEventSource<number>(min)
         this.step = options?.step ?? 1;
+        this.vertical = options?.vertical ?? false;
     }
 
     GetValue(): UIEventSource<number> {
@@ -39,6 +42,10 @@ export default class Slider extends InputElement<number> {
         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;
     }

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",

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;
+  width: 100px;
-  appearance: none;
+  height: 100px;
-  width: 23px;
-  height: 24px;
   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;
+  width: 100px;
-  height: 25px;
+  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);

index.css

@@ -237,22 +237,31 @@ input[type="range"].vertical {
   padding: 0 5px;
 }
 
-/* .elevatorslider::-webkit-slider-thumb {
+.elevatorslider::-webkit-slider-thumb {
-  appearance: none;
+  width: 100px;
-  width: 23px;
+  height: 100px;
-  height: 24px;
   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;
+  width: 100px;
-  height: 25px;
+  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);

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")
+slider.SetClass("flex m-4 elevatorslider mb-0").SetStyle("height: "+3.25*testData.length+"rem")
-
-new Combine([valCombine, slider]).SetClass("flex flex-row h-10").AttachTo("extradiv")
 
+new Combine([valCombine.SetClass("mt-8"), slider]).SetClass("flex flex-row h-14").AttachTo("extradiv")