diff --git a/assets/layers/usersettings/usersettings.json b/assets/layers/usersettings/usersettings.json index a20d08597..855de0b76 100644 --- a/assets/layers/usersettings/usersettings.json +++ b/assets/layers/usersettings/usersettings.json @@ -34,11 +34,187 @@ "lineRendering": null, "tagRenderings": [ { - "id": "profile", + "id": "profile-group", "render": { - "*": "{user_profile()}" + "special": { + "type": "group", + "header": "profile-title", + "labels": "profile-content" + } } }, + { + "id": "profile-title", + "labels": ["hidden"], + "icon": "user_circle", + "render": { + "*": "

{_name}

" + }, + "mappings": [ + { + "if": "_img!=", + "#": "ignore-image-in-then", + "then": { + "*": "

{_name}

" + } + } + ] + }, + { + "id": "profile-description", + "labels": [ + "profile-content","hidden" + ], + "render": { + "*": "{_description_html}" + }, + "mappings": [ + { + "if": "_description=", + + "then": { + "special": { + "type": "link", + "class": "button link-no-underline", + "icon": "pencil", + "href": "{_backend}/profile/edit", + "text": { + "ca": "Afegeix una descripció del perfil", + "cs": "Přidat popis profilu", + "de": "Profilbeschreibung hinzufügen", + "en": "Add a profile description", + "fi": "Lisää profiilin kuvaus", + "nb_NO": "Legg til profilbeskrivelse", + "nl": "Voeg een profielbeschrijving toe", + "pl": "Dodaj opis profilu", + "pt": "Adicionar uma descrição do perfil", + "zh_Hant": "新增個人檔敘述" + } + } + } + } + ] + }, + { + "id": "edit-profile", + "labels": [ + "profile-content","hidden" + ], + "condition": "_description!=", + "render": { + "special": { + "type": "link", + "href": "{_backend}/profile/edit", + "class": "button link-no-underline", + "icon": "pencil", + "text": { + "ca": "Editeu la descripció del vostre perfil", + "cs": "Úprava popisu vašeho profilu", + "da": "Ret din profilbeskrivelse", + "de": "Eigene Profilbeschreibung bearbeiten", + "en": "Edit your profile description", + "fi": "Muokkaa profiilin kuvausta", + "fr": "Modifier ton profil", + "nl": "Pas je profielbeschrijving aan", + "pl": "Edytuj opis swojego profilu", + "pt": "Editar a descrição do seu perfil", + "zh_Hant": "編輯你的個人檔敘述" + } + } + } + }, + { + "id": "verified-mastodon", + "labels": [ + "profile-content","hidden" + ], + "mappings": [ + { + "if": "_mastodon_link~*", + "then": { + "en": "A link to your Mastodon-profile has been been found: {_mastodon_link}", + "de": "Es wurde ein Link zu deinem Mastodon-Profil gefunden: {_mastodon_link}", + "nl": "Een link naar je Mastodon-profiel werd gevonden: {_mastodon_link}", + "fr": "Un lien vers votre profil Mastodon a été trouvé : {_mastodon_link}", + "ca": "S'ha trobat un enllaç al vostre perfil de Mastodon: {_mastodon_link}", + "cs": "Byl nalezen odkaz na váš profil Mastodon: {_mastodon_link}" + }, + "icon": "mastodon" + }, + { + "if": "_mastodon_candidate~*", + "then": { + "en": "We found a link to what looks to be a mastodon account, but it is unverified. Edit your profile description and place the following there: <a href=\"{_mastodon_candidate}\" rel=\"me\">Mastodon</a>", + "de": "Wir haben einen Link gefunden, der aussieht wie ein Mastodon-Konto, aber nicht verifiziert ist. Bearbeiten Sie Ihre Profilbeschreibung und fügen Sie dort Folgendes ein: <a href=\"{_mastodon_candidate}\" rel=\"me\">Mastodon</a>", + "nl": "Je profielbeschrijving bevat een link die vermoedelijk naar je Mastodon gaat, maar deze link is niet verifieerdbaar voor Mastodon.Pas je profielbeschrijving aan en plaats er de volgende code: <a href=\"{_mastodon_candidate}\" rel=\"me\">Mastodon</a>", + "ca": "Hem trobat un enllaç al que sembla ser un compte de mastodon, però no està verificat. Editeu la descripció del vostre perfil i col·loqueu-hi el següent: <a href=\"{_mastodon_candidate}\" rel=\"me\">Mastodon</a>", + "cs": "Našli jsme odkaz na to, co vypadá jako účet mastodon, ale je neověřený. Upravte popis svého profilu a umístěte tam následující: <a href=\"{_mastodon_candidate}\" rel=\"me\">Mastodon</a>" + }, + "icon": "invalid" + } + ] + }, + { + "id": "cscount-thanks", + "labels": [ + "profile-content","hidden" + ], + "mappings": [ + { + "if": "_csCount>0", + "then": { + "en": "You have made changes on {_csCount} different occasions! That is awesome!", + "de": "Sie haben bei {_csCount} verschiedenen Gelegenheiten Änderungen vorgenommen! Das ist großartig!", + "ca": "Has fet {_csCount} en diferents ocasions! Això és sorprenent!", + "fr": "Vous avez fait {_csCount} modifications ! C'est génial !", + "pt": "Você fez alterações em {_csCount} ocasiões diferentes! Isso é incrível!", + "nl": "Je hebt {_csCount} verschillende keren bijgedragen! Dat is indrukwekkend!", + "da": "Du har lavet ændringer ved {_csCount} forskellige begivenheder! Det er fantastisk!", + "es": "Has hecho cambios en {_csCount} ocasiones diferentes. ¡Es alucinante!", + "cs": "Změny jste provedli při {_csCount} různých příležitostech! To je úžasné!" + }, + "icon": "party" + } + ] + }, + { + "id": "translation-thanks", + "labels": [ + "profile-content","hidden" + ], + "mappings": [ + { + "if": "_translation_contributions>0", + "then": { + "en": "You have contributed to translating MapComplete with {_translation_contributions} commits! That's awesome!", + "nl": "Je hebt MapComplete helpen vertalen met {_translation_contributions} commits! Dat is fantastisch! Bedankt hiervoor!", + "de": "Du hast mit {_translation_contributions} Änderungen zur Übersetzung von MapComplete beigetragen! Das ist großartig!" + }, + "icon": "party" + } + ] + }, + { + "id": "contributor-thanks", + "labels": [ + "profile-content","hidden" + ], + "mappings": [ + { + "if": "_code_contributions>0", + "then": { + "en": "You have contributed code to MapComplete with {_code_contributions} commits! That's awesome!", + "de": "Sie haben Code zu MapComplete mit {_code_contributions} Commits beigetragen! Das ist großartig!", + "nl": "Je hebt mee geprogrammeerd aan MapComplete met {_code_contributions} commits! Das supercool van je! Bedankt hiervoor!", + "ca": "Heu aportat codi a MapComplete amb {_code_contributions} commits! Això és increïble!", + "cs": "Přispěli jste do MapComplete kódem s {_code_contributions} revizemi! To je úžasné!", + "da": "Du har bidraget kode til MapComplete med {_code_contributions} commits! Det er fantastisk!" + }, + "icon": "party", + "hideInAnswer": true + } + ] + }, { "id": "language_picker", "render": { @@ -624,7 +800,6 @@ "href": "data:application/json,{mangroveidentity}", "download": "mangrove_private_key_{_name}", "class": "button", - "text": { "en": "Download the private key for your Mangrove Account", "de": "Laden Sie den privaten Schlüssel für Ihr Mangrove-Konto herunter", @@ -824,86 +999,6 @@ } } }, - { - "id": "verified-mastodon", - "mappings": [ - { - "if": "_mastodon_link~*", - "then": { - "en": "A link to your Mastodon-profile has been been found: {_mastodon_link}", - "de": "Es wurde ein Link zu deinem Mastodon-Profil gefunden: {_mastodon_link}", - "nl": "Een link naar je Mastodon-profiel werd gevonden: {_mastodon_link}", - "fr": "Un lien vers votre profil Mastodon a été trouvé : {_mastodon_link}", - "ca": "S'ha trobat un enllaç al vostre perfil de Mastodon: {_mastodon_link}", - "cs": "Byl nalezen odkaz na váš profil Mastodon: {_mastodon_link}" - }, - "icon": "mastodon" - }, - { - "if": "_mastodon_candidate~*", - "then": { - "en": "We found a link to what looks to be a mastodon account, but it is unverified. Edit your profile description and place the following there: <a href=\"{_mastodon_candidate}\" rel=\"me\">Mastodon</a>", - "de": "Wir haben einen Link gefunden, der aussieht wie ein Mastodon-Konto, aber nicht verifiziert ist. Bearbeiten Sie Ihre Profilbeschreibung und fügen Sie dort Folgendes ein: <a href=\"{_mastodon_candidate}\" rel=\"me\">Mastodon</a>", - "nl": "Je profielbeschrijving bevat een link die vermoedelijk naar je Mastodon gaat, maar deze link is niet verifieerdbaar voor Mastodon.Pas je profielbeschrijving aan en plaats er de volgende code: <a href=\"{_mastodon_candidate}\" rel=\"me\">Mastodon</a>", - "ca": "Hem trobat un enllaç al que sembla ser un compte de mastodon, però no està verificat. Editeu la descripció del vostre perfil i col·loqueu-hi el següent: <a href=\"{_mastodon_candidate}\" rel=\"me\">Mastodon</a>", - "cs": "Našli jsme odkaz na to, co vypadá jako účet mastodon, ale je neověřený. Upravte popis svého profilu a umístěte tam následující: <a href=\"{_mastodon_candidate}\" rel=\"me\">Mastodon</a>" - }, - "icon": "invalid" - } - ] - }, - { - "id": "cscount-thanks", - "mappings": [ - { - "if": "_csCount>0", - "then": { - "en": "You have made changes on {_csCount} different occasions! That is awesome!", - "de": "Sie haben bei {_csCount} verschiedenen Gelegenheiten Änderungen vorgenommen! Das ist großartig!", - "ca": "Has fet {_csCount} en diferents ocasions! Això és sorprenent!", - "fr": "Vous avez fait {_csCount} modifications ! C'est génial !", - "pt": "Você fez alterações em {_csCount} ocasiões diferentes! Isso é incrível!", - "nl": "Je hebt {_csCount} verschillende keren bijgedragen! Dat is indrukwekkend!", - "da": "Du har lavet ændringer ved {_csCount} forskellige begivenheder! Det er fantastisk!", - "es": "Has hecho cambios en {_csCount} ocasiones diferentes. ¡Es alucinante!", - "cs": "Změny jste provedli při {_csCount} různých příležitostech! To je úžasné!" - }, - "icon": "party" - } - ] - }, - { - "id": "translation-thanks", - "mappings": [ - { - "if": "_translation_contributions>0", - "then": { - "en": "You have contributed to translating MapComplete with {_translation_contributions} commits! That's awesome!", - "nl": "Je hebt MapComplete helpen vertalen met {_translation_contributions} commits! Dat is fantastisch! Bedankt hiervoor!", - "de": "Du hast mit {_translation_contributions} Änderungen zur Übersetzung von MapComplete beigetragen! Das ist großartig!" - }, - "icon": "party" - } - ] - }, - { - "id": "contributor-thanks", - "mappings": [ - { - "if": "_code_contributions>0", - "then": { - "en": "You have contributed code to MapComplete with {_code_contributions} commits! That's awesome!", - "de": "Sie haben Code zu MapComplete mit {_code_contributions} Commits beigetragen! Das ist großartig!", - "nl": "Je hebt mee geprogrammeerd aan MapComplete met {_code_contributions} commits! Das supercool van je! Bedankt hiervoor!", - "ca": "Heu aportat codi a MapComplete amb {_code_contributions} commits! Això és increïble!", - "cs": "Přispěli jste do MapComplete kódem s {_code_contributions} revizemi! To je úžasné!", - "da": "Du har bidraget kode til MapComplete med {_code_contributions} commits! Det er fantastisk!" - }, - "icon": "party", - "hideInAnswer": true - } - ] - }, { "id": "debug-title", "render": { diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index a79a1a60f..320d427ce 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -1221,14 +1221,14 @@ video { height: 6rem; } -.h-screen { - height: 100vh; -} - .h-full { height: 100%; } +.h-screen { + height: 100vh; +} + .h-fit { height: -webkit-fit-content; height: -moz-fit-content; @@ -2043,6 +2043,10 @@ video { column-gap: 0px; } +.gap-x-4 { + column-gap: 1rem; +} + .gap-y-8 { row-gap: 2rem; } @@ -2336,10 +2340,6 @@ video { border-radius: 1rem; } -.rounded-md { - border-radius: 0.375rem; -} - .rounded-lg { border-radius: 0.5rem; } @@ -2558,11 +2558,6 @@ video { border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.border-gray-600 { - --tw-border-opacity: 1; - border-color: rgb(75 85 99 / var(--tw-border-opacity)); -} - .border-gray-800 { --tw-border-opacity: 1; border-color: rgb(31 41 55 / var(--tw-border-opacity)); @@ -4405,10 +4400,12 @@ video { --interactive-foreground: black; --interactive-contrast: #ff00ff; --button-background: #282828; - --button-background-hover: #686868; + --button-background-hover: #484848; + --button-primary-background-hover: #353535; --button-foreground: white; --button-border-color: #F7F7F7; - --disabled: #DBDBDB; + --disabled: #B8B8B8; + --disabled-font: #B8B8B8; /** * Base colour of interactive elements, mainly the 'subtle button' * @deprecated @@ -4592,19 +4589,19 @@ button.primary, .button.primary { } button.primary:hover:not(.disabled), .button.primary:hover:not(.disabled) { - background-color: var(--button-background-hover); + background-color: var(--button-primary-background-hover); } button.disabled { - border-color: var(--disabled); - color: var(--disabled); + border-color: var(--disabled-font); + color: var(--disabled-font); cursor: unset; } button.disabled svg path { transition: all 200ms; - fill: var(--disabled); - stroke: var(--disabled); + fill: var(--disabled-font); + stroke: var(--disabled-font); } button.primary.disabled, .button.primary.disabled { diff --git a/src/Logic/State/UserRelatedState.ts b/src/Logic/State/UserRelatedState.ts index 71838800e..c11db56fe 100644 --- a/src/Logic/State/UserRelatedState.ts +++ b/src/Logic/State/UserRelatedState.ts @@ -18,6 +18,7 @@ import Constants from "../../Models/Constants" import { QueryParameters } from "../Web/QueryParameters" import { ThemeMetaTagging } from "./UserSettingsMetaTagging" import { MapProperties } from "../../Models/MapProperties" +import Showdown from "showdown" /** * The part of the state which keeps track of user-related stuff, e.g. the OSM-connection, @@ -390,6 +391,13 @@ export default class UserRelatedState { for (const k in userDetails) { amendedPrefs.data["_" + k] = "" + userDetails[k] } + if(userDetails.description){ + amendedPrefs.data["_description_html"] = Utils.purify(new Showdown.Converter() + .makeHtml(userDetails.description) + ?.replace(/>/g, ">") + ?.replace(/</g, "<") + ?.replace(/\n/g, "")) + } usersettingMetaTagging.metaTaggging_for_usersettings({ properties: amendedPrefs.data }) diff --git a/src/Models/Constants.ts b/src/Models/Constants.ts index 465e7db41..e0fcc7a66 100644 --- a/src/Models/Constants.ts +++ b/src/Models/Constants.ts @@ -151,6 +151,7 @@ export default class Constants { "not_found", "note", "party", + "pencil", "pin", "resolved", "ring", diff --git a/src/UI/Base/DynLink.svelte b/src/UI/Base/DynLink.svelte index ce109c2db..10477b91f 100644 --- a/src/UI/Base/DynLink.svelte +++ b/src/UI/Base/DynLink.svelte @@ -21,7 +21,7 @@ class={$classnames} > {#if $icon} - + {/if} {@html $text} diff --git a/src/UI/BigComponents/SelectedElementView.svelte b/src/UI/BigComponents/SelectedElementView.svelte index 10e175223..096323a48 100644 --- a/src/UI/BigComponents/SelectedElementView.svelte +++ b/src/UI/BigComponents/SelectedElementView.svelte @@ -17,31 +17,44 @@ export let highlightedRendering: UIEventSource = undefined export let tags: UIEventSource> = state?.featureProperties?.getStore( - selectedElement.properties.id + selectedElement.properties.id, ) let isAddNew = tags.mapD( - (t) => t?.id?.startsWith(LastClickFeatureSource.newPointElementId) ?? false + (t) => t?.id?.startsWith(LastClickFeatureSource.newPointElementId) ?? false, ) export let layer: LayerConfig - + export let mustMatchLabels: Set | undefined = undefined + export let dontMatchLabels: Set | undefined = new Set(["hidden"]) let _metatags: Record if (state?.userRelatedState?.preferencesAsTags) { onDestroy( state.userRelatedState.preferencesAsTags.addCallbackAndRun((tags) => { _metatags = tags - }) + }), ) } let knownTagRenderings: Store = tags.mapD((tgs) => layer?.tagRenderings?.filter( - (config) => - (config.condition?.matchesProperties(tgs) ?? true) && - (config.metacondition?.matchesProperties({ ...tgs, ..._metatags }) ?? true) && - config.IsKnown(tgs) - ) + (config) => { + if (mustMatchLabels !== undefined) { + if (!mustMatchLabels.has(config.id) && !config?.labels?.some(l => mustMatchLabels.has(l))) { + return false + } + } else if (dontMatchLabels) { + if (dontMatchLabels.has(config.id) || config?.labels?.some(l => dontMatchLabels.has(l))) { + return false + } + } + if (!config.IsKnown(tgs)) { + return false + } + return (config.condition?.matchesProperties(tgs) ?? true) && + (config.metacondition?.matchesProperties({ ...tgs, ..._metatags }) ?? true) + }, + ), ) diff --git a/src/UI/BigComponents/ThemeIntroPanel.svelte b/src/UI/BigComponents/ThemeIntroPanel.svelte index 0c8e48a35..d0c88a4a6 100644 --- a/src/UI/BigComponents/ThemeIntroPanel.svelte +++ b/src/UI/BigComponents/ThemeIntroPanel.svelte @@ -14,8 +14,8 @@ import { ExclamationTriangleIcon } from "@babeard/svelte-heroicons/mini" import Location_refused from "../../assets/svg/Location_refused.svelte" import Location from "../../assets/svg/Location.svelte" - import ChevronDoubleLeft from "@babeard/svelte-heroicons/mini/ChevronDoubleLeft" - import Constants from "../../Models/Constants" + import ChevronDoubleLeft from "@babeard/svelte-heroicons/solid/ChevronDoubleLeft" + import GeolocationIndicator from "./GeolocationIndicator.svelte" /** * The theme introduction panel @@ -27,9 +27,11 @@ let triggerSearch: UIEventSource = new UIEventSource(undefined) let searchEnabled = false - let geopermission: Store = - state.geolocation.geolocationState.permission - let currentGPSLocation = state.geolocation.geolocationState.currentGPSLocation + let geolocation = state.geolocation.geolocationState + let geopermission: Store = geolocation.permission + let currentGPSLocation = geolocation.currentGPSLocation + let gpsExplanation = geolocation.gpsStateExplanation + let gpsAvailable = geolocation.gpsAvailable function jumpToCurrentLocation() { const glstate = state.geolocation.geolocationState @@ -75,38 +77,12 @@
- {#if $currentGPSLocation !== undefined || $geopermission === "prompt"} - - - {:else if $geopermission === "requested"} - - {:else if $geopermission === "denied"} - - {:else} - - {/if} + + diff --git a/src/UI/BigComponents/UserProfile.svelte b/src/UI/BigComponents/UserProfile.svelte deleted file mode 100644 index e126f0484..000000000 --- a/src/UI/BigComponents/UserProfile.svelte +++ /dev/null @@ -1,55 +0,0 @@ - - -
- {#if $userdetails.img} - - {:else} - - {/if} -
-

{$userdetails.name}

- {#if description} - - - - - - {:else} - - - - - - {/if} -
-
diff --git a/src/UI/Map/Icon.svelte b/src/UI/Map/Icon.svelte index c775e1c31..2fa9d5145 100644 --- a/src/UI/Map/Icon.svelte +++ b/src/UI/Map/Icon.svelte @@ -22,7 +22,7 @@ import Brick_wall_square from "../../assets/svg/Brick_wall_square.svelte" import Brick_wall_round from "../../assets/svg/Brick_wall_round.svelte" import Gps_arrow from "../../assets/svg/Gps_arrow.svelte" - import { HeartIcon, WifiIcon } from "@babeard/svelte-heroicons/solid" + import { HeartIcon, PencilIcon, WifiIcon } from "@babeard/svelte-heroicons/solid" import { HeartIcon as HeartOutlineIcon } from "@babeard/svelte-heroicons/outline" import Confirm from "../../assets/svg/Confirm.svelte" import Not_found from "../../assets/svg/Not_found.svelte" @@ -37,7 +37,7 @@ import Cross_bottom_right from "../../assets/svg/Cross_bottom_right.svelte" import { Utils } from "../../Utils" import Gear from "../../assets/svg/Gear.svelte" - import { DesktopComputerIcon } from "@rgossiaux/svelte-heroicons/solid" + import { DesktopComputerIcon, UserCircleIcon } from "@rgossiaux/svelte-heroicons/solid" import Relocation from "../../assets/svg/Relocation.svelte" /** @@ -142,9 +142,13 @@ {:else if icon === "relocation"} + {:else if icon === "pencil"} + + {:else if icon === "user_circle"} + {:else if Utils.isEmoji(icon)} - {icon} + {icon} {:else} diff --git a/src/UI/Popup/GroupedView.svelte b/src/UI/Popup/GroupedView.svelte new file mode 100644 index 000000000..82f2b83b3 --- /dev/null +++ b/src/UI/Popup/GroupedView.svelte @@ -0,0 +1,27 @@ + + + +
+ +
+ + diff --git a/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte b/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte index 45dfd27d2..21d761c39 100644 --- a/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte +++ b/src/UI/Popup/TagRendering/TagRenderingQuestion.svelte @@ -271,6 +271,7 @@ feedback.setData(undefined) } tags.ping() + dispatch("saved", { config, applied: selectedTags }) return } dispatch("saved", { config, applied: selectedTags }) diff --git a/src/UI/SpecialVisualizations.ts b/src/UI/SpecialVisualizations.ts index dd4e103bd..e81aa5aaa 100644 --- a/src/UI/SpecialVisualizations.ts +++ b/src/UI/SpecialVisualizations.ts @@ -40,7 +40,6 @@ import { Feature, GeoJsonProperties } from "geojson" import { GeoOperations } from "../Logic/GeoOperations" import CreateNewNote from "./Popup/Notes/CreateNewNote.svelte" import AddNewPoint from "./Popup/AddNewPoint/AddNewPoint.svelte" -import UserProfile from "./BigComponents/UserProfile.svelte" import LayerConfig from "../Models/ThemeConfig/LayerConfig" import TagRenderingConfig from "../Models/ThemeConfig/TagRenderingConfig" import { ExportAsGpxViz } from "./Popup/ExportAsGpxViz" @@ -102,6 +101,7 @@ import CloseNoteButton from "./Popup/Notes/CloseNoteButton.svelte" import PendingChangesIndicator from "./BigComponents/PendingChangesIndicator.svelte" import QrCode from "./Popup/QrCode.svelte" import ClearCaches from "./Popup/ClearCaches.svelte" +import GroupedView from "./Popup/GroupedView.svelte" class NearbyImageVis implements SpecialVisualization { // Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests @@ -425,17 +425,6 @@ export default class SpecialVisualizations { }).SetClass("w-full h-full overflow-auto") }, }, - { - funcName: "user_profile", - args: [], - - docs: "A component showing information about the currently logged in user (username, profile description, profile picture + link to edit them). Mostly meant to be used in the 'user-settings'", - constr(state: SpecialVisualizationState): BaseUIElement { - return new SvelteUIElement(UserProfile, { - osmConnection: state.osmConnection, - }) - }, - }, { funcName: "language_picker", args: [], @@ -1340,6 +1329,7 @@ export default class SpecialVisualizations { download: tagSource.map((tags) => Utils.SubstituteKeys(download, tags)), ariaLabel: tagSource.map((tags) => Utils.SubstituteKeys(ariaLabel, tags)), newTab: new ImmutableStore(newTab), + icon: tagSource.map((tags) => Utils.SubstituteKeys(icon, tags)) }).setSpan() }, }, @@ -2006,6 +1996,27 @@ export default class SpecialVisualizations { ], constr(state: SpecialVisualizationState, tagSource: UIEventSource>, argument: string[], feature: Feature, layer: LayerConfig): SvelteUIElement { return new SvelteUIElement(ClearCaches, {msg: argument[0] ?? "Clear local caches"}) + }, + }, + { + funcName: "group", + docs: "A collapsable group (accordion)", + args: [ + { + name: "header", + doc: "The _identifier_ of a single tagRendering. This will be used as header" + }, + { + name: "labels", + doc: "A `;`-separated list of either identifiers or label names. All tagRenderings matching this value will be shown in the accordion" + } + ], + constr(state: SpecialVisualizationState, tags: UIEventSource>, argument: string[], selectedElement: Feature, layer: LayerConfig): SvelteUIElement { + const [header, labelsStr] = argument + const labels = labelsStr.split(";").map(x => x.trim()) + return new SvelteUIElement(GroupedView, { + state, tags, selectedElement, layer, header, labels + }) } } ] diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte index 2bc069f4a..b0e46268d 100644 --- a/src/UI/ThemeViewGUI.svelte +++ b/src/UI/ThemeViewGUI.svelte @@ -54,7 +54,7 @@ import ImageOperations from "./Image/ImageOperations.svelte" import VisualFeedbackPanel from "./BigComponents/VisualFeedbackPanel.svelte" import { Orientation } from "../Sensors/Orientation" - import GeolocationControl from "./BigComponents/GeolocationControl.svelte" + import GeolocationIndicator from "./BigComponents/GeolocationIndicator.svelte" import Compass_arrow from "../assets/svg/Compass_arrow.svelte" import ReverseGeocoding from "./BigComponents/ReverseGeocoding.svelte" import FilterPanel from "./BigComponents/FilterPanel.svelte" @@ -209,30 +209,7 @@ let addNewFeatureMode = state.userRelatedState.addNewFeatureMode let gpsAvailable = state.geolocation.geolocationState.gpsAvailable - let gpsButtonAriaLabel = gpsAvailable.map(available => { - if (!available) { - return Translations.t.general.labels.locationNotAvailable - } - if (state.geolocation.geolocationState.permission.data === "denied") { - return Translations.t.general.geopermissionDenied - } - - if (state.geolocation.geolocationState.permission.data === "requested") { - return Translations.t.general.waitingForGeopermission - } - - - if (!state.geolocation.geolocationState.allowMoving.data) { - return Translations.t.general.visualFeedback.islocked - } - - if (state.geolocation.geolocationState.currentGPSLocation.data === undefined) { - return Translations.t.general.waitingForLocation - } - - return Translations.t.general.labels.jumpToLocation - }, [state.geolocation.geolocationState.allowMoving, state.geolocation.geolocationState.permission]) - + let gpsButtonAriaLabel = state.geolocation.geolocationState.gpsStateExplanation
@@ -435,7 +412,7 @@ on:click={() => state.geolocationControl.handleClick()} on:keydown={forwardEventToMap} > - + {#if $compassLoaded} @@ -501,14 +478,15 @@ {/if} {/if} + i !== undefined)}> state.previewedImage.setData(undefined)}> + - state.guistate.themeIsOpened.setData(false)}> -
@@ -561,14 +538,15 @@ + state.guistate.filtersPanelIsOpened.setData(false)}> + - { state.guistate.backgroundLayerSelectionIsOpened.setData(false) @@ -584,8 +562,8 @@ + - state.guistate.menuIsOpened.setData(false)}> + state.guistate.privacyPanelIsOpened.setData(false)}>
@@ -670,6 +649,7 @@ + state.guistate.copyrightPanelIsOpened.setData(false)}>
@@ -687,6 +667,7 @@ + state.guistate.communityIndexPanelIsOpened.setData(false)}>
diff --git a/src/index.css b/src/index.css index c689714bf..eccbdb3b4 100644 --- a/src/index.css +++ b/src/index.css @@ -39,10 +39,13 @@ --interactive-contrast: #ff00ff; --button-background: #282828; - --button-background-hover: #686868; + --button-background-hover: #484848; + --button-primary-background-hover: #353535; + --button-foreground: white; --button-border-color: #F7F7F7; - --disabled: #DBDBDB; + --disabled: #B8B8B8; + --disabled-font: #B8B8B8; /** * Base colour of interactive elements, mainly the 'subtle button' @@ -232,20 +235,20 @@ button.primary, .button.primary { } button.primary:hover:not(.disabled), .button.primary:hover:not(.disabled) { - background-color: var(--button-background-hover); + background-color: var(--button-primary-background-hover); } button.disabled { - border-color: var(--disabled); - color: var(--disabled); + border-color: var(--disabled-font); + color: var(--disabled-font); cursor: unset; } button.disabled svg path { transition: all 200ms; } button.disabled svg path { - fill: var(--disabled); - stroke: var(--disabled); + fill: var(--disabled-font); + stroke: var(--disabled-font); }