midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Chore: run prettier

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-06-14 20:44:01 +02:00
parent 6dc61ccb51
commit f0b007512b
52 changed files with 150 additions and 151 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
Logic/ExtraFunctions.ts
View file

@ -445,7 +445,7 @@ class GetParsed implements ExtraFunction {
} }
} }
export type ExtraFuncType = typeof ExtraFunctions.types[number] export type ExtraFuncType = (typeof ExtraFunctions.types)[number]
export class ExtraFunctions { export class ExtraFunctions {
static readonly intro = new Combine([ static readonly intro = new Combine([

2
Models/Constants.ts
View file

@ -1,7 +1,7 @@
import { Utils } from "../Utils" import { Utils } from "../Utils"
import * as meta from "../package.json" import * as meta from "../package.json"
export type PriviligedLayerType = typeof Constants.priviliged_layers[number] export type PriviligedLayerType = (typeof Constants.priviliged_layers)[number]
export default class Constants { export default class Constants {
public static vNumber = meta.version public static vNumber = meta.version

4
Models/MenuState.ts
View file

@ -4,8 +4,8 @@ import UserRelatedState from "../Logic/State/UserRelatedState"
import { Utils } from "../Utils" import { Utils } from "../Utils"
import { LocalStorageSource } from "../Logic/Web/LocalStorageSource" import { LocalStorageSource } from "../Logic/Web/LocalStorageSource"
export type ThemeViewTabStates = typeof MenuState._themeviewTabs[number] export type ThemeViewTabStates = (typeof MenuState._themeviewTabs)[number]
export type MenuViewTabStates = typeof MenuState._menuviewTabs[number] export type MenuViewTabStates = (typeof MenuState._menuviewTabs)[number]
/** /**
* Indicates if a menu is open, and if so, which tab is selected; * Indicates if a menu is open, and if so, which tab is selected;

2
Models/ThemeConfig/LayerConfig.ts
View file

@ -66,7 +66,7 @@ export default class LayerConfig extends WithContextLoader {
public readonly filters: FilterConfig[] public readonly filters: FilterConfig[]
public readonly filterIsSameAs: string public readonly filterIsSameAs: string
public readonly forceLoad: boolean public readonly forceLoad: boolean
public readonly syncSelection: typeof LayerConfig.syncSelectionAllowed[number] // this is a trick to conver a constant array of strings into a type union of these values public readonly syncSelection: (typeof LayerConfig.syncSelectionAllowed)[number] // this is a trick to conver a constant array of strings into a type union of these values
public readonly _needsFullNodeDatabase: boolean public readonly _needsFullNodeDatabase: boolean
public readonly popupInFloatover public readonly popupInFloatover

2
Models/ThemeViewState.ts
View file

@ -458,7 +458,7 @@ export default class ThemeViewState implements SpecialVisualizationState {
* Add the special layers to the map * Add the special layers to the map
*/ */
private drawSpecialLayers() { private drawSpecialLayers() {
type AddedByDefaultTypes = typeof Constants.added_by_default[number] type AddedByDefaultTypes = (typeof Constants.added_by_default)[number]
const empty = [] const empty = []
/** /**
* A listing which maps the layerId onto the featureSource * A listing which maps the layerId onto the featureSource

2
UI/Base/BackButton.svelte
View file

@ -15,6 +15,6 @@
on:click={() => dispatch("click")} on:click={() => dispatch("click")}
options={{ extraClasses: clss + " flex items-center" }} options={{ extraClasses: clss + " flex items-center" }}
> >
<ChevronLeftIcon class="w-12 h-12" slot="image" /> <ChevronLeftIcon class="h-12 w-12" slot="image" />
<slot slot="message" /> <slot slot="message" />
</SubtleButton> </SubtleButton>

2
UI/Base/DragInvitation.svelte
View file

@ -27,7 +27,7 @@
} }
</script> </script>
<div bind:this={mainElem} class="absolute bottom-0 right-0 w-full h-full"> <div bind:this={mainElem} class="absolute bottom-0 right-0 h-full w-full">
<div id="hand-container" class="pointer-events-none"> <div id="hand-container" class="pointer-events-none">
<img src="./assets/svg/hand.svg" /> <img src="./assets/svg/hand.svg" />
</div> </div>

6
UI/Base/FloatOver.svelte
View file

@ -9,17 +9,17 @@
</script> </script>
<div <div
class="absolute top-0 right-0 w-screen h-screen p-4 md:p-6" class="absolute top-0 right-0 h-screen w-screen p-4 md:p-6"
style="background-color: #00000088" style="background-color: #00000088"
> >
<div class="content normal-background"> <div class="content normal-background">
<div class="rounded-xl h-full"> <div class="h-full rounded-xl">
<slot /> <slot />
</div> </div>
<slot name="close-button"> <slot name="close-button">
<!-- The close button is placed _after_ the default slot in order to always paint it on top --> <!-- The close button is placed _after_ the default slot in order to always paint it on top -->
<div <div
class="w-8 h-8 absolute right-10 top-10 cursor-pointer" class="absolute right-10 top-10 h-8 w-8 cursor-pointer"
on:click={() => dispatch("close")} on:click={() => dispatch("close")}
> >
<XCircleIcon /> <XCircleIcon />

4
UI/Base/Loading.svelte
View file

@ -3,8 +3,8 @@
import Svg from "../../Svg" import Svg from "../../Svg"
</script> </script>
<div class="pl-2 p-1 flex"> <div class="flex p-1 pl-2">
<div class="animate-spin self-center w-6 h-6 min-w-6"> <div class="min-w-6 h-6 w-6 animate-spin self-center">
<ToSvelte construct={Svg.loading_svg()} /> <ToSvelte construct={Svg.loading_svg()} />
</div> </div>
<div class="ml-2"> <div class="ml-2">

4
UI/Base/LoginToggle.svelte
View file

@ -33,8 +33,8 @@
<Loading /> <Loading />
</slot> </slot>
{:else if $loadingStatus === "error"} {:else if $loadingStatus === "error"}
<div class="flex items-center alert max-w-64"> <div class="alert max-w-64 flex items-center">
<img src="./assets/svg/invalid.svg" class="w-8 h-8 m-2 shrink-0" /> <img src="./assets/svg/invalid.svg" class="m-2 h-8 w-8 shrink-0" />
<Tr t={offlineModes[$apiState]} /> <Tr t={offlineModes[$apiState]} />
</div> </div>
{:else if $loadingStatus === "logged-in"} {:else if $loadingStatus === "logged-in"}

2
UI/Base/MapControlButton.svelte
View file

@ -10,7 +10,7 @@
<button <button
on:click={(e) => dispatch("click", e)} on:click={(e) => dispatch("click", e)}
class={"rounded-full h-fit w-fit m-0.5 md:m-1 p-0.5 sm:p-1 pointer-events-auto " + cls} class={"pointer-events-auto m-0.5 h-fit w-fit rounded-full p-0.5 sm:p-1 md:m-1 " + cls}
> >
<slot /> <slot />
</button> </button>

6
UI/Base/ModalRight.svelte
View file

@ -9,13 +9,13 @@
</script> </script>
<div <div
class="absolute top-0 right-0 h-screen overflow-auto w-full md:w-6/12 lg:w-5/12 xl:w-4/12 drop-shadow-2xl" class="absolute top-0 right-0 h-screen w-full overflow-auto drop-shadow-2xl md:w-6/12 lg:w-5/12 xl:w-4/12"
style="max-width: 100vw; max-height: 100vh" style="max-width: 100vw; max-height: 100vh"
> >
<div class="flex flex-col m-0 normal-background"> <div class="normal-background m-0 flex flex-col">
<slot name="close-button"> <slot name="close-button">
<div <div
class="w-8 h-8 absolute right-10 top-10 cursor-pointer" class="absolute right-10 top-10 h-8 w-8 cursor-pointer"
on:click={() => dispatch("close")} on:click={() => dispatch("close")}
> >
<XCircleIcon /> <XCircleIcon />

4
UI/Base/NextButton.svelte
View file

@ -17,8 +17,8 @@
options={{ extraClasses: clss + " flex items-center" }} options={{ extraClasses: clss + " flex items-center" }}
> >
<slot name="image" slot="image" /> <slot name="image" slot="image" />
<div class="w-full flex justify-between items-center" slot="message"> <div class="flex w-full items-center justify-between" slot="message">
<slot /> <slot />
<ChevronRightIcon class="w-12 h-12" /> <ChevronRightIcon class="h-12 w-12" />
</div> </div>
</SubtleButton> </SubtleButton>

2
UI/Base/ShareButton.svelte
View file

@ -23,7 +23,7 @@
} }
</script> </script>
<button on:click={share} class="secondary w-8 h-8 m-0 p-0"> <button on:click={share} class="secondary m-0 h-8 w-8 p-0">
<slot name="content"> <slot name="content">
<ToSvelte construct={Svg.share_svg().SetClass("w-7 h-7 p-1")} /> <ToSvelte construct={Svg.share_svg().SetClass("w-7 h-7 p-1")} />
</slot> </slot>

8
UI/Base/TabbedGroup.svelte
View file

@ -16,9 +16,9 @@
} }
</script> </script>
<div class="tabbedgroup w-full h-full"> <div class="tabbedgroup h-full w-full">
<TabGroup <TabGroup
class="h-full w-full flex flex-col" class="flex h-full w-full flex-col"
defaultIndex={1} defaultIndex={1}
on:change={(e) => { on:change={(e) => {
if (e.detail >= 0) { if (e.detail >= 0) {
@ -26,7 +26,7 @@
} }
}} }}
> >
<div class="interactive flex items-center justify-between sticky top-0"> <div class="interactive sticky top-0 flex items-center justify-between">
<TabList class="flex flex-wrap"> <TabList class="flex flex-wrap">
{#if $$slots.title1} {#if $$slots.title1}
<Tab class={({ selected }) => "tab " + (selected ? "primary" : "")}> <Tab class={({ selected }) => "tab " + (selected ? "primary" : "")}>
@ -66,7 +66,7 @@
</TabList> </TabList>
<slot name="post-tablist" /> <slot name="post-tablist" />
</div> </div>
<div class="overflow-y-auto normal-background"> <div class="normal-background overflow-y-auto">
<TabPanels defaultIndex={$tab}> <TabPanels defaultIndex={$tab}>
<TabPanel> <TabPanel>
<slot name="content0"> <slot name="content0">

2
UI/Base/WeblateLink.svelte
View file

@ -17,7 +17,7 @@
<a <a
href={LinkToWeblate.hrefToWeblate($language, context)} href={LinkToWeblate.hrefToWeblate($language, context)}
target="_blank" target="_blank"
class="mx-1 weblate-link" class="weblate-link mx-1"
> >
<img src="./assets/svg/translate.svg" class="font-gray" /> <img src="./assets/svg/translate.svg" class="font-gray" />
</a> </a>

8
UI/BigComponents/BackgroundSwitcher.svelte
View file

@ -60,14 +60,14 @@
<div class="flex items-end opacity-50 hover:opacity-100"> <div class="flex items-end opacity-50 hover:opacity-100">
<div class="flex flex-col md:flex-row"> <div class="flex flex-col md:flex-row">
<button class="w-16 h-12 md:w-16 md:h-16 overflow-hidden m-0 p-0" on:click={use(raster0)}> <button class="m-0 h-12 w-16 overflow-hidden p-0 md:h-16 md:w-16" on:click={use(raster0)}>
<OverlayMap <OverlayMap
placedOverMap={normalMap} placedOverMap={normalMap}
placedOverMapProperties={mapproperties} placedOverMapProperties={mapproperties}
rasterLayer={raster0} rasterLayer={raster0}
/> />
</button> </button>
<button class="w-16 h-12 md:w-16 md:h-16 overflow-hidden m-0 p-0 " on:click={use(raster1)}> <button class="m-0 h-12 w-16 overflow-hidden p-0 md:h-16 md:w-16" on:click={use(raster1)}>
<OverlayMap <OverlayMap
placedOverMap={normalMap} placedOverMap={normalMap}
placedOverMapProperties={mapproperties} placedOverMapProperties={mapproperties}
@ -75,8 +75,8 @@
/> />
</button> </button>
</div> </div>
<div class="text-sm flex flex-col gap-y-1 h-fit ml-1"> <div class="ml-1 flex h-fit flex-col gap-y-1 text-sm">
<div class="low-interaction rounded p-1 w-64"> <div class="low-interaction w-64 rounded p-1">
<RasterLayerPicker <RasterLayerPicker
availableLayers={availableRasterLayers} availableLayers={availableRasterLayers}
value={mapproperties.rasterLayer} value={mapproperties.rasterLayer}

4
UI/BigComponents/ContactLink.svelte
View file

@ -29,9 +29,9 @@
<h3>{country?.nameEn}</h3> <h3>{country?.nameEn}</h3>
{/if} {/if}
{#each resources as resource} {#each resources as resource}
<div class="flex link-underline items-center my-4"> <div class="link-underline my-4 flex items-center">
<img <img
class="w-8 h-8 m-2" class="m-2 h-8 w-8"
src={`https://raw.githubusercontent.com/pietervdvn/MapComplete-data/main/community_index/${resource.type}.svg`} src={`https://raw.githubusercontent.com/pietervdvn/MapComplete-data/main/community_index/${resource.type}.svg`}
/> />
<div class="flex flex-col"> <div class="flex flex-col">

4
UI/BigComponents/Filterview.svelte
View file

@ -55,7 +55,7 @@
{#if filteredLayer.layerDef.name} {#if filteredLayer.layerDef.name}
<div bind:this={mainElem} class="mb-1.5"> <div bind:this={mainElem} class="mb-1.5">
<label class="flex gap-1 no-image-background"> <label class="no-image-background flex gap-1">
<Checkbox selected={isDisplayed} /> <Checkbox selected={isDisplayed} />
<If condition={filteredLayer.isDisplayed}> <If condition={filteredLayer.isDisplayed}>
<ToSvelte <ToSvelte
@ -78,7 +78,7 @@
</label> </label>
{#if $isDisplayed && filteredLayer.layerDef.filters?.length > 0} {#if $isDisplayed && filteredLayer.layerDef.filters?.length > 0}
<div id="subfilters" class="flex flex-col gap-y-1 ml-4"> <div id="subfilters" class="ml-4 flex flex-col gap-y-1">
{#each filteredLayer.layerDef.filters as filter} {#each filteredLayer.layerDef.filters as filter}
<div> <div>
<!-- There are three (and a half) modes of filters: a single checkbox, a radio button/dropdown or with searchable fields --> <!-- There are three (and a half) modes of filters: a single checkbox, a radio button/dropdown or with searchable fields -->

4
UI/BigComponents/Geosearch.svelte
View file

@ -91,7 +91,7 @@
} }
</script> </script>
<div class="flex normal-background rounded-full pl-2 justify-between"> <div class="normal-background flex justify-between rounded-full pl-2">
<form class="w-full"> <form class="w-full">
{#if isRunning} {#if isRunning}
<Loading>{Translations.t.general.search.searching}</Loading> <Loading>{Translations.t.general.search.searching}</Loading>
@ -110,7 +110,7 @@
/> />
{/if} {/if}
</form> </form>
<div class="w-6 h-6 self-end" on:click={performSearch}> <div class="h-6 w-6 self-end" on:click={performSearch}>
<ToSvelte construct={Svg.search_svg} /> <ToSvelte construct={Svg.search_svg} />
</div> </div>
</div> </div>

2
UI/BigComponents/MapillaryLink.svelte
View file

@ -20,7 +20,7 @@
}&z=${Math.max(($zoom ?? 2) - 1, 1)}` }&z=${Math.max(($zoom ?? 2) - 1, 1)}`
</script> </script>
<a class="flex button items-center" href={mapillaryLink} target="_blank"> <a class="button flex items-center" href={mapillaryLink} target="_blank">
<ToSvelte construct={() => Svg.mapillary_black_svg().SetClass("w-12 h-12 m-2 mr-4 shrink-0")} /> <ToSvelte construct={() => Svg.mapillary_black_svg().SetClass("w-12 h-12 m-2 mr-4 shrink-0")} />
<div class="flex flex-col"> <div class="flex flex-col">
<Tr t={Translations.t.general.attribution.openMapillary} /> <Tr t={Translations.t.general.attribution.openMapillary} />

2
UI/BigComponents/OpenBackgroundSelectorButton.svelte
View file

@ -7,5 +7,5 @@
</script> </script>
<MapControlButton on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}> <MapControlButton on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}>
<Square3Stack3dIcon class="w-6 h-6" /> <Square3Stack3dIcon class="h-6 w-6" />
</MapControlButton> </MapControlButton>

4
UI/BigComponents/OpenIdEditor.svelte
View file

@ -26,7 +26,7 @@
}/${$location?.lon ?? 0}` }/${$location?.lon ?? 0}`
</script> </script>
<a class="flex button items-center" target="_blank" href={idLink}> <a class="button flex items-center" target="_blank" href={idLink}>
<PencilIcon class="w-12 h-12 p-2 pr-4" /> <PencilIcon class="h-12 w-12 p-2 pr-4" />
<Tr t={Translations.t.general.attribution.editId} /> <Tr t={Translations.t.general.attribution.editId} />
</a> </a>

8
UI/BigComponents/SelectedElementTitle.svelte
View file

@ -33,7 +33,7 @@
<Tr t={Translations.t.delete.isDeleted} /> <Tr t={Translations.t.delete.isDeleted} />
{:else} {:else}
<div <div
class="flex border-b-2 border-black drop-shadow-md justify-between items-center low-interaction px-3" class="low-interaction flex items-center justify-between border-b-2 border-black px-3 drop-shadow-md"
> >
<div class="flex flex-col"> <div class="flex flex-col">
<!-- Title element--> <!-- Title element-->
@ -42,11 +42,11 @@
</h3> </h3>
<div <div
class="no-weblate title-icons flex flex-row flex-wrap pt-0.5 sm:pt-1 items-center mr-2 gap-x-0.5 p-1 links-as-button" class="no-weblate title-icons links-as-button mr-2 flex flex-row flex-wrap items-center gap-x-0.5 p-1 pt-0.5 sm:pt-1"
> >
{#each layer.titleIcons as titleIconConfig} {#each layer.titleIcons as titleIconConfig}
{#if (titleIconConfig.condition?.matchesProperties(_tags) ?? true) && (titleIconConfig.metacondition?.matchesProperties( { ..._metatags, ..._tags } ) ?? true) && titleIconConfig.IsKnown(_tags)} {#if (titleIconConfig.condition?.matchesProperties(_tags) ?? true) && (titleIconConfig.metacondition?.matchesProperties( { ..._metatags, ..._tags } ) ?? true) && titleIconConfig.IsKnown(_tags)}
<div class="w-8 h-8 flex items-center"> <div class="flex h-8 w-8 items-center">
<TagRenderingAnswer <TagRenderingAnswer
config={titleIconConfig} config={titleIconConfig}
{tags} {tags}
@ -61,7 +61,7 @@
</div> </div>
</div> </div>
<XCircleIcon <XCircleIcon
class="w-8 h-8 cursor-pointer" class="h-8 w-8 cursor-pointer"
on:click={() => state.selectedElement.setData(undefined)} on:click={() => state.selectedElement.setData(undefined)}
/> />
</div> </div>

2
UI/BigComponents/SelectedElementView.svelte
View file

@ -35,7 +35,7 @@
<Tr t={Translations.t.general.returnToTheMap} /> <Tr t={Translations.t.general.returnToTheMap} />
</button> </button>
{:else} {:else}
<div class="flex flex-col overflow-y-auto p-1 px-2 gap-y-2"> <div class="flex flex-col gap-y-2 overflow-y-auto p-1 px-2">
{#each layer.tagRenderings as config (config.id)} {#each layer.tagRenderings as config (config.id)}
{#if (config.condition === undefined || config.condition.matchesProperties(_tags)) && (config.metacondition === undefined || config.metacondition.matchesProperties( { ..._tags, ..._metatags } ))} {#if (config.condition === undefined || config.condition.matchesProperties(_tags)) && (config.metacondition === undefined || config.metacondition.matchesProperties( { ..._tags, ..._metatags } ))}
{#if config.IsKnown(_tags)} {#if config.IsKnown(_tags)}

4
UI/BigComponents/ThemeButton.svelte
View file

@ -72,8 +72,8 @@
{#if theme.id !== personal.id || $userDetails.csCount > Constants.userJourney.personalLayoutUnlock} {#if theme.id !== personal.id || $userDetails.csCount > Constants.userJourney.personalLayoutUnlock}
<SubtleLink href={$href} options={{ extraClasses: "w-full" }}> <SubtleLink href={$href} options={{ extraClasses: "w-full" }}>
<img slot="image" src={theme.icon} class="block h-11 w-11 mx-4" alt="" /> <img slot="image" src={theme.icon} class="mx-4 block h-11 w-11" alt="" />
<span class="flex flex-col text-ellipsis overflow-hidden"> <span class="flex flex-col overflow-hidden text-ellipsis">
<Tr t={title} /> <Tr t={title} />
<span class="subtle max-h-12 truncate text-ellipsis"> <span class="subtle max-h-12 truncate text-ellipsis">
<Tr t={description} /> <Tr t={description} />

10
UI/BigComponents/ThemeIntroPanel.svelte
View file

@ -50,20 +50,20 @@ loginStatus.SetClass("block mt-6 pt-2 md:border-t-2 border-dotted border-gray-40
--> -->
<Tr t={layout.descriptionTail} /> <Tr t={layout.descriptionTail} />
<NextButton clss="primary w-full" on:click={() => state.guistate.themeIsOpened.setData(false)}> <NextButton clss="primary w-full" on:click={() => state.guistate.themeIsOpened.setData(false)}>
<div class="flex justify-center w-full text-2xl"> <div class="flex w-full justify-center text-2xl">
<Tr t={Translations.t.general.openTheMap} /> <Tr t={Translations.t.general.openTheMap} />
</div> </div>
</NextButton> </NextButton>
<div class="flex w-full flex-wrap sm:flex-nowrap"> <div class="flex w-full flex-wrap sm:flex-nowrap">
<IfNot condition={state.geolocation.geolocationState.permission.map((p) => p === "denied")}> <IfNot condition={state.geolocation.geolocationState.permission.map((p) => p === "denied")}>
<button class="flex w-full gap-x-2 items-center" on:click={jumpToCurrentLocation}> <button class="flex w-full items-center gap-x-2" on:click={jumpToCurrentLocation}>
<ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")} /> <ToSvelte construct={Svg.crosshair_svg().SetClass("w-8 h-8")} />
<Tr t={Translations.t.general.openTheMapAtGeolocation} /> <Tr t={Translations.t.general.openTheMapAtGeolocation} />
</button> </button>
</IfNot> </IfNot>
<div class="flex gap-x-2 items-center w-full border rounded .button p-2 m-1 low-interaction"> <div class=".button low-interaction m-1 flex w-full items-center gap-x-2 rounded border p-2">
<div class="w-full"> <div class="w-full">
<Geosearch <Geosearch
bounds={state.mapProperties.bounds} bounds={state.mapProperties.bounds}
@ -78,11 +78,11 @@ loginStatus.SetClass("block mt-6 pt-2 md:border-t-2 border-dotted border-gray-40
/> />
</div> </div>
<button <button
class={"flex gap-x-2 justify-between items-center " + (searchEnabled ? "" : "disabled")} class={"flex items-center justify-between gap-x-2 " + (searchEnabled ? "" : "disabled")}
on:click={() => triggerSearch.ping()} on:click={() => triggerSearch.ping()}
> >
<Tr t={Translations.t.general.search.searchShort} /> <Tr t={Translations.t.general.search.searchShort} />
<SearchIcon class="w-6 h-6" /> <SearchIcon class="h-6 w-6" />
</button> </button>
</div> </div>
</div> </div>

2
UI/BigComponents/ThemesList.svelte
View file

@ -21,7 +21,7 @@
<section class="w-full"> <section class="w-full">
<slot name="title" /> <slot name="title" />
{#if onMainScreen} {#if onMainScreen}
<div class="md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="gap-4 md:grid md:grid-flow-row md:grid-cols-2 lg:grid-cols-3">
{#each filteredThemes as theme (theme.id)} {#each filteredThemes as theme (theme.id)}
{#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)} {#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)}
<ThemeButton {theme} {isCustom} userDetails={state.osmConnection.userDetails} {state} /> <ThemeButton {theme} {isCustom} userDetails={state.osmConnection.userDetails} {state} />

10
UI/BigComponents/UserProfile.svelte
View file

@ -24,11 +24,11 @@
) )
</script> </script>
<div class="flex border border-gray-600 border-dashed m-1 p-1 rounded-md link-underline"> <div class="link-underline m-1 flex rounded-md border border-dashed border-gray-600 p-1">
{#if $userdetails.img} {#if $userdetails.img}
<img src={$userdetails.img} class="rounded-full w-12 h-12 m-4" /> <img src={$userdetails.img} class="m-4 h-12 w-12 rounded-full" />
{:else} {:else}
<UserCircleIcon class="w-12 h-12" /> <UserCircleIcon class="h-12 w-12" />
{/if} {/if}
<div class="flex flex-col"> <div class="flex flex-col">
<h3>{$userdetails.name}</h3> <h3>{$userdetails.name}</h3>
@ -39,13 +39,13 @@
target="_blank" target="_blank"
class="link-no-underline flex items-center self-end" class="link-no-underline flex items-center self-end"
> >
<PencilAltIcon slot="image" class="p-2 w-8 h-8" /> <PencilAltIcon slot="image" class="h-8 w-8 p-2" />
<Tr slot="message" t={Translations.t.userinfo.editDescription} /> <Tr slot="message" t={Translations.t.userinfo.editDescription} />
</a> </a>
{:else} {:else}
<Tr t={Translations.t.userinfo.noDescription} /> <Tr t={Translations.t.userinfo.noDescription} />
<a href={osmConnection.Backend() + "/profile/edit"} target="_blank" class="flex items-center"> <a href={osmConnection.Backend() + "/profile/edit"} target="_blank" class="flex items-center">
<PencilAltIcon slot="image" class="p-2 w-8 h-8" /> <PencilAltIcon slot="image" class="h-8 w-8 p-2" />
<Tr slot="message" t={Translations.t.userinfo.noDescriptionCallToAction} /> <Tr slot="message" t={Translations.t.userinfo.noDescriptionCallToAction} />
</a> </a>
{/if} {/if}

2
UI/BigComponents/WaySplitMap.svelte
View file

@ -101,6 +101,6 @@
}) })
</script> </script>
<div class="w-full h-full"> <div class="h-full w-full">
<MaplibreMap {map} /> <MaplibreMap {map} />
</div> </div>

2
UI/DownloadFlow/DownloadButton.svelte
View file

@ -85,7 +85,7 @@
{:else} {:else}
<button class="flex w-full" on:click={clicked}> <button class="flex w-full" on:click={clicked}>
<slot name="image"> <slot name="image">
<ArrowDownTrayIcon class="w-12 h-12 mr-2 shrink-0" /> <ArrowDownTrayIcon class="mr-2 h-12 w-12 shrink-0" />
</slot> </slot>
<span class="flex flex-col items-start"> <span class="flex flex-col items-start">
<Tr t={mainText} /> <Tr t={mainText} />

2
UI/DownloadFlow/DownloadPanel.svelte
View file

@ -34,7 +34,7 @@
{#if $isLoading} {#if $isLoading}
<Loading /> <Loading />
{:else} {:else}
<div class="w-full flex flex-col" /> <div class="flex w-full flex-col" />
<h3> <h3>
<Tr t={t.title} /> <Tr t={t.title} />
</h3> </h3>

6
UI/InputElement/Helpers/DirectionInput.svelte
View file

@ -41,7 +41,7 @@
<div <div
bind:this={mainElem} bind:this={mainElem}
class="relative w-48 h-48 cursor-pointer overflow-hidden" class="relative h-48 w-48 cursor-pointer overflow-hidden"
on:click={(e) => onPosChange(e.x, e.y)} on:click={(e) => onPosChange(e.x, e.y)}
on:mousedown={(e) => { on:mousedown={(e) => {
isDown = true isDown = true
@ -58,11 +58,11 @@
on:touchmove={(e) => onPosChange(e.touches[0].clientX, e.touches[0].clientY)} on:touchmove={(e) => onPosChange(e.touches[0].clientX, e.touches[0].clientY)}
on:touchstart={(e) => onPosChange(e.touches[0].clientX, e.touches[0].clientY)} on:touchstart={(e) => onPosChange(e.touches[0].clientX, e.touches[0].clientY)}
> >
<div class="w-full h-full absolute top-0 left-0 cursor-pointer"> <div class="absolute top-0 left-0 h-full w-full cursor-pointer">
<MaplibreMap {map} attribution={false} /> <MaplibreMap {map} attribution={false} />
</div> </div>
<div bind:this={directionElem} class="absolute w-full h-full top-0 left-0"> <div bind:this={directionElem} class="absolute top-0 left-0 h-full w-full">
<ToSvelte construct={Svg.direction_stroke_svg} /> <ToSvelte construct={Svg.direction_stroke_svg} />
</div> </div>
</div> </div>

4
UI/InputElement/Helpers/FloorSelector.svelte
View file

@ -102,11 +102,11 @@
class="relative" class="relative"
style={`height: calc(${HEIGHT}px * ${$floors.length}); width: 96px`} style={`height: calc(${HEIGHT}px * ${$floors.length}); width: 96px`}
> >
<div class="h-full absolute w-min right-0"> <div class="absolute right-0 h-full w-min">
{#each $floors as floor, i} {#each $floors as floor, i}
<button <button
style={`height: ${HEIGHT}px; width: ${HEIGHT}px`} style={`height: ${HEIGHT}px; width: ${HEIGHT}px`}
class={"m-0 border-2 border-gray-300 flex content-box justify-center items-center " + class={"content-box m-0 flex items-center justify-center border-2 border-gray-300 " +
(i === (forceIndex ?? $index) ? "selected" : "")} (i === (forceIndex ?? $index) ? "selected" : "")}
on:click={() => { on:click={() => {
forceIndex = i forceIndex = i

6
UI/InputElement/Helpers/LocationInput.svelte
View file

@ -76,13 +76,13 @@
} }
</script> </script>
<div class="relative h-full min-h-32 cursor-pointer overflow-hidden"> <div class="min-h-32 relative h-full cursor-pointer overflow-hidden">
<div class="w-full h-full absolute top-0 left-0 cursor-pointer"> <div class="absolute top-0 left-0 h-full w-full cursor-pointer">
<MaplibreMap {map} /> <MaplibreMap {map} />
</div> </div>
<div <div
class="w-full h-full absolute top-0 left-0 p-8 pointer-events-none opacity-50 flex items-center" class="pointer-events-none absolute top-0 left-0 flex h-full w-full items-center p-8 opacity-50"
> >
<img class="h-full max-h-24" src="./assets/svg/move-arrows.svg" /> <img class="h-full max-h-24" src="./assets/svg/move-arrows.svg" />
</div> </div>

2
UI/InputElement/ValidatedInput.svelte
View file

@ -106,7 +106,7 @@
placeholder={_placeholder} placeholder={_placeholder}
/> />
{#if !$isValid} {#if !$isValid}
<ExclamationIcon class="h-6 w-6 -ml-6" /> <ExclamationIcon class="-ml-6 h-6 w-6" />
{/if} {/if}
{#if unit !== undefined} {#if unit !== undefined}

2
UI/InputElement/Validators.ts
View file

@ -19,7 +19,7 @@ import BaseUIElement from "../BaseUIElement"
import Combine from "../Base/Combine" import Combine from "../Base/Combine"
import Title from "../Base/Title" import Title from "../Base/Title"
export type ValidatorType = typeof Validators.availableTypes[number] export type ValidatorType = (typeof Validators.availableTypes)[number]
export default class Validators { export default class Validators {
public static readonly availableTypes = [ public static readonly availableTypes = [

4
UI/Map/RasterLayerOverview.svelte
View file

@ -50,14 +50,14 @@
} }
</script> </script>
<div class="h-full flex flex-col"> <div class="flex h-full flex-col">
<slot name="title"> <slot name="title">
<h2> <h2>
<Tr t={Translations.t.general.backgroundMap} /> <Tr t={Translations.t.general.backgroundMap} />
</h2> </h2>
</slot> </slot>
<div class="grid grid-cols-1 md:grid-cols-2 gap-2 h-full w-full"> <div class="grid h-full w-full grid-cols-1 gap-2 md:grid-cols-2">
<RasterLayerPicker <RasterLayerPicker
availableLayers={photoLayers} availableLayers={photoLayers}
favourite={getPref("photo")} favourite={getPref("photo")}

4
UI/Map/RasterLayerPicker.svelte
View file

@ -66,13 +66,13 @@
</script> </script>
{#if hasLayers} {#if hasLayers}
<div class="h-full w-full flex flex-col"> <div class="flex h-full w-full flex-col">
<button <button
on:click={() => { on:click={() => {
mapproperties.rasterLayer.setData(rasterLayer.data) mapproperties.rasterLayer.setData(rasterLayer.data)
dispatch("appliedLayer") dispatch("appliedLayer")
}} }}
class="w-full h-full m-0 p-0" class="m-0 h-full w-full p-0"
> >
<OverlayMap <OverlayMap
rasterLayer={rasterLayerOnMap} rasterLayer={rasterLayerOnMap}

2
UI/Map/ShowDataLayer.ts
View file

@ -240,7 +240,7 @@ class LineRenderingLayer {
*/ */
private calculatePropsFor( private calculatePropsFor(
properties: Record<string, string> properties: Record<string, string>
): Partial<Record<typeof LineRenderingLayer.lineConfigKeys[number], string>> { ): Partial<Record<(typeof LineRenderingLayer.lineConfigKeys)[number], string>> {
const config = this._config const config = this._config
const calculatedProps: Record<string, string | number> = {} const calculatedProps: Record<string, string | number> = {}

22
UI/Popup/AddNewPoint/AddNewPoint.svelte
View file

@ -167,7 +167,7 @@
/> />
{:else if !$layerIsDisplayed} {:else if !$layerIsDisplayed}
<!-- Check that the layer is enabled, so that we don't add a duplicate --> <!-- Check that the layer is enabled, so that we don't add a duplicate -->
<div class="alert flex justify-center items-center"> <div class="alert flex items-center justify-center">
<EyeOffIcon class="w-8" /> <EyeOffIcon class="w-8" />
<Tr <Tr
t={Translations.t.general.add.layerNotEnabled.Subs({ layer: selectedPreset.layer.name })} t={Translations.t.general.add.layerNotEnabled.Subs({ layer: selectedPreset.layer.name })}
@ -187,7 +187,7 @@
</button> </button>
<button <button
class="flex w-full gap-x-1 primary" class="primary flex w-full gap-x-1"
on:click={() => { on:click={() => {
layerIsDisplayed.setData(true) layerIsDisplayed.setData(true)
abort() abort()
@ -199,13 +199,13 @@
</div> </div>
{:else if $layerHasFilters} {:else if $layerHasFilters}
<!-- Some filters are enabled. The feature to add might already be mapped, but hidden --> <!-- Some filters are enabled. The feature to add might already be mapped, but hidden -->
<div class="alert flex justify-center items-center"> <div class="alert flex items-center justify-center">
<EyeOffIcon class="w-8" /> <EyeOffIcon class="w-8" />
<Tr t={Translations.t.general.add.disableFiltersExplanation} /> <Tr t={Translations.t.general.add.disableFiltersExplanation} />
</div> </div>
<div class="flex flex-wrap-reverse md:flex-nowrap"> <div class="flex flex-wrap-reverse md:flex-nowrap">
<button <button
class="flex w-full gap-x-1 primary" class="primary flex w-full gap-x-1"
on:click={() => { on:click={() => {
abort() abort()
state.layerState.filteredLayers.get(selectedPreset.layer.id).disableAllFilters() state.layerState.filteredLayers.get(selectedPreset.layer.id).disableAllFilters()
@ -249,7 +249,7 @@
</h3> </h3>
<span class="flex flex-wrap items-stretch"> <span class="flex flex-wrap items-stretch">
{#each selectedPreset.preset.exampleImages as src} {#each selectedPreset.preset.exampleImages as src}
<img {src} class="h-64 m-1 w-auto rounded-lg" /> <img {src} class="m-1 h-64 w-auto rounded-lg" />
{/each} {/each}
</span> </span>
{/if} {/if}
@ -267,7 +267,7 @@
<NextButton on:click={() => (confirmedCategory = true)} clss="primary w-full"> <NextButton on:click={() => (confirmedCategory = true)} clss="primary w-full">
<div slot="image" class="relative"> <div slot="image" class="relative">
<FromHtml src={selectedPreset.icon} /> <FromHtml src={selectedPreset.icon} />
<img class="absolute bottom-0 right-0 w-4 h-4" src="./assets/svg/confirm.svg" /> <img class="absolute bottom-0 right-0 h-4 w-4" src="./assets/svg/confirm.svg" />
</div> </div>
<div class="w-full"> <div class="w-full">
<Tr t={selectedPreset.text} /> <Tr t={selectedPreset.text} />
@ -284,7 +284,7 @@
<img <img
slot="image" slot="image"
src={_globalFilter[checkedOfGlobalFilters].onNewPoint?.icon ?? "./assets/svg/confirm.svg"} src={_globalFilter[checkedOfGlobalFilters].onNewPoint?.icon ?? "./assets/svg/confirm.svg"}
class="w-12 h-12" class="h-12 w-12"
/> />
<Tr <Tr
slot="message" slot="message"
@ -299,12 +299,12 @@
abort() abort()
}} }}
> >
<img slot="image" src="./assets/svg/close.svg" class="w-8 h-8" /> <img slot="image" src="./assets/svg/close.svg" class="h-8 w-8" />
<Tr slot="message" t={Translations.t.general.cancel} /> <Tr slot="message" t={Translations.t.general.cancel} />
</SubtleButton> </SubtleButton>
{:else if !creating} {:else if !creating}
<div class="relative w-full p-1"> <div class="relative w-full p-1">
<div class="w-full h-96 max-h-screen rounded-xl overflow-hidden"> <div class="h-96 max-h-screen w-full overflow-hidden rounded-xl">
<NewPointLocationInput <NewPointLocationInput
value={preciseCoordinate} value={preciseCoordinate}
snappedTo={snappedToObject} snappedTo={snappedToObject}
@ -318,7 +318,7 @@
<MapControlButton <MapControlButton
on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)} on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
> >
<Square3Stack3dIcon class="w-6 h-6" /> <Square3Stack3dIcon class="h-6 w-6" />
</MapControlButton> </MapControlButton>
</div> </div>
</div> </div>
@ -328,7 +328,7 @@
</BackButton> </BackButton>
<NextButton on:click={confirm} clss="primary w-full"> <NextButton on:click={confirm} clss="primary w-full">
<div class="w-full flex justify-end gap-x-2"> <div class="flex w-full justify-end gap-x-2">
<Tr t={Translations.t.general.add.confirmLocation} /> <Tr t={Translations.t.general.add.confirmLocation} />
</div> </div>
</NextButton> </NextButton>

2
UI/Popup/AddNewPoint/PresetList.svelte
View file

@ -70,7 +70,7 @@
}>() }>()
</script> </script>
<div class="flex flex-col w-full"> <div class="flex w-full flex-col">
<h2 class="mr-12"> <h2 class="mr-12">
<!-- The title gets a big right margin to give place to the 'close'-button, see https://github.com/pietervdvn/MapComplete/issues/1445 --> <!-- The title gets a big right margin to give place to the 'close'-button, see https://github.com/pietervdvn/MapComplete/issues/1445 -->
<Tr t={Translations.t.general.add.intro} /> <Tr t={Translations.t.general.add.intro} />

8
UI/Popup/CreateNewNote.svelte
View file

@ -89,14 +89,14 @@
<Tr t={Translations.t.notes.noteLayerHasFilters} /> <Tr t={Translations.t.notes.noteLayerHasFilters} />
</div> </div>
<SubtleButton on:click={() => notelayer.disableAllFilters()}> <SubtleButton on:click={() => notelayer.disableAllFilters()}>
<img slot="image" src="./assets/svg/filter.svg" class="w-8 h-8 mr-4" /> <img slot="image" src="./assets/svg/filter.svg" class="mr-4 h-8 w-8" />
<Tr slot="message" t={Translations.t.notes.disableAllNoteFilters} /> <Tr slot="message" t={Translations.t.notes.disableAllNoteFilters} />
</SubtleButton> </SubtleButton>
</div> </div>
{:else} {:else}
<div> <div>
<Tr t={Translations.t.notes.createNoteIntro} /> <Tr t={Translations.t.notes.createNoteIntro} />
<div class="border rounded-sm border-grey-500"> <div class="border-grey-500 rounded-sm border">
<div class="w-full p-1"> <div class="w-full p-1">
<ValidatedInput type="text" value={comment} /> <ValidatedInput type="text" value={comment} />
</div> </div>
@ -110,7 +110,7 @@
{#if $comment.length >= 3} {#if $comment.length >= 3}
<SubtleButton on:click={uploadNote}> <SubtleButton on:click={uploadNote}>
<img slot="image" src="./assets/svg/addSmall.svg" class="w-8 h-8 mr-4" /> <img slot="image" src="./assets/svg/addSmall.svg" class="mr-4 h-8 w-8" />
<Tr slot="message" t={Translations.t.notes.createNote} /> <Tr slot="message" t={Translations.t.notes.createNote} />
</SubtleButton> </SubtleButton>
{:else} {:else}
@ -127,7 +127,7 @@
<Tr t={Translations.t.notes.noteLayerNotEnabled} /> <Tr t={Translations.t.notes.noteLayerNotEnabled} />
</div> </div>
<SubtleButton on:click={enableNoteLayer}> <SubtleButton on:click={enableNoteLayer}>
<img slot="image" src="./assets/svg/layers.svg" class="w-8 h-8 mr-4" /> <img slot="image" src="./assets/svg/layers.svg" class="mr-4 h-8 w-8" />
<Tr slot="message" t={Translations.t.notes.noteLayerDoEnable} /> <Tr slot="message" t={Translations.t.notes.noteLayerDoEnable} />
</SubtleButton> </SubtleButton>
</div> </div>

16
UI/Popup/DeleteFlow/DeleteWizard.svelte
View file

@ -82,8 +82,8 @@
</script> </script>
{#if $canBeDeleted === false && !hasSoftDeletion} {#if $canBeDeleted === false && !hasSoftDeletion}
<div class="flex low-interaction"> <div class="low-interaction flex">
<InformationCircleIcon class="w-6 h-6" /> <InformationCircleIcon class="h-6 w-6" />
<Tr t={$canBeDeletedReason} /> <Tr t={$canBeDeletedReason} />
<Tr class="subtle" t={t.useSomethingElse} /> <Tr class="subtle" t={t.useSomethingElse} />
</div> </div>
@ -96,7 +96,7 @@
currentState = "confirm" currentState = "confirm"
}} }}
> >
<TrashIcon class="w-6 h-6" /> <TrashIcon class="h-6 w-6" />
<Tr t={t.delete} /> <Tr t={t.delete} />
</button> </button>
{:else if currentState === "confirm"} {:else if currentState === "confirm"}
@ -111,10 +111,10 @@
<button <button
slot="save-button" slot="save-button"
on:click={onDelete} on:click={onDelete}
class={(selectedTags === undefined ? "disabled" : "") + " flex primary bg-red-600"} class={(selectedTags === undefined ? "disabled" : "") + " primary flex bg-red-600"}
> >
<TrashIcon <TrashIcon
class={"w-6 h-6 rounded-full p-1 ml-1 mr-2 " + class={"ml-1 mr-2 h-6 w-6 rounded-full p-1 " +
(selectedTags !== undefined ? "bg-red-600" : "")} (selectedTags !== undefined ? "bg-red-600" : "")}
/> />
<Tr t={t.delete} /> <Tr t={t.delete} />
@ -124,7 +124,7 @@
</button> </button>
<XCircleIcon <XCircleIcon
slot="upper-right" slot="upper-right"
class="w-8 h-8 cursor-pointer" class="h-8 w-8 cursor-pointer"
on:click={() => { on:click={() => {
currentState = "start" currentState = "start"
}} }}
@ -147,8 +147,8 @@
{:else} {:else}
<!-- currentState === 'deleted' --> <!-- currentState === 'deleted' -->
<div class="flex low-interaction"> <div class="low-interaction flex">
<TrashIcon class="w-6 h-6" /> <TrashIcon class="h-6 w-6" />
<Tr t={t.isDeleted} /> <Tr t={t.isDeleted} />
</div> </div>
{/if} {/if}

16
UI/Popup/ImportButtons/ImportFlow.svelte
View file

@ -46,7 +46,7 @@
{/if} {/if}
{:else if !$isDisplayed} {:else if !$isDisplayed}
<!-- Check that the layer is enabled, so that we don't add a duplicate --> <!-- Check that the layer is enabled, so that we don't add a duplicate -->
<div class="alert flex justify-center items-center"> <div class="alert flex items-center justify-center">
<EyeOffIcon class="w-8" /> <EyeOffIcon class="w-8" />
<Tr <Tr
t={Translations.t.general.add.layerNotEnabled.Subs({ t={Translations.t.general.add.layerNotEnabled.Subs({
@ -68,7 +68,7 @@
</button> </button>
<button <button
class="flex w-full gap-x-1 primary" class="primary flex w-full gap-x-1"
on:click={() => { on:click={() => {
isDisplayed.setData(true) isDisplayed.setData(true)
abort() abort()
@ -84,13 +84,13 @@
</div> </div>
{:else if $hasFilter} {:else if $hasFilter}
<!-- Some filters are enabled. The feature to add might already be mapped, but hidden --> <!-- Some filters are enabled. The feature to add might already be mapped, but hidden -->
<div class="alert flex justify-center items-center"> <div class="alert flex items-center justify-center">
<EyeOffIcon class="w-8" /> <EyeOffIcon class="w-8" />
<Tr t={Translations.t.general.add.disableFiltersExplanation} /> <Tr t={Translations.t.general.add.disableFiltersExplanation} />
</div> </div>
<div class="flex flex-wrap-reverse md:flex-nowrap"> <div class="flex flex-wrap-reverse md:flex-nowrap">
<button <button
class="flex w-full gap-x-1 primary" class="primary flex w-full gap-x-1"
on:click={() => { on:click={() => {
abort() abort()
importFlow.targetLayer.disableAllFilters() importFlow.targetLayer.disableAllFilters()
@ -118,14 +118,14 @@
<NextButton clss="primary w-full" on:click={() => (currentFlowStep = "confirm")}> <NextButton clss="primary w-full" on:click={() => (currentFlowStep = "confirm")}>
<slot name="start-flow-text"> <slot name="start-flow-text">
{#if importFlow?.args?.icon} {#if importFlow?.args?.icon}
<img class="w-8 h-8" src={importFlow.args.icon} /> <img class="h-8 w-8" src={importFlow.args.icon} />
{/if} {/if}
{importFlow.args.text} {importFlow.args.text}
</slot> </slot>
</NextButton> </NextButton>
{:else if currentFlowStep === "confirm"} {:else if currentFlowStep === "confirm"}
<div class="h-full w-full flex flex-col"> <div class="flex h-full w-full flex-col">
<div class="w-full h-full"> <div class="h-full w-full">
<slot name="map" /> <slot name="map" />
</div> </div>
<div class="flex flex-col-reverse md:flex-row"> <div class="flex flex-col-reverse md:flex-row">
@ -139,7 +139,7 @@
dispatch("confirm") dispatch("confirm")
}} }}
> >
<span slot="image" class="w-8 h-8 pr-4"> <span slot="image" class="h-8 w-8 pr-4">
{#if importFlow.args.icon} {#if importFlow.args.icon}
<img src={importFlow.args.icon} /> <img src={importFlow.args.icon} />
{:else} {:else}

2
UI/Popup/ImportButtons/PointImportFlow.svelte
View file

@ -56,7 +56,7 @@
on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)} on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
cls="absolute bottom-0" cls="absolute bottom-0"
> >
<Square3Stack3dIcon class="w-6 h-6" /> <Square3Stack3dIcon class="h-6 w-6" />
</MapControlButton> </MapControlButton>
</div> </div>
</ImportFlow> </ImportFlow>

2
UI/Popup/ImportButtons/WayImportFlow.svelte
View file

@ -54,7 +54,7 @@
on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)} on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
cls="absolute bottom-0" cls="absolute bottom-0"
> >
<Square3Stack3dIcon class="w-6 h-6" /> <Square3Stack3dIcon class="h-6 w-6" />
</MapControlButton> </MapControlButton>
</div> </div>
</ImportFlow> </ImportFlow>

8
UI/Popup/TagRendering/TagRenderingEditable.svelte
View file

@ -81,27 +81,27 @@
</button> </button>
<XCircleIcon <XCircleIcon
slot="upper-right" slot="upper-right"
class="w-8 h-8 cursor-pointer" class="h-8 w-8 cursor-pointer"
on:click={() => { on:click={() => {
editMode = false editMode = false
}} }}
/> />
</TagRenderingQuestion> </TagRenderingQuestion>
{:else} {:else}
<div class="flex justify-between low-interaction items-center rounded px-2 overflow-hidden"> <div class="low-interaction flex items-center justify-between overflow-hidden rounded px-2">
<TagRenderingAnswer {config} {tags} {selectedElement} {state} {layer} /> <TagRenderingAnswer {config} {tags} {selectedElement} {state} {layer} />
<button <button
on:click={() => { on:click={() => {
editMode = true editMode = true
}} }}
class="shrink-0 w-8 h-8 rounded-full p-1 secondary self-start" class="secondary h-8 w-8 shrink-0 self-start rounded-full p-1"
> >
<PencilAltIcon /> <PencilAltIcon />
</button> </button>
</div> </div>
{/if} {/if}
{:else} {:else}
<div class="p-2 overflow-hidden"> <div class="overflow-hidden p-2">
<TagRenderingAnswer {config} {tags} {selectedElement} {state} {layer} /> <TagRenderingAnswer {config} {tags} {selectedElement} {state} {layer} />
</div> </div>
{/if} {/if}

10
UI/Popup/TagRendering/TagRenderingQuestion.svelte
View file

@ -139,7 +139,7 @@
</script> </script>
{#if config.question !== undefined} {#if config.question !== undefined}
<div class="interactive border-interactive p-1 px-2 flex flex-col"> <div class="interactive border-interactive flex flex-col p-1 px-2">
<div class="flex justify-between"> <div class="flex justify-between">
<span class="font-bold"> <span class="font-bold">
<SpecialTranslation t={config.question} {tags} {state} {layer} feature={selectedElement} /> <SpecialTranslation t={config.question} {tags} {state} {layer} feature={selectedElement} />
@ -161,7 +161,7 @@
{#if config.mappings?.length >= 8} {#if config.mappings?.length >= 8}
<div class="flex w-full"> <div class="flex w-full">
<img src="./assets/svg/search.svg" class="w-6 h-6" /> <img src="./assets/svg/search.svg" class="h-6 w-6" />
<input type="text" bind:value={$searchTerm} class="w-full" /> <input type="text" bind:value={$searchTerm} class="w-full" />
</div> </div>
{/if} {/if}
@ -262,7 +262,7 @@
<LoginToggle {state}> <LoginToggle {state}>
<Loading slot="loading" /> <Loading slot="loading" />
<SubtleButton slot="not-logged-in" on:click={() => state.osmConnection.AttemptLogin()}> <SubtleButton slot="not-logged-in" on:click={() => state.osmConnection.AttemptLogin()}>
<img slot="image" src="./assets/svg/login.svg" class="w-8 h-8" /> <img slot="image" src="./assets/svg/login.svg" class="h-8 w-8" />
<Tr t={Translations.t.general.loginToStart} slot="message" /> <Tr t={Translations.t.general.loginToStart} slot="message" />
</SubtleButton> </SubtleButton>
{#if $feedback !== undefined} {#if $feedback !== undefined}
@ -270,7 +270,7 @@
<Tr t={$feedback} /> <Tr t={$feedback} />
</div> </div>
{/if} {/if}
<div class="flex justify-end flex-wrap-reverse sm:flex-nowrap items-stretch"> <div class="flex flex-wrap-reverse items-stretch justify-end sm:flex-nowrap">
<!-- TagRenderingQuestion-buttons --> <!-- TagRenderingQuestion-buttons -->
<slot name="cancel" /> <slot name="cancel" />
<slot name="save-button" {selectedTags}> <slot name="save-button" {selectedTags}>
@ -283,7 +283,7 @@
</slot> </slot>
</div> </div>
{#if UserRelatedState.SHOW_TAGS_VALUES.indexOf($showTags) >= 0 || ($showTags === "" && numberOfCs >= Constants.userJourney.tagsVisibleAt) || $featureSwitchIsTesting || $featureSwitchIsDebugging} {#if UserRelatedState.SHOW_TAGS_VALUES.indexOf($showTags) >= 0 || ($showTags === "" && numberOfCs >= Constants.userJourney.tagsVisibleAt) || $featureSwitchIsTesting || $featureSwitchIsDebugging}
<span class="flex justify-between flex-wrap"> <span class="flex flex-wrap justify-between">
<TagHint {state} tags={selectedTags} currentProperties={$tags} /> <TagHint {state} tags={selectedTags} currentProperties={$tags} />
<span class="flex flex-wrap"> <span class="flex flex-wrap">
{#if $featureSwitchIsTesting} {#if $featureSwitchIsTesting}

7
UI/StylesheetTestGui.svelte
View file

@ -13,8 +13,7 @@
<h2>Normal background</h2> <h2>Normal background</h2>
There are a few styles, such as the There are a few styles, such as the
<span class="literal-code">normal-background</span> <span class="literal-code">normal-background</span>
-style which is used if there is nothing special going on. Some general information, with at -style which is used if there is nothing special going on. Some general information, with at most
most
<a href="https://example.com" target="_blank">a link to someplace</a> <a href="https://example.com" target="_blank">a link to someplace</a>
. .
<span class="alert">Alert: something went wrong</span> <span class="alert">Alert: something went wrong</span>
@ -27,7 +26,7 @@
<h2>Low interaction</h2> <h2>Low interaction</h2>
<p> <p>
There are <span class="literal-code">low-interaction</span> There are <span class="literal-code">low-interaction</span>
areas, where some buttons might appear. areas, where some buttons might appear.
</p> </p>
<div class="flex"> <div class="flex">
@ -80,7 +79,7 @@
<h2>Interactive area</h2> <h2>Interactive area</h2>
<p> <p>
There are <span class="literal-code">interactive</span> There are <span class="literal-code">interactive</span>
areas, where many buttons and input elements will appear. areas, where many buttons and input elements will appear.
</p> </p>
<div class="flex"> <div class="flex">

52
UI/ThemeViewGUI.svelte
View file

@ -108,14 +108,14 @@
) )
</script> </script>
<div class="h-screen w-screen absolute top-0 left-0 overflow-hidden"> <div class="absolute top-0 left-0 h-screen w-screen overflow-hidden">
<MaplibreMap map={maplibremap} /> <MaplibreMap map={maplibremap} />
</div> </div>
<div class="absolute top-0 left-0 w-full pointer-events-none"> <div class="pointer-events-none absolute top-0 left-0 w-full">
<!-- Top components --> <!-- Top components -->
<If condition={state.featureSwitches.featureSwitchSearch}> <If condition={state.featureSwitches.featureSwitchSearch}>
<div class="max-[480px]:w-full float-right mt-1 px-1 sm:m-2 pointer-events-auto"> <div class="pointer-events-auto float-right mt-1 px-1 max-[480px]:w-full sm:m-2">
<Geosearch <Geosearch
bounds={state.mapProperties.bounds} bounds={state.mapProperties.bounds}
perLayer={state.perLayer} perLayer={state.perLayer}
@ -124,17 +124,17 @@
/> />
</div> </div>
</If> </If>
<div class="float-left m-1 sm:mt-2 flex flex-col"> <div class="float-left m-1 flex flex-col sm:mt-2">
<MapControlButton on:click={() => state.guistate.themeIsOpened.setData(true)}> <MapControlButton on:click={() => state.guistate.themeIsOpened.setData(true)}>
<div class="flex m-0.5 mx-1 sm:mx-1 md:mx-2 items-center cursor-pointer max-[480px]:w-full"> <div class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 md:mx-2">
<img class="w-6 h-6 md:w-8 md:h-8 block mr-0.5 sm:mr-1 md:mr-2" src={layout.icon} /> <img class="mr-0.5 block h-6 w-6 sm:mr-1 md:mr-2 md:h-8 md:w-8" src={layout.icon} />
<b class="mr-1"> <b class="mr-1">
<Tr t={layout.title} /> <Tr t={layout.title} />
</b> </b>
</div> </div>
</MapControlButton> </MapControlButton>
<MapControlButton on:click={() => state.guistate.menuIsOpened.setData(true)}> <MapControlButton on:click={() => state.guistate.menuIsOpened.setData(true)}>
<MenuIcon class="w-8 h-8 cursor-pointer" /> <MenuIcon class="h-8 w-8 cursor-pointer" />
</MapControlButton> </MapControlButton>
{#if currentViewLayer?.tagRenderings && currentViewLayer.defaultIcon()} {#if currentViewLayer?.tagRenderings && currentViewLayer.defaultIcon()}
<MapControlButton <MapControlButton
@ -157,17 +157,17 @@
</div> </div>
</div> </div>
<div class="absolute bottom-0 left-0 mb-4 w-screen pointer-events-none"> <div class="pointer-events-none absolute bottom-0 left-0 mb-4 w-screen">
<div class="w-full flex justify-between px-4 items-end"> <div class="flex w-full items-end justify-between px-4">
<div class="flex"> <div class="flex">
<!-- bottom left elements --> <!-- bottom left elements -->
<MapControlButton <MapControlButton
on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)} on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
> >
<Square3Stack3dIcon class="w-6 h-6" /> <Square3Stack3dIcon class="h-6 w-6" />
</MapControlButton> </MapControlButton>
<a <a
class="pointer-events-auto opacity-50 hover:opacity-100 text-white cursor-pointer bg-black-transparent pl-1 pr-2 rounded-2xl h-fit max-h-12 overflow-hidden self-end" class="bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl pl-1 pr-2 text-white opacity-50 hover:opacity-100"
on:click={() => { on:click={() => {
state.guistate.themeViewTab.setData("copyright") state.guistate.themeViewTab.setData("copyright")
state.guistate.themeIsOpened.setData(true) state.guistate.themeIsOpened.setData(true)
@ -180,7 +180,7 @@
<div class="flex flex-col items-end"> <div class="flex flex-col items-end">
<!-- bottom right elements --> <!-- bottom right elements -->
<If condition={state.floors.map((f) => f.length > 1)}> <If condition={state.floors.map((f) => f.length > 1)}>
<div class="mr-0.5 pointer-events-auto"> <div class="pointer-events-auto mr-0.5">
<LevelSelector <LevelSelector
floors={state.floors} floors={state.floors}
layerState={state.layerState} layerState={state.layerState}
@ -219,7 +219,7 @@
selectedElement.setData(undefined) selectedElement.setData(undefined)
}} }}
> >
<div class="absolute flex flex-col h-full w-full normal-background"> <div class="normal-background absolute flex h-full w-full flex-col">
<ToSvelte construct={new VariableUiElement(selectedElementTitle)}> <ToSvelte construct={new VariableUiElement(selectedElementTitle)}>
<!-- Title --> <!-- Title -->
</ToSvelte> </ToSvelte>
@ -253,13 +253,13 @@
<TabbedGroup tab={state.guistate.themeViewTabIndex}> <TabbedGroup tab={state.guistate.themeViewTabIndex}>
<div slot="post-tablist"> <div slot="post-tablist">
<XCircleIcon <XCircleIcon
class="w-8 h-8 mr-2" class="mr-2 h-8 w-8"
on:click={() => state.guistate.themeIsOpened.setData(false)} on:click={() => state.guistate.themeIsOpened.setData(false)}
/> />
</div> </div>
<div class="flex" slot="title0"> <div class="flex" slot="title0">
<img class="w-4 h-4 block" src={layout.icon} /> <img class="block h-4 w-4" src={layout.icon} />
<Tr t={layout.title} /> <Tr t={layout.title} />
</div> </div>
@ -274,7 +274,7 @@
</If> </If>
</div> </div>
<div class="flex flex-col m-2" slot="content1"> <div class="m-2 flex flex-col" slot="content1">
{#each layout.layers as layer} {#each layout.layers as layer}
<Filterview <Filterview
zoomlevel={state.mapProperties.zoom} zoomlevel={state.mapProperties.zoom}
@ -320,7 +320,7 @@
<IfHidden condition={state.guistate.backgroundLayerSelectionIsOpened}> <IfHidden condition={state.guistate.backgroundLayerSelectionIsOpened}>
<!-- background layer selector --> <!-- background layer selector -->
<FloatOver on:close={() => state.guistate.backgroundLayerSelectionIsOpened.setData(false)}> <FloatOver on:close={() => state.guistate.backgroundLayerSelectionIsOpened.setData(false)}>
<div class="p-2 h-full"> <div class="h-full p-2">
<RasterLayerOverview <RasterLayerOverview
userstate={state.userRelatedState} userstate={state.userRelatedState}
mapproperties={state.mapProperties} mapproperties={state.mapProperties}
@ -339,7 +339,7 @@
<TabbedGroup tab={state.guistate.menuViewTabIndex}> <TabbedGroup tab={state.guistate.menuViewTabIndex}>
<div slot="post-tablist"> <div slot="post-tablist">
<XCircleIcon <XCircleIcon
class="w-8 h-8 mr-2" class="mr-2 h-8 w-8"
on:click={() => state.guistate.menuIsOpened.setData(false)} on:click={() => state.guistate.menuIsOpened.setData(false)}
/> />
</div> </div>
@ -347,38 +347,38 @@
<Tr t={Translations.t.general.menu.aboutMapComplete} /> <Tr t={Translations.t.general.menu.aboutMapComplete} />
</div> </div>
<div class="flex flex-col m-2 links-as-button links-w-full gap-y-1" slot="content0"> <div class="links-as-button links-w-full m-2 flex flex-col gap-y-1" slot="content0">
<Tr t={Translations.t.general.aboutMapComplete.intro} /> <Tr t={Translations.t.general.aboutMapComplete.intro} />
<a class="flex" href={Utils.HomepageLink()}> <a class="flex" href={Utils.HomepageLink()}>
<img class="w-6 h-6" src="./assets/svg/add.svg" /> <img class="h-6 w-6" src="./assets/svg/add.svg" />
<Tr t={Translations.t.general.backToIndex} /> <Tr t={Translations.t.general.backToIndex} />
</a> </a>
<a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank"> <a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
<img class="w-6 h-6" src="./assets/svg/bug.svg" /> <img class="h-6 w-6" src="./assets/svg/bug.svg" />
<Tr t={Translations.t.general.attribution.openIssueTracker} /> <Tr t={Translations.t.general.attribution.openIssueTracker} />
</a> </a>
<a class="flex" href="https://en.osm.town/@MapComplete" target="_blank"> <a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
<img class="w-6 h-6" src="./assets/svg/mastodon.svg" /> <img class="h-6 w-6" src="./assets/svg/mastodon.svg" />
<Tr t={Translations.t.general.attribution.followOnMastodon} /> <Tr t={Translations.t.general.attribution.followOnMastodon} />
</a> </a>
<a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank"> <a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
<img class="w-6 h-6" src="./assets/svg/liberapay.svg" /> <img class="h-6 w-6" src="./assets/svg/liberapay.svg" />
<Tr t={Translations.t.general.attribution.donate} /> <Tr t={Translations.t.general.attribution.donate} />
</a> </a>
<a class="flex" href={Utils.OsmChaLinkFor(7)} target="_blank"> <a class="flex" href={Utils.OsmChaLinkFor(7)} target="_blank">
<img class="w-6 h-6" src="./assets/svg/statistics.svg" /> <img class="h-6 w-6" src="./assets/svg/statistics.svg" />
<Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: "MapComplete" })} /> <Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: "MapComplete" })} />
</a> </a>
{Constants.vNumber} {Constants.vNumber}
</div> </div>
<div class="flex" slot="title1"> <div class="flex" slot="title1">
<CogIcon class="w-6 h-6" /> <CogIcon class="h-6 w-6" />
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} /> <Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
</div> </div>
@ -420,7 +420,7 @@
</div> </div>
<Tr slot="title4" t={Translations.t.advanced.title} /> <Tr slot="title4" t={Translations.t.advanced.title} />
<div class="flex flex-col m-2" slot="content4"> <div class="m-2 flex flex-col" slot="content4">
<OpenIdEditor mapProperties={state.mapProperties} /> <OpenIdEditor mapProperties={state.mapProperties} />
<ToSvelte <ToSvelte
construct={() => construct={() =>

2
UI/Wikipedia/WikipediaArticle.svelte
View file

@ -17,7 +17,7 @@
</script> </script>
<a class="flex" href={$wikipediaDetails.articleUrl} rel="noreferrer" target="_blank"> <a class="flex" href={$wikipediaDetails.articleUrl} rel="noreferrer" target="_blank">
<img class="w-6 h-6" src="./assets/svg/wikipedia.svg" /> <img class="h-6 w-6" src="./assets/svg/wikipedia.svg" />
<Tr t={Translations.t.general.wikipedia.fromWikipedia} /> <Tr t={Translations.t.general.wikipedia.fromWikipedia} />
</a> </a>