midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki 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
Show stats Download patch file Download diff file Expand all files Collapse all files

11
Models/MenuState.ts
View file

@ -54,6 +54,17 @@ export class MenuState {
this.highlightedLayerInFilters.setData(undefined)
}
})
this.menuIsOpened.addCallbackAndRunD((opened) => {
if (opened) {
this.themeIsOpened.setData(false)
}
})
this.themeIsOpened.addCallbackAndRunD((opened) => {
if (opened) {
this.menuIsOpened.setData(false)
}
})
}
public openFilterView(highlightLayer?: LayerConfig | string) {
this.themeIsOpened.setData(true)

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>

11
assets/layers/recycling/recycling.json
View file

@ -23,7 +23,7 @@
"calculatedTags": [
"_waste_amount=Object.values(Object.keys(feat.properties).filter((key) => key.startsWith('recycling:')).reduce((cur, key) => { return Object.assign(cur, { [key]: feat.properties[key] })}, {})).reduce((n, x) => n + (x == \"yes\"), 0);"
],
"minzoom": 12,
"minzoom": 11,
"title": {
"render": {
"en": "Recycling facility",
@ -36,12 +36,7 @@
{
"if": "name~*",
"then": {
"*": "{name}",
"en": "Recycling centre",
"nl": "Recyclingcentrum",
"de": "Wertstoffhof",
"es": "Centro de reciclaje",
"it": "Centro di riciclo rifiuti"
"*": "{name}"
}
},
{
@ -1410,4 +1405,4 @@
"enableRelocation": true,
"enableImproveAccuracy": true
}
}
}

153
css/index-tailwind-output.css
View file

@ -787,14 +787,14 @@ video {
margin: 0.5rem;
}
.m-4 {
margin: 1rem;
}
.m-1 {
margin: 0.25rem;
}
.m-4 {
margin: 1rem;
}
.m-6 {
margin: 1.5rem;
}
@ -803,16 +803,16 @@ video {
margin: 1px;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.my-2 {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
@ -833,10 +833,6 @@ video {
margin-bottom: 0.75rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.mr-2 {
margin-right: 0.5rem;
}
@ -857,18 +853,30 @@ video {
margin-top: 1.5rem;
}
.mt-2 {
margin-top: 0.5rem;
.mr-0\.5 {
margin-right: 0.125rem;
}
.ml-2 {
margin-left: 0.5rem;
.mr-0 {
margin-right: 0px;
}
.mr-1 {
margin-right: 0.25rem;
}
.mb-4 {
margin-bottom: 1rem;
}
.ml-4 {
margin-left: 1rem;
}
.mt-2 {
margin-top: 0.5rem;
}
.mb-24 {
margin-bottom: 6rem;
}
@ -877,6 +885,10 @@ video {
margin-left: 0.25rem;
}
.ml-2 {
margin-left: 0.5rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
@ -889,10 +901,6 @@ video {
margin-bottom: 2.5rem;
}
.mr-1 {
margin-right: 0.25rem;
}
.mt-0 {
margin-top: 0px;
}
@ -917,10 +925,6 @@ video {
margin-bottom: 0.25rem;
}
.mr-0 {
margin-right: 0px;
}
.-ml-6 {
margin-left: -1.5rem;
}
@ -1025,6 +1029,12 @@ video {
height: 0.75rem;
}
.h-fit {
height: -webkit-fit-content;
height: -moz-fit-content;
height: fit-content;
}
.h-11 {
height: 2.75rem;
}
@ -1331,26 +1341,26 @@ video {
word-break: break-all;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-lg {
border-radius: 0.5rem;
.rounded {
border-radius: 0.25rem;
}
.rounded-3xl {
border-radius: 1.5rem;
}
.rounded {
border-radius: 0.25rem;
}
.rounded-full {
border-radius: 9999px;
}
.rounded-xl {
border-radius: 0.75rem;
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-md {
border-radius: 0.375rem;
}
@ -1505,10 +1515,6 @@ video {
padding: 0.5rem;
}
.p-3 {
padding: 0.75rem;
}
.p-0\.5 {
padding: 0.125rem;
}
@ -1517,6 +1523,10 @@ video {
padding: 0px;
}
.p-3 {
padding: 0.75rem;
}
.p-8 {
padding: 2rem;
}
@ -2282,16 +2292,35 @@ input {
color: var(--unsubtle-detail-color-contrast);
}
@media (max-width: 320px) {
.max-\[320px\]\:w-full {
width: 100%;
}
}
@media (min-width: 640px) {
.sm\:m-2 {
margin: 0.5rem;
}
.sm\:m-6 {
margin: 1.5rem;
}
.sm\:mx-1 {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
.sm\:mx-auto {
margin-left: auto;
margin-right: auto;
}
.sm\:mr-1 {
margin-right: 0.25rem;
}
.sm\:mt-5 {
margin-top: 1.25rem;
}
@ -2308,10 +2337,23 @@ input {
height: 6rem;
}
.sm\:h-6 {
height: 1.5rem;
}
.sm\:w-24 {
width: 6rem;
}
.sm\:w-min {
width: -webkit-min-content;
width: min-content;
}
.sm\:w-6 {
width: 1.5rem;
}
.sm\:max-w-xl {
max-width: 36rem;
}
@ -2336,6 +2378,10 @@ input {
padding: 1.5rem;
}
.sm\:p-1 {
padding: 0.25rem;
}
.sm\:p-2 {
padding: 0.5rem;
}
@ -2364,6 +2410,10 @@ input {
margin: 0.25rem;
}
.md\:m-4 {
margin: 1rem;
}
.md\:m-8 {
margin: 2rem;
}
@ -2372,14 +2422,27 @@ input {
margin: 0.5rem;
}
.md\:mt-5 {
margin-top: 1.25rem;
.md\:mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.md\:mr-2 {
margin-right: 0.5rem;
}
.md\:mr-4 {
margin-right: 1rem;
}
.md\:mt-4 {
margin-top: 1rem;
}
.md\:mt-5 {
margin-top: 1.25rem;
}
.md\:flex {
display: flex;
}
@ -2388,10 +2451,18 @@ input {
display: grid;
}
.md\:h-8 {
height: 2rem;
}
.md\:h-12 {
height: 3rem;
}
.md\:w-8 {
width: 2rem;
}
.md\:w-2\/6 {
width: 33.333333%;
}