From 3c73dfd6b290513da60da09de4314e5a08f653c6 Mon Sep 17 00:00:00 2001 From: pietervdvn Date: Sun, 22 Aug 2021 18:48:38 +0200 Subject: [PATCH] Update of the 'addNewMarker': show icons, show plus button, show label --- Logic/Actors/StrayClickHandler.ts | 10 +- Models/Constants.ts | 2 +- UI/BigComponents/AddNewMarker.ts | 54 ++++ UI/BigComponents/SimpleAddUI.ts | 2 +- .../bike_repair_station.json | 9 +- assets/svg/addSmall.svg | 27 +- assets/svg/add_pin.svg | 270 ++++++++++++++++++ index.css | 72 +++-- langs/en.json | 1 + langs/layers/nl.json | 3 + langs/nl.json | 1 + test.ts | 86 ++---- 12 files changed, 416 insertions(+), 121 deletions(-) create mode 100644 UI/BigComponents/AddNewMarker.ts create mode 100644 assets/svg/add_pin.svg diff --git a/Logic/Actors/StrayClickHandler.ts b/Logic/Actors/StrayClickHandler.ts index 3e7609fd4..f42ef80f1 100644 --- a/Logic/Actors/StrayClickHandler.ts +++ b/Logic/Actors/StrayClickHandler.ts @@ -3,6 +3,8 @@ import Svg from "../../Svg"; import {UIEventSource} from "../UIEventSource"; import Img from "../../UI/Base/Img"; import ScrollableFullScreen from "../../UI/Base/ScrollableFullScreen"; +import AddNewMarker from "../../UI/BigComponents/AddNewMarker"; +import FilteredLayer from "../../Models/FilteredLayer"; /** * The stray-click-hanlders adds a marker to the map if no feature was clicked. @@ -14,7 +16,7 @@ export default class StrayClickHandler { constructor( lastClickLocation: UIEventSource<{ lat: number, lon: number }>, selectedElement: UIEventSource, - filteredLayers: UIEventSource<{ readonly isDisplayed: UIEventSource }[]>, + filteredLayers: UIEventSource, leafletMap: UIEventSource, uiToShow: ScrollableFullScreen) { const self = this; @@ -40,12 +42,12 @@ export default class StrayClickHandler { selectedElement.setData(undefined); self._lastMarker = L.marker([lastClick.lat, lastClick.lon], { - icon: L.icon({ - iconUrl: Img.AsData(Svg.add), + icon: L.divIcon({ + html: new AddNewMarker(filteredLayers).ConstructElement(), iconSize: [50, 50], iconAnchor: [25, 50], popupAnchor: [0, -45] - }) + }) }); const popup = L.popup({ autoPan: true, diff --git a/Models/Constants.ts b/Models/Constants.ts index cf3901012..31ecabfb7 100644 --- a/Models/Constants.ts +++ b/Models/Constants.ts @@ -2,7 +2,7 @@ import { Utils } from "../Utils"; export default class Constants { - public static vNumber = "0.9.0"; + public static vNumber = "0.9.1"; // The user journey states thresholds when a new feature gets unlocked public static userJourney = { diff --git a/UI/BigComponents/AddNewMarker.ts b/UI/BigComponents/AddNewMarker.ts new file mode 100644 index 000000000..3755aa088 --- /dev/null +++ b/UI/BigComponents/AddNewMarker.ts @@ -0,0 +1,54 @@ +import {UIEventSource} from "../../Logic/UIEventSource"; +import Combine from "../Base/Combine"; +import Translations from "../i18n/Translations"; +import {VariableUiElement} from "../Base/VariableUIElement"; +import FilteredLayer from "../../Models/FilteredLayer"; +import {TagUtils} from "../../Logic/Tags/TagUtils"; +import Svg from "../../Svg"; + +export default class AddNewMarker extends Combine { + + constructor(filteredLayers: UIEventSource) { + const icons = new VariableUiElement(filteredLayers.map(filteredLayers => { + const icons = [] + let last = undefined; + for (const filteredLayer of filteredLayers) { + const layer = filteredLayer.layerDef; + for (const preset of filteredLayer.layerDef.presets) { + const tags = TagUtils.KVtoProperties(preset.tags) + const icon = layer.GenerateLeafletStyle(new UIEventSource(tags), false).icon.html + .SetClass("block relative") + .SetStyle("width: 42px; height: 42px;"); + icons.push(icon) + if (last === undefined) { + last = layer.GenerateLeafletStyle(new UIEventSource(tags), false).icon.html + .SetClass("block relative") + .SetStyle("width: 42px; height: 42px;"); + } + } + } + if(icons.length === 1){ + return icons[0] + } + icons.push(last) + const elem = new Combine(icons).SetClass("flex") + elem.SetClass("slide min-w-min").SetStyle("animation: slide " + icons.length + "s linear infinite;") + return elem; + })) + const label = Translations.t.general.add.addNewMapLabel.Clone() + .SetClass("block center absolute text-sm min-w-min pl-1 pr-1 bg-gray-400 rounded-3xl text-white opacity-65 whitespace-nowrap") + .SetStyle("top: 65px; transform: translateX(-50%)") + super([ + new Combine([ + Svg.add_pin_svg().SetClass("absolute").SetStyle("width: 50px; filter: drop-shadow(grey 0 0 10px"), + new Combine([icons]) + .SetStyle("width: 50px") + .SetClass("absolute p-1 rounded-full overflow-hidden"), + Svg.addSmall_svg().SetClass("absolute animate-pulse").SetStyle("width: 30px; left: 30px; top: 35px;") + ]).SetClass("absolute"), + new Combine([label]).SetStyle("position: absolute; left: 50%") + ]) + this.SetClass("block relative"); + } + +} \ No newline at end of file diff --git a/UI/BigComponents/SimpleAddUI.ts b/UI/BigComponents/SimpleAddUI.ts index 3c7137c6d..e377c1f2a 100644 --- a/UI/BigComponents/SimpleAddUI.ts +++ b/UI/BigComponents/SimpleAddUI.ts @@ -204,7 +204,7 @@ export default class SimpleAddUI extends Toggle { ).onClick(cancel) return new Combine([ - Translations.t.general.add.confirmIntro.Subs({title: preset.name}), + // Translations.t.general.add.confirmIntro.Subs({title: preset.name}), State.state.osmConnection.userDetails.data.dryRun ? Translations.t.general.testing.Clone().SetClass("alert") : undefined, openLayerOrConfirm, diff --git a/assets/layers/bike_repair_station/bike_repair_station.json b/assets/layers/bike_repair_station/bike_repair_station.json index 3f1c686cb..df372236f 100644 --- a/assets/layers/bike_repair_station/bike_repair_station.json +++ b/assets/layers/bike_repair_station/bike_repair_station.json @@ -226,7 +226,6 @@ } ] }, - { "question": { "en": "What is the email address of the maintainer?", @@ -249,7 +248,6 @@ }, "render": "{phone}" }, - { "question": { "nl": "Wanneer is dit fietsherstelpunt open?", @@ -410,10 +408,13 @@ { "#": "Email maintainer", "condition": { - "and": ["email~*", "service:bicycle:pump:operational_status=broken"] + "and": [ + "email~*", + "service:bicycle:pump:operational_status=broken" + ] }, "render": { - "en": "Report this bicycle pump as broken", + "en": "Report this bicycle pump as broken", "nl": "Rapporteer deze fietspomp als kapot" } }, diff --git a/assets/svg/addSmall.svg b/assets/svg/addSmall.svg index 59051c835..6dfcf60c5 100644 --- a/assets/svg/addSmall.svg +++ b/assets/svg/addSmall.svg @@ -13,7 +13,7 @@ version="1.1" id="svg132" sodipodi:docname="addSmall.svg" - inkscape:version="0.92.4 (5da689c313, 2019-01-14)" + inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)" style="fill:none"> @@ -23,7 +23,7 @@ image/svg+xml - + @@ -37,16 +37,16 @@ inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1920" - inkscape:window-height="1001" + inkscape:window-height="1003" id="namedview134" showgrid="false" showguides="true" inkscape:guide-bbox="true" inkscape:zoom="5.5166017" - inkscape:cx="9.5832222" + inkscape:cx="-5.2810012" inkscape:cy="51.981151" - inkscape:window-x="0" - inkscape:window-y="0" + inkscape:window-x="1024" + inkscape:window-y="1080" inkscape:window-maximized="1" inkscape:current-layer="svg132"> + style="fill:#37d649;fill-opacity:1;stroke:#606060;stroke-opacity:1" /> - + style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.99999998;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate" + d="M 48.451172 13.953125 A 8.3145427 8.3145427 0 0 0 42.529297 16.5625 A 8.3145427 8.3145427 0 0 0 40.267578 22.380859 L 40.267578 39.757812 L 23.134766 39.757812 A 8.3145427 8.3145427 0 0 0 17.134766 42.193359 A 8.3145427 8.3145427 0 0 0 23.138672 56.386719 L 40.267578 56.386719 L 40.267578 73.435547 A 8.3145427 8.3145427 0 1 0 56.894531 73.439453 L 56.894531 56.386719 L 74.191406 56.386719 A 8.3145427 8.3145427 0 1 0 74.195312 39.757812 L 56.892578 39.757812 L 56.892578 22.380859 A 8.3145427 8.3145427 0 0 0 48.451172 13.953125 z " + transform="matrix(0.3195493,0.3195493,-0.3195493,0.3195493,13.753427,252.28933)" + id="path815" /> diff --git a/assets/svg/add_pin.svg b/assets/svg/add_pin.svg new file mode 100644 index 000000000..a1b4e7ba8 --- /dev/null +++ b/assets/svg/add_pin.svg @@ -0,0 +1,270 @@ + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.css b/index.css index 88cfb06ee..c9eade2bf 100644 --- a/index.css +++ b/index.css @@ -11,39 +11,39 @@ .max-h-20vh { max-height: 20vh; } - - .z-above-map{ + + .z-above-map { z-index: 10000 } - .z-above-controls{ + .z-above-controls { z-index: 10001 } - + } - .btn { - @apply inline-flex justify-center; - @apply py-2 px-4; - @apply border border-transparent shadow-sm; - @apply shadow-sm rounded-3xl; - @apply ring-2 ring-blue-200 hover:ring-blue-300; - @apply mt-1 mr-1; - @apply text-sm font-medium text-white; - @apply bg-blue-600 hover:bg-blue-700; - @apply focus:outline-none focus:ring-blue-700; - } + .btn { + @apply inline-flex justify-center; + @apply py-2 px-4; + @apply border border-transparent shadow-sm; + @apply shadow-sm rounded-3xl; + @apply ring-2 ring-blue-200 hover:ring-blue-300; + @apply mt-1 mr-1; + @apply text-sm font-medium text-white; + @apply bg-blue-600 hover:bg-blue-700; + @apply focus:outline-none focus:ring-blue-700; + } - .btn-secondary { - @apply bg-gray-600 hover:bg-gray-700; - } + .btn-secondary { + @apply bg-gray-600 hover:bg-gray-700; + } - .btn-disabled { - @apply bg-gray-500 hover:bg-gray-500; - @apply text-gray-300; - @apply ring-gray-200 hover:ring-gray-200 focus:ring-gray-200; - @apply cursor-default; - } + .btn-disabled { + @apply bg-gray-500 hover:bg-gray-500; + @apply text-gray-300; + @apply ring-gray-200 hover:ring-gray-200 focus:ring-gray-200; + @apply cursor-default; + } } @@ -61,7 +61,7 @@ --shadow-color: #00000066; --variable-title-height: 0px; /* Set by javascript */ --return-to-the-map-height: 2em; - + --image-carousel-height: 350px; } @@ -75,6 +75,7 @@ html, body { 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; @@ -93,7 +94,7 @@ svg, img { display: unset; } -.mapcontrol svg path{ +.mapcontrol svg path { fill: var(--subtle-detail-color-contrast) !important; } @@ -125,12 +126,12 @@ btn { width: 4rem !important; } -.space-between{ +.space-between { justify-content: space-between; } .link-underline a { - text-decoration: underline 1px #0078a855;; + text-decoration: underline 1px #0078a855;; color: #0078A8; } @@ -182,7 +183,9 @@ li::marker { color: var(--subtle-detail-color-light-contrast); } -.border-attention-catch{ border: 5px solid var(--catch-detail-color);} +.border-attention-catch { + border: 5px solid var(--catch-detail-color); +} .direction-svg svg path { fill: var(--catch-detail-color) !important; @@ -299,6 +302,15 @@ li::marker { } +@keyframes slide { + from { + transform: translateX(0%); + } + + to { + transform: translateX(calc(-100% + 42px)); + } +} /**************************************/ @@ -380,7 +392,7 @@ li::marker { } -.slideshow-item img{ +.slideshow-item img { height: var(--image-carousel-height); width: unset; } \ No newline at end of file diff --git a/langs/en.json b/langs/en.json index 38db6ddc4..ac80b262e 100644 --- a/langs/en.json +++ b/langs/en.json @@ -86,6 +86,7 @@ "number": "number", "osmLinkTooltip": "See this object on OpenStreetMap for history and more editing options", "add": { + "addNewMapLabel": "Add new item", "addNew": "Add a new {category} here", "presetInfo": "The new POI will have {tags}", "warnVisibleForEveryone": "Your addition will be visible for everyone", diff --git a/langs/layers/nl.json b/langs/layers/nl.json index f63a3fb01..c595cdcd7 100644 --- a/langs/layers/nl.json +++ b/langs/layers/nl.json @@ -575,6 +575,9 @@ } } }, + "9": { + "render": "Rapporteer deze fietspomp als kapot" + }, "10": { "question": "Welke ventielen werken er met de pomp?", "render": "Deze pomp werkt met de volgende ventielen: {valves}", diff --git a/langs/nl.json b/langs/nl.json index 9b54b354d..16a02dc26 100644 --- a/langs/nl.json +++ b/langs/nl.json @@ -46,6 +46,7 @@ "number": "getal", "osmLinkTooltip": "Bekijk dit object op OpenStreetMap waar geschiedenis en meer aanpasopties zijn", "add": { + "addNewMapLabel": "Voeg item toe", "addNew": "Voeg hier een {category} toe", "title": "Nieuw punt toevoegen?", "intro": "Je klikte ergens waar er nog geen data is. Kies hieronder welk punt je wilt toevoegen
", diff --git a/test.ts b/test.ts index 591039879..d25afff73 100644 --- a/test.ts +++ b/test.ts @@ -1,73 +1,29 @@ import {UIEventSource} from "./Logic/UIEventSource"; -import {AllKnownLayouts} from "./Customizations/AllKnownLayouts"; -import State from "./State"; -import LocationInput from "./UI/Input/LocationInput"; -import Loc from "./Models/Loc"; +import AllKnownLayers from "./Customizations/AllKnownLayers"; +import {FixedUiElement} from "./UI/Base/FixedUiElement"; import {VariableUiElement} from "./UI/Base/VariableUIElement"; -import AvailableBaseLayers from "./Logic/Actors/AvailableBaseLayers"; -import LayoutConfig from "./Models/ThemeConfig/LayoutConfig"; +import {TagUtils} from "./Logic/Tags/TagUtils"; +import Combine from "./UI/Base/Combine"; +import Svg from "./Svg"; +import Translations from "./UI/i18n/Translations"; +import LayerConfig from "./Models/ThemeConfig/LayerConfig"; +import AddNewMarker from "./UI/BigComponents/AddNewMarker"; -const layout = new UIEventSource(AllKnownLayouts.allKnownLayouts.get("cycle_infra")) -State.state = new State(layout.data) -const features = new UIEventSource<{ feature: any }[]>([ +function genMarker(filteredLayers: UIEventSource<{ appliedFilters: undefined; isDisplayed: UIEventSource; layerDef: LayerConfig }[]>) { +return new AddNewMarker(filteredLayers) + +} + +let filteredLayers = new UIEventSource([ { - feature: { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "LineString", - "coordinates": [ - [ - 3.219616413116455, - 51.215315026941276 - ], - [ - 3.221080899238586, - 51.21564432998662 - ] - ] - } - } - }, - { - feature: { - "type": "Feature", - "properties": {}, - "geometry": { - "type": "LineString", - "coordinates": [ - [ - 3.220340609550476, - 51.21547967875836 - ], - [ - 3.2198095321655273, - 51.216390293480515 - ] - ] - } - } + layerDef: AllKnownLayers.sharedLayers.get("toilet"), + isDisplayed: new UIEventSource(true), + appliedFilters: undefined } ]) +genMarker(filteredLayers).SetStyle("width: 50px; height: 70px") + .SetClass("block border-black border") + .AttachTo("maindiv") -features.data.map(f => State.state.allElements.addOrGetElement(f.feature)) -const loc = new UIEventSource({ - zoom: 19, - lat: 51.21547967875836, - lon: 3.220340609550476 -}) -const li = new LocationInput( - { - mapBackground: AvailableBaseLayers.SelectBestLayerAccordingTo(loc, new UIEventSource("map")), - snapTo: features, - snappedPointTags: { - "barrier": "cycle_barrier" - }, - maxSnapDistance: 15, - requiresSnapping: false, - centerLocation: loc - } -) -li.SetStyle("height: 30rem").AttachTo("maindiv") -new VariableUiElement(li.GetValue().map(JSON.stringify)).AttachTo("extradiv") +new FixedUiElement("").AttachTo("extradiv") \ No newline at end of file