midgard/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Properly render theme icon when using a studio layer as theme

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-06-19 01:56:19 +02:00
parent 5ead6c6e37
commit d38a6c7505
6 changed files with 50 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
src/Logic/DetermineLayout.ts
View file

@ -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 = <LayerConfigJson>json
const iconTr: string | TagRenderingConfigJson =
<any>(
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(<TagRenderingConfigJson>iconSpec.icon).render.txt
if(iconSpec.color === undefined || icon.startsWith("http:") || icon.startsWith("https:")){
return icon
}
const color = new TagRenderingConfig(<TagRenderingConfigJson>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<string>(),
}
@ -211,7 +220,7 @@ export default class DetermineLayout {
}
{
new ValidateThemeAndLayers(
new DoesImageExist(new Set<string>(), (_) => true),
new DoesImageExist(new Set<string>(), () => true),
"",
false
).convertStrict(json)

5
src/Models/ThemeConfig/Json/TagRenderingConfigJson.ts
View file

@ -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: <img src='{icon}' class="w-8 h-8" /> {icon}
* Type: icon
*/

4
src/UI/BigComponents/ThemeButton.svelte
View file

@ -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}
<a class={"flex w-full items-center text-ellipsis rounded my-2"} href={$href}>
<img src={theme.icon} class="m-1 block h-11 w-11 sm:mr-2" alt="" />
<Marker icons={theme.icon} size="m-1 block h-11 w-11 sm:mr-2"/>
<span class="flex flex-col overflow-hidden text-ellipsis font-bold text-xl">
<Tr cls="underline" t={title} />
<Tr cls="subtle text-base" t={description}/>

21
src/UI/Map/Marker.svelte
View file

@ -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"
</script>

11
src/UI/Popup/TagRendering/TagRenderingMapping.svelte
View file

@ -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"
}
})
}
</script>
{#if mapping.icon !== undefined}
<div class="inline-flex items-center">
<Marker
icons={iconToMarker(mapping.icon)}
icons={mapping.icon}
size={twJoin(`mapping-icon-${mapping.iconClass ?? "small"}-height mapping-icon-${mapping.iconClass ?? "small"}-width`, "mr-2", "shrink-0 mx-2")}
clss={`mapping-icon-${mapping.iconClass ?? "small"}`}
/>

11
src/UI/ThemeViewGUI.svelte
View file

@ -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}
>
<div class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 md:mx-2">
<img
role="presentation"
alt=""
class="mr-0.5 block h-4 w-4 sm:mr-1 md:mr-2 md:h-8 md:w-8"
src={layout.icon}
/>
<Marker icons={layout.icon} size="h-4 w-4 md:h-8 md:w-8 mr-0.5 sm:mr-1 md:mr-2" ></Marker>
<b class="mr-1">
<Tr t={layout.title} />
</b>
@ -489,7 +485,8 @@
</div>
<div class="flex" slot="title0">
<img class="block h-4 w-4" src={layout.icon} />
<Marker icons={layout.icon} size="h-4 w-4"/>
<Tr t={layout.title} />
</div>