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

Themes: improve favourite panel

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-12-02 03:19:50 +01:00
parent 37cdf0f01a
commit 59090fdb39
14 changed files with 176 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

62
assets/svg/center.svg Normal file
View file

@ -0,0 +1,62 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
width="544.02838"
height="544.02838"
viewBox="0 0 544.02838 544.02838"
version="1.1"
id="svg1"
sodipodi:docname="center.svg"
inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<defs
id="defs1" />
<sodipodi:namedview
id="namedview1"
pagecolor="#505050"
bordercolor="#eeeeee"
borderopacity="1"
inkscape:showpageshadow="0"
inkscape:pageopacity="0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
showguides="true"
inkscape:zoom="0.90326851"
inkscape:cx="393.57068"
inkscape:cy="250.756"
inkscape:window-width="1920"
inkscape:window-height="995"
inkscape:window-x="0"
inkscape:window-y="0"
inkscape:window-maximized="1"
inkscape:current-layer="svg1">
<sodipodi:guide
position="171.95879,103.32864"
orientation="0,-1"
id="guide4"
inkscape:locked="false" />
<sodipodi:guide
position="271.68286,132.35281"
orientation="1,0"
id="guide5"
inkscape:locked="false" />
</sodipodi:namedview>
<path
d="m 365.63918,111.75001 h -62.375 V 15.9375 c 0,-8.75 -7,-15.9375 -15.625,-15.9375 h -31.1875 c -8.5625,0 -15.625,7.1875 -15.625,15.9375 v 95.81251 h -62.375 l 93.5625,127.75 z"
id="path1"
sodipodi:nodetypes="ccsssscccc" />
<path
d="m 432.27837,365.63919 v -62.375 h 95.8125 c 8.75,0 15.9375,-7 15.9375,-15.625 v -31.1875 c 0,-8.5625 -7.1875,-15.625 -15.9375,-15.625 h -95.8125 v -62.375 l -127.75,93.5625 z"
id="path1-5"
sodipodi:nodetypes="ccsssscccc" />
<path
d="m 178.38918,432.27838 h 62.375 v 95.8125 c 0,8.75 7,15.9375 15.625,15.9375 h 31.1875 c 8.5625,0 15.625,-7.1875 15.625,-15.9375 v -95.8125 h 62.375 l -93.5625,-127.75 z"
id="path2"
sodipodi:nodetypes="ccsssscccc" />
<path
d="m 111.75,178.38919 v 62.375 H 15.9375 c -8.75,0 -15.9375,7 -15.9375,15.625 v 31.1875 c 0,8.5625 7.1875,15.625 15.9375,15.625 H 111.75 v 62.375 l 127.74999,-93.5625 z"
id="path3"
sodipodi:nodetypes="ccsssscccc" />
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2.3 KiB

2
assets/svg/center.svg.license Normal file
View file

@ -0,0 +1,2 @@
SPDX-FileCopyrightText: Pieter Vander Vennet
SPDX-License-Identifier: CC0

26
assets/svg/license_info.json
View file

