Search: refactoring searching for themes, refactor allThemesGui, incidentally fix #1679

This commit is contained in:
Pieter Vander Vennet 2024-09-05 02:25:03 +02:00
parent 9b8c300e77
commit d90b6d82d0
18 changed files with 421 additions and 334 deletions

View file

@ -1,31 +1,14 @@
<script lang="ts">
import * as personal from "../../../assets/themes/personal/personal.json"
import { ImmutableStore, Store, UIEventSource } from "../../Logic/UIEventSource"
import UserDetails, { OsmConnection } from "../../Logic/Osm/OsmConnection"
import Constants from "../../Models/Constants"
import { ImmutableStore, Store } from "../../Logic/UIEventSource"
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
import type { MinimalLayoutInformation } from "../../Models/ThemeConfig/LayoutConfig"
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: MinimalLayoutInformation
export let isCustom: boolean = false
export let userDetails: UIEventSource<UserDetails>
export let theme: MinimalLayoutInformation & {isOfficial?: boolean}
let isCustom: boolean = theme.id.startsWith("https://") || theme.id.startsWith("http://")
export let state: { layoutToUse?: { id: string }; osmConnection: OsmConnection }
export let selected: boolean = false
let unlockedPersonal = LocalStorageSource.GetParsed("unlocked_personal_theme", false)
userDetails.addCallbackAndRunD((userDetails) => {
if (!userDetails.loggedIn) {
return
}
if (userDetails.csCount > Constants.userJourney.personalLayoutUnlock) {
unlockedPersonal.setData(true)
}
return true
})
$: title = Translations.T(
theme.title,
@ -33,7 +16,6 @@
)
$: description = Translations.T(theme.shortDescription)
// TODO: Improve this function
function createUrl(
layout: { id: string; definition?: string },
isCustom: boolean,
@ -84,19 +66,12 @@
let href = createUrl(theme, isCustom, state)
</script>
{#if theme.id !== personal.id || $unlockedPersonal}
<a class="low-interaction my-1 flex w-full items-center text-ellipsis rounded p-1" href={$href}>
<Marker icons={theme.icon} size="block h-8 w-8 sm:h-11 sm:w-11 m-1 sm:mx-2 md:mx-4 shrink-0" />
<span class="flex flex-col overflow-hidden text-ellipsis text-xl font-bold">
<Tr cls="" t={title} />
<Tr cls="subtle text-base" t={description} />
{#if selected}
<span class="thanks hidden-on-mobile" aria-hidden="true">
<Tr t={Translations.t.general.morescreen.enterToOpen} />
</span>
{/if}
<slot/>
</span>
</a>
{/if}