diff --git a/scripts/generateIncludedImages.ts b/scripts/generateIncludedImages.ts index a497d58ac..0798c7fe3 100644 --- a/scripts/generateIncludedImages.ts +++ b/scripts/generateIncludedImages.ts @@ -6,68 +6,99 @@ function genImages(dryrun = false) { const blacklist: string[] = [ "add", "addSmall", + "back", + "blocked", + "brick_wall", + "brick_wall_raw", + "brick_wall_round", "brick_wall_square", + "bug", + "center", + "checkmark", "clock", + "close", "community", + "compass", + "compass_arrow", + "confirm", "copyright", "cross", "cross_bottom_right", + "crosshair", "crosshair_locked", + "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", - "triangle", - "teardrop_with_hole_green", - "SocialImageForeground", - "wikipedia", - "Upload", - "pin", - "mapillary_black", - "plantnet_logo", - "mastodon", - "move-arrows", - "mapcomplete_logo", - "logo", - "logout", - "hand", - "help", - "home", - "reload", - "min", - "plus", - "not_found", - "osm_logo_us", - "party", + "eye", "filter", "filter_disable", "floppy", - "eye", "gear", "gender_bi", - "compass", - "blocked", - "brick_wall", - "brick_wall_raw", - "brick_wall_round", - "bug", - "back", + "gender_inter", + "gender_female", + "gender_male", + "gender_trans", + "gender_queer", + "generic_map", + "gps_arrow", + "hand", + "help", + "home", + "length_crosshair", + "length-crosshair", + "liberapay", + "location", + "location_empty", + "location_locked", + "location_refused", + "location-refused", + "location_unlocked", + "logo", + "logout", + "mapcomplete_logo", + "mapillary", + "mapillary_black", + "mastodon", + "min", + "move-arrows", + "move_confirm", + "move_not_allowed", + "not_found", + "osm_logo_us", + "osm-logo-us", + "party", "person", + "pin", + "plantnet_logo", + "plus", + "reload", + "ring", + "robot", + "SocialImageForeground", + "speech_bubble_black_outline", + "square", + "star", + "star_half", + "star_outline", + "teardrop", + "teardrop_with_hole_green", + "translate", + "triangle", + "Upload", + "wikidata", + "wikimedia-commons-white", + "wikimedia_commons_white", + "wikipedia", ].map((s) => s.toLowerCase()) const dir = fs.readdirSync("./assets/svg") let module = - 'import Img from "./UI/Base/Img";\nimport {FixedUiElement} from "./UI/Base/FixedUiElement";\n\n/* @deprecated */\nexport default class Svg {\n\n\n' + 'import Img from "./UI/Base/Img";\n\n/* @deprecated */\nexport default class Svg {\n\n\n' for (const path of dir) { if (path.endsWith("license_info.json")) { continue diff --git a/src/Logic/ImageProviders/WikidataImageProvider.ts b/src/Logic/ImageProviders/WikidataImageProvider.ts index 19dcbcbf5..6de5039b4 100644 --- a/src/Logic/ImageProviders/WikidataImageProvider.ts +++ b/src/Logic/ImageProviders/WikidataImageProvider.ts @@ -1,13 +1,11 @@ import ImageProvider, { ProvidedImage } from "./ImageProvider" import BaseUIElement from "../../UI/BaseUIElement" -import Svg from "../../Svg" import { WikimediaImageProvider } from "./WikimediaImageProvider" import Wikidata from "../Web/Wikidata" +import SvelteUIElement from "../../UI/Base/SvelteUIElement" +import * as Wikidata_icon from "../../assets/svg/Wikidata.svelte" export class WikidataImageProvider extends ImageProvider { - public apiUrls(): string[] { - return Wikidata.neededUrls - } public static readonly singleton = new WikidataImageProvider() public readonly defaultKeyPrefixes = ["wikidata"] @@ -15,8 +13,12 @@ export class WikidataImageProvider extends ImageProvider { super() } + public apiUrls(): string[] { + return Wikidata.neededUrls + } + public SourceIcon(): BaseUIElement { - return Svg.wikidata_svg() + return new SvelteUIElement(Wikidata_icon) } public async ExtractUrls(key: string, value: string): Promise[]> { diff --git a/src/Logic/ImageProviders/WikimediaImageProvider.ts b/src/Logic/ImageProviders/WikimediaImageProvider.ts index b2c82dc9e..cc0d1dadd 100644 --- a/src/Logic/ImageProviders/WikimediaImageProvider.ts +++ b/src/Logic/ImageProviders/WikimediaImageProvider.ts @@ -4,6 +4,8 @@ import Svg from "../../Svg" import { Utils } from "../../Utils" import { LicenseInfo } from "./LicenseInfo" import Wikimedia from "../Web/Wikimedia" +import SvelteUIElement from "../../UI/Base/SvelteUIElement" +import Wikimedia_commons_white from "../../assets/svg/Wikimedia_commons_white.svelte" /** * This module provides endpoints for wikimedia and others @@ -70,7 +72,7 @@ export class WikimediaImageProvider extends ImageProvider { } SourceIcon(): BaseUIElement { - return Svg.wikimedia_commons_white_svg().SetStyle("width:2em;height: 2em") + return new SvelteUIElement(Wikimedia_commons_white).SetStyle("width:2em;height: 2em") } public PrepUrl(value: string): ProvidedImage { diff --git a/src/UI/Base/LinkToWeblate.ts b/src/UI/Base/LinkToWeblate.ts index 332fdb0e8..0672c0903 100644 --- a/src/UI/Base/LinkToWeblate.ts +++ b/src/UI/Base/LinkToWeblate.ts @@ -2,6 +2,8 @@ import { VariableUiElement } from "./VariableUIElement" import Locale from "../i18n/Locale" import Link from "./Link" import Svg from "../../Svg" +import SvelteUIElement from "./SvelteUIElement" +import Translate from "../../assets/svg/Translate.svelte" /** * The little 'translate'-icon next to every icon + some static helper functions @@ -20,7 +22,7 @@ export default class LinkToWeblate extends VariableUiElement { if (context === undefined || context.indexOf(":") < 0) { return undefined } - const icon = Svg.translate_svg().SetClass( + const icon = new SvelteUIElement(Translate).SetClass( "rounded-full inline-block w-3 h-3 ml-1 weblate-link self-center" ) if (availableTranslations[ln] === undefined) { diff --git a/src/UI/BigComponents/UploadTraceToOsmUI.ts b/src/UI/BigComponents/UploadTraceToOsmUI.ts index 2b281ee06..aec4fc7e2 100644 --- a/src/UI/BigComponents/UploadTraceToOsmUI.ts +++ b/src/UI/BigComponents/UploadTraceToOsmUI.ts @@ -7,13 +7,15 @@ import { TextField } from "../Input/TextField" import { Store, UIEventSource } from "../../Logic/UIEventSource" import Title from "../Base/Title" import { SubtleButton } from "../Base/SubtleButton" -import Svg from "../../Svg" import { OsmConnection } from "../../Logic/Osm/OsmConnection" import LayoutConfig from "../../Models/ThemeConfig/LayoutConfig" import { Translation } from "../i18n/Translation" import { LoginToggle } from "../Popup/LoginButton" import SvelteUIElement from "../Base/SvelteUIElement" import Upload from "../../assets/svg/Upload.svelte" +import Close from "../../assets/svg/Close.svelte" +import Confirm from "../../assets/svg/Confirm.svelte" +import Invalid from "../../assets/svg/Invalid.svelte" export default class UploadTraceToOsmUI extends LoginToggle { constructor( @@ -80,7 +82,7 @@ export default class UploadTraceToOsmUI extends LoginToggle { t.meta.descriptionIntro, description, new Combine([ - new SubtleButton(Svg.close_svg(), Translations.t.general.cancel) + new SubtleButton(new SvelteUIElement(Close), Translations.t.general.cancel) .onClick(() => { clicked.setData(false) }) @@ -116,7 +118,7 @@ export default class UploadTraceToOsmUI extends LoginToggle { new Toggle( new Toggle( new Combine([ - Svg.confirm_svg().SetClass("w-12 h-12 mr-2"), + new SvelteUIElement(Confirm).SetClass("w-12 h-12 mr-2"), t.uploadFinished, ]).SetClass("flex p-2 rounded-xl border-2 subtle-border items-center"), new Toggle( @@ -129,7 +131,7 @@ export default class UploadTraceToOsmUI extends LoginToggle { uploadFinished ), new Combine([ - Svg.invalid_svg().SetClass("w-8 h-8 m-2"), + new SvelteUIElement(Invalid).SetClass("w-8 h-8 m-2"), t.gpxServiceOffline.SetClass("p-2"), ]).SetClass("flex border alert items-center"), state.osmConnection.gpxServiceIsOnline.map( diff --git a/src/UI/Popup/ImportButtons/ImportFlow.svelte b/src/UI/Popup/ImportButtons/ImportFlow.svelte index 415d4b897..fde9384c9 100644 --- a/src/UI/Popup/ImportButtons/ImportFlow.svelte +++ b/src/UI/Popup/ImportButtons/ImportFlow.svelte @@ -18,6 +18,7 @@ import Svg from "../../../Svg" import ToSvelte from "../../Base/ToSvelte.svelte" import { EyeIcon, EyeOffIcon } from "@rgossiaux/svelte-heroicons/solid" + import Confirm from "../../../assets/svg/Confirm.svelte" export let importFlow: ImportFlow let state = importFlow.state @@ -143,7 +144,7 @@ {#if importFlow.args.icon} {:else} - + {/if} diff --git a/src/UI/Popup/MoveWizardState.ts b/src/UI/Popup/MoveWizardState.ts index 5ffdf689b..709638660 100644 --- a/src/UI/Popup/MoveWizardState.ts +++ b/src/UI/Popup/MoveWizardState.ts @@ -1,4 +1,3 @@ -import Svg from "../../Svg" import { UIEventSource } from "../../Logic/UIEventSource" import Translations from "../i18n/Translations" import { Translation } from "../i18n/Translation" @@ -10,6 +9,9 @@ import { And } from "../../Logic/Tags/And" import { Tag } from "../../Logic/Tags/Tag" import { SpecialVisualizationState } from "../SpecialVisualization" import { Feature, Point } from "geojson" +import SvelteUIElement from "../Base/SvelteUIElement" +import Confirm from "../../assets/svg/Confirm.svelte" +import Relocation from "../../assets/svg/Relocation.svelte" export interface MoveReason { text: Translation | string @@ -32,10 +34,7 @@ export class MoveWizardState { constructor(id: string, options: MoveConfig, state: SpecialVisualizationState) { this._state = state - const t = Translations.t.move - this.reasons = MoveWizardState.initReasons(options) - if (this.reasons.length > 0) { this.checkIsAllowed(id) } @@ -49,7 +48,7 @@ export class MoveWizardState { reasons.push({ text: t.reasons.reasonRelocation, invitingText: t.inviteToMove.reasonRelocation, - icon: Svg.relocation_svg(), + icon: new SvelteUIElement(Relocation), changesetCommentValue: "relocated", lockBounds: false, background: undefined, @@ -63,7 +62,7 @@ export class MoveWizardState { reasons.push({ text: t.reasons.reasonInaccurate, invitingText: t.inviteToMove.reasonInaccurate, - icon: Svg.crosshair_svg(), + icon: new SvelteUIElement(Confirm), changesetCommentValue: "improve_accuracy", lockBounds: true, includeSearch: false, diff --git a/src/UI/Popup/Notes/CloseNoteButton.ts b/src/UI/Popup/Notes/CloseNoteButton.ts index 047e6508f..611169acb 100644 --- a/src/UI/Popup/Notes/CloseNoteButton.ts +++ b/src/UI/Popup/Notes/CloseNoteButton.ts @@ -9,6 +9,8 @@ import { LoginToggle } from ".././LoginButton" import { SpecialVisualization, SpecialVisualizationState } from "../../SpecialVisualization" import { UIEventSource } from "../../../Logic/UIEventSource" import Constants from "../../../Models/Constants" +import SvelteUIElement from "../../Base/SvelteUIElement" +import Checkmark from "../../../assets/svg/Checkmark.svelte" export class CloseNoteButton implements SpecialVisualization { public readonly funcName = "close_note" @@ -61,7 +63,7 @@ export class CloseNoteButton implements SpecialVisualization { zoomButton: string } = Utils.ParseVisArgs(this.args, args) - let icon = Svg.checkmark_svg() + let icon: BaseUIElement = new SvelteUIElement(Checkmark) if (params.icon !== "checkmark.svg" && (args[2] ?? "") !== "") { icon = new Img(args[1]) } diff --git a/src/UI/Popup/TagRendering/TagRenderingEditable.svelte b/src/UI/Popup/TagRendering/TagRenderingEditable.svelte index 797c2503b..f4d82d321 100644 --- a/src/UI/Popup/TagRendering/TagRenderingEditable.svelte +++ b/src/UI/Popup/TagRendering/TagRenderingEditable.svelte @@ -4,7 +4,7 @@ import type { Feature } from "geojson" import type { SpecialVisualizationState } from "../../SpecialVisualization" import TagRenderingAnswer from "./TagRenderingAnswer.svelte" - import { PencilAltIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid" + import { PencilAltIcon } from "@rgossiaux/svelte-heroicons/solid" import TagRenderingQuestion from "./TagRenderingQuestion.svelte" import { onDestroy } from "svelte" import Tr from "../../Base/Tr.svelte" @@ -32,7 +32,7 @@ onDestroy( tags.addCallbackD((tags) => { editMode = !config.IsKnown(tags) - }) + }), ) } diff --git a/src/UI/Wikipedia/WikidataPreviewBox.ts b/src/UI/Wikipedia/WikidataPreviewBox.ts index 41f2afb2c..16ed4ab04 100644 --- a/src/UI/Wikipedia/WikidataPreviewBox.ts +++ b/src/UI/Wikipedia/WikidataPreviewBox.ts @@ -9,9 +9,15 @@ import Combine from "../Base/Combine" import Img from "../Base/Img" import { WikimediaImageProvider } from "../../Logic/ImageProviders/WikimediaImageProvider" import Link from "../Base/Link" -import Svg from "../../Svg" import BaseUIElement from "../BaseUIElement" import { Utils } from "../../Utils" +import SvelteUIElement from "../Base/SvelteUIElement" +import * as Wikidata_icon from "../../assets/svg/Wikidata.svelte" +import Gender_male from "../../assets/svg/Gender_male.svelte" +import Gender_female from "../../assets/svg/Gender_female.svelte" +import Gender_inter from "../../assets/svg/Gender_inter.svelte" +import Gender_trans from "../../assets/svg/Gender_trans.svelte" +import Gender_queer from "../../assets/svg/Gender_queer.svelte" export default class WikidataPreviewBox extends VariableUiElement { private static isHuman = [{ p: 31 /*is a*/, q: 5 /* human */ }] @@ -28,22 +34,36 @@ export default class WikidataPreviewBox extends VariableUiElement { requires: WikidataPreviewBox.isHuman, property: "P21", display: new Map([ - ["Q6581097", () => Svg.gender_male_svg().SetStyle("width: 1rem; height: auto")], - ["Q6581072", () => Svg.gender_female_svg().SetStyle("width: 1rem; height: auto")], - ["Q1097630", () => Svg.gender_inter_svg().SetStyle("width: 1rem; height: auto")], + [ + "Q6581097", + () => new SvelteUIElement(Gender_male).SetStyle("width: 1rem; height: auto"), + ], + [ + "Q6581072", + () => new SvelteUIElement(Gender_female).SetStyle("width: 1rem; height: auto"), + ], + [ + "Q1097630", + () => new SvelteUIElement(Gender_inter).SetStyle("width: 1rem; height: auto"), + ], [ "Q1052281", () => - Svg.gender_trans_svg().SetStyle( + new SvelteUIElement(Gender_trans).SetStyle( "width: 1rem; height: auto" ) /*'transwomen'*/, ], [ "Q2449503", () => - Svg.gender_trans_svg().SetStyle("width: 1rem; height: auto") /*'transmen'*/, + new SvelteUIElement(Gender_trans).SetStyle( + "width: 1rem; height: auto" + ) /*'transmen'*/, + ], + [ + "Q48270", + () => new SvelteUIElement(Gender_queer).SetStyle("width: 1rem; height: auto"), ], - ["Q48270", () => Svg.gender_queer_svg().SetStyle("width: 1rem; height: auto")], ]), textMode: new Map([ ["Q6581097", "♂️"], @@ -116,7 +136,9 @@ export default class WikidataPreviewBox extends VariableUiElement { wikidata.id, options?.noImages ? wikidata.id - : Svg.wikidata_svg().SetStyle("width: 2.5rem").SetClass("block"), + : new SvelteUIElement(Wikidata_icon) + .SetStyle("width: 2.5rem") + .SetClass("block"), ]).SetClass("flex"), Wikidata.IdToArticle(wikidata.id), true