forked from MapComplete/MapComplete
Refactoring: small styling issues
This commit is contained in:
parent
0e81b65363
commit
a4a3b8a5ad
7 changed files with 94 additions and 37 deletions
|
|
@ -30,6 +30,9 @@ export default class FeatureSourceMerger implements IndexedFeatureSource {
|
|||
}
|
||||
|
||||
public addSource(source: FeatureSource) {
|
||||
if(!source){
|
||||
return
|
||||
}
|
||||
this._sources.push(source)
|
||||
source.features.addCallbackAndRun(() => {
|
||||
this.addData(this._sources.map((s) => s.features.data))
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export default class DynamicGeoJsonTileSource extends DynamicTileSource {
|
|||
if (!isWhiteListed) {
|
||||
console.debug(
|
||||
"Not downloading tile",
|
||||
...zxy,
|
||||
zxy,
|
||||
"as it is not on the whitelist"
|
||||
)
|
||||
return undefined
|
||||
|
|
|
|||
57
UI/BigComponents/SelectedElementTitle.svelte
Normal file
57
UI/BigComponents/SelectedElementTitle.svelte
Normal file
|
|
@ -0,0 +1,57 @@
|
|||
<script lang="ts">
|
||||
import type {Feature} from "geojson";
|
||||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
|
||||
import type {SpecialVisualizationState} from "../SpecialVisualization";
|
||||
import TagRenderingAnswer from "../Popup/TagRendering/TagRenderingAnswer.svelte";
|
||||
import TagRenderingEditable from "../Popup/TagRendering/TagRenderingEditable.svelte";
|
||||
import {onDestroy} from "svelte";
|
||||
import Translations from "../i18n/Translations";
|
||||
import Tr from "../Base/Tr.svelte";
|
||||
import {XCircleIcon} from "@rgossiaux/svelte-heroicons/solid";
|
||||
|
||||
export let state: SpecialVisualizationState;
|
||||
export let layer: LayerConfig;
|
||||
export let selectedElement: Feature;
|
||||
export let tags: UIEventSource<Record<string, string>>;
|
||||
|
||||
|
||||
let _tags: Record<string, string>;
|
||||
onDestroy(tags.addCallbackAndRun(tags => {
|
||||
_tags = tags;
|
||||
}));
|
||||
|
||||
let _metatags: Record<string, string>;
|
||||
onDestroy(state.userRelatedState.preferencesAsTags.addCallbackAndRun(tags => {
|
||||
_metatags = tags;
|
||||
}));
|
||||
</script>
|
||||
|
||||
|
||||
{#if _tags._deleted === "yes"}
|
||||
<Tr t={ Translations.t.delete.isDeleted}/>
|
||||
{:else}
|
||||
<div class="flex border-b-2 border-black shadow justify-between items-center">
|
||||
<div class="flex flex-col">
|
||||
|
||||
<!-- Title element-->
|
||||
<h3>
|
||||
<TagRenderingAnswer config={layer.title} {selectedElement} {state} {tags}
|
||||
{layer}></TagRenderingAnswer>
|
||||
</h3>
|
||||
|
||||
<div class="flex flex-row flex-wrap pt-0.5 sm:pt-1 items-center mr-2">
|
||||
{#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">
|
||||
<TagRenderingAnswer config={titleIconConfig} {tags} {selectedElement} {state}
|
||||
{layer}></TagRenderingAnswer>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<XCircleIcon class="w-8 h-8 cursor-pointer" on:click={() => state.selectedElement.setData(undefined)}/>
|
||||
</div>
|
||||
{/if}
|
||||
|
|
@ -3,12 +3,10 @@
|
|||
import {UIEventSource} from "../../Logic/UIEventSource";
|
||||
import LayerConfig from "../../Models/ThemeConfig/LayerConfig";
|
||||
import type {SpecialVisualizationState} from "../SpecialVisualization";
|
||||
import TagRenderingAnswer from "../Popup/TagRendering/TagRenderingAnswer.svelte";
|
||||
import TagRenderingEditable from "../Popup/TagRendering/TagRenderingEditable.svelte";
|
||||
import {onDestroy} from "svelte";
|
||||
import Translations from "../i18n/Translations";
|
||||
import Tr from "../Base/Tr.svelte";
|
||||
import {XCircleIcon} from "@rgossiaux/svelte-heroicons/solid";
|
||||
|
||||
export let state: SpecialVisualizationState;
|
||||
export let layer: LayerConfig;
|
||||
|
|
@ -32,30 +30,6 @@
|
|||
{#if _tags._deleted === "yes"}
|
||||
<Tr t={ Translations.t.delete.isDeleted}/>
|
||||
{:else}
|
||||
<div class="absolute flex flex-col h-full w-full normal-background">
|
||||
<div class="flex border-b-2 border-black shadow justify-between items-center">
|
||||
<div class="flex flex-col">
|
||||
|
||||
<!-- Title element-->
|
||||
<h3>
|
||||
<TagRenderingAnswer config={layer.title} {selectedElement} {state} {tags}
|
||||
{layer}></TagRenderingAnswer>
|
||||
</h3>
|
||||
|
||||
<div class="flex flex-row flex-wrap pt-0.5 sm:pt-1 items-center mr-2">
|
||||
{#each layer.titleIcons as titleIconConfig}
|
||||
{#if (titleIconConfig.condition?.matchesProperties(_tags) ?? true) && (titleIconConfig.metacondition?.matchesProperties(_tags) ?? true) && titleIconConfig.IsKnown(_tags)}
|
||||
<div class="w-8 h-8">
|
||||
<TagRenderingAnswer config={titleIconConfig} {tags} {selectedElement} {state}
|
||||
{layer}></TagRenderingAnswer>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<XCircleIcon class="w-8 h-8 cursor-pointer" on:click={() => state.selectedElement.setData(undefined)}/>
|
||||
</div>
|
||||
<div class="flex flex-col overflow-y-auto">
|
||||
{#each layer.tagRenderings as config (config.id)}
|
||||
{#if (config.condition === undefined || config.condition.matchesProperties(_tags)) && (config.metacondition === undefined || config.metacondition.matchesProperties({..._tags, ..._metatags}))}
|
||||
|
|
@ -66,6 +40,4 @@
|
|||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -30,6 +30,13 @@ export let mappingIsSelected: boolean
|
|||
* This is the searchterm where it might hide
|
||||
*/
|
||||
export let searchTerm: undefined | UIEventSource<string>
|
||||
|
||||
$: {
|
||||
if(selectedElement !== undefined || mapping !== undefined){
|
||||
searchTerm.setData(undefined)
|
||||
}
|
||||
}
|
||||
|
||||
let matchesTerm: Store<boolean> | undefined = searchTerm?.map(search => {
|
||||
if (!search) {
|
||||
return true
|
||||
|
|
@ -45,7 +52,7 @@ let matchesTerm: Store<boolean> | undefined = searchTerm?.map(search => {
|
|||
if (mapping.then.txt.toLowerCase().indexOf(search) >= 0) {
|
||||
return true
|
||||
}
|
||||
const searchTerms = mapping?.searchTerms[Locale.language.data]
|
||||
const searchTerms = mapping?.searchTerms?.[Locale.language.data]
|
||||
if (searchTerms?.some(t => t.toLowerCase().indexOf(search) >= 0)) {
|
||||
return true
|
||||
}
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@
|
|||
import LevelSelector from "./BigComponents/LevelSelector.svelte";
|
||||
import Svg from "../Svg";
|
||||
import ExtraLinkButton from "./BigComponents/ExtraLinkButton";
|
||||
import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte";
|
||||
|
||||
export let state: ThemeViewState;
|
||||
let layout = state.layout;
|
||||
|
|
@ -45,7 +46,7 @@
|
|||
let selectedElement: UIEventSource<Feature> = state.selectedElement;
|
||||
let selectedLayer: UIEventSource<LayerConfig> = state.selectedLayer;
|
||||
|
||||
const selectedViewElement = selectedElement.map(selectedElement => {
|
||||
const selectedElementView = selectedElement.map(selectedElement => {
|
||||
// Svelte doesn't properly reload some of the legacy UI-elements
|
||||
// As such, we _reconstruct_ the selectedElementView every time a new feature is selected
|
||||
// This is a bit wasteful, but until everything is a svelte-component, this should do the trick
|
||||
|
|
@ -55,7 +56,20 @@
|
|||
}
|
||||
|
||||
const tags = state.featureProperties.getStore(selectedElement.properties.id);
|
||||
return new SvelteUIElement(SelectedElementView, {state, layer, selectedElement, tags});
|
||||
return new SvelteUIElement(SelectedElementView, {state, layer, selectedElement, tags})
|
||||
}, [selectedLayer]);
|
||||
|
||||
const selectedElementTitle = selectedElement.map(selectedElement => {
|
||||
// Svelte doesn't properly reload some of the legacy UI-elements
|
||||
// As such, we _reconstruct_ the selectedElementView every time a new feature is selected
|
||||
// This is a bit wasteful, but until everything is a svelte-component, this should do the trick
|
||||
const layer = selectedLayer.data;
|
||||
if (selectedElement === undefined || layer === undefined) {
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const tags = state.featureProperties.getStore(selectedElement.properties.id);
|
||||
return new SvelteUIElement(SelectedElementTitle, {state, layer, selectedElement, tags})
|
||||
}, [selectedLayer]);
|
||||
|
||||
|
||||
|
|
@ -132,15 +146,19 @@
|
|||
</If>
|
||||
</div>
|
||||
|
||||
<If condition={selectedViewElement.map(v => v !== undefined && selectedLayer.data !== undefined && !selectedLayer.data.popupInFloatover,[ selectedLayer] )}>
|
||||
<If condition={selectedElementView.map(v => v !== undefined && selectedLayer.data !== undefined && !selectedLayer.data.popupInFloatover,[ selectedLayer] )}>
|
||||
<ModalRight on:close={() => {selectedElement.setData(undefined)}}>
|
||||
<ToSvelte construct={new VariableUiElement(selectedViewElement).SetClass("w-full h-full")}></ToSvelte>
|
||||
<div class="absolute flex flex-col h-full w-full normal-background">
|
||||
<ToSvelte construct={new VariableUiElement(selectedElementTitle)}></ToSvelte>
|
||||
|
||||
<ToSvelte construct={new VariableUiElement(selectedElementView)}></ToSvelte>
|
||||
</div>
|
||||
</ModalRight>
|
||||
</If>
|
||||
|
||||
<If condition={selectedViewElement.map(v => v !== undefined && selectedLayer.data !== undefined && selectedLayer.data.popupInFloatover,[ selectedLayer] )}>
|
||||
<If condition={selectedElementView.map(v => v !== undefined && selectedLayer.data !== undefined && selectedLayer.data.popupInFloatover,[ selectedLayer] )}>
|
||||
<FloatOver on:close={() => {selectedElement.setData(undefined)}}>
|
||||
<ToSvelte construct={new VariableUiElement(selectedViewElement)}></ToSvelte>
|
||||
<ToSvelte construct={new VariableUiElement(selectedElementView)}></ToSvelte>
|
||||
</FloatOver>
|
||||
</If>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "mapcomplete",
|
||||
"version": "0.30.3",
|
||||
"version": "0.30.4",
|
||||
"repository": "https://github.com/pietervdvn/MapComplete",
|
||||
"description": "A small website to edit OSM easily",
|
||||
"bugs": "https://github.com/pietervdvn/MapComplete/issues",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue