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 {
static readonly intro = new Combine([

2
Models/Constants.ts
View file

@ -1,7 +1,7 @@
import { Utils } from "../Utils"
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 {
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 { LocalStorageSource } from "../Logic/Web/LocalStorageSource"
export type ThemeViewTabStates = typeof MenuState._themeviewTabs[number]
export type MenuViewTabStates = typeof MenuState._menuviewTabs[number]
export type ThemeViewTabStates = (typeof MenuState._themeviewTabs)[number]
export type MenuViewTabStates = (typeof MenuState._menuviewTabs)[number]
/**
* 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 filterIsSameAs: string
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 popupInFloatover

2
Models/ThemeViewState.ts
View file

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

2
UI/Base/BackButton.svelte
View file

@ -15,6 +15,6 @@
on:click={() => dispatch("click")}
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" />
</SubtleButton>

2
UI/Base/DragInvitation.svelte
View file

@ -27,7 +27,7 @@
}
</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">
<img src="./assets/svg/hand.svg" />
</div>

6
UI/Base/FloatOver.svelte
View file

@ -9,17 +9,17 @@
</script>
<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"
>
<div class="content normal-background">
<div class="rounded-xl h-full">
<div class="h-full rounded-xl">
<slot />
</div>
<slot name="close-button">
<!-- The close button is placed _after_ the default slot in order to always paint it on top -->
<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")}
>
<XCircleIcon />

4
UI/Base/Loading.svelte
View file

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

4
UI/Base/LoginToggle.svelte
View file

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

2
UI/Base/MapControlButton.svelte
View file

@ -10,7 +10,7 @@
<button
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 />
</button>

6
UI/Base/ModalRight.svelte
View file

@ -9,13 +9,13 @@
</script>
<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"
>
<div class="flex flex-col m-0 normal-background">
<div class="normal-background m-0 flex flex-col">
<slot name="close-button">
<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")}
>
<XCircleIcon />

4
UI/Base/NextButton.svelte
View file

@ -17,8 +17,8 @@
options={{ extraClasses: clss + " flex items-center" }}
>
<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 />
<ChevronRightIcon class="w-12 h-12" />
<ChevronRightIcon class="h-12 w-12" />
</div>
</SubtleButton>

2
UI/Base/ShareButton.svelte
View file

@ -23,7 +23,7 @@
}
</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">
<ToSvelte construct={Svg.share_svg().SetClass("w-7 h-7 p-1")} />
</slot>

8
UI/Base/TabbedGroup.svelte
View file

@ -16,9 +16,9 @@
}
</script>
<div class="tabbedgroup w-full h-full">
<div class="tabbedgroup h-full w-full">
<TabGroup
class="h-full w-full flex flex-col"
class="flex h-full w-full flex-col"
defaultIndex={1}
on:change={(e) => {
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">
{#if $$slots.title1}
<Tab class={({ selected }) => "tab " + (selected ? "primary" : "")}>
@ -66,7 +66,7 @@
</TabList>
<slot name="post-tablist" />
</div>
<div class="overflow-y-auto normal-background">
<div class="normal-background overflow-y-auto">
<TabPanels defaultIndex={$tab}>
<TabPanel>
<slot name="content0">

2
UI/Base/WeblateLink.svelte
View file

@ -17,7 +17,7 @@
<a
href={LinkToWeblate.hrefToWeblate($language, context)}
target="_blank"
class="mx-1 weblate-link"
class="weblate-link mx-1"
>
<img src="./assets/svg/translate.svg" class="font-gray" />
</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 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
placedOverMap={normalMap}
placedOverMapProperties={mapproperties}
rasterLayer={raster0}
/>
</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
placedOverMap={normalMap}
placedOverMapProperties={mapproperties}
@ -75,8 +75,8 @@
/>
</button>
</div>
<div class="text-sm flex flex-col gap-y-1 h-fit ml-1">
<div class="low-interaction rounded p-1 w-64">
<div class="ml-1 flex h-fit flex-col gap-y-1 text-sm">
<div class="low-interaction w-64 rounded p-1">
<RasterLayerPicker
availableLayers={availableRasterLayers}
value={mapproperties.rasterLayer}

4
UI/BigComponents/ContactLink.svelte
View file

@ -29,9 +29,9 @@
<h3>{country?.nameEn}</h3>
{/if}
{#each resources as resource}
<div class="flex link-underline items-center my-4">
<div class="link-underline my-4 flex items-center">
<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`}
/>
<div class="flex flex-col">

4
UI/BigComponents/Filterview.svelte
View file

@ -55,7 +55,7 @@
{#if filteredLayer.layerDef.name}
<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} />
<If condition={filteredLayer.isDisplayed}>
<ToSvelte
@ -78,7 +78,7 @@
</label>
{#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}
<div>
<!-- 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>
<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">
{#if isRunning}
<Loading>{Translations.t.general.search.searching}</Loading>
@ -110,7 +110,7 @@
/>
{/if}
</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} />
</div>
</div>

2
UI/BigComponents/MapillaryLink.svelte
View file

@ -20,7 +20,7 @@
}&z=${Math.max(($zoom ?? 2) - 1, 1)}`
</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")} />
<div class="flex flex-col">
<Tr t={Translations.t.general.attribution.openMapillary} />

2
UI/BigComponents/OpenBackgroundSelectorButton.svelte
View file

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

4
UI/BigComponents/OpenIdEditor.svelte
View file

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

8
UI/BigComponents/SelectedElementTitle.svelte
View file

@ -33,7 +33,7 @@
<Tr t={Translations.t.delete.isDeleted} />
{:else}
<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">
<!-- Title element-->
@ -42,11 +42,11 @@
</h3>
<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}
{#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
config={titleIconConfig}
{tags}
@ -61,7 +61,7 @@
</div>
</div>
<XCircleIcon
class="w-8 h-8 cursor-pointer"
class="h-8 w-8 cursor-pointer"
on:click={() => state.selectedElement.setData(undefined)}
/>
</div>

2
UI/BigComponents/SelectedElementView.svelte
View file

@ -35,7 +35,7 @@
<Tr t={Translations.t.general.returnToTheMap} />
</button>
{: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)}
{#if (config.condition === undefined || config.condition.matchesProperties(_tags)) && (config.metacondition === undefined || config.metacondition.matchesProperties( { ..._tags, ..._metatags } ))}
{#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}
<SubtleLink href={$href} options={{ extraClasses: "w-full" }}>
<img slot="image" src={theme.icon} class="block h-11 w-11 mx-4" alt="" />
<span class="flex flex-col text-ellipsis overflow-hidden">
<img slot="image" src={theme.icon} class="mx-4 block h-11 w-11" alt="" />
<span class="flex flex-col overflow-hidden text-ellipsis">
<Tr t={title} />
<span class="subtle max-h-12 truncate text-ellipsis">
<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} />
<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} />
</div>
</NextButton>
<div class="flex w-full flex-wrap sm:flex-nowrap">
<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")} />
<Tr t={Translations.t.general.openTheMapAtGeolocation} />
</button>
</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">
<Geosearch
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>
<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()}
>
<Tr t={Translations.t.general.search.searchShort} />
<SearchIcon class="w-6 h-6" />
<SearchIcon class="h-6 w-6" />
</button>
</div>
</div>

2
UI/BigComponents/ThemesList.svelte
View file

@ -21,7 +21,7 @@
<section class="w-full">
<slot name="title" />
{#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)}
{#if theme !== undefined && !(hideThemes && theme?.hideFromOverview)}
<ThemeButton {theme} {isCustom} userDetails={state.osmConnection.userDetails} {state} />

10
UI/BigComponents/UserProfile.svelte
View file

@ -24,11 +24,11 @@
)
</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}
<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}
<UserCircleIcon class="w-12 h-12" />
<UserCircleIcon class="h-12 w-12" />
{/if}
<div class="flex flex-col">
<h3>{$userdetails.name}</h3>
@ -39,13 +39,13 @@
target="_blank"
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} />
</a>
{:else}
<Tr t={Translations.t.userinfo.noDescription} />
<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} />
</a>
{/if}

2
UI/BigComponents/WaySplitMap.svelte
View file

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

2
UI/DownloadFlow/DownloadButton.svelte
View file

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

2
UI/DownloadFlow/DownloadPanel.svelte
View file

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

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

@ -41,7 +41,7 @@
<div
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:mousedown={(e) => {
isDown = true
@ -58,11 +58,11 @@
on:touchmove={(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} />
</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} />
</div>
</div>

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

@ -102,11 +102,11 @@
class="relative"
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}
<button
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" : "")}
on:click={() => {
forceIndex = i

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

@ -76,13 +76,13 @@
}
</script>
<div class="relative h-full min-h-32 cursor-pointer overflow-hidden">
<div class="w-full h-full absolute top-0 left-0 cursor-pointer">
<div class="min-h-32 relative h-full cursor-pointer overflow-hidden">
<div class="absolute top-0 left-0 h-full w-full cursor-pointer">
<MaplibreMap {map} />
</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" />
</div>

2
UI/InputElement/ValidatedInput.svelte
View file

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

2
UI/InputElement/Validators.ts
View file

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

4
UI/Map/RasterLayerOverview.svelte
View file

@ -50,14 +50,14 @@
}
</script>
<div class="h-full flex flex-col">
<div class="flex h-full flex-col">
<slot name="title">
<h2>
<Tr t={Translations.t.general.backgroundMap} />
</h2>
</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
availableLayers={photoLayers}
favourite={getPref("photo")}

4
UI/Map/RasterLayerPicker.svelte
View file

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

2
UI/Map/ShowDataLayer.ts
View file

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

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

@ -167,7 +167,7 @@
/>
{:else if !$layerIsDisplayed}
<!-- 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" />
<Tr
t={Translations.t.general.add.layerNotEnabled.Subs({ layer: selectedPreset.layer.name })}
@ -187,7 +187,7 @@
</button>
<button
class="flex w-full gap-x-1 primary"
class="primary flex w-full gap-x-1"
on:click={() => {
layerIsDisplayed.setData(true)
abort()
@ -199,13 +199,13 @@
</div>
{:else if $layerHasFilters}
<!-- 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" />
<Tr t={Translations.t.general.add.disableFiltersExplanation} />
</div>
<div class="flex flex-wrap-reverse md:flex-nowrap">
<button
class="flex w-full gap-x-1 primary"
class="primary flex w-full gap-x-1"
on:click={() => {
abort()
state.layerState.filteredLayers.get(selectedPreset.layer.id).disableAllFilters()
@ -249,7 +249,7 @@
</h3>
<span class="flex flex-wrap items-stretch">
{#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}
</span>
{/if}
@ -267,7 +267,7 @@
<NextButton on:click={() => (confirmedCategory = true)} clss="primary w-full">
<div slot="image" class="relative">
<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 class="w-full">
<Tr t={selectedPreset.text} />
@ -284,7 +284,7 @@
<img
slot="image"
src={_globalFilter[checkedOfGlobalFilters].onNewPoint?.icon ?? "./assets/svg/confirm.svg"}
class="w-12 h-12"
class="h-12 w-12"
/>
<Tr
slot="message"
@ -299,12 +299,12 @@
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} />
</SubtleButton>
{:else if !creating}
<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
value={preciseCoordinate}
snappedTo={snappedToObject}
@ -318,7 +318,7 @@
<MapControlButton
on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
>
<Square3Stack3dIcon class="w-6 h-6" />
<Square3Stack3dIcon class="h-6 w-6" />
</MapControlButton>
</div>
</div>
@ -328,7 +328,7 @@
</BackButton>
<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} />
</div>
</NextButton>

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

@ -70,7 +70,7 @@
}>()
</script>
<div class="flex flex-col w-full">
<div class="flex w-full flex-col">
<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 -->
<Tr t={Translations.t.general.add.intro} />

8
UI/Popup/CreateNewNote.svelte
View file

@ -89,14 +89,14 @@
<Tr t={Translations.t.notes.noteLayerHasFilters} />
</div>
<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} />
</SubtleButton>
</div>
{:else}
<div>
<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">
<ValidatedInput type="text" value={comment} />
</div>
@ -110,7 +110,7 @@
{#if $comment.length >= 3}
<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} />
</SubtleButton>
{:else}
@ -127,7 +127,7 @@
<Tr t={Translations.t.notes.noteLayerNotEnabled} />
</div>
<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} />
</SubtleButton>
</div>

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

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

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

@ -46,7 +46,7 @@
{/if}
{:else if !$isDisplayed}
<!-- 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" />
<Tr
t={Translations.t.general.add.layerNotEnabled.Subs({
@ -68,7 +68,7 @@
</button>
<button
class="flex w-full gap-x-1 primary"
class="primary flex w-full gap-x-1"
on:click={() => {
isDisplayed.setData(true)
abort()
@ -84,13 +84,13 @@
</div>
{:else if $hasFilter}
<!-- 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" />
<Tr t={Translations.t.general.add.disableFiltersExplanation} />
</div>
<div class="flex flex-wrap-reverse md:flex-nowrap">
<button
class="flex w-full gap-x-1 primary"
class="primary flex w-full gap-x-1"
on:click={() => {
abort()
importFlow.targetLayer.disableAllFilters()
@ -118,14 +118,14 @@
<NextButton clss="primary w-full" on:click={() => (currentFlowStep = "confirm")}>
<slot name="start-flow-text">
{#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}
{importFlow.args.text}
</slot>
</NextButton>
{:else if currentFlowStep === "confirm"}
<div class="h-full w-full flex flex-col">
<div class="w-full h-full">
<div class="flex h-full w-full flex-col">
<div class="h-full w-full">
<slot name="map" />
</div>
<div class="flex flex-col-reverse md:flex-row">
@ -139,7 +139,7 @@
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}
<img src={importFlow.args.icon} />
{:else}

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

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

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

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

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

@ -81,27 +81,27 @@
</button>
<XCircleIcon
slot="upper-right"
class="w-8 h-8 cursor-pointer"
class="h-8 w-8 cursor-pointer"
on:click={() => {
editMode = false
}}
/>
</TagRenderingQuestion>
{: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} />
<button
on:click={() => {
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 />
</button>
</div>
{/if}
{:else}
<div class="p-2 overflow-hidden">
<div class="overflow-hidden p-2">
<TagRenderingAnswer {config} {tags} {selectedElement} {state} {layer} />
</div>
{/if}

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

@ -139,7 +139,7 @@
</script>
{#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">
<span class="font-bold">
<SpecialTranslation t={config.question} {tags} {state} {layer} feature={selectedElement} />
@ -161,7 +161,7 @@
{#if config.mappings?.length >= 8}
<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" />
</div>
{/if}
@ -262,7 +262,7 @@
<LoginToggle {state}>
<Loading slot="loading" />
<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" />
</SubtleButton>
{#if $feedback !== undefined}
@ -270,7 +270,7 @@
<Tr t={$feedback} />
</div>
{/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 -->
<slot name="cancel" />
<slot name="save-button" {selectedTags}>
@ -283,7 +283,7 @@
</slot>
</div>
{#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} />
<span class="flex flex-wrap">
{#if $featureSwitchIsTesting}

7
UI/StylesheetTestGui.svelte
View file

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

52
UI/ThemeViewGUI.svelte
View file

@ -108,14 +108,14 @@
)
</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} />
</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 -->
<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
bounds={state.mapProperties.bounds}
perLayer={state.perLayer}
@ -124,17 +124,17 @@
/>
</div>
</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)}>
<div class="flex m-0.5 mx-1 sm:mx-1 md:mx-2 items-center cursor-pointer max-[480px]:w-full">
<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} />
<div class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 md:mx-2">
<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">
<Tr t={layout.title} />
</b>
</div>
</MapControlButton>
<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>
{#if currentViewLayer?.tagRenderings && currentViewLayer.defaultIcon()}
<MapControlButton
@ -157,17 +157,17 @@
</div>
</div>
<div class="absolute bottom-0 left-0 mb-4 w-screen pointer-events-none">
<div class="w-full flex justify-between px-4 items-end">
<div class="pointer-events-none absolute bottom-0 left-0 mb-4 w-screen">
<div class="flex w-full items-end justify-between px-4">
<div class="flex">
<!-- bottom left elements -->
<MapControlButton
on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
>
<Square3Stack3dIcon class="w-6 h-6" />
<Square3Stack3dIcon class="h-6 w-6" />
</MapControlButton>
<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={() => {
state.guistate.themeViewTab.setData("copyright")
state.guistate.themeIsOpened.setData(true)
@ -180,7 +180,7 @@
<div class="flex flex-col items-end">
<!-- bottom right elements -->
<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
floors={state.floors}
layerState={state.layerState}
@ -219,7 +219,7 @@
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)}>
<!-- Title -->
</ToSvelte>
@ -253,13 +253,13 @@
<TabbedGroup tab={state.guistate.themeViewTabIndex}>
<div slot="post-tablist">
<XCircleIcon
class="w-8 h-8 mr-2"
class="mr-2 h-8 w-8"
on:click={() => state.guistate.themeIsOpened.setData(false)}
/>
</div>
<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} />
</div>
@ -274,7 +274,7 @@
</If>
</div>
<div class="flex flex-col m-2" slot="content1">
<div class="m-2 flex flex-col" slot="content1">
{#each layout.layers as layer}
<Filterview
zoomlevel={state.mapProperties.zoom}
@ -320,7 +320,7 @@
<IfHidden condition={state.guistate.backgroundLayerSelectionIsOpened}>
<!-- background layer selector -->
<FloatOver on:close={() => state.guistate.backgroundLayerSelectionIsOpened.setData(false)}>
<div class="p-2 h-full">
<div class="h-full p-2">
<RasterLayerOverview
userstate={state.userRelatedState}
mapproperties={state.mapProperties}
@ -339,7 +339,7 @@
<TabbedGroup tab={state.guistate.menuViewTabIndex}>
<div slot="post-tablist">
<XCircleIcon
class="w-8 h-8 mr-2"
class="mr-2 h-8 w-8"
on:click={() => state.guistate.menuIsOpened.setData(false)}
/>
</div>
@ -347,38 +347,38 @@
<Tr t={Translations.t.general.menu.aboutMapComplete} />
</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} />
<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} />
</a>
<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} />
</a>
<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} />
</a>
<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} />
</a>
<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" })} />
</a>
{Constants.vNumber}
</div>
<div class="flex" slot="title1">
<CogIcon class="w-6 h-6" />
<CogIcon class="h-6 w-6" />
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
</div>
@ -420,7 +420,7 @@
</div>
<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} />
<ToSvelte
construct={() =>

2
UI/Wikipedia/WikipediaArticle.svelte
View file

@ -17,7 +17,7 @@
</script>
<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} />
</a>