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

Feature: add favourite

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-11-22 19:39:19 +01:00
parent a32ab16a5e
commit f9827dd6ae
68 changed files with 1641 additions and 885 deletions
Download patch file Download diff file Expand all files Collapse all files

110
src/UI/Map/Icon.svelte
View file

@ -1,27 +1,29 @@
<script lang="ts">
import Pin from "../../assets/svg/Pin.svelte"
import Square from "../../assets/svg/Square.svelte"
import Circle from "../../assets/svg/Circle.svelte"
import Checkmark from "../../assets/svg/Checkmark.svelte"
import Clock from "../../assets/svg/Clock.svelte"
import Close from "../../assets/svg/Close.svelte"
import Crosshair from "../../assets/svg/Crosshair.svelte"
import Help from "../../assets/svg/Help.svelte"
import Home from "../../assets/svg/Home.svelte"
import Invalid from "../../assets/svg/Invalid.svelte"
import Location from "../../assets/svg/Location.svelte"
import Location_empty from "../../assets/svg/Location_empty.svelte"
import Location_locked from "../../assets/svg/Location_locked.svelte"
import Note from "../../assets/svg/Note.svelte"
import Resolved from "../../assets/svg/Resolved.svelte"
import Ring from "../../assets/svg/Ring.svelte"
import Scissors from "../../assets/svg/Scissors.svelte"
import Teardrop from "../../assets/svg/Teardrop.svelte"
import Teardrop_with_hole_green from "../../assets/svg/Teardrop_with_hole_green.svelte"
import Triangle from "../../assets/svg/Triangle.svelte"
import Pin from "../../assets/svg/Pin.svelte";
import Square from "../../assets/svg/Square.svelte";
import Circle from "../../assets/svg/Circle.svelte";
import Checkmark from "../../assets/svg/Checkmark.svelte";
import Clock from "../../assets/svg/Clock.svelte";
import Close from "../../assets/svg/Close.svelte";
import Crosshair from "../../assets/svg/Crosshair.svelte";
import Help from "../../assets/svg/Help.svelte";
import Home from "../../assets/svg/Home.svelte";
import Invalid from "../../assets/svg/Invalid.svelte";
import Location from "../../assets/svg/Location.svelte";
import Location_empty from "../../assets/svg/Location_empty.svelte";
import Location_locked from "../../assets/svg/Location_locked.svelte";
import Note from "../../assets/svg/Note.svelte";
import Resolved from "../../assets/svg/Resolved.svelte";
import Ring from "../../assets/svg/Ring.svelte";
import Scissors from "../../assets/svg/Scissors.svelte";
import Teardrop from "../../assets/svg/Teardrop.svelte";
import Teardrop_with_hole_green from "../../assets/svg/Teardrop_with_hole_green.svelte";
import Triangle from "../../assets/svg/Triangle.svelte";
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 } from "@babeard/svelte-heroicons/solid";
import { HeartIcon as HeartOutlineIcon } from "@babeard/svelte-heroicons/outline";
/**
* Renders a single icon.
@ -29,68 +31,72 @@
* Icons -placed on top of each other- form a 'Marker' together
*/
export let icon: string | undefined
export let color: string | undefined
export let icon: string | undefined;
export let color: string | undefined;
export let clss: string | undefined
</script>
{#if icon}
<div class="absolute top-0 left-0 h-full w-full">
{#if icon === "pin"}
<Pin {color} />
<Pin {color} class={clss}/>
{:else if icon === "square"}
<Square {color} />
<Square {color} class={clss}/>
{:else if icon === "circle"}
<Circle {color} />
<Circle {color} class={clss}/>
{:else if icon === "checkmark"}
<Checkmark {color} />
<Checkmark {color} class={clss}/>
{:else if icon === "clock"}
<Clock {color} />
<Clock {color} class={clss}/>
{:else if icon === "close"}
<Close {color} />
<Close {color} class={clss}/>
{:else if icon === "crosshair"}
<Crosshair {color} />
<Crosshair {color} class={clss}/>
{:else if icon === "help"}
<Help {color} />
<Help {color} class={clss}/>
{:else if icon === "home"}
<Home {color} />
<Home {color} class={clss}/>
{:else if icon === "invalid"}
<Invalid {color} />
<Invalid {color} class={clss}/>
{:else if icon === "location"}
<Location {color} />
<Location {color} class={clss}/>
{:else if icon === "location_empty"}
<Location_empty {color} />
<Location_empty {color} class={clss}/>
{:else if icon === "location_locked"}
<Location_locked {color} />
<Location_locked {color} class={clss}/>
{:else if icon === "note"}
<Note {color} />
<Note {color} class={clss}/>
{:else if icon === "resolved"}
<Resolved {color} />
<Resolved {color} class={clss}/>
{:else if icon === "ring"}
<Ring {color} />
<Ring {color} class={clss}/>
{:else if icon === "scissors"}
<Scissors {color} />
<Scissors {color} class={clss}/>
{:else if icon === "teardrop"}
<Teardrop {color} />
<Teardrop {color} class={clss}/>
{:else if icon === "teardrop_with_hole_green"}
<Teardrop_with_hole_green {color} />
<Teardrop_with_hole_green {color} class={clss}/>
{:else if icon === "triangle"}
<Triangle {color} />
<Triangle {color} class={clss}/>
{:else if icon === "brick_wall_square"}
<Brick_wall_square {color} />
<Brick_wall_square {color} class={clss}/>
{:else if icon === "brick_wall_round"}
<Brick_wall_round {color} />
<Brick_wall_round {color} class={clss}/>
{:else if icon === "gps_arrow"}
<Gps_arrow {color} />
<Gps_arrow {color} class={clss}/>
{:else if icon === "checkmark"}
<Checkmark {color} />
<Checkmark {color} class={clss}/>
{:else if icon === "help"}
<Help {color} />
<Help {color} class={clss}/>
{:else if icon === "close"}
<Close {color} />
<Close {color} class={clss}/>
{:else if icon === "invalid"}
<Invalid {color} />
<Invalid {color} class={clss}/>
{:else if icon === "heart"}
<HeartIcon class={clss}/>
{:else if icon === "heart_outline"}
<HeartOutlineIcon class={clss}/>
{:else}
<img class="h-full w-full" src={icon} />
<img class={clss ?? "h-full w-full"} src={icon} aria-hidden="true"
alt="" />
{/if}
</div>
{/if}