From a281381284d8d5043c0275c05f95ecaefc955333 Mon Sep 17 00:00:00 2001 From: Pieter Vander Vennet Date: Thu, 27 Jun 2024 03:39:04 +0200 Subject: [PATCH] Finetuning of usage within an iFrame --- langs/en.json | 2 +- public/css/index-tailwind-output.css | 8 +- src/Logic/Web/MangroveReviews.ts | 6 +- src/Models/MenuState.ts | 10 ++ src/Models/ThemeConfig/LayoutConfig.ts | 8 +- src/UI/BigComponents/AboutMapComplete.svelte | 102 ++++++++++++ src/UI/BigComponents/CopyrightPanel.ts | 2 +- src/UI/BigComponents/ThemeIntroPanel.svelte | 11 +- src/UI/ThemeViewGUI.svelte | 162 +++++++------------ 9 files changed, 192 insertions(+), 119 deletions(-) create mode 100644 src/UI/BigComponents/AboutMapComplete.svelte diff --git a/langs/en.json b/langs/en.json index 0b0862b32..15b4df93d 100644 --- a/langs/en.json +++ b/langs/en.json @@ -386,7 +386,7 @@ "retry": "Retry", "returnToTheMap": "Return to the map", "save": "Save", - "screenToSmall": "Open {theme} in a new window", + "screenToSmall": "Open {theme} in a new window", "search": { "error": "Something went wrong…", "nothing": "Nothing found…", diff --git a/public/css/index-tailwind-output.css b/public/css/index-tailwind-output.css index 7fe879a30..52963f583 100644 --- a/public/css/index-tailwind-output.css +++ b/public/css/index-tailwind-output.css @@ -3449,14 +3449,14 @@ video { padding-right: 3rem; } -.pr-1 { - padding-right: 0.25rem; -} - .pl-2 { padding-left: 0.5rem; } +.pr-1 { + padding-right: 0.25rem; +} + .pt-0\.5 { padding-top: 0.125rem; } diff --git a/src/Logic/Web/MangroveReviews.ts b/src/Logic/Web/MangroveReviews.ts index c44665824..bee5f9788 100644 --- a/src/Logic/Web/MangroveReviews.ts +++ b/src/Logic/Web/MangroveReviews.ts @@ -206,10 +206,10 @@ export default class FeatureReviews { this.subjectUri = this.ConstructSubjectUri() - this.subjectUri.addCallbackAndRunD( + this.subjectUri.mapD( async (sub) => { const reviews = await MangroveReviews.getReviews({ sub }) - console.log("Got reviews for", feature, reviews, sub) + console.debug("Got reviews for", feature, reviews, sub) this.addReviews(reviews.reviews, this._name.data) }, [this._name] @@ -221,7 +221,7 @@ export default class FeatureReviews { async (sub) => { try { const reviews = await MangroveReviews.getReviews({ sub }) - console.log("Got reviews (no-encode) for", feature, reviews, sub) + console.debug("Got reviews (no-encode) for", feature, reviews, sub) this.addReviews(reviews.reviews, this._name.data) } catch (e) { console.log("Could not fetch reviews for partially incorrect query ", sub) diff --git a/src/Models/MenuState.ts b/src/Models/MenuState.ts index 30bb6d009..b40926d6a 100644 --- a/src/Models/MenuState.ts +++ b/src/Models/MenuState.ts @@ -36,6 +36,11 @@ export class MenuState { public readonly filtersPanelIsOpened: UIEventSource = new UIEventSource(false) public readonly privacyPanelIsOpened: UIEventSource = new UIEventSource(false) + /** + * Standalone copyright panel + */ + public readonly copyrightPanelIsOpened: UIEventSource = new UIEventSource(false) + public readonly communityIndexPanelIsOpened: UIEventSource = new UIEventSource(false) public readonly allToggles: { toggle: UIEventSource @@ -105,6 +110,11 @@ export class MenuState { name: "privacy", showOverOthers: true, }, + { + toggle: this.copyrightPanelIsOpened, + name: "copyright", + showOverOthers: true, + }, { toggle: this.communityIndexPanelIsOpened, name: "community", diff --git a/src/Models/ThemeConfig/LayoutConfig.ts b/src/Models/ThemeConfig/LayoutConfig.ts index 16ea00481..d9869f238 100644 --- a/src/Models/ThemeConfig/LayoutConfig.ts +++ b/src/Models/ThemeConfig/LayoutConfig.ts @@ -336,14 +336,16 @@ export default class LayoutConfig implements LayoutInformation { ...json, layers: json.layers.filter((l) => l["id"] !== "favourite"), } - this.usedImages = Array.from( + const usedImages = new ExtractImages(this.official, undefined) .convertStrict( jsonNoFavourites, ConversionContext.construct([json.id], ["ExtractImages"]) ) - .map((i) => i.path) - ).sort() + .flatMap((i) => i.path) + usedImages.sort() + + this.usedImages = Utils.Dedup(usedImages) return this.usedImages } } diff --git a/src/UI/BigComponents/AboutMapComplete.svelte b/src/UI/BigComponents/AboutMapComplete.svelte new file mode 100644 index 000000000..98000af1c --- /dev/null +++ b/src/UI/BigComponents/AboutMapComplete.svelte @@ -0,0 +1,102 @@ + + +
+ + + + + {#if Utils.isIframe} + + {:else} + + {/if} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ {Constants.vNumber} +
+
diff --git a/src/UI/BigComponents/CopyrightPanel.ts b/src/UI/BigComponents/CopyrightPanel.ts index 7f73e6883..345f8c047 100644 --- a/src/UI/BigComponents/CopyrightPanel.ts +++ b/src/UI/BigComponents/CopyrightPanel.ts @@ -40,7 +40,7 @@ export default class CopyrightPanel extends Combine { const t = Translations.t.general.attribution const layoutToUse = state.layout - const iconAttributions: BaseUIElement[] = Utils.Dedup(layoutToUse.getUsedImages()).map( + const iconAttributions: BaseUIElement[] =layoutToUse.getUsedImages().map( CopyrightPanel.IconAttribution ) diff --git a/src/UI/BigComponents/ThemeIntroPanel.svelte b/src/UI/BigComponents/ThemeIntroPanel.svelte index d73d2f106..71c60d3f3 100644 --- a/src/UI/BigComponents/ThemeIntroPanel.svelte +++ b/src/UI/BigComponents/ThemeIntroPanel.svelte @@ -51,10 +51,13 @@ - - {#if layout.layers.some((l) => l.presets?.length > 0)} - - {/if} + + + + {#if layout.layers.some((l) => l.presets?.length > 0)} + + {/if} + diff --git a/src/UI/ThemeViewGUI.svelte b/src/UI/ThemeViewGUI.svelte index 51385a220..52ae80932 100644 --- a/src/UI/ThemeViewGUI.svelte +++ b/src/UI/ThemeViewGUI.svelte @@ -31,8 +31,6 @@ import CopyrightPanel from "./BigComponents/CopyrightPanel" import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte" import ModalRight from "./Base/ModalRight.svelte" - import { Utils } from "../Utils" - import Hotkeys from "./Base/Hotkeys" import LevelSelector from "./BigComponents/LevelSelector.svelte" import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte" import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte" @@ -41,8 +39,6 @@ import RasterLayerOverview from "./Map/RasterLayerOverview.svelte" import IfHidden from "./Base/IfHidden.svelte" import { onDestroy } from "svelte" - import MapillaryLink from "./BigComponents/MapillaryLink.svelte" - import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte" import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte" import StateIndicator from "./BigComponents/StateIndicator.svelte" import ShareScreen from "./BigComponents/ShareScreen.svelte" @@ -50,14 +46,10 @@ import PendingChangesIndicator from "./BigComponents/PendingChangesIndicator.svelte" import Cross from "../assets/svg/Cross.svelte" import LanguagePicker from "./InputElement/LanguagePicker.svelte" - import Mastodon from "../assets/svg/Mastodon.svelte" import Bug from "../assets/svg/Bug.svelte" - import Liberapay from "../assets/svg/Liberapay.svelte" - import OpenJosm from "./Base/OpenJosm.svelte" import Min from "../assets/svg/Min.svelte" import Plus from "../assets/svg/Plus.svelte" import Filter from "../assets/svg/Filter.svelte" - import Add from "../assets/svg/Add.svelte" import Community from "../assets/svg/Community.svelte" import Favourites from "./Favourites/Favourites.svelte" import ImageOperations from "./Image/ImageOperations.svelte" @@ -79,6 +71,9 @@ import ChevronRight from "@babeard/svelte-heroicons/solid/ChevronRight" import DocumentChartBar from "@babeard/svelte-heroicons/outline/DocumentChartBar" import Marker from "./Map/Marker.svelte" + import AboutMapComplete from "./BigComponents/AboutMapComplete.svelte" + import IfNot from "./Base/IfNot.svelte" + import Hotkeys from "./Base/Hotkeys" export let state: ThemeViewState let layout = state.layout @@ -124,11 +119,11 @@ state.mapProperties.installCustomKeyboardHandler(viewport) let canZoomIn = mapproperties.maxzoom.map( (mz) => mapproperties.zoom.data < mz, - [mapproperties.zoom] + [mapproperties.zoom], ) let canZoomOut = mapproperties.minzoom.map( (mz) => mapproperties.zoom.data > mz, - [mapproperties.zoom] + [mapproperties.zoom], ) function updateViewport() { @@ -165,7 +160,7 @@ onDestroy( rasterLayer.addCallbackAndRunD((l) => { rasterLayerName = l.properties.name - }) + }), ) let previewedImage = state.previewedImage @@ -196,7 +191,7 @@ let openMapButton: UIEventSource = new UIEventSource(undefined) let openMenuButton: UIEventSource = new UIEventSource(undefined) let openCurrentViewLayerButton: UIEventSource = new UIEventSource( - undefined + undefined, ) let _openNewElementButton: HTMLButtonElement let openNewElementButton: UIEventSource = new UIEventSource(undefined) @@ -250,27 +245,30 @@
- state.guistate.themeIsOpened.setData(true)} - on:keydown={forwardEventToMap} - htmlElem={openMapButton} - > -
- - - - - -
- - state.guistate.menuIsOpened.setData(true)} - on:keydown={forwardEventToMap} - htmlElem={openMenuButton} - > - - + + state.guistate.themeIsOpened.setData(true)} + on:keydown={forwardEventToMap} + htmlElem={openMapButton} + > +
+ + + + + +
+ + + state.guistate.menuIsOpened.setData(true)} + on:keydown={forwardEventToMap} + htmlElem={openMenuButton} + > + + + {#if currentViewLayer?.tagRenderings && currentViewLayer.defaultIcon()} { @@ -350,8 +348,12 @@ { + if(featureSwitches.featureSwitchWelcomeMessage.data){ state.guistate.themeViewTab.setData("copyright") state.guistate.themeIsOpened.setData(true) + }else{ + state.guistate.copyrightPanelIsOpened.setData(true) + } }} > ©
- new CopyrightPanel(state)} slot="content2" /> +
+ new CopyrightPanel(state)} /> +
+
@@ -569,78 +574,11 @@
-
- - - - - {#if Utils.isIframe} - - {:else} - - {/if} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - +
+
- {Constants.vNumber}
@@ -702,6 +640,24 @@ + + state.guistate.privacyPanelIsOpened.setData(false)}> +
+

+ +

+
+

+ + +

+ + new CopyrightPanel(state)} /> +
+
+ + + state.guistate.communityIndexPanelIsOpened.setData(false)}>