Bastian-Greshake-Tzovaras/MapComplete
1
0
Fork 0
forked from MapComplete/MapComplete
Code Pull requests Activity

Styling: theme view buttons

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-04-24 02:27:55 +02:00
parent c9697b7ffb
commit 652d617583
8 changed files with 160 additions and 80 deletions
Download patch file Download diff file Expand all files Collapse all files

2
UI/Base/Hotkeys.ts
View file

@ -123,7 +123,7 @@ export default class Hotkeys {
new Table(
[t.key, t.action],
byKey.map(([key, doc]) => {
return [new FixedUiElement(key).SetClass("code"), doc]
return [new FixedUiElement(key).SetClass("literal-code"), doc]
})
),
])

4
UI/Base/MapControlButton.svelte
View file

@ -8,6 +8,6 @@
</script>
<div on:click={e => dispatch("click", e)} class="subtle-background rounded-full min-w-10 w-fit h-10 m-0.5 md:m-1 p-1 cursor-pointer">
<slot class="m-4"></slot>
<div on:click={e => dispatch("click", e)} class="subtle-background rounded-full h-fit w-fit m-0.5 md:m-1 p-0.5 sm:p-1 cursor-pointer">
<slot/>
</div>

4
UI/BigComponents/Geosearch.svelte
View file

@ -69,7 +69,7 @@
</script>
<div class="flex normal-background rounded-full pl-2">
<div class="flex normal-background rounded-full pl-2 justify-between">
<form>
{#if isRunning}
@ -89,7 +89,7 @@
{/if}
</form>
<div class="w-6 h-6" on:click={performSearch}>
<div class="w-6 h-6 self-end" on:click={performSearch}>
<ToSvelte construct={Svg.search_ui}></ToSvelte>
</div>
</div>

2
UI/DefaultGuiState.ts
View file

@ -48,7 +48,7 @@ export class DefaultGuiState {
}
}
public closeAll() {
public closeAll(except) {
for (const sourceKey in this.sources) {
this.sources[sourceKey].setData(false)
}

53
UI/ThemeViewGUI.svelte
View file

@ -64,27 +64,37 @@
</script>
<div class="h-screen w-screen absolute top-0 left-0 flex">
<div class="h-screen w-screen absolute top-0 left-0 overflow-hidden">
<MaplibreMap map={maplibremap}></MaplibreMap>
</div>
<div class="absolute top-0 left-0 mt-2 ml-2">
<MapControlButton on:click={() => state.guistate.themeIsOpened.setData(true)}>
<div class="flex mr-2 items-center cursor-pointer">
<img class="w-8 h-8 block mr-2" src={layout.icon}>
<b>
<Tr t={layout.title}></Tr>
</b>
<div class="absolute top-0 left-0 w-full ">
<!-- Top components -->
<If condition={state.featureSwitches.featureSwitchSearch}>
<div class="sm:w-min float-right m-1 sm:m-2 max-[320px]:w-full">
<Geosearch bounds={state.mapProperties.bounds} perLayer={state.perLayer} {selectedElement}
{selectedLayer}></Geosearch>
</div>
</MapControlButton>
<MapControlButton on:click={() =>state.guistate.menuIsOpened.setData(true)}>
<MenuIcon class="w-8 h-8 cursor-pointer"></MenuIcon>
</MapControlButton>
<If condition={state.featureSwitchIsTesting}>
</If>
<div class="float-left m-1 sm:m-2 md:m-4">
<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">
<img class="w-4 h-4 sm:w-6 sm:h-6 md:w-8 md:h-8 block mr-0.5 sm:mr-1 md:mr-2" src={layout.icon}>
<b class="mr-1">
<Tr t={layout.title}></Tr>
</b>
</div>
</MapControlButton>
<MapControlButton on:click={() =>state.guistate.menuIsOpened.setData(true)}>
<MenuIcon class="w-6 h-6 md:w-8 md:h-8 cursor-pointer"></MenuIcon>
</MapControlButton>
<If condition={state.featureSwitchIsTesting}>
<span class="alert">
Testmode
</span>
</If>
</If>
</div>
</div>
<div class="absolute bottom-0 left-0 mb-4 ml-4">
@ -93,26 +103,19 @@
<div class="absolute bottom-0 right-0 mb-4 mr-4">
<MapControlButton on:click={() => mapproperties.zoom.update(z => z+1)}>
<ToSvelte construct={Svg.plus_ui}></ToSvelte>
<img src="./assets/svg/plus.svg" class="w-6 h-6 md:w-8 md:h-8"/>
</MapControlButton>
<MapControlButton on:click={() => mapproperties.zoom.update(z => z-1)}>
<ToSvelte construct={Svg.min_ui}></ToSvelte>
<img src="./assets/svg/min.svg" class="w-6 h-6 md:w-8 md:h-8"/>
</MapControlButton>
<If condition={featureSwitches.featureSwitchGeolocation}>
<MapControlButton>
<ToSvelte
construct={new GeolocationControl(state.geolocation, mapproperties).SetClass("block w-8 h-8")}></ToSvelte>
construct={new GeolocationControl(state.geolocation, mapproperties).SetClass("block w-6 h-6 md:w-8 md:h-8")}></ToSvelte>
</MapControlButton>
</If>
</div>
<div class="absolute top-0 right-0 mt-4 mr-4">
<If condition={state.featureSwitches.featureSwitchSearch}>
<Geosearch bounds={state.mapProperties.bounds} perLayer={state.perLayer} {selectedElement}
{selectedLayer}></Geosearch>
</If>
</div>
<If condition={selectedViewElement.map(v => v !== undefined)}>
<ModalRight on:close={() => {selectedElement.setData(undefined)}}>
<ToSvelte construct={new VariableUiElement(selectedViewElement)}></ToSvelte>
@ -166,7 +169,7 @@
state={state.overlayLayerStates.get(tilesource.id)}
highlightedLayer={state.guistate.highlightedLayerInFilters}
zoomlevel={state.mapProperties.zoom}
/>
/>
{/each}
<If condition={state.featureSwitches.featureSwitchBackgroundSelection}>
<RasterLayerPicker {availableLayers} value={mapproperties.rasterLayer}></RasterLayerPicker>