From 82093ffdf4cacf3d40e9cc38b84ed0d3e70f29c5 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Thu, 18 May 2023 15:44:54 +0200 Subject: [PATCH] Refactoring: new background selector --- Models/MenuState.ts | 4 + .../Conversion/CreateNoteImportLayer.ts | 8 +- Models/ThemeViewState.ts | 4 +- UI/Base/FloatOver.svelte | 2 +- UI/Base/IfHidden.svelte | 33 ++++ UI/Base/WeblateLink.svelte | 4 +- UI/BigComponents/BackgroundSwitcher.svelte | 82 ++++---- UI/BigComponents/CopyrightPanel.ts | 26 ++- UI/BigComponents/Geosearch.svelte | 180 ++++++++++-------- UI/BigComponents/HiddenThemeList.svelte | 2 +- UI/BigComponents/SelectedElementTitle.svelte | 2 +- UI/BigComponents/ThemeIntroPanel.svelte | 87 +++++++++ UI/Map/MapLibreAdaptor.ts | 11 +- UI/Map/OverlayMap.svelte | 69 +++++++ UI/Map/RasterLayerOverview.svelte | 73 +++++++ UI/Map/RasterLayerPicker.svelte | 87 +++++++-- UI/ThemeViewGUI.svelte | 138 ++++++-------- assets/layers/cafe_pub/cafe_pub.json | 4 +- .../charging_station/charging_station.json | 12 +- index.css | 7 + langs/en.json | 6 +- langs/nl.json | 4 +- package-lock.json | 21 +- package.json | 1 + public/css/index-tailwind-output.css | 60 ++++-- 25 files changed, 658 insertions(+), 269 deletions(-) create mode 100644 UI/Base/IfHidden.svelte create mode 100644 UI/BigComponents/ThemeIntroPanel.svelte create mode 100644 UI/Map/OverlayMap.svelte create mode 100644 UI/Map/RasterLayerOverview.svelte diff --git a/Models/MenuState.ts b/Models/MenuState.ts index 9cb84a00f..476006f26 100644 --- a/Models/MenuState.ts +++ b/Models/MenuState.ts @@ -24,6 +24,8 @@ export class MenuState { public readonly menuViewTabIndex: UIEventSource public readonly menuViewTab: UIEventSource + public readonly backgroundLayerSelectionIsOpened: UIEventSource = new UIEventSource(false) + public readonly highlightedLayerInFilters: UIEventSource = new UIEventSource( undefined ) @@ -102,5 +104,7 @@ export class MenuState { public closeAll() { this.menuIsOpened.setData(false) this.themeIsOpened.setData(false) + this.backgroundLayerSelectionIsOpened.setData(false) } + } diff --git a/Models/ThemeConfig/Conversion/CreateNoteImportLayer.ts b/Models/ThemeConfig/Conversion/CreateNoteImportLayer.ts index d74f1f8f5..daba77ce9 100644 --- a/Models/ThemeConfig/Conversion/CreateNoteImportLayer.ts +++ b/Models/ThemeConfig/Conversion/CreateNoteImportLayer.ts @@ -106,11 +106,11 @@ export default class CreateNoteImportLayer extends Conversion {const lines = feat.properties['_first_comment'].split('\\n'); const matchesMapCompleteURL = lines.map(l => l.match(\".*https://mapcomplete.osm.be/\\([a-zA-Z_-]+\\)\\(.html\\)?.*#import\")); const matchedIndexes = matchesMapCompleteURL.map((doesMatch, i) => [doesMatch !== null, i]).filter(v => v[0]).map(v => v[1]); return matchedIndexes[0] })()", - "_comments_count=feat.get('comments').length", - "_intro=(() => {const lines = feat.get('comments')[0].text.split('\\n'); lines.splice(feat.get('_trigger_index')-1, lines.length); return lines.filter(l => l !== '').join('
');})()", - "_tags=(() => {let lines = feat.get('comments')[0].text.split('\\n').map(l => l.trim()); lines.splice(0, feat.get('_trigger_index') + 1); lines = lines.filter(l => l != ''); return lines.join(';');})()", + "_comments_count=get(feat)('comments').length", + "_intro=(() => {const lines = get(feat)('comments')[0].text.split('\\n'); lines.splice(get(feat)('_trigger_index')-1, lines.length); return lines.filter(l => l !== '').join('
');})()", + "_tags=(() => {let lines = get(feat)('comments')[0].text.split('\\n').map(l => l.trim()); lines.splice(0, get(feat)('_trigger_index') + 1); lines = lines.filter(l => l != ''); return lines.join(';');})()", ], isShown: { and: ["_trigger_index~*", { or: isShownIfAny }], diff --git a/Models/ThemeViewState.ts b/Models/ThemeViewState.ts index b01e7e4fc..0a27bb066 100644 --- a/Models/ThemeViewState.ts +++ b/Models/ThemeViewState.ts @@ -303,7 +303,9 @@ export default class ThemeViewState implements SpecialVisualizationState { this.drawSpecialLayers() this.initHotkeys() this.miscSetup() - console.log("State setup completed", this) + if(!Utils.runningFromConsole){ + console.log("State setup completed", this) + } } /** diff --git a/UI/Base/FloatOver.svelte b/UI/Base/FloatOver.svelte index 6cbb25155..e7c4a0ca5 100644 --- a/UI/Base/FloatOver.svelte +++ b/UI/Base/FloatOver.svelte @@ -10,7 +10,7 @@
-
+
diff --git a/UI/Base/IfHidden.svelte b/UI/Base/IfHidden.svelte new file mode 100644 index 000000000..7f38dd20e --- /dev/null +++ b/UI/Base/IfHidden.svelte @@ -0,0 +1,33 @@ + + +{#if hasBeenShownPositive} + + + +{/if} + +{#if hasBeenShownNegative} + + + +{/if} diff --git a/UI/Base/WeblateLink.svelte b/UI/Base/WeblateLink.svelte index 289aba990..906585d46 100644 --- a/UI/Base/WeblateLink.svelte +++ b/UI/Base/WeblateLink.svelte @@ -16,11 +16,11 @@ {#if context} {#if $linkOnMobile} - + {:else if $linkToWeblate} - + {/if} diff --git a/UI/BigComponents/BackgroundSwitcher.svelte b/UI/BigComponents/BackgroundSwitcher.svelte index 7c948cb42..62a1b9127 100644 --- a/UI/BigComponents/BackgroundSwitcher.svelte +++ b/UI/BigComponents/BackgroundSwitcher.svelte @@ -3,13 +3,13 @@ import type {RasterLayerPolygon} from "../../Models/RasterLayers"; import {AvailableRasterLayers} from "../../Models/RasterLayers"; import Tr from "../Base/Tr.svelte"; - import {onDestroy} from "svelte"; + import {createEventDispatcher, onDestroy} from "svelte"; import Translations from "../i18n/Translations"; import Svg from "../../Svg"; import {Map as MlMap} from "maplibre-gl" - import MaplibreMap from "../Map/MaplibreMap.svelte"; - import {MapLibreAdaptor} from "../Map/MapLibreAdaptor"; import type {MapProperties} from "../../Models/MapProperties"; + import OverlayMap from "../Map/OverlayMap.svelte"; + import RasterLayerPicker from "../Map/RasterLayerPicker.svelte"; export let mapproperties: MapProperties export let normalMap: UIEventSource @@ -28,63 +28,55 @@ */ export let availableRasterLayers: Store - let altmap: UIEventSource = new UIEventSource(undefined) - let altproperties = new MapLibreAdaptor(altmap, {zoom: UIEventSource.feedFrom(mapproperties.zoom)}) - altproperties.allowMoving.setData(false) - altproperties.allowZooming.setData(false) - let altmap0: UIEventSource = new UIEventSource(undefined) - let altproperties0 = new MapLibreAdaptor(altmap0, {zoom: altproperties.zoom}) - // altproperties0.allowMoving.setData(false) - // altproperties0.allowZooming.setData(false) + let raster0 = new UIEventSource(undefined) + + let raster1 = new UIEventSource(undefined) + + let currentLayer: RasterLayerPolygon function updatedAltLayer() { const available = availableRasterLayers.data const current = rasterLayer.data const defaultLayer = AvailableRasterLayers.maplibre - const firstOther = available.find(l => l !== current && l !== defaultLayer) - - altproperties.rasterLayer.setData(firstOther) - const secondOther = available.find(l => l !== current && l !== firstOther && l !== defaultLayer) - altproperties0.rasterLayer.setData(secondOther) - + const firstOther = available.find(l => l !== defaultLayer) + const secondOther = available.find(l => l !== defaultLayer && l !== firstOther) + raster0.setData(firstOther === current ? defaultLayer : firstOther) + raster1.setData(secondOther === current ? defaultLayer : secondOther) } + updatedAltLayer() + onDestroy(mapproperties.rasterLayer.addCallbackAndRunD(updatedAltLayer)) onDestroy(availableRasterLayers.addCallbackAndRunD(updatedAltLayer)) - onDestroy(rasterLayer.addCallbackAndRunD(updatedAltLayer)) - function pixelCenterOf(map: UIEventSource): [number, number] { - const rect = map?.data?.getCanvas()?.getBoundingClientRect() - if (!rect) { - return undefined + function use(rasterLayer: UIEventSource): (() => void) { + return () => { + currentLayer = undefined + mapproperties.rasterLayer.setData(rasterLayer.data) } - const x = (rect.left + rect.right) / 2 - const y = (rect.top + rect.bottom) / 2 - return [x, y] } - mapproperties.location.addCallbackAndRunD(({lon, lat}) => { - if (!normalMap.data || !altmap.data) { - return - } - const altMapCenter = pixelCenterOf(altmap) - const c = normalMap.data.unproject(altMapCenter) - altproperties.location.setData({lon: c.lng, lat: c.lat}) - const altMapCenter0 = pixelCenterOf(altmap0) - const c0 = normalMap.data.unproject(altMapCenter0) - altproperties0.location.setData({lon: c0.lng, lat: c0.lat}) - }) + const dispatch = createEventDispatcher<{ copyright_clicked }>() -
-
- +
+
+ +
-
- -
-
- Current background: - +
+ +
+ +
+ +
diff --git a/UI/BigComponents/CopyrightPanel.ts b/UI/BigComponents/CopyrightPanel.ts index 3e8a3f470..08459ea60 100644 --- a/UI/BigComponents/CopyrightPanel.ts +++ b/UI/BigComponents/CopyrightPanel.ts @@ -22,6 +22,7 @@ import ContributorCount from "../../Logic/ContributorCount" import Img from "../Base/Img" import { TypedTranslation } from "../i18n/Translation" import GeoIndexedStore from "../../Logic/FeatureSource/Actors/GeoIndexedStore" +import {RasterLayerPolygon} from "../../Models/RasterLayers"; export class OpenIdEditor extends VariableUiElement { constructor( @@ -113,7 +114,7 @@ export default class CopyrightPanel extends Combine { constructor(state: { layout: LayoutConfig - mapProperties: { bounds: Store } + mapProperties: { readonly bounds: Store, readonly rasterLayer: Store } osmConnection: OsmConnection dataIsLoading: Store perLayer: ReadonlyMap @@ -173,6 +174,29 @@ export default class CopyrightPanel extends Combine { [ new Title(t.attributionTitle), t.attributionContent, + + new VariableUiElement(state.mapProperties.rasterLayer.mapD(layer => { + const props = layer.properties + const attrUrl = props.attribution?.url + const attrText = props.attribution?.text + + let bgAttr: BaseUIElement | string = undefined + if(attrText && attrUrl){ + bgAttr = ""+attrText+"" + }else if(attrUrl){ + bgAttr = attrUrl + }else{ + bgAttr = attrText + } + if(bgAttr){ + return Translations.t.general.attribution.attributionBackgroundLayerWithCopyright.Subs({ + name: props.name, + copyright: bgAttr + }) + } + return Translations.t.general.attribution.attributionBackgroundLayer.Subs(props) + })), + maintainer, dataContributors, CopyrightPanel.CodeContributors(contributors, t.codeContributionsBy), diff --git a/UI/BigComponents/Geosearch.svelte b/UI/BigComponents/Geosearch.svelte index 44aced7f0..330f74387 100644 --- a/UI/BigComponents/Geosearch.svelte +++ b/UI/BigComponents/Geosearch.svelte @@ -1,100 +1,116 @@
-
+ - {#if isRunning} - {Translations.t.general.search.searching} - {:else if feedback !== undefined} -
feedback = undefined}> - {feedback} -
- {:else } - keypr.key === "Enter" ? performSearch() : undefined} + {#if isRunning} + {Translations.t.general.search.searching} + {:else if feedback !== undefined} +
feedback = undefined}> + {feedback} +
+ {:else } + keypr.key === "Enter" ? performSearch() : undefined} - bind:value={searchContents} - placeholder={Translations.t.general.search.search}> - {/if} + bind:value={searchContents} + placeholder={Translations.t.general.search.search}> + {/if} -
-
- -
+ +
+ +
diff --git a/UI/BigComponents/HiddenThemeList.svelte b/UI/BigComponents/HiddenThemeList.svelte index 88db67e8f..eabf33dfb 100644 --- a/UI/BigComponents/HiddenThemeList.svelte +++ b/UI/BigComponents/HiddenThemeList.svelte @@ -13,7 +13,7 @@ export let onMainScreen: boolean = true const prefix = "mapcomplete-hidden-theme-" - const hiddenThemes: LayoutInformation[] = themeOverview["default"].filter( + const hiddenThemes: LayoutInformation[] = themeOverview.filter( (layout) => layout.hideFromOverview ) const userPreferences = state.osmConnection.preferencesHandler.preferences diff --git a/UI/BigComponents/SelectedElementTitle.svelte b/UI/BigComponents/SelectedElementTitle.svelte index 960f6bd11..5172b0cab 100644 --- a/UI/BigComponents/SelectedElementTitle.svelte +++ b/UI/BigComponents/SelectedElementTitle.svelte @@ -39,7 +39,7 @@ {layer}> -
+
{#each layer.titleIcons as titleIconConfig} {#if (titleIconConfig.condition?.matchesProperties(_tags) ?? true) && (titleIconConfig.metacondition?.matchesProperties({..._metatags, ..._tags}) ?? true) && titleIconConfig.IsKnown(_tags)}
diff --git a/UI/BigComponents/ThemeIntroPanel.svelte b/UI/BigComponents/ThemeIntroPanel.svelte new file mode 100644 index 000000000..818eb2cef --- /dev/null +++ b/UI/BigComponents/ThemeIntroPanel.svelte @@ -0,0 +1,87 @@ + + + + +{#if layout.layers.some((l) => l.presets?.length > 0)} + + + +{/if} + + + + state.guistate.themeIsOpened.setData(false)}> +
+ +
+ + +
+ p === "denied")}> + + + +
+
+ state.guistate.themeIsOpened.setData(false)} + on:searchIsValid={isValid => {searchEnabled= isValid}} + perLayer={state.perLayer} + {selectedElement} + {selectedLayer} + {triggerSearch}> + +
+ + +
+
diff --git a/UI/Map/MapLibreAdaptor.ts b/UI/Map/MapLibreAdaptor.ts index 5437beb7b..71e865e3d 100644 --- a/UI/Map/MapLibreAdaptor.ts +++ b/UI/Map/MapLibreAdaptor.ts @@ -275,7 +275,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap { return new Promise((resolve) => drawOn.toBlob((data) => resolve(data))) } - private updateStores() { + private updateStores(): void { const map = this._maplibreMap.data if (!map) { return @@ -293,7 +293,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap { this.bounds.setData(bbox) } - private SetZoom(z: number) { + private SetZoom(z: number): void { const map = this._maplibreMap.data if (!map || z === undefined) { return @@ -303,7 +303,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap { } } - private MoveMapToCurrentLoc(loc: { lat: number; lon: number }) { + private MoveMapToCurrentLoc(loc: { lat: number; lon: number }): void { const map = this._maplibreMap.data if (!map || loc === undefined) { return @@ -325,7 +325,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap { } } - private removeCurrentLayer(map: MLMap) { + private removeCurrentLayer(map: MLMap): void { if (this._currentRasterLayer) { // hide the previous layer map.removeLayer(this._currentRasterLayer) @@ -333,7 +333,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap { } } - private async setBackground() { + private async setBackground(): Promise { const map = this._maplibreMap.data if (!map) { return @@ -363,6 +363,7 @@ export class MapLibreAdaptor implements MapProperties, ExportableMap { map.addSource(background.id, MapLibreAdaptor.prepareWmsSource(background)) + map.resize() map.addLayer( { id: background.id, diff --git a/UI/Map/OverlayMap.svelte b/UI/Map/OverlayMap.svelte new file mode 100644 index 000000000..ced4842bb --- /dev/null +++ b/UI/Map/OverlayMap.svelte @@ -0,0 +1,69 @@ + + + diff --git a/UI/Map/RasterLayerOverview.svelte b/UI/Map/RasterLayerOverview.svelte new file mode 100644 index 000000000..5ffd43467 --- /dev/null +++ b/UI/Map/RasterLayerOverview.svelte @@ -0,0 +1,73 @@ + + + +
+ +

+ +

+ + +
+ + + + +
+ +
diff --git a/UI/Map/RasterLayerPicker.svelte b/UI/Map/RasterLayerPicker.svelte index 129d992e0..01c6a6735 100644 --- a/UI/Map/RasterLayerPicker.svelte +++ b/UI/Map/RasterLayerPicker.svelte @@ -1,18 +1,77 @@ - +{#if hasLayers} +
+ + +
+{/if} diff --git a/UI/ThemeViewGUI.svelte b/UI/ThemeViewGUI.svelte index 6b3207315..cbbf0be6f 100644 --- a/UI/ThemeViewGUI.svelte +++ b/UI/ThemeViewGUI.svelte @@ -11,12 +11,13 @@ import SelectedElementView from "./BigComponents/SelectedElementView.svelte"; import LayerConfig from "../Models/ThemeConfig/LayerConfig"; import Filterview from "./BigComponents/Filterview.svelte"; - import RasterLayerPicker from "./Map/RasterLayerPicker.svelte"; import ThemeViewState from "../Models/ThemeViewState"; import type {MapProperties} from "../Models/MapProperties"; import Geosearch from "./BigComponents/Geosearch.svelte"; import Translations from "./i18n/Translations"; import {CogIcon, EyeIcon, MenuIcon, XCircleIcon} from "@rgossiaux/svelte-heroicons/solid"; + import {Square3Stack3dIcon} from "@babeard/svelte-heroicons/solid"; + import Tr from "./Base/Tr.svelte"; import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte"; import FloatOver from "./Base/FloatOver.svelte"; @@ -39,9 +40,12 @@ import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte"; import Svg from "../Svg"; import {ShareScreen} from "./BigComponents/ShareScreen"; - import NextButton from "./Base/NextButton.svelte"; - import IfNot from "./Base/IfNot.svelte"; - import BackgroundSwitcher from "./BigComponents/BackgroundSwitcher.svelte"; + import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte"; + import type {Readable} from "svelte/store"; + import type {RasterLayerPolygon} from "../Models/RasterLayers"; + import RasterLayerPicker from "./Map/RasterLayerPicker.svelte"; + import RasterLayerOverview from "./Map/RasterLayerOverview.svelte"; + import IfHidden from "./Base/IfHidden.svelte"; export let state: ThemeViewState; let layout = state.layout; @@ -86,21 +90,7 @@ let availableLayers = state.availableLayers; let userdetails = state.osmConnection.userDetails; let currentViewLayer = layout.layers.find(l => l.id === "current_view") - - function jumpToCurrentLocation() { - const glstate = state.geolocation.geolocationState - if (glstate.currentGPSLocation.data !== undefined) { - const c: GeolocationCoordinates = glstate.currentGPSLocation.data - state.guistate.themeIsOpened.setData(false) - const coor = {lon: c.longitude, lat: c.latitude} - state.mapProperties.location.setData(coor) - } - if (glstate.permission.data !== "granted") { - glstate.requestPermission() - return - } - - } + let rasterLayer: Readable = state.mapProperties.rasterLayer @@ -138,35 +128,48 @@ new ExtraLinkButton(state, layout.extraLink)}>
- Testmode + Testmode
-
- -
- -
- f.length > 1)}> -
- +
+
+ - - mapproperties.zoom.update(z => z+1)}> - - - mapproperties.zoom.update(z => z-1)}> - - - - - - - + +
+ + f.length > 1)}> +
+ +
+ + mapproperties.zoom.update(z => z+1)}> + + + mapproperties.zoom.update(z => z-1)}> + + + + + + + +
+
+
v !== undefined && selectedLayer.data !== undefined && !selectedLayer.data.popupInFloatover,[ selectedLayer] )}> @@ -204,43 +207,7 @@
- - - {#if layout.layers.some((l) => l.presets?.length > 0)} - - - - {/if} - - - - state.guistate.themeIsOpened.setData(false)}> -
- -
- - -
- p === "denied")}> - - - -
- Search for a location: - state.guistate.themeIsOpened.setData(false)} - perLayer={state.perLayer} - {selectedElement} - {selectedLayer}/> -
-
+
@@ -265,9 +232,6 @@ zoomlevel={state.mapProperties.zoom} /> {/each} - - -
@@ -288,12 +252,22 @@
- new ShareScreen(state)} slot="content4"/> +
+ new ShareScreen(state)}/> +
+ + + state.guistate.backgroundLayerSelectionIsOpened.setData(false)}> +
+ +
+ + diff --git a/assets/layers/cafe_pub/cafe_pub.json b/assets/layers/cafe_pub/cafe_pub.json index 2a9591ba1..8668a6977 100644 --- a/assets/layers/cafe_pub/cafe_pub.json +++ b/assets/layers/cafe_pub/cafe_pub.json @@ -233,7 +233,7 @@ { "if": "amenity=cafe", "then": { - "en": "A cafe to drink tea, coffee or an alcoholic beverage in a quiet environment", + "en": "A cafe to drink tea, coffee or an alcoholical bevarage in a quiet environment", "nl": "Dit is een cafe - een plaats waar men rustig kan zitten om een thee, koffie of alcoholische drank te nuttigen.", "de": "Ein Café, um in ruhiger Umgebung Tee, Kaffee oder ein alkoholisches Getränk zu trinken", "da": "En café til at drikke te, kaffe eller en alkoholisk drik i rolige omgivelser", @@ -245,7 +245,7 @@ { "if": "amenity=restaurant", "then": { - "en": "A restaurant where one can get a proper meal", + "en": "A restuarant where one can get a proper meal", "nl": "Dit is een restaurant waar men een maaltijd geserveerd krijgt", "de": "Ein Restaurant, in dem man ordentlich essen kann", "da": "En restaurant, hvor man kan få et ordentligt måltid", diff --git a/assets/layers/charging_station/charging_station.json b/assets/layers/charging_station/charging_station.json index 2711af535..905914b38 100644 --- a/assets/layers/charging_station/charging_station.json +++ b/assets/layers/charging_station/charging_station.json @@ -4699,12 +4699,12 @@ "socket:typee=1" ], "title": { - "en": "a charging station for electrical bikes with a normal european wall plug ", - "nl": "een oplaadpunt voor elektrische fietsen met een gewoon Europees stopcontact ", - "ca": "una estació de càrrega per a bicicletes elèctriques amb un endoll de paret europeu normal ", - "da": "en ladestation til elektriske cykler med et normalt europæisk vægstik ", - "de": "eine Ladestation für Elektrofahrräder mit einer normalen europäischen Steckdose ", - "es": "una estación de carga para bicicletas eléctricas con un enchufe de pared europeo normal " + "en": "a charging station for electrical bikes with a normal european wall plug (meant to charge electrical bikes)", + "nl": "een oplaadpunt voor elektrische fietsen met een gewoon Europees stopcontact (speciaal bedoeld voor fietsen)", + "ca": "una estació de càrrega per a bicicletes elèctriques amb un endoll de paret europeu normal (destinat a carregar bicicletes elèctriques)", + "da": "en ladestation til elektriske cykler med et normalt europæisk vægstik (beregnet til opladning af elektriske cykler)", + "de": "eine Ladestation für Elektrofahrräder mit einer normalen europäischen Steckdose (zum Laden von Elektrofahrrädern)", + "es": "una estación de carga para bicicletas eléctricas con un enchufe de pared europeo normal (pensado para cargar bicicletas eléctricas)" }, "preciseInput": { "preferredBackground": "map" diff --git a/index.css b/index.css index a3dcd08ba..b9413de6c 100644 --- a/index.css +++ b/index.css @@ -434,6 +434,10 @@ select:hover { color: var(--background-color); } +.bg-black-transparent { + background-color: #00000088; +} + .block-ruby { display: block ruby; } @@ -455,6 +459,9 @@ select:hover { display: none; } +.no-weblate weblate { + display: none; +} .link-underline a { text-decoration: underline 1px var(--foreground-color); } diff --git a/langs/en.json b/langs/en.json index 331961340..fd785ea74 100644 --- a/langs/en.json +++ b/langs/en.json @@ -132,6 +132,8 @@ "isApplied": "The changes are applied" }, "attribution": { + "attributionBackgroundLayer": "The current background layer is {name}", + "attributionBackgroundLayerWithCopyright": "The current background layer is {name}: {copyright}", "attributionContent": "

All data is provided by OpenStreetMap, freely reusable under the Open DataBase License.

", "attributionTitle": "Attribution notice", "codeContributionsBy": "MapComplete has been built by {contributors} and {hiddenCount} more contributors", @@ -158,7 +160,7 @@ "back": "Back", "backToIndex": "Go back to the overview with all thematic maps", "backToMapcomplete": "Back to the theme overview", - "backgroundMap": "Background map", + "backgroundMap": "Select a background layer", "cancel": "Cancel", "confirm": "Confirm", "customThemeIntro": "

Custom themes

These are previously visited user-generated themes.", @@ -236,6 +238,7 @@ "number": "number", "openStreetMapIntro": "

An Open Map

One that everyone can use and edit freely. A single place to store all geo-info. Different, small, incompatible and outdated maps are not needed anywhere.

OpenStreetMap is not the enemy map. The map data can be used freely (with attribution and publication of changes to that data). Everyone can add new data and fix errors. This website uses OpenStreetMap. All the data is from there, and your answers and corrections are used all over.

Many people and apps already use OpenStreetMap: Organic Maps, OsmAnd, but also the maps at Facebook, Instagram, Apple-maps and Bing-maps are (partly) powered by OpenStreetMap.

", "openTheMap": "Open the map", + "openTheMapAtGeolocation": "Zoom to your location", "opening_hours": { "closed_permanently": "Closed for an unkown duration", "closed_until": "Closed until {date}", @@ -289,6 +292,7 @@ "error": "Something went wrong…", "nothing": "Nothing found…", "search": "Search a location", + "searchShort": "Search…", "searching": "Searching…" }, "sharescreen": { diff --git a/langs/nl.json b/langs/nl.json index 4a86d635c..b6eb15e5a 100644 --- a/langs/nl.json +++ b/langs/nl.json @@ -149,7 +149,7 @@ "back": "Vorige", "backToIndex": "Keer terug naar het overzicht met alle thematische kaarten", "backToMapcomplete": "Terug naar het themaoverzicht", - "backgroundMap": "Achtergrondkaart", + "backgroundMap": "Selecteer een achtergrondlaag", "cancel": "Annuleren", "confirm": "Bevestigen", "customThemeIntro": "

Onofficiële thema's

De onderstaande thema's heb je eerder bezocht en zijn gemaakt door andere OpenStreetMappers.", @@ -221,6 +221,7 @@ "number": "getal", "openStreetMapIntro": "

Een open kaart

Zou het niet fantastisch zijn als er een open kaart zou zijn die door iedereen aangepast én gebruikt kan worden? Een kaart waar iedereen zijn interesses aan zou kunnen toevoegen? Dan zouden er geen duizend-en-één verschillende kleine kaartjes, websites, ... meer nodig zijn

OpenStreetMap is deze open kaart. Je mag de kaartdata gratis gebruiken (mits bronvermelding en herpublicatie van aanpassingen). Daarenboven mag je de kaart ook gratis aanpassen als je een account maakt. Ook deze website is gebaseerd op OpenStreetMap. Als je hier een vraag beantwoord, gaat het antwoord daar ook naartoe

Tenslotte zijn er reeds vele gebruikers van OpenStreetMap. Denk maar Organic Maps, OsmAnd, verschillende gespecialiseerde routeplanners, de achtergrondkaarten op Facebook, Instagram,...
;Zelfs Apple Maps en Bing-Maps gebruiken OpenStreetMap in hun kaarten!

Kortom, als je hier een punt toevoegd of een vraag beantwoord, zal dat na een tijdje ook in al dié applicaties te zien zijn.

", "openTheMap": "Raadpleeg de kaart", + "openTheMapAtGeolocation": "Ga naar jouw locatie", "opening_hours": { "closed_permanently": "Gesloten voor onbepaalde tijd", "closed_until": "Gesloten - open op {date}", @@ -262,6 +263,7 @@ "error": "Niet gelukt…", "nothing": "Niets gevonden…", "search": "Zoek naar een locatie", + "searchShort": "Zoek…", "searching": "Aan het zoeken…" }, "sharescreen": { diff --git a/package-lock.json b/package-lock.json index 7c005414d..a02375080 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "mapcomplete", - "version": "0.30.5", + "version": "0.30.6", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "mapcomplete", - "version": "0.30.5", + "version": "0.30.6", "license": "GPL-3.0-or-later", "dependencies": { "@onsvisual/svelte-maps": "^1.1.6", @@ -56,6 +56,7 @@ "xml2js": "^0.5.0" }, "devDependencies": { + "@babeard/svelte-heroicons": "^2.0.0-rc.0", "@babel/polyfill": "^7.10.4", "@babel/preset-env": "7.13.8", "@parcel/service-worker": "^2.6.0", @@ -106,6 +107,15 @@ "node": ">=6.0.0" } }, + "node_modules/@babeard/svelte-heroicons": { + "version": "2.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@babeard/svelte-heroicons/-/svelte-heroicons-2.0.0-rc.0.tgz", + "integrity": "sha512-zjoRKBHA2QLjj3bi9mJMtyUyb/Y+PGlxiMdVXO3Bv8If3RJBuxtvVAYD2/tUakhxocB272PxhGNz4sixmB0rpA==", + "dev": true, + "peerDependencies": { + "svelte": "^3.44.0" + } + }, "node_modules/@babel/code-frame": { "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", @@ -12105,6 +12115,13 @@ "@jridgewell/trace-mapping": "^0.3.9" } }, + "@babeard/svelte-heroicons": { + "version": "2.0.0-rc.0", + "resolved": "https://registry.npmjs.org/@babeard/svelte-heroicons/-/svelte-heroicons-2.0.0-rc.0.tgz", + "integrity": "sha512-zjoRKBHA2QLjj3bi9mJMtyUyb/Y+PGlxiMdVXO3Bv8If3RJBuxtvVAYD2/tUakhxocB272PxhGNz4sixmB0rpA==", + "dev": true, + "requires": {} + }, "@babel/code-frame": { "version": "7.18.6", "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.18.6.tgz", diff --git a/package.json b/package.json index 01e95a72f..f422d31e2 100644 --- a/package.json +++ b/package.json @@ -108,6 +108,7 @@ "xml2js": "^0.5.0" }, "devDependencies": { + "@babeard/svelte-heroicons": "^2.0.0-rc.0", "@babel/polyfill": "^7.10.4", "@babel/preset-env": "7.13.8", "@parcel/service-worker": "^2.6.0", diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index ae724f3be..7cad71e2f 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -715,14 +715,14 @@ video { bottom: 0px; } -.right-0 { - right: 0px; -} - .right-1\/3 { right: 33.333333%; } +.right-0 { + right: 0px; +} + .right-10 { right: 2.5rem; } @@ -1105,6 +1105,10 @@ video { width: fit-content; } +.w-24 { + width: 6rem; +} + .w-4 { width: 1rem; } @@ -1142,10 +1146,6 @@ video { width: 24rem; } -.w-24 { - width: 6rem; -} - .w-10 { width: 2.5rem; } @@ -1245,6 +1245,14 @@ video { resize: both; } +.grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + .flex-row { flex-direction: row; } @@ -1297,6 +1305,10 @@ video { gap: 1rem; } +.gap-2 { + gap: 0.5rem; +} + .gap-y-1 { row-gap: 0.25rem; } @@ -1388,6 +1400,10 @@ video { border-radius: 0.75rem; } +.rounded-2xl { + border-radius: 1rem; +} + .rounded-lg { border-radius: 0.5rem; } @@ -1554,6 +1570,11 @@ video { padding-right: 0.25rem; } +.px-4 { + padding-left: 1rem; + padding-right: 1rem; +} + .py-4 { padding-top: 1rem; padding-bottom: 1rem; @@ -1569,11 +1590,6 @@ video { padding-right: 0.5rem; } -.px-4 { - padding-left: 1rem; - padding-right: 1rem; -} - .pb-12 { padding-bottom: 3rem; } @@ -1722,6 +1738,11 @@ video { letter-spacing: -0.025em; } +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + .text-gray-900 { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); @@ -1742,11 +1763,6 @@ video { color: rgb(22 163 74 / var(--tw-text-opacity)); } -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - .underline { text-decoration-line: underline; } @@ -2270,6 +2286,10 @@ select:hover { color: var(--background-color); } +.bg-black-transparent { + background-color: #00000088; +} + .block-ruby { display: block ruby; } @@ -2289,6 +2309,10 @@ select:hover { display: none; } +.no-weblate weblate { + display: none; +} + .link-underline a { -webkit-text-decoration: underline 1px var(--foreground-color); text-decoration: underline 1px var(--foreground-color);