@ -153,6 +153,14 @@
"https://commons.wikimedia.org/wiki/File:Camera_font_awesome.svg"
]
},
{
"path": "center.svg",
"license": "CC0-1.0",
"authors": [
"Pieter Vander Vennet"
],
"sources": []
},
{
"path": "checkmark.svg",
"license": "CC0-1.0",
@ -859,24 +867,6 @@
],
"sources": []
},
{
"path": "no_checkmark.svg",
"license": "TRIVIAL",
"authors": [],
"sources": []
},
{
"path": "no_checkmark.svg",
"license": "TRIVIAL",
"authors": [],
"sources": []
},
{
"path": "none.svg",
"license": "TRIVIAL",
"authors": [],
"sources": []
},
{
"path": "not_found.svg",
"license": "CC-BY-4.0",

3
assets/themes/climbing/climbing.json
View file

@ -69,10 +69,12 @@
},
"+titleIcons": [
{
"id": "climbing_length",
"render": "<div class='flex' style='word-wrap: normal; padding-right: 0.25rem;'><img src='./assets/themes/climbing/height.svg' style='height: 1.75rem;'/>{climbing:length}m</div>",
"condition": "climbing:length~*"
},
{
"id":"climbing_bolts",
"mappings": [
{
"if": "__bolts_max~*",
@ -95,6 +97,7 @@
"render": "<div class='w-8 flex justify-center rounded-right-full climbing-{__difficulty_max:char}'> {__difficulty_max}</div>"
},
{
"id": "difficulty",
"render": "<div class='flex justify-center rounded-full pl-1 pr-1 climbing-{__difficulty:char}'> {climbing:grade:french}</div>",
"condition": "__difficulty:char~*"
}

2
package.json
View file

@ -65,7 +65,7 @@
"generate:service-worker": "tsc src/service-worker.ts --outFile public/service-worker.js && git_hash=$(git rev-parse HEAD) && sed -i \"s/GITHUB-COMMIT/$git_hash/\" public/service-worker.js",
"optimize-images": "cd assets/generated/ && find -name '*.png' -exec optipng '{}' \\; && echo 'PNGs are optimized'",
"generate:stats": "vite-node scripts/GenerateSeries.ts",
"reset:layeroverview": "mkdir -p ./src/assets/generated/layers; echo {\\\"themes\\\":[]} > ./src/assets/generated/known_themes.json && echo {\\\"layers\\\": []} > ./src/assets/generated/known_layers.json && rm -f ./src/assets/generated/layers/*.json && rm -f ./src/assets/generated/themes/*.json && cp ./assets/layers/usersettings/usersettings.json ./src/assets/generated/layers/usersettings.json && npm run generate:layeroverview && vite-node scripts/generateLayerOverview.ts -- --force",
"reset:layeroverview": "mkdir -p ./src/assets/generated/layers; echo {\\\"themes\\\":[]} > ./src/assets/generated/known_themes.json && echo {\\\"layers\\\": []} > ./src/assets/generated/known_layers.json && rm -f ./src/assets/generated/layers/*.json && rm -f ./src/assets/generated/themes/*.json && cp ./assets/layers/usersettings/usersettings.json ./src/assets/generated/layers/usersettings.json && echo '{}' > ./src/assets/generated/layers/favourite.json && npm run generate:layeroverview && vite-node scripts/generateLayerOverview.ts -- --force",
"generate": "mkdir -p ./assets/generated; npm run generate:licenses; npm run generate:images; npm run generate:charging-stations; npm run generate:translations; npm run reset:layeroverview; npm run generate:service-worker",
"generate:charging-stations": "cd ./assets/layers/charging_station && vite-node csvToJson.ts && cd -",
"prepare-deploy": "npm run generate:service-worker && ./scripts/build.sh",

2
src/Customizations/AllKnownLayouts.ts
View file

@ -15,7 +15,7 @@ export class AllKnownLayoutsLazy {
constructor(includeFavouriteLayer = true) {
for (const layoutConfigJson of known_themes["themes"]) {
for (const layerId of Constants.added_by_default) {
if (layerId === "favourite") {
if (layerId === "favourite" && favourite.id) {
if (includeFavouriteLayer) {
layoutConfigJson.layers.push(favourite)
}

1
src/Models/MenuState.ts
View file

@ -24,6 +24,7 @@ export class MenuState {
public static readonly _menuviewTabs = [
"about",
"settings",
"favourites",
"community",
"privacy",
"advanced",

15
src/Models/ThemeConfig/Conversion/Validation.ts
View file

@ -22,7 +22,7 @@ import { TagsFilter } from "../../../Logic/Tags/TagsFilter"
import { Translatable } from "../Json/Translatable"
import { ConversionContext } from "./ConversionContext"
class ValidateLanguageCompleteness extends DesugaringStep<any> {
class ValidateLanguageCompleteness extends DesugaringStep<LayoutConfig> {
private readonly _languages: string[]
constructor(...languages: string[]) {
@ -34,7 +34,9 @@ class ValidateLanguageCompleteness extends DesugaringStep<any> {
this._languages = languages ?? ["en"]
}
convert(obj: any, context: ConversionContext): LayerConfig {
convert(obj: LayoutConfig, context: ConversionContext): LayoutConfig {
const origLayers = obj.layers
obj.layers = [...obj.layers].filter((l) => l["id"] !== "favourite")
const translations = Translation.ExtractAllTranslationsFrom(obj)
for (const neededLanguage of this._languages) {
translations
@ -56,7 +58,7 @@ class ValidateLanguageCompleteness extends DesugaringStep<any> {
)
})
}
obj.layers = origLayers
return obj
}
}
@ -1369,7 +1371,12 @@ export class ValidateLayerConfig extends DesugaringStep<LayerConfigJson> {
}
convert(json: LayerConfigJson, context: ConversionContext): LayerConfigJson {
return this.validator.convert(json, context).raw
const prepared = this.validator.convert(json, context)
if (!prepared) {
context.err("Preparing layer failed")
return undefined
}
return prepared?.raw
}
}
export class ValidateLayer extends Conversion<

2
src/Models/ThemeConfig/Json/LayerConfigJson.ts
View file

@ -243,7 +243,7 @@ export interface LayerConfigJson {
* Type: icon[]
* group: infobox
*/
titleIcons?: (string | TagRenderingConfigJson)[] | ["defaults"]
titleIcons?: (string | (TagRenderingConfigJson & { id?: string }))[] | ["defaults"]
/**
* Creates points to render on the map.

59
src/UI/Favourites/FavouriteSummary.svelte
View file

@ -1,10 +1,59 @@
<script lang="ts">
export let properties: Record<string, string>
import type { SpecialVisualizationState } from "../SpecialVisualization";
import TagRenderingAnswer from "../Popup/TagRendering/TagRenderingAnswer.svelte";
import type { Feature } from "geojson";
import { ImmutableStore } from "../../Logic/UIEventSource";
import { GeoOperations } from "../../Logic/GeoOperations";
import Center from "../../assets/svg/Center.svelte";
export let feature: Feature;
let properties: Record<string, string> = feature.properties;
export let state: SpecialVisualizationState;
let tags = state.featureProperties.getStore(properties.id) ?? new ImmutableStore(properties);
const favLayer = state.layerState.filteredLayers.get("favourite");
const favConfig = favLayer.layerDef;
const titleConfig = favConfig.title;
function center(){
const [lon, lat] = GeoOperations.centerpointCoordinates(feature)
state.mapProperties.location.setData(
{lon, lat}
)
state.guistate.menuIsOpened.setData(false)
}
function select(){
state.selectedLayer.setData(favConfig)
state.selectedElement.setData(feature)
center()
}
const titleIconBlacklist = ["osmlink","sharelink","favourite_title_icon"]
</script>
<div>
{JSON.stringify(properties)}
{properties?.id ?? "undefined"}
<a href={properties._backend +"/"+ properties?.id}>OSM</a>
<div class="px-1 my-1 border-2 border-dashed border-gray-300 rounded flex justify-between items-center">
<h3 on:click={() => select()} class="cursor-pointer ml-1 m-0">
<TagRenderingAnswer config={titleConfig} layer={favConfig} selectedElement={feature} {tags} />
</h3>
<div class="flex items-center">
{#each favConfig.titleIcons as titleIconConfig}
{#if (titleIconBlacklist.indexOf(titleIconConfig.id) < 0) && (titleIconConfig.condition?.matchesProperties(properties) ?? true) && (titleIconConfig.metacondition?.matchesProperties( { ...properties, ...state.userRelatedState.preferencesAsTags.data } ) ?? true) && titleIconConfig.IsKnown(properties)}
<div class={titleIconConfig.renderIconClass ?? "flex h-8 w-8 items-center"}>
<TagRenderingAnswer
config={titleIconConfig}
{tags}
selectedElement={feature}
{state}
layer={favLayer}
extraClasses="h-full justify-center"
/>
</div>
{/if}
{/each}
<button on:click={() => center()} class="p-1" ><Center class="w-6 h-6"/></button>
</div>
</div>

8
src/UI/Favourites/Favourites.svelte
View file

@ -11,9 +11,9 @@
<div class="flex flex-col">
You marked {$favourites.length} locations as a favourite location.
This list is only visible to you
{#each $favourites as f}
<FavouriteSummary properties={f.properties} />
{/each}
{#each $favourites as feature (feature.properties.id)}
<FavouriteSummary {feature} {state} />
{/each}
</div>

3
src/UI/ThemeViewGUI.svelte
View file

@ -64,7 +64,6 @@
import Community from "../assets/svg/Community.svelte";
import Download from "../assets/svg/Download.svelte";
import Share from "../assets/svg/Share.svelte";
import FavouriteSummary from "./Favourites/FavouriteSummary.svelte";
import Favourites from "./Favourites/Favourites.svelte";
export let state: ThemeViewState;
@ -499,7 +498,7 @@
Your favourites
</div>
<div class="flex flex-col" slot="content2">
<div class="flex flex-col m-2" slot="content2">
<h3>Your favourite locations</h3>
<Favourites {state}/>
</div>

38
src/assets/editor-layer-index.json
View file

File diff suppressed because one or more lines are too long

4
src/assets/svg/Center.svelte Normal file
View file

@ -0,0 +1,4 @@
<script>
export let color = "#000000"
</script>
<svg {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown width="544.02838" height="544.02838" viewBox="0 0 544.02838 544.02838" version="1.1" id="svg1" sodipodi:docname="center.svg" inkscape:version="1.3.2 (1:1.3.2+202311252150+091e20ef0f)" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg"> <defs id="defs1" /> <sodipodi:namedview id="namedview1" pagecolor="#505050" bordercolor="#eeeeee" borderopacity="1" inkscape:showpageshadow="0" inkscape:pageopacity="0" inkscape:pagecheckerboard="0" inkscape:deskcolor="#d1d1d1" showguides="true" inkscape:zoom="0.90326851" inkscape:cx="393.57068" inkscape:cy="250.756" inkscape:window-width="1920" inkscape:window-height="995" inkscape:window-x="0" inkscape:window-y="0" inkscape:window-maximized="1" inkscape:current-layer="svg1"> <sodipodi:guide position="171.95879,103.32864" orientation="0,-1" id="guide4" inkscape:locked="false" /> <sodipodi:guide position="271.68286,132.35281" orientation="1,0" id="guide5" inkscape:locked="false" /> </sodipodi:namedview> <path d="m 365.63918,111.75001 h -62.375 V 15.9375 c 0,-8.75 -7,-15.9375 -15.625,-15.9375 h -31.1875 c -8.5625,0 -15.625,7.1875 -15.625,15.9375 v 95.81251 h -62.375 l 93.5625,127.75 z" id="path1" sodipodi:nodetypes="ccsssscccc" /> <path d="m 432.27837,365.63919 v -62.375 h 95.8125 c 8.75,0 15.9375,-7 15.9375,-15.625 v -31.1875 c 0,-8.5625 -7.1875,-15.625 -15.9375,-15.625 h -95.8125 v -62.375 l -127.75,93.5625 z" id="path1-5" sodipodi:nodetypes="ccsssscccc" /> <path d="m 178.38918,432.27838 h 62.375 v 95.8125 c 0,8.75 7,15.9375 15.625,15.9375 h 31.1875 c 8.5625,0 15.625,-7.1875 15.625,-15.9375 v -95.8125 h 62.375 l -93.5625,-127.75 z" id="path2" sodipodi:nodetypes="ccsssscccc" /> <path d="m 111.75,178.38919 v 62.375 H 15.9375 c -8.75,0 -15.9375,7 -15.9375,15.625 v 31.1875 c 0,8.5625 7.1875,15.625 15.9375,15.625 H 111.75 v 62.375 l 127.74999,-93.5625 z" id="path3" sodipodi:nodetypes="ccsssscccc" /> </svg>