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

Refactoring: more removal of old-style SVG bundling

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-11-19 16:20:47 +01:00
parent 6c75553f3f
commit e4aedc9696
7 changed files with 70 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

24
scripts/generateIncludedImages.ts
View file

@ -4,6 +4,30 @@ function genImages(dryrun = false) {
console.log("Generating images")
// These images are not referenced via 'Svg.ts' anymore and can be ignored
const blacklist: string[] = [
"add",
"addSmall",
"brick_wall_square",
"clock",
"community",
"copyright",
"cross",
"cross_bottom_right",
"crosshair_locked",
"delete_not_allowed",
"direction_gradient",
"direction_stroke",
"duplicate",
"elevator",
"elevator_wheelchair",
"liberapay",
"length_crosshair",
"speech_bubble_black_outline",
"square",
"star_half",
"star_outline",
"star",
"osm_logo_us",
"SocialImageForeground",
"wikipedia",
"Upload",

48
src/UI/BigComponents/ThemeIntroPanel.svelte
View file

@ -1,21 +1,21 @@
<script lang="ts">
import Translations from "../i18n/Translations"
import Svg from "../../Svg"
import Tr from "../Base/Tr.svelte"
import NextButton from "../Base/NextButton.svelte"
import Geosearch from "./Geosearch.svelte"
import ToSvelte from "../Base/ToSvelte.svelte"
import ThemeViewState from "../../Models/ThemeViewState"
import { UIEventSource } from "../../Logic/UIEventSource"
import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid"
import { twJoin } from "tailwind-merge"
import { Utils } from "../../Utils"
import type { GeolocationPermissionState } from "../../Logic/State/GeoLocationState"
import { GeoLocationState } from "../../Logic/State/GeoLocationState"
import If from "../Base/If.svelte"
import { ExclamationTriangleIcon } from "@babeard/svelte-heroicons/mini"
import type { Readable } from "svelte/store"
import Translations from "../i18n/Translations";
import Tr from "../Base/Tr.svelte";
import NextButton from "../Base/NextButton.svelte";
import Geosearch from "./Geosearch.svelte";
import ThemeViewState from "../../Models/ThemeViewState";
import { UIEventSource } from "../../Logic/UIEventSource";
import { SearchIcon } from "@rgossiaux/svelte-heroicons/solid";
import { twJoin } from "tailwind-merge";
import { Utils } from "../../Utils";
import type { GeolocationPermissionState } from "../../Logic/State/GeoLocationState";
import { GeoLocationState } from "../../Logic/State/GeoLocationState";
import If from "../Base/If.svelte";
import { ExclamationTriangleIcon } from "@babeard/svelte-heroicons/mini";
import type { Readable } from "svelte/store";
import Add from "../../assets/svg/Add.svelte";
import Location_refused from "../../assets/svg/Location_refused.svelte";
import Crosshair from "../../assets/svg/Crosshair.svelte";
/**
* The theme introduction panel
@ -71,7 +71,7 @@
<If condition={state.featureSwitches.featureSwitchGeolocation}>
{#if $currentGPSLocation !== undefined || $geopermission === "prompt"}
<button class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
<ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")} />
<Crosshair class="w-8 h-8"/>
<Tr t={Translations.t.general.openTheMapAtGeolocation} />
</button>
<!-- No geolocation granted - we don't show the button -->
@ -81,25 +81,17 @@
on:click={jumpToCurrentLocation}
>
<!-- Even though disabled, when clicking we request the location again in case the contributor dismissed the location popup -->
<ToSvelte
construct={Svg.crosshair_svg()
.SetClass("w-8 h-8")
.SetStyle("animation: 3s linear 0s infinite normal none running spin;")}
/>
<Crosshair class="w-8 h-8" style="animation: 3s linear 0s infinite normal none running spin;" />
<Tr t={Translations.t.general.waitingForGeopermission} />
</button>
{:else if $geopermission === "denied"}
<button class="disabled flex w-full items-center gap-x-2">
<ToSvelte construct={Svg.location_refused_svg().SetClass("w-8 h-8")} />
<Location_refused class="w-8 h-8"/>
<Tr t={Translations.t.general.geopermissionDenied} />
</button>
{:else}
<button class="disabled flex w-full items-center gap-x-2">
<ToSvelte
construct={Svg.crosshair_svg()
.SetClass("w-8 h-8")
.SetStyle("animation: 3s linear 0s infinite normal none running spin;")}
/>
<Crosshair class="w-8 h-8" style="animation: 3s linear 0s infinite normal none running spin;" />
<Tr t={Translations.t.general.waitingForLocation} />
</button>
{/if}

3
src/UI/InputElement/Helpers/DirectionInput.svelte
View file

@ -6,6 +6,7 @@
import MaplibreMap from "../../Map/MaplibreMap.svelte"
import ToSvelte from "../../Base/ToSvelte.svelte"
import Svg from "../../../Svg.js"
import Direction_stroke from "../../../assets/svg/Direction_stroke.svelte";
/**
* A visualisation to pick a direction on a map background.
@ -67,6 +68,6 @@
</div>
<div bind:this={directionElem} class="absolute top-0 left-0 h-full w-full">
<ToSvelte construct={Svg.direction_stroke_svg} />
<Direction_stroke/>
</div>
</div>

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

@ -85,8 +85,6 @@
<Checkmark {color} />
{:else if icon === "help"}
<Help {color} />
{:else if icon === "clock"}
<Clock {color} />
{:else if icon === "close"}
<Close {color} />
{:else if icon === "invalid"}

9
src/UI/Reviews/StarElement.svelte
View file

@ -2,6 +2,9 @@
import ToSvelte from "../Base/ToSvelte.svelte"
import Svg from "../../Svg"
import { createEventDispatcher } from "svelte"
import Star from "../../assets/svg/Star.svelte";
import Star_half from "../../assets/svg/Star_half.svelte";
import Star_outline from "../../assets/svg/Star_outline.svelte";
export let score: number
export let cutoff: number
@ -23,10 +26,10 @@
on:mousemove={(e) => dispatch("hover", { score: getScore(e) })}
>
{#if score >= cutoff}
<ToSvelte construct={Svg.star_svg().SetClass(starSize)} />
<Star class={starSize}/>
{:else if score + 10 >= cutoff}
<ToSvelte construct={Svg.star_half_svg().SetClass(starSize)} />
<Star_half class={starSize}/>
{:else}
<ToSvelte construct={Svg.star_outline_svg().SetClass(starSize)} />
<Star_outline class={starSize}/>
{/if}
</div>

23
src/UI/StylesheetTestGui.svelte
View file

@ -2,6 +2,7 @@
import Svg from "../Svg";
import Loading from "./Base/Loading.svelte";
import ToSvelte from "./Base/ToSvelte.svelte";
import Community from "../assets/svg/Community.svelte";
</script>
<div>
@ -40,16 +41,16 @@
<div class="flex">
<button class="primary">
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
<Community class="w-6 h-6" />
Main action
</button>
<button class="primary disabled">
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
<Community class="w-6 h-6" />
Main action (disabled)
</button>
<button class="small">
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
<Community class="w-6 h-6" />
Small button
</button>
@ -59,11 +60,11 @@
</div>
<div class="flex">
<button>
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
<Community class="w-6 h-6" />
Secondary action
</button>
<button class="disabled">
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
<Community class="w-6 h-6" />
Secondary action (disabled)
</button>
</div>
@ -82,7 +83,7 @@
</label>
<label for="javascript">
<input id="javascript" name="fav_language" type="radio" value="JavaScript" />
<ToSvelte construct={Svg.community_svg().SetClass("w-8 h-8")} />
<Community class="w-8 h-8"/>
JavaScript
</label>
</div>
@ -106,26 +107,26 @@
<div class="flex">
<button class="primary">
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
<Community class="w-6 h-6" />
Main action
</button>
<button class="primary disabled">
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
<Community class="w-6 h-6" />
Main action (disabled)
</button>
<button class="small">
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
<Community class="w-6 h-6" />
Small button
</button>
</div>
<div class="flex">
<button>
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
<Community class="w-6 h-6" />
Secondary action
</button>
<button class="disabled">
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
<Community class="w-6 h-6" />
Secondary action (disabled)
</button>
</div>

10
src/UI/ThemeViewGUI.svelte
View file

@ -36,7 +36,6 @@
import LevelSelector from "./BigComponents/LevelSelector.svelte";
import ExtraLinkButton from "./BigComponents/ExtraLinkButton";
import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte";
import Svg from "../Svg";
import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte";
import type { RasterLayerPolygon } from "../Models/RasterLayers";
import { AvailableRasterLayers } from "../Models/RasterLayers";
@ -62,6 +61,9 @@
import Filter from "../assets/svg/Filter.svelte";
import Add from "../assets/svg/Add.svelte";
import Statistics from "../assets/svg/Statistics.svelte";
import Community from "../assets/svg/Community.svelte";
import Download from "../assets/svg/Download.svelte";
import Share from "../assets/svg/Share.svelte";
export let state: ThemeViewState;
let layout = state.layout;
@ -371,7 +373,7 @@
<div class="flex" slot="title2">
<If condition={state.featureSwitches.featureSwitchEnableExport}>
<ToSvelte construct={Svg.download_svg().SetClass("w-4 h-4")} />
<Download class="w-4 h-4"/>
<Tr t={Translations.t.general.download.title} />
</If>
</div>
@ -386,7 +388,7 @@
<ToSvelte construct={() => new CopyrightPanel(state)} slot="content3" />
<div class="flex" slot="title4">
<ToSvelte construct={Svg.share_svg().SetClass("w-4 h-4")} />
<Share class="w-4 h-4"/>
<Tr t={Translations.t.general.sharescreen.title} />
</div>
<div class="m-2" slot="content4">
@ -492,7 +494,7 @@
</div>
<div class="flex" slot="title2">
<ToSvelte construct={Svg.community_svg().SetClass("w-6 h-6")} />
<Community class="w-6 h-6"/>
<Tr t={Translations.t.communityIndex.title} />
</div>
<div class="m-2" slot="content2">