forked from MapComplete/MapComplete
Add elevator icons
This commit is contained in:
pietervdvn
parent
92bd6414e4
commit
3441e7c9f7
5 changed files with 77 additions and 46 deletions
|
|
@ -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 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<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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
27
index.css
27
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);
|
||||
|
|
|
|||
9
test.ts
9
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")
|
||||
|
|
|
|||
Loading…
Reference in a new issue