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

chore: formatting

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-03-09 23:19:49 +01:00
parent c596e3750c
commit 4849f881e6
9 changed files with 75 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

54
UI/Base/SubtleButton.svelte
View file

@ -1,62 +1,63 @@
<script lang="ts">
import { onMount } from "svelte";
import { Store } from "../../Logic/UIEventSource";
import BaseUIElement from "../BaseUIElement";
import Img from "./Img";
import Translations from "../i18n/Translations";
import { ImmutableStore } from "../../Logic/UIEventSource.js";
import { onMount } from "svelte"
import { Store } from "../../Logic/UIEventSource"
import BaseUIElement from "../BaseUIElement"
import Img from "./Img"
import Translations from "../i18n/Translations"
import { ImmutableStore } from "../../Logic/UIEventSource.js"
export let imageUrl: string | BaseUIElement = undefined;
export let message: string | BaseUIElement = undefined;
export let imageUrl: string | BaseUIElement = undefined
export let message: string | BaseUIElement = undefined
export let options: {
url?: string | Store<string>
newTab?: boolean
imgSize?: string
extraClasses?: string
} = {};
} = {}
// Website to open when clicked
let href : Store<string> = undefined
if(options?.url){
href = typeof options?.url == "string" ? new ImmutableStore(options.url) : options.url;
let href: Store<string> = undefined
if (options?.url) {
href = typeof options?.url == "string" ? new ImmutableStore(options.url) : options.url
}
let imgElem: HTMLElement;
let msgElem: HTMLElement;
let imgClasses = "block justify-center shrink-0 mr-4 " + (options?.imgSize ?? "h-11 w-11");
let imgElem: HTMLElement
let msgElem: HTMLElement
let imgClasses = "block justify-center shrink-0 mr-4 " + (options?.imgSize ?? "h-11 w-11")
onMount(() => {
// Image
if (imgElem && imageUrl) {
let img: BaseUIElement;
let img: BaseUIElement
if ((imageUrl ?? "") === "") {
img = undefined;
img = undefined
} else if (typeof imageUrl !== "string") {
img = imageUrl?.SetClass(imgClasses);
img = imageUrl?.SetClass(imgClasses)
}
if (img) imgElem.replaceWith(img.ConstructElement());
if (img) imgElem.replaceWith(img.ConstructElement())
}
// Message
if (msgElem && message) {
let msg = Translations.W(message)?.SetClass("block text-ellipsis no-images flex-shrink");
msgElem.replaceWith(msg.ConstructElement());
let msg = Translations.W(message)?.SetClass("block text-ellipsis no-images flex-shrink")
msgElem.replaceWith(msg.ConstructElement())
}
});
})
</script>
<svelte:element
class={(options.extraClasses??"") + 'flex hover:shadow-xl transition-[color,background-color,box-shadow] hover:bg-unsubtle'}
this={href === undefined ? "span" : "a"}
class={(options.extraClasses ?? "") +
"flex hover:shadow-xl transition-[color,background-color,box-shadow] hover:bg-unsubtle"}
href={$href}
target={options?.newTab ? "_blank" : ""}
this={href === undefined ? "span" : "a"}
>
<slot name="image">
{#if imageUrl !== undefined}
{#if typeof imageUrl === "string"}
<Img src={imageUrl} class={imgClasses+ " bg-red border border-black"}></Img>
{:else }
<Img src={imageUrl} class={imgClasses + " bg-red border border-black"} />
{:else}
<template bind:this={imgElem} />
{/if}
{/if}
@ -68,7 +69,6 @@
</svelte:element>
<style lang="scss">
span,
a {
@apply flex p-3 my-2 py-4 rounded-lg shrink-0;