diff --git a/UI/BaseUIElement.ts b/UI/BaseUIElement.ts index 556ab637f..c993ef5d2 100644 --- a/UI/BaseUIElement.ts +++ b/UI/BaseUIElement.ts @@ -1,4 +1,4 @@ -import {Utils} from "../Utils"; +import { Utils } from "../Utils"; /** * A thin wrapper around a html element, which allows to generate a HTML-element. @@ -39,9 +39,9 @@ export default abstract class BaseUIElement { return this; } - - public ScrollToTop(){ - this._constructedHtmlElement?.scrollTo(0,0) + + public ScrollToTop() { + this._constructedHtmlElement?.scrollTo(0, 0) } /** @@ -70,10 +70,13 @@ export default abstract class BaseUIElement { return this; } - public RemoveClass(clss: string): BaseUIElement { - if (this.clss.has(clss)) { - this.clss.delete(clss); - this._constructedHtmlElement?.classList.remove(clss) + public RemoveClass(classes: string): BaseUIElement { + const all = classes.split(" ").map(clsName => clsName.trim()); + for (let clss of all) { + if (this.clss.has(clss)) { + this.clss.delete(clss); + this._constructedHtmlElement?.classList.remove(clss) + } } return this; } diff --git a/assets/layers/governments/government.svg b/assets/layers/governments/government.svg new file mode 100644 index 000000000..7a0577c17 --- /dev/null +++ b/assets/layers/governments/government.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/assets/layers/governments/governments.json b/assets/layers/governments/governments.json new file mode 100644 index 000000000..75bb148ce --- /dev/null +++ b/assets/layers/governments/governments.json @@ -0,0 +1,59 @@ +{ + "id": "governments", + "name": { + "en": "governments" + }, + "source": { + "osmTags": { + "or": [ + "office=government" + ] + } + }, + "title": { + "render": { + "en": "Governmental Office {name}" + } + }, + "minzoom": 13, + "tagRenderings": [ + "images", + "phone", + "email", + "website", + { + "question": { + "en": "What is the name of this Governmental Office?" + }, + "render": { + "en": "This Governmental Office is called {name}" + }, + "freeform": { + "key": "name" + }, + "id": "name" + } + ], + "presets": [ + { + "title": { + "en": "a Governmental Office" + }, + "tags": [ + "office=government" + ] + } + ], + "mapRendering": [ + { + "icon": { + "render": "circle:white;./assets/layers/governments/government.svg" + }, + "iconSize": "40,40,center", + "location": [ + "point", + "centroid" + ] + } + ] +} \ No newline at end of file diff --git a/assets/layers/governments/license_info.json b/assets/layers/governments/license_info.json new file mode 100644 index 000000000..3281710ec --- /dev/null +++ b/assets/layers/governments/license_info.json @@ -0,0 +1,12 @@ +[ + { + "path": "government.svg", + "license": "CC0", + "authors": [ + "OSM Carto" + ], + "sources": [ + "https://wiki.openstreetmap.org/wiki/File:Office-16.svg" + ] + } +] \ No newline at end of file diff --git a/assets/themes/governments/crest.svg b/assets/themes/governments/crest.svg new file mode 100644 index 000000000..383b543b1 --- /dev/null +++ b/assets/themes/governments/crest.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/themes/governments/governments.json b/assets/themes/governments/governments.json new file mode 100644 index 000000000..405aea0c1 --- /dev/null +++ b/assets/themes/governments/governments.json @@ -0,0 +1,20 @@ +{ + "id": "governments", + "title": { + "en": "Governmental Offices" + }, + "description": { + "en": "On this map, Governmental offices are shown and can be easily added" + }, + "maintainer": "MapComplete", + "icon": "./assets/themes/onwheels/crest.svg", + "version": "0", + "startLat": 50.8465573, + "defaultBackgroundId": "CartoDB.Voyager", + "startLon": 4.351697, + "startZoom": 16, + "widenFactor": 2, + "layers": [ + "governments" + ] +} \ No newline at end of file diff --git a/assets/themes/governments/license_info.json b/assets/themes/governments/license_info.json new file mode 100644 index 000000000..9f2dcf81a --- /dev/null +++ b/assets/themes/governments/license_info.json @@ -0,0 +1,10 @@ +[ + { + "path": "crest.svg", + "license": "CC0", + "authors": [ + "Free Wheelies" + ], + "sources": [] + } +] \ No newline at end of file diff --git a/css/index-tailwind-output.css b/css/index-tailwind-output.css index 36f99ace6..bc51523d4 100644 --- a/css/index-tailwind-output.css +++ b/css/index-tailwind-output.css @@ -1042,22 +1042,22 @@ video { height: 6rem; } -.h-8 { - height: 2rem; +.h-10 { + height: 2.5rem; } .h-full { height: 100%; } -.h-10 { - height: 2.5rem; -} - .h-12 { height: 3rem; } +.h-8 { + height: 2rem; +} + .h-1\/2 { height: 50%; } @@ -1126,12 +1126,8 @@ video { width: 100%; } -.w-8 { - width: 2rem; -} - -.w-1 { - width: 0.25rem; +.w-10 { + width: 2.5rem; } .w-24 { @@ -1142,14 +1138,14 @@ video { width: 1.5rem; } -.w-10 { - width: 2.5rem; -} - .w-12 { width: 3rem; } +.w-8 { + width: 2rem; +} + .w-0 { width: 0px; } @@ -1290,6 +1286,10 @@ video { flex-wrap: wrap-reverse; } +.place-content-center { + place-content: center; +} + .content-start { align-content: flex-start; } @@ -1412,14 +1412,14 @@ video { border-bottom-left-radius: 0.25rem; } -.border { - border-width: 1px; -} - .border-2 { border-width: 2px; } +.border { + border-width: 1px; +} + .border-4 { border-width: 4px; } @@ -1432,6 +1432,15 @@ 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)); +} + .border-gray-500 { --tw-border-opacity: 1; border-color: rgba(107, 114, 128, var(--tw-border-opacity)); @@ -1466,6 +1475,11 @@ 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)); @@ -1550,10 +1564,6 @@ video { padding-right: 1rem; } -.pr-2 { - padding-right: 0.5rem; -} - .pb-12 { padding-bottom: 3rem; } @@ -1622,6 +1632,10 @@ video { padding-top: 0.125rem; } +.pr-2 { + padding-right: 0.5rem; +} + .pl-6 { padding-left: 1.5rem; } @@ -1693,10 +1707,6 @@ video { text-transform: lowercase; } -.capitalize { - text-transform: capitalize; -} - .italic { font-style: italic; } @@ -1837,11 +1847,11 @@ video { } .z-above-map { - z-index: 10000 + z-index: 10000; } .z-above-controls { - z-index: 10001 + z-index: 10001; } .bg-subtle { @@ -1863,14 +1873,14 @@ video { * Base colour of interactive elements, mainly the 'subtle button' * */ - --subtle-detail-color: #DBEAFE; + --subtle-detail-color: #dbeafe; --subtle-detail-color-contrast: black; --subtle-detail-color-light-contrast: lightgrey; /** * A stronger variant of the 'subtle-detail-colour' * Used as subtle button hover */ - --unsubtle-detail-color: #BFDBFE; + --unsubtle-detail-color: #bfdbfe; --unsubtle-detail-color-contrast: black; --catch-detail-color: #3a3aeb; --catch-detail-color-contrast: white; @@ -1884,7 +1894,8 @@ video { --variable-title-height: 0px; } -html, body { +html, +body { height: 100%; min-height: 100vh; min-height: -webkit-fill-available; @@ -1892,7 +1903,7 @@ html, body { padding: 0; background-color: var(--background-color); color: var(--foreground-color); - font-family: 'Helvetica Neue', Arial, sans-serif; + font-family: "Helvetica Neue", Arial, sans-serif; } .leaflet-overlay-pane .leaflet-zoom-animated { @@ -1915,7 +1926,8 @@ html, body { height: 100% !important; } -svg, img { +svg, +img { box-sizing: content-box; width: 100%; height: 100%; @@ -2019,6 +2031,39 @@ a { height: min-content; } +/* alex */ + +input[type="range"].vertical { + -webkit-writing-mode: bt-lr; + -ms-writing-mode: bt-lr; + writing-mode: bt-lr; + /* IE */ + -webkit-appearance: slider-vertical; + /* Chromium */ + width: 8px; + height: 310px; + padding: 0 5px; +} + +/* +.elevatorslider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 23px; + height: 24px; + border: 0; + background: url("../MapComplete/assets/svg/bug.svg"); + cursor: pointer; +} + +.elevatorslider::-moz-range-thumb { + width: 23px; + height: 25px; + border: 0; + background: url("../MapComplete/assets/svg/bug.svg"); + cursor: pointer; +} */ + .border-detail { border-color: var(--foreground-color); } @@ -2088,7 +2133,7 @@ p { } li::marker { - content: "•" + content: "•"; } .subtle-background { @@ -2098,7 +2143,7 @@ li::marker { .normal-background { background: var(--background-color); - color: var(--foreground-color) + color: var(--foreground-color); } .subtle-lighter { @@ -2176,7 +2221,8 @@ li::marker { color: unset !important; } -.disable-links a.must-link, .disable-links .must-link a { +.disable-links a.must-link, +.disable-links .must-link a { /* Hide links if they are disabled */ display: none; } @@ -2395,7 +2441,7 @@ li::marker { /***************** Info box (box containing features and questions ******************/ input { - color: var(--foreground-color) + color: var(--foreground-color); } .leaflet-popup-content { @@ -2447,7 +2493,7 @@ input { } .animate-height { - transition: max-height .5s ease-in-out; + transition: max-height 0.5s ease-in-out; overflow-y: hidden; } @@ -2477,7 +2523,7 @@ input { .mapping-icon-small-height { /* A mapping icon type */ - height: 2rem; + height: 1.5rem; margin-right: 0.5rem; width: unset; } @@ -2511,7 +2557,7 @@ input { margin-left: 1rem; } -.mapping-icon-large{ +.mapping-icon-large { /* A mapping icon type */ width: 6rem; max-height: 5rem; @@ -2809,4 +2855,3 @@ input { display: inline; } } - diff --git a/index.css b/index.css index 85da5cdc7..fa09d5984 100644 --- a/index.css +++ b/index.css @@ -12,667 +12,673 @@ @tailwind utilities; @layer utilities { - @variants responsive { - .z-above-map { - z-index: 10000 - } - - .z-above-controls { - z-index: 10001 - } - - .w-160 { - width: 40rem; - } - - .bg-subtle { - background-color: var(--subtle-detail-color); - color: var(--subtle-detail-color-contrast); - } - - .bg-unsubtle { - background-color: var(--unsubtle-detail-color); - color: var(--unsubtle-detail-color-contrast); - } - - .bg-catch { - background-color: var(--catch-detail-color); - color: var(--catch-detail-color-contrast); - } - - .rounded-left-full { - border-bottom-left-radius: 999rem; - border-top-left-radius: 999rem; - } - - .rounded-right-full { - border-bottom-right-radius: 999rem; - border-top-right-radius: 999rem; - } + @variants responsive { + .z-above-map { + z-index: 10000; } + .z-above-controls { + z-index: 10001; + } + + .w-160 { + width: 40rem; + } + + .bg-subtle { + background-color: var(--subtle-detail-color); + color: var(--subtle-detail-color-contrast); + } + + .bg-unsubtle { + background-color: var(--unsubtle-detail-color); + color: var(--unsubtle-detail-color-contrast); + } + + .bg-catch { + background-color: var(--catch-detail-color); + color: var(--catch-detail-color-contrast); + } + + .rounded-left-full { + border-bottom-left-radius: 999rem; + border-top-left-radius: 999rem; + } + + .rounded-right-full { + border-bottom-right-radius: 999rem; + border-top-right-radius: 999rem; + } + } } - :root { - /* The main colour scheme of mapcomplete is configured here. + /* The main colour scheme of mapcomplete is configured here. * For a custom styling, set 'customCss' in your layoutConfig and overwrite some of these. */ - /* Main color of the application: the background and text colours */ - --background-color: white; - /* Main text colour. Also styles some elements, such as the 'close popup'-button or 'back-arrow' (in mobile) */ - --foreground-color: black; - - /* A colour to indicate an error or warning */ - --alert-color: #fee4d1; - - /** + /* Main color of the application: the background and text colours */ + --background-color: white; + /* Main text colour. Also styles some elements, such as the 'close popup'-button or 'back-arrow' (in mobile) */ + --foreground-color: black; + + /* A colour to indicate an error or warning */ + --alert-color: #fee4d1; + + /** * Base colour of interactive elements, mainly the 'subtle button' * */ - --subtle-detail-color: #DBEAFE; - --subtle-detail-color-contrast: black; - --subtle-detail-color-light-contrast: lightgrey; + --subtle-detail-color: #dbeafe; + --subtle-detail-color-contrast: black; + --subtle-detail-color-light-contrast: lightgrey; - /** + /** * A stronger variant of the 'subtle-detail-colour' * Used as subtle button hover */ - --unsubtle-detail-color: #BFDBFE; - --unsubtle-detail-color-contrast: black; - - - --catch-detail-color: #3a3aeb; - --catch-detail-color-contrast: white; + --unsubtle-detail-color: #bfdbfe; + --unsubtle-detail-color-contrast: black; - - --non-active-tab-svg: var(--foreground-color); - --shadow-color: #00000066; - - --return-to-the-map-height: 2em; - --image-carousel-height: 350px; + --catch-detail-color: #3a3aeb; + --catch-detail-color-contrast: white; - /* The border colour of the leaflet popup */ - --popup-border: white; + --non-active-tab-svg: var(--foreground-color); + --shadow-color: #00000066; - /* Technical variable to make some dynamic behaviour possible; set by javascript. */ - --variable-title-height: 0px; + --return-to-the-map-height: 2em; + --image-carousel-height: 350px; + + /* The border colour of the leaflet popup */ + --popup-border: white; + + /* Technical variable to make some dynamic behaviour possible; set by javascript. */ + --variable-title-height: 0px; } -html, body { - height: 100%; - min-height: 100vh; - min-height: -webkit-fill-available; - margin: 0; - padding: 0; - background-color: var(--background-color); - color: var(--foreground-color); - font-family: 'Helvetica Neue', Arial, sans-serif; +html, +body { + height: 100%; + min-height: 100vh; + min-height: -webkit-fill-available; + margin: 0; + padding: 0; + background-color: var(--background-color); + color: var(--foreground-color); + font-family: "Helvetica Neue", Arial, sans-serif; } .leaflet-overlay-pane .leaflet-zoom-animated { - /* Another workaround to keep leaflet working */ - width: initial !important; - height: initial !important; - box-sizing: initial !important; + /* Another workaround to keep leaflet working */ + width: initial !important; + height: initial !important; + box-sizing: initial !important; } .leaflet-control-attribution { - display: block ruby; + display: block ruby; } .badge { } .badge svg { - /*Workaround for leaflet*/ - width: unset !important; - height: 100% !important; + /*Workaround for leaflet*/ + width: unset !important; + height: 100% !important; } -svg, img { - box-sizing: content-box; - width: 100%; - height: 100%; +svg, +img { + box-sizing: content-box; + width: 100%; + height: 100%; } .titleicon img { - width: unset; + width: unset; } .titleicon svg { - width: unset; + width: unset; } .svg-catch svg path { - fill: var(--catch-detail-color) !important; - stroke: var(--catch-detail-color) !important; + fill: var(--catch-detail-color) !important; + stroke: var(--catch-detail-color) !important; } .svg-unsubtle svg path { - fill: var(--unsubtle-detail-color) !important; - stroke: var(--unsubtle-detail-color) !important; + fill: var(--unsubtle-detail-color) !important; + stroke: var(--unsubtle-detail-color) !important; } .svg-subtle svg path { - fill: var(--subtle-detail-color) !important; - stroke: var(--subtle-detail-color) !important; + fill: var(--subtle-detail-color) !important; + stroke: var(--subtle-detail-color) !important; } .svg-foreground svg path { - fill: var(--foreground-color) !important; - stroke: var(--foreground-color) !important; + fill: var(--foreground-color) !important; + stroke: var(--foreground-color) !important; } .no-images img { - display: none; + display: none; } .weblate-link { - /* Weblate-links are the little translation icon next to translatable sentences. Due to their special nature, they are exempt from some rules */ + /* Weblate-links are the little translation icon next to translatable sentences. Due to their special nature, they are exempt from some rules */ } .mapcontrol svg path { - fill: var(--subtle-detail-color-contrast) !important; + fill: var(--subtle-detail-color-contrast) !important; } .red-svg svg path { - stroke: #d71010 !important; + stroke: #d71010 !important; } a { - color: var(--foreground-color); + color: var(--foreground-color); } .btn { - line-height: 1.25rem; - --tw-text-opacity: 1; - color: var(--catch-detail-color-contrast); - --tw-bg-opacity: 1; - background-color: var(--catch-detail-color); - display: inline-flex; - border-radius: 1.5rem; - padding-top: 0.75rem; - padding-bottom: 0.75rem; - padding-left: 1.25rem; - padding-right: 1.25rem; - font-size: large; - font-weight: bold; - transition: 100ms; - /*-- invisible border: rendered on hover*/ - border: 3px solid var(--unsubtle-detail-color); + line-height: 1.25rem; + --tw-text-opacity: 1; + color: var(--catch-detail-color-contrast); + --tw-bg-opacity: 1; + background-color: var(--catch-detail-color); + display: inline-flex; + border-radius: 1.5rem; + padding-top: 0.75rem; + padding-bottom: 0.75rem; + padding-left: 1.25rem; + padding-right: 1.25rem; + font-size: large; + font-weight: bold; + transition: 100ms; + /*-- invisible border: rendered on hover*/ + border: 3px solid var(--unsubtle-detail-color); } .btn:hover { - border: 3px solid var(--catch-detail-color); + border: 3px solid var(--catch-detail-color); } .btn-secondary { - background-color: var(--catch-detail-color); - filter: saturate(0.5); - + background-color: var(--catch-detail-color); + filter: saturate(0.5); } .btn-secondary:hover { - background-color: var(--catch-detail-color); - filter: unset; + background-color: var(--catch-detail-color); + filter: unset; } .btn-disabled { - filter: saturate(0.3); - cursor: default; + filter: saturate(0.3); + cursor: default; } .btn-disabled:hover { - border: 3px solid var(--unsubtle-detail-color); + border: 3px solid var(--unsubtle-detail-color); } .h-min { - height: min-content; + height: min-content; } +/* alex */ +input[type="range"].vertical { + writing-mode: bt-lr; /* IE */ + -webkit-appearance: slider-vertical; /* Chromium */ + width: 8px; + height: 310px; + padding: 0 5px; +} +/* +.elevatorslider::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + width: 23px; + height: 24px; + border: 0; + background: url("../MapComplete/assets/svg/bug.svg"); + cursor: pointer; +} + +.elevatorslider::-moz-range-thumb { + width: 23px; + height: 25px; + border: 0; + background: url("../MapComplete/assets/svg/bug.svg"); + cursor: pointer; +} */ .border-detail { - border-color: var(--foreground-color); + border-color: var(--foreground-color); } .w-min { - width: min-content; + width: min-content; } .rounded-left-full { - border-bottom-left-radius: 999rem; - border-top-left-radius: 999rem; + border-bottom-left-radius: 999rem; + border-top-left-radius: 999rem; } .rounded-right-full { - border-bottom-right-radius: 999rem; - border-top-right-radius: 999rem; + border-bottom-right-radius: 999rem; + border-top-right-radius: 999rem; } .w-16-imp { - width: 4rem !important; + width: 4rem !important; } .w-32-imp { - width: 8rem !important; + width: 8rem !important; } .w-48-imp { - width: 12rem !important; + width: 12rem !important; } .link-underline a { - text-decoration: underline 1px var(--foreground-color); + text-decoration: underline 1px var(--foreground-color); } .link-no-underline a { - text-decoration: none; + text-decoration: none; } li { - margin-left: 0.5em; - padding-left: 0.2em; - margin-top: 0.1em; + margin-left: 0.5em; + padding-left: 0.2em; + margin-top: 0.1em; } h2 { - font-size: large; - margin-top: 0.5em; - margin-bottom: 0.3em; - font-weight: bold; + font-size: large; + margin-top: 0.5em; + margin-bottom: 0.3em; + font-weight: bold; } h3 { - font-size: larger; - margin-top: 0.6em; - margin-bottom: 0; - font-weight: bold; + font-size: larger; + margin-top: 0.6em; + margin-bottom: 0; + font-weight: bold; } h3 { - font-size: larger; - margin-top: 0.6em; - margin-bottom: 0; - font-weight: bolder; + font-size: larger; + margin-top: 0.6em; + margin-bottom: 0; + font-weight: bolder; } p { - padding-top: 0.1em; + padding-top: 0.1em; } li::marker { - content: "•" + content: "•"; } .subtle-background { - background: var(--subtle-detail-color); - color: var(--subtle-detail-color-contrast); + background: var(--subtle-detail-color); + color: var(--subtle-detail-color-contrast); } .normal-background { - background: var(--background-color); - color: var(--foreground-color) + background: var(--background-color); + color: var(--foreground-color); } .subtle-lighter { - color: var(--subtle-detail-color-light-contrast); + color: var(--subtle-detail-color-light-contrast); } .border-attention-catch { - border: 5px solid var(--catch-detail-color); + border: 5px solid var(--catch-detail-color); } .border-invisible { - border: 5px solid #00000000; + border: 5px solid #00000000; } .border-attention { - border-color: var(--catch-detail-color); + border-color: var(--catch-detail-color); } .direction-svg svg path { - fill: var(--catch-detail-color) !important; + fill: var(--catch-detail-color) !important; } - #leafletDiv { - height: 100%; + height: 100%; } .leaflet-popup-content-wrapper { - background-color: var(--background-color); - color: var(--foreground-color); - border: 2px solid var(--popup-border); - box-shadow: 0 3px 14px var(--shadow-color) !important; + background-color: var(--background-color); + color: var(--foreground-color); + border: 2px solid var(--popup-border); + box-shadow: 0 3px 14px var(--shadow-color) !important; } .leaflet-container { - font: unset !important; - background-color: var(--background-color) !important; + font: unset !important; + background-color: var(--background-color) !important; } .leaflet-popup-tip { - background-color: var(--popup-border) !important; - color: var(--popup-border) !important; - box-shadow: 0 3px 14px var(--shadow-color) !important; + background-color: var(--popup-border) !important; + color: var(--popup-border) !important; + box-shadow: 0 3px 14px var(--shadow-color) !important; } .single-layer-selection-toggle { - position: relative; - width: 2em; - height: 2em; - flex-shrink: 0; + position: relative; + width: 2em; + height: 2em; + flex-shrink: 0; } .single-layer-selection-toggle img { - max-height: 2em !important; - max-width: 2em !important; + max-height: 2em !important; + max-width: 2em !important; } .single-layer-selection-toggle svg { - max-height: 2em !important; - max-width: 2em !important; + max-height: 2em !important; + max-width: 2em !important; } - .block-ruby { - display: block ruby; + display: block ruby; } .disable-links a { - pointer-events: none; - text-decoration: none !important; - color: var(--subtle-detail-color-contrast) !important; + pointer-events: none; + text-decoration: none !important; + color: var(--subtle-detail-color-contrast) !important; } .enable-links a { - pointer-events: unset; - text-decoration: underline !important; - color: unset !important; + pointer-events: unset; + text-decoration: underline !important; + color: unset !important; } -.disable-links a.must-link, .disable-links .must-link a { - /* Hide links if they are disabled */ - display: none; +.disable-links a.must-link, +.disable-links .must-link a { + /* Hide links if they are disabled */ + display: none; } /**************** GENERIC ****************/ - .alert { - background-color: var(--alert-color); - color: var(--foreground-color); - font-weight: bold; - border-radius: 1em; - margin: 0.25em; - text-align: center; - padding: 0.15em 0.3em; + background-color: var(--alert-color); + color: var(--foreground-color); + font-weight: bold; + border-radius: 1em; + margin: 0.25em; + text-align: center; + padding: 0.15em 0.3em; } .invalid { - box-shadow: 0 0 10px #ff5353; - height: min-content; + box-shadow: 0 0 10px #ff5353; + height: min-content; } .shadow { - box-shadow: 0 0 10px var(--shadow-color); + box-shadow: 0 0 10px var(--shadow-color); } .title-font span { - font-size: xx-large !important; - font-weight: bold; + font-size: xx-large !important; + font-weight: bold; } .soft { - background-color: var(--subtle-detail-color); - color: var(--subtle-detail-color-contrast); - font-weight: bold; - border-radius: 1em; - margin: 0.25em; - text-align: center; - padding: 0.15em 0.3em; + background-color: var(--subtle-detail-color); + color: var(--subtle-detail-color-contrast); + font-weight: bold; + border-radius: 1em; + margin: 0.25em; + text-align: center; + padding: 0.15em 0.3em; } - .subtle { - color: #999; + color: #999; } .link-underline .subtle a { - text-decoration: underline 1px #7193bb88; - color: #7193bb; + text-decoration: underline 1px #7193bb88; + color: #7193bb; } - .thanks { - background-color: #43d904; - font-weight: bold; - border-radius: 1em; - margin: 0.25em; - text-align: center; - padding: 0.15em 0.3em; + background-color: #43d904; + font-weight: bold; + border-radius: 1em; + margin: 0.25em; + text-align: center; + padding: 0.15em 0.3em; } .clickable { - pointer-events: all; + pointer-events: all; } .unclickable { - pointer-events: none !important; + pointer-events: none !important; } - @keyframes slide { - /* This is the animation on the marker to add a new point - it slides through all the possible presets */ - from { - transform: translateX(0%); - } + /* This is the animation on the marker to add a new point - it slides through all the possible presets */ + from { + transform: translateX(0%); + } - to { - transform: translateX(calc(-100% + 42px)); - } + to { + transform: translateX(calc(-100% + 42px)); + } } .hand-drag-animation { - animation: hand-drag-animation 6s ease-in-out infinite; - transform-origin: 50% 125%; + animation: hand-drag-animation 6s ease-in-out infinite; + transform-origin: 50% 125%; } @keyframes hand-drag-animation { - /* This is the animation on the little extra hand on the location input. If fades in, invites the user to interact/drag the map */ - 0% { - opacity: 0; - transform: rotate(-30deg); - } + /* This is the animation on the little extra hand on the location input. If fades in, invites the user to interact/drag the map */ + 0% { + opacity: 0; + transform: rotate(-30deg); + } - 6% { - opacity: 1; - transform: rotate(-30deg); - } + 6% { + opacity: 1; + transform: rotate(-30deg); + } - 12% { - opacity: 1; - transform: rotate(-45deg); - } + 12% { + opacity: 1; + transform: rotate(-45deg); + } - 24% { - opacity: 1; - transform: rotate(-00deg); - } + 24% { + opacity: 1; + transform: rotate(-00deg); + } - 30% { - opacity: 1; - transform: rotate(-30deg); - } + 30% { + opacity: 1; + transform: rotate(-30deg); + } + 36% { + opacity: 0; + transform: rotate(-30deg); + } - 36% { - opacity: 0; - transform: rotate(-30deg); - } - - 100% { - opacity: 0; - transform: rotate(-30deg); - } - + 100% { + opacity: 0; + transform: rotate(-30deg); + } } /**************************************/ - #topleft-tools { - display: block; - position: absolute; - z-index: 5000; - transition: all 500ms linear; - left: 0; - right: 0; + display: block; + position: absolute; + z-index: 5000; + transition: all 500ms linear; + left: 0; + right: 0; } .welcomeMessage { - display: block; - max-width: calc(100vw - 5em); - width: 40em; - max-height: calc(100vh - 15em); - background-color: var(--background-color); - color: var(--foreground-color); + display: block; + max-width: calc(100vw - 5em); + width: 40em; + max-height: calc(100vh - 15em); + background-color: var(--background-color); + color: var(--foreground-color); } - - /***************** Info box (box containing features and questions ******************/ input { - color: var(--foreground-color) + color: var(--foreground-color); } .leaflet-popup-content { - width: 45em !important; - margin: 0.25rem !important; + width: 45em !important; + margin: 0.25rem !important; } .leaflet-div-icon { - background-color: unset !important; - border: unset !important; + background-color: unset !important; + border: unset !important; } .floating-element-width { - max-width: calc(100vw - 5em); - width: 40em; + max-width: calc(100vw - 5em); + width: 40em; } .leaflet-div-icon svg { - width: calc(100%); - height: calc(100%); + width: calc(100%); + height: calc(100%); } /****** ShareScreen *****/ .literal-code { - display: inline-block; - background-color: lightgray; - padding: 0.5em; - word-break: break-word; - color: black; - box-sizing: border-box; + display: inline-block; + background-color: lightgray; + padding: 0.5em; + word-break: break-word; + color: black; + box-sizing: border-box; } - /** Switch layout **/ .small-image img { - height: 1em; - max-width: 1em; + height: 1em; + max-width: 1em; } .small-image { - height: 1em; - max-width: 1em; + height: 1em; + max-width: 1em; } - .slideshow-item img { - height: var(--image-carousel-height); - width: unset; + height: var(--image-carousel-height); + width: unset; } .animate-height { - transition: max-height .5s ease-in-out; - overflow-y: hidden; + transition: max-height 0.5s ease-in-out; + overflow-y: hidden; } - .zebra-table tr:nth-child(even) { - background-color: #f2f2f2; + background-color: #f2f2f2; } .layer-toggle { - /* The checkbox that toggles a single layer */ + /* The checkbox that toggles a single layer */ } .layer-filters { - /* If needed, the panel which contains the extra filters for a layer */ - margin-bottom: 1rem; - border-bottom: 2px solid var(--foreground-color); + /* If needed, the panel which contains the extra filters for a layer */ + margin-bottom: 1rem; + border-bottom: 2px solid var(--foreground-color); } .filter-panel { - /* The panel for a single layer, containing both the toggle and the filters (if any) */ - border-bottom: 2px solid lightgrey; - margin-bottom: 0.5rem; + /* The panel for a single layer, containing both the toggle and the filters (if any) */ + border-bottom: 2px solid lightgrey; + margin-bottom: 0.5rem; } .first-filter-panel { - /* Additional class on the first layer filter */ + /* Additional class on the first layer filter */ } .mapping-icon-small-height { - /* A mapping icon type */ - height: 1.5rem; - margin-right: 0.5rem; - width: unset; + /* A mapping icon type */ + height: 1.5rem; + margin-right: 0.5rem; + width: unset; } .mapping-icon-medium-height { - /* A mapping icon type */ - height: 3rem; - margin-right: 0.5rem; - width: unset; + /* A mapping icon type */ + height: 3rem; + margin-right: 0.5rem; + width: unset; } .mapping-icon-large-height { - /* A mapping icon type */ - height: 5rem; - margin-right: 0.5rem; - width: unset; + /* A mapping icon type */ + height: 5rem; + margin-right: 0.5rem; + width: unset; } - .mapping-icon-small { - /* A mapping icon type */ - width: 1.5rem; - max-height: 1.5rem; - margin-right: 0.5rem; + /* A mapping icon type */ + width: 1.5rem; + max-height: 1.5rem; + margin-right: 0.5rem; } .mapping-icon-medium { - /* A mapping icon type */ - width: 3rem; - max-height: 3rem; - margin-right: 1rem; - margin-left: 1rem; + /* A mapping icon type */ + width: 3rem; + max-height: 3rem; + margin-right: 1rem; + margin-left: 1rem; } -.mapping-icon-large{ - /* A mapping icon type */ - width: 6rem; - max-height: 5rem; - margin-top: 0.5rem; - margin-bottom: 0.5rem; - margin-right: 1.5rem; - margin-left: 1.5rem; - - +.mapping-icon-large { + /* A mapping icon type */ + width: 6rem; + max-height: 5rem; + margin-top: 0.5rem; + margin-bottom: 0.5rem; + margin-right: 1.5rem; + margin-left: 1.5rem; } - diff --git a/test.ts b/test.ts index e25a2ad54..55d01a9ae 100644 --- a/test.ts +++ b/test.ts @@ -1,52 +1,36 @@ -import * as shops from "./assets/generated/layers/shops.json" +import { max } from "moment"; +import { Store, UIEventSource } from "./Logic/UIEventSource" import Combine from "./UI/Base/Combine"; -import Img from "./UI/Base/Img"; -import BaseUIElement from "./UI/BaseUIElement"; -import {VariableUiElement} from "./UI/Base/VariableUIElement"; -import LanguagePicker from "./UI/LanguagePicker"; -import TagRenderingConfig, {Mapping} from "./Models/ThemeConfig/TagRenderingConfig"; -import {MappingConfigJson} from "./Models/ThemeConfig/Json/QuestionableTagRenderingConfigJson"; -import {FixedUiElement} from "./UI/Base/FixedUiElement"; -import {TagsFilter} from "./Logic/Tags/TagsFilter"; -import {SearchablePillsSelector} from "./UI/Input/SearchableMappingsSelector"; -import {UIEventSource} from "./Logic/UIEventSource"; +import { FixedUiElement } from "./UI/Base/FixedUiElement"; +import { VariableUiElement } from "./UI/Base/VariableUIElement"; +import { FixedInputElement } from "./UI/Input/FixedInputElement"; +import Slider from "./UI/Input/Slider"; +import Toggle from "./UI/Input/Toggle"; -const mappingsRaw: MappingConfigJson[] = shops.tagRenderings.find(tr => tr.id == "shop_types").mappings -const mappings = mappingsRaw.map((m, i) => TagRenderingConfig.ExtractMapping(m, i, "test", "test")) +const testData = ["-1", "0", "0.5", "1", "1.5", "2"] -function fromMapping(m: Mapping): { show: BaseUIElement, value: TagsFilter, mainTerm: Record, searchTerms?: Record } { - const el: BaseUIElement = m.then - let icon: BaseUIElement - if (m.icon !== undefined) { - icon = new Img(m.icon).SetClass("h-8 w-8 pr-2") - } else { - icon = new FixedUiElement("").SetClass("h-8 w-1") +const values = testData.map((data) => new FixedUiElement(data).onClick(() => { + values.map((val) => { + val.RemoveClass("active bg-blue-200") + if (val.content === data) { + const options = { + value : new UIEventSource(testData.indexOf(val.content)), + } + val.SetClass("active bg-blue-200") + const newSlider = new Slider(0, testData.length-1, options).SetClass("flex vertical m-4 elevatorslider"); + new Combine([valCombine, newSlider]).SetClass("flex flex-row h-10").AttachTo("extradiv") + console.log(slider.GetValue()) } - const show = new Combine([ - icon, - el.SetClass("block-ruby") - ]).SetClass("flex items-center") + }) +}).SetClass("flex flex-column bg-slate-200 w-10 h-10 border-2 border-blue-500 border-solid rounded-full place-content-center items-center m-4")) - return {show, mainTerm: m.then.translations, searchTerms: m.searchTerms, value: m.if}; +const valCombine = new Combine(values.reverse()) +// valCombine.AttachTo("maindiv") -} -const search = new UIEventSource("") -const sp = new SearchablePillsSelector( - mappings.map(m => fromMapping(m)), - { - noMatchFound: new VariableUiElement(search.map(s => "Mark this a `"+s+"`")), - onNoSearch: new FixedUiElement("Search in "+mappingsRaw.length+" categories"), - selectIfSingle: true, - searchValue: search - } -) +const slider = new Slider(0, testData.length-1); -sp.AttachTo("maindiv") +slider.SetClass("flex vertical m-4 elevatorslider") -const lp = new LanguagePicker(["en", "nl"], "") +new Combine([valCombine, slider]).SetClass("flex flex-row h-10").AttachTo("extradiv") -new Combine([ - new VariableUiElement(sp.GetValue().map(tf => new FixedUiElement("Selected tags: " + tf.map(tf => tf.asHumanString(false, false, {})).join(", ")))), - lp -]).SetClass("flex flex-col") - .AttachTo("extradiv") \ No newline at end of file +console.log(slider)