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

Various style tweaks

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-07-11 19:01:32 +02:00
parent d5430891bf
commit ed9e59109e
12 changed files with 128 additions and 112 deletions
Download patch file Download diff file Expand all files Collapse all files

11
src/UI/Base/FloatOver.svelte
View file

@ -1,8 +1,8 @@
<script lang="ts">
import { createEventDispatcher } from "svelte"
import { XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
import { ariaLabel } from "../../Utils/ariaLabel"
import Translations from "../i18n/Translations"
import { XCircleIcon } from "@babeard/svelte-heroicons/solid"
/**
* The slotted element will be shown on top, with a lower-opacity border
@ -37,13 +37,14 @@
</div>
<slot name="close-button">
<!-- The close button is placed _after_ the default slot in order to always paint it on top -->
<button
class="absolute right-10 top-10 h-8 w-8 cursor-pointer rounded-full border-none bg-white p-0"
<div
class="absolute right-10 top-10 cursor-pointer border-none p-0 m-0 bg-white rounded-full border-0"
style="margin: -0.25rem"
on:click={() => dispatch("close")}
use:ariaLabel={Translations.t.general.backToMap}
>
<XCircleIcon />
</button>
<XCircleIcon class="w-8 h-8" />
</div>
</slot>
</div>
</div>

14
src/UI/Base/TitledPanel.svelte Normal file
View file

@ -0,0 +1,14 @@
<script lang="ts">
import Translations from "../i18n/Translations"
</script>
<div class="flex h-full flex-col">
<h2 class="low-interaction m-0 flex items-center p-4 drop-shadow-md">
<slot name="title" />
</h2>
<div class="flex h-full flex-col overflow-auto border-b-2 p-4">
<slot />
</div>
</div>

15
src/UI/BigComponents/FilterPanel.svelte
View file

@ -9,6 +9,7 @@
import Translations from "../i18n/Translations"
import Tr from "../Base/Tr.svelte"
import Filter from "../../assets/svg/Filter.svelte"
import TitledPanel from "../Base/TitledPanel.svelte"
export let state: ThemeViewState
let layout = state.layout
@ -46,12 +47,12 @@
}
</script>
<div class="flex h-full flex-col">
<h2 class="low-interaction m-0 flex items-center p-4 drop-shadow-md">
<TitledPanel>
<div class="flex" slot="title">
<Filter class="h-6 w-6 pr-2" />
<Tr t={Translations.t.general.menu.filter} />
</h2>
<div class="flex h-full flex-col overflow-auto border-b-2 p-4">
</div>
{#each layout.layers as layer}
<Filterview
zoomlevel={state.mapProperties.zoom}
@ -76,5 +77,7 @@
zoomlevel={state.mapProperties.zoom}
/>
{/each}
</div>
</div>
</TitledPanel>

6
src/UI/BigComponents/SelectedElementTitle.svelte
View file

@ -72,14 +72,14 @@
{/if}
</div>
<slot name="close-button">
<button
class="mt-2 h-fit shrink-0 rounded-full border-none p-0"
<div
class="mt-2 h-fit shrink-0 rounded-full border-none p-0 cursor-pointer"
on:click={() => state.selectedElement.setData(undefined)}
style="border: 0 !important; padding: 0 !important;"
use:ariaLabel={Translations.t.general.backToMap}
>
<XCircleIcon aria-hidden={true} class="h-8 w-8" />
</button>
</div>
</slot>
</div>

7
src/UI/BigComponents/SelectedElementView.svelte
View file

@ -22,6 +22,8 @@
selectedElement.properties.id
)
let isAddNew = tags.mapD(t => t.id.startsWith(LastClickFeatureSource.newPointElementId))
function getLayer(properties: Record<string, string>) {
if (properties.id === "settings") {
return UserRelatedState.usersettingsConfig
@ -76,7 +78,10 @@
</div>
{:else}
<div
class="selected-element-view flex h-full w-full flex-col gap-y-1 overflow-y-auto p-1 px-4"
class="selected-element-view flex h-full w-full flex-col gap-y-1 overflow-y-auto"
class:p1={!$isAddNew}
class:px-4={!$isAddNew}
tabindex="-1"
>
{#each $knownTagRenderings as config (config.id)}

11
src/UI/Map/RasterLayerOverview.svelte
View file

@ -11,6 +11,7 @@
import UserRelatedState from "../../Logic/State/UserRelatedState"
import Translations from "../i18n/Translations"
import Tr from "../Base/Tr.svelte"
import TitledPanel from "../Base/TitledPanel.svelte"
export let availableLayers: Store<RasterLayerPolygon[]>
export let mapproperties: MapProperties
@ -50,12 +51,8 @@
}
</script>
<div class="flex h-full flex-col">
<slot name="title">
<h2>
<Tr t={Translations.t.general.backgroundMap} />
</h2>
</slot>
<TitledPanel>
<Tr slot="title" t={Translations.t.general.backgroundMap} />
<div class="grid h-full w-full grid-cols-1 gap-2 md:grid-cols-2">
<RasterLayerPicker
@ -91,4 +88,4 @@
{visible}
/>
</div>
</div>
</TitledPanel>

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

@ -77,7 +77,7 @@
{#if hasLayers}
<form class="flex h-full w-full flex-col" on:submit|preventDefault={() => {}}>
<button tabindex="-1" on:click={() => apply()} class="m-0 h-full w-full cursor-pointer p-1">
<button tabindex="-1" on:click={() => apply()} class="m-0 p-0 rounded-none h-full w-full cursor-pointer border-none">
<span class="pointer-events-none relative h-full w-full">
<OverlayMap
interactive={false}

26
src/UI/Popup/AddNewPoint/AddNewPoint.svelte
View file

@ -36,6 +36,7 @@
import { Translation } from "../../i18n/Translation"
import ToSvelte from "../../Base/ToSvelte.svelte"
import BaseUIElement from "../../BaseUIElement"
import TitledPanel from "../../Base/TitledPanel.svelte"
export let coordinate: { lon: number; lat: number }
export let state: SpecialVisualizationState
@ -116,7 +117,7 @@
theme: state.layout?.id ?? "unkown",
changeType: "create",
snapOnto: snapToWay,
reusePointWithinMeters: 1,
reusePointWithinMeters: 1
})
await state.changes.applyAction(newElementAction)
state.newFeatures.features.ping()
@ -186,6 +187,10 @@
/>
{:else if !$layerIsDisplayed}
<!-- Check that the layer is enabled, so that we don't add a duplicate -->
<TitledPanel>
<Tr slot="title" t={Translations.t.general.add.intro} />
<div class="alert flex items-center justify-center">
<EyeOffIcon class="w-8" />
<Tr
@ -218,7 +223,13 @@
/>
</button>
</div>
</TitledPanel>
{:else if $layerHasFilters}
<TitledPanel>
<Tr slot="title" t={Translations.t.general.add.intro} />
<!-- Some filters are enabled. The feature to add might already be mapped, but hidden -->
<div class="alert flex items-center justify-center">
<EyeOffIcon class="w-8" />
@ -246,13 +257,14 @@
<Tr t={Translations.t.general.add.openLayerControl} />
</button>
</div>
</TitledPanel>
{:else if !confirmedCategory}
<!-- Second, confirm the category -->
<h2 class="mr-12">
<Tr
<TitledPanel>
<Tr slot="title"
t={Translations.t.general.add.confirmTitle.Subs({ title: selectedPreset.preset.title })}
/>
</h2>
{#if selectedPreset.preset.description}
<Tr t={selectedPreset.preset.description} />
@ -293,6 +305,8 @@
</div>
</NextButton>
</div>
</TitledPanel>
{:else if _globalFilter?.length > 0 && _globalFilter?.length > checkedOfGlobalFilters}
<Tr t={_globalFilter[checkedOfGlobalFilters].onNewPoint?.safetyCheck} cls="mx-12" />
<SubtleButton
@ -366,7 +380,9 @@
</div>
</div>
{:else}
<Loading><Tr t={Translations.t.general.add.creating} /></Loading>
<Loading>
<Tr t={Translations.t.general.add.creating} />
</Loading>
{/if}
</div>
</LoginToggle>

13
src/UI/Popup/AddNewPoint/PresetList.svelte
View file

@ -13,6 +13,7 @@
import ToSvelte from "../../Base/ToSvelte.svelte"
import BaseUIElement from "../../BaseUIElement"
import Combine from "../../Base/Combine"
import TitledPanel from "../../Base/TitledPanel.svelte"
/**
* This component lists all the presets and allows the user to select one
@ -79,7 +80,7 @@
text: Translations.t.general.add.addNew.Subs(
{ category: preset.title },
preset.title["context"]
),
)
}
presets.push(simplified)
}
@ -96,11 +97,9 @@
}>()
</script>
<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} />
</h2>
<TitledPanel>
<Tr slot="title" t={Translations.t.general.add.intro} />
{#each presets as preset}
<NextButton on:click={() => dispatch("select", preset)}>
@ -115,4 +114,4 @@
</div>
</NextButton>
{/each}
</div>
</TitledPanel>

9
src/UI/ThemeViewGUI.svelte
View file

@ -472,13 +472,6 @@
<If condition={state.previewedImage.map((i) => i !== undefined)}>
<FloatOver on:close={() => state.previewedImage.setData(undefined)}>
<button
class="absolute right-4 top-4 h-8 w-8 rounded-full p-0"
on:click={() => previewedImage.setData(undefined)}
slot="close-button"
>
<XCircleIcon />
</button>
<ImageOperations image={$previewedImage} />
</FloatOver>
</If>
@ -550,7 +543,6 @@
state.guistate.backgroundLayerSelectionIsOpened.setData(false)
}}
>
<div class="h-full p-2">
<RasterLayerOverview
{availableLayers}
map={state.map}
@ -558,7 +550,6 @@
userstate={state.userRelatedState}
visible={state.guistate.backgroundLayerSelectionIsOpened}
/>
</div>
</FloatOver>
</IfHidden>

6
src/UI/Wikipedia/Wikidatapreview.svelte
View file

@ -15,15 +15,15 @@
</script>
<div class="flex w-full p-2">
<div class="flex w-full p-2 flex-wrap">
{#if imageUrl}
<img src={imageUrl} style={imageStyle} class="mr-2" />
{/if}
<div class="flex flex-col w-full">
<div class="flex flex-col flex-grow">
<div class="flex w-full justify-between">
<div class="flex w-full justify-between flex-wrap">
<Tr cls="font-bold" t={ Translation.fromMap(wikidata.labels) } />
<a href={Wikidata.IdToArticle(wikidata.id)} target="_blank" class="flex must-link items-center">
<Wikidata_icon class="w-10" /> {wikidata.id}

50
src/UI/Wikipedia/WikipediaArticle.svelte
View file

@ -3,14 +3,11 @@
import { Store } from "../../Logic/UIEventSource"
import FromHtml from "../Base/FromHtml.svelte"
import Loading from "../Base/Loading.svelte"
import { Disclosure, DisclosureButton, DisclosurePanel } from "@rgossiaux/svelte-headlessui"
import { ChevronRightIcon } from "@rgossiaux/svelte-heroicons/solid"
import ToSvelte from "../Base/ToSvelte.svelte"
import WikidataPreviewBox from "./WikidataPreviewBox"
import Tr from "../Base/Tr.svelte"
import Translations from "../i18n/Translations"
import Wikipedia from "../../assets/svg/Wikipedia.svelte"
import Wikidatapreview from "./Wikidatapreview.svelte"
import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
/**
* Shows a wikipedia-article + wikidata preview for the given item
@ -21,40 +18,33 @@
)
</script>
{#if $titleOnly}
<div class="low-interaction border-gray-300 border-dashed rounded-xl p-2 flex flex-col">
{#if $titleOnly}
<Loading>{$wikipediaDetails.title}</Loading>
{/if}
{#if $wikipediaDetails.articleUrl}
<a class="flex" href={$wikipediaDetails.articleUrl} rel="noreferrer" target="_blank">
<Wikipedia class="h-6 w-6" />
<Tr t={Translations.t.general.wikipedia.fromWikipedia} />
</a>
{/if}
{/if}
{#if $wikipediaDetails.wikidata}
{#if $wikipediaDetails.wikidata}
<Wikidatapreview wikidata={$wikipediaDetails.wikidata} />
{/if}
{/if}
{#if $wikipediaDetails.articleUrl}
{#if $wikipediaDetails.articleUrl}
{#if $wikipediaDetails.firstParagraph === "" || $wikipediaDetails.firstParagraph === undefined}
<Loading>
<Tr t={Translations.t.general.wikipedia.loading} />
</Loading>
{:else}
<FromHtml clss="wikipedia-article" src={$wikipediaDetails.firstParagraph} />
<Disclosure let:open>
<DisclosureButton>
<span class="flex">
<ChevronRightIcon
style={(open ? "transform: rotate(90deg); " : "") +
" transition: all .25s linear; width: 1.5rem; height: 1.5rem"}
/>
<Tr t={Translations.t.general.wikipedia.readMore} />
</span>
</DisclosureButton>
<DisclosurePanel>
<FromHtml clss="wikipedia-article" src={$wikipediaDetails.restOfArticle} />
</DisclosurePanel>
</Disclosure>
{#if $wikipediaDetails.articleUrl}
<a class="flex self-end my-2" href={$wikipediaDetails.articleUrl} rel="noreferrer" target="_blank">
<Wikipedia class="h-6 w-6" />
<Tr t={Translations.t.general.wikipedia.fromWikipedia} />
</a>
{/if}
{/if}
<AccordionSingle>
<Tr slot="header" t={Translations.t.general.wikipedia.readMore} />
<FromHtml clss="wikipedia-article" src={$wikipediaDetails.restOfArticle} />
</AccordionSingle>
{/if}
{/if}
</div>