From d38a6c7505f3c38ca68c3aa8784320f84758de44 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Wed, 19 Jun 2024 01:56:19 +0200 Subject: [PATCH] Properly render theme icon when using a studio layer as theme --- src/Logic/DetermineLayout.ts | 25 +++++++++++++------ .../Json/TagRenderingConfigJson.ts | 5 +++- src/UI/BigComponents/ThemeButton.svelte | 4 ++- src/UI/Map/Marker.svelte | 21 +++++++++++++++- .../TagRendering/TagRenderingMapping.svelte | 11 ++------ src/UI/ThemeViewGUI.svelte | 11 +++----- 6 files changed, 50 insertions(+), 27 deletions(-) diff --git a/src/Logic/DetermineLayout.ts b/src/Logic/DetermineLayout.ts index dc7eb6741..409bea5bb 100644 --- a/src/Logic/DetermineLayout.ts +++ b/src/Logic/DetermineLayout.ts @@ -162,18 +162,26 @@ export default class DetermineLayout { return dict } + private static getSharedTagRenderingOrder(): string[] { + return questions.tagRenderings.map(tr => tr.id) + } private static prepCustomTheme(json: any, sourceUrl?: string, forceId?: string): LayoutConfig { if (json.layers === undefined && json.tagRenderings !== undefined) { // We got fed a layer instead of a theme const layerConfig = json - const iconTr: string | TagRenderingConfigJson = - ( - layerConfig.pointRendering - .map((mr) => mr?.marker?.find((icon) => icon.icon !== undefined)?.icon) - .find((i) => i !== undefined) - ) ?? "bug" - const icon = new TagRenderingConfig(iconTr)?.render?.txt ?? "./assets/svg/bug.svg" + const icon = Utils.NoNull(layerConfig.pointRendering.flatMap( + pr => pr.marker + ).map(iconSpec => { + const icon = new TagRenderingConfig(iconSpec.icon).render.txt + if(iconSpec.color === undefined || icon.startsWith("http:") || icon.startsWith("https:")){ + return icon + } + const color = new TagRenderingConfig(iconSpec.color).render.txt + return icon+":"+color + + })).join(";") + json = { id: json.id, description: json.description, @@ -193,6 +201,7 @@ export default class DetermineLayout { } const convertState: DesugaringContext = { tagRenderings: DetermineLayout.getSharedTagRenderings(), + tagRenderingOrder: DetermineLayout.getSharedTagRenderingOrder(), sharedLayers: knownLayersDict, publicLayers: new Set(), } @@ -211,7 +220,7 @@ export default class DetermineLayout { } { new ValidateThemeAndLayers( - new DoesImageExist(new Set(), (_) => true), + new DoesImageExist(new Set(), () => true), "", false ).convertStrict(json) diff --git a/src/Models/ThemeConfig/Json/TagRenderingConfigJson.ts b/src/Models/ThemeConfig/Json/TagRenderingConfigJson.ts index a92750685..5d037b9c8 100644 --- a/src/Models/ThemeConfig/Json/TagRenderingConfigJson.ts +++ b/src/Models/ThemeConfig/Json/TagRenderingConfigJson.ts @@ -183,7 +183,10 @@ export interface TagRenderingConfigJson { * ifunset: Do not show an extra icon next to the render value * * An icon supporting this mapping; typically shown pretty small. - * This can be used to show a 'phone'-icon next to the phone number + * This can be used to show a e.g. 'phone'-icon next to the phone number + * + * This supports patterns, you can e.g. have `close:red;some/other/icon.svg` + * * inline: {icon} * Type: icon */ diff --git a/src/UI/BigComponents/ThemeButton.svelte b/src/UI/BigComponents/ThemeButton.svelte index 90e0e9a6f..8974cfa88 100644 --- a/src/UI/BigComponents/ThemeButton.svelte +++ b/src/UI/BigComponents/ThemeButton.svelte @@ -8,6 +8,7 @@ import Tr from "../Base/Tr.svelte" import Translations from "../i18n/Translations" import { LocalStorageSource } from "../../Logic/Web/LocalStorageSource" + import Marker from "../Map/Marker.svelte" export let theme: LayoutInformation export let isCustom: boolean = false @@ -86,7 +87,8 @@ {#if theme.id !== personal.id || $unlockedPersonal} - + + diff --git a/src/UI/Map/Marker.svelte b/src/UI/Map/Marker.svelte index 09cfb81ac..1e76758b6 100644 --- a/src/UI/Map/Marker.svelte +++ b/src/UI/Map/Marker.svelte @@ -5,11 +5,30 @@ /** * Renders a 'marker', which consists of multiple 'icons' */ - export let icons: { icon: string; color: string }[] + export let icons: string | { icon: string; color: string }[] + + if(typeof icons === "string") { + icons = icons.split(";").map(subspec => { + if(subspec.startsWith("http://") || subspec.startsWith("https://")){ + return { + icon: subspec, color: "black" + } + } + const [icon, color] = subspec.split(":") + return { + icon, color: color ?? "black" + } + }) + } + /** * Class which is applied onto the individual icons */ export let clss = "" + + /** + * Class applied onto the entire element + */ export let size = "w-full h-full" diff --git a/src/UI/Popup/TagRendering/TagRenderingMapping.svelte b/src/UI/Popup/TagRendering/TagRenderingMapping.svelte index 8436ec64d..a23d3c649 100644 --- a/src/UI/Popup/TagRendering/TagRenderingMapping.svelte +++ b/src/UI/Popup/TagRendering/TagRenderingMapping.svelte @@ -31,20 +31,13 @@ | "large-height" | string } - function iconToMarker(spec: string) { - return spec.split(";").map(subspec => { - const [icon, color] = subspec.split(":") - return { - icon, color: color ?? "black" - } - }) - } + {#if mapping.icon !== undefined}
diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte index f94527f8f..7b258f35d 100644 --- a/src/UI/ThemeViewGUI.svelte +++ b/src/UI/ThemeViewGUI.svelte @@ -78,6 +78,7 @@ import Share from "@babeard/svelte-heroicons/solid/Share" import ChevronRight from "@babeard/svelte-heroicons/solid/ChevronRight" import DocumentChartBar from "@babeard/svelte-heroicons/outline/DocumentChartBar" + import Marker from "./Map/Marker.svelte" export let state: ThemeViewState let layout = state.layout @@ -254,12 +255,7 @@ htmlElem={openMapButton} >
- + @@ -489,7 +485,8 @@
- + +