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

UX: enable menu drawer on index page, slightly reorder index page

Browse source
This commit is contained in:
Pieter Vander Vennet 2025-02-25 02:16:00 +01:00
parent b71f07974e
commit 383eebfdca
10 changed files with 280 additions and 263 deletions
Download patch file Download diff file Expand all files Collapse all files

3
src/Logic/ContributorCount.ts
View file

@ -16,10 +16,9 @@ export default class ContributorCount {
perLayer: ReadonlyMap<string, GeoIndexedStore> perLayer: ReadonlyMap<string, GeoIndexedStore>
}) { }) {
this.perLayer = state.perLayer this.perLayer = state.perLayer
const self = this
state.mapProperties.bounds.mapD( state.mapProperties.bounds.mapD(
(bbox) => { (bbox) => {
self.update(bbox) this.update(bbox)
}, },
[state.dataIsLoading] [state.dataIsLoading]
) )

6
src/Models/MenuState.ts
View file

@ -44,9 +44,9 @@ export class MenuState {
undefined undefined
) )
public highlightedUserSetting: UIEventSource<string> = new UIEventSource<string>(undefined) public highlightedUserSetting: UIEventSource<string> = new UIEventSource<string>(undefined)
private readonly _selectedElement: UIEventSource<any> private readonly _selectedElement: UIEventSource<any> | undefined
constructor(selectedElement: UIEventSource<any>) { constructor(selectedElement: UIEventSource<any> | undefined) {
this._selectedElement = selectedElement this._selectedElement = selectedElement
// Note: this class is _not_ responsible to update the Hash, @see ThemeViewStateHashActor for this // Note: this class is _not_ responsible to update the Hash, @see ThemeViewStateHashActor for this
const states = {} const states = {}
@ -118,7 +118,7 @@ export class MenuState {
if (MenuState.previewedImage.data !== undefined) { if (MenuState.previewedImage.data !== undefined) {
return true return true
} }
if (this._selectedElement.data) { if (this._selectedElement?.data) {
return true return true
} }
return Object.values(this.pageStates).some((t) => t.data) return Object.values(this.pageStates).some((t) => t.data)

112
src/UI/AllThemesGui.svelte
View file

@ -27,6 +27,11 @@
import { AndroidPolyfill } from "../Logic/Web/AndroidPolyfill" import { AndroidPolyfill } from "../Logic/Web/AndroidPolyfill"
import Forgejo from "../assets/svg/Forgejo.svelte" import Forgejo from "../assets/svg/Forgejo.svelte"
import Locale from "./i18n/Locale" import Locale from "./i18n/Locale"
import DrawerLeft from "./Base/DrawerLeft.svelte"
import MenuDrawer from "./BigComponents/MenuDrawer.svelte"
import { MenuState } from "../Models/MenuState"
import { MenuIcon } from "@rgossiaux/svelte-heroicons/solid"
import AccordionSingle from "./Flowbite/AccordionSingle.svelte"
AndroidPolyfill.init().then(() => console.log("Android polyfill setup completed")) AndroidPolyfill.init().then(() => console.log("Android polyfill setup completed"))
const featureSwitches = new OsmConnectionFeatureSwitches() const featureSwitches = new OsmConnectionFeatureSwitches()
@ -39,6 +44,13 @@
) )
}) })
const state = new UserRelatedState(osmConnection) const state = new UserRelatedState(osmConnection)
const guistate = new MenuState(undefined)
const menuDrawerState = {
guistate, osmConnection,
userRelatedState: state,
featureSwitches: { featureSwitchEnableLogin: new UIEventSource(true) }
}
const t = Translations.t.index const t = Translations.t.index
const tu = Translations.t.general const tu = Translations.t.general
const tr = Translations.t.general.morescreen const tr = Translations.t.general.morescreen
@ -138,20 +150,36 @@
</script> </script>
<main> <main>
<div class="absolute h-screen w-screen bg-white top-0 left-0" style="z-index: -1;"></div>
<div class="h-full overflow-hidden">
<DrawerLeft shown={guistate.pageStates.menu}>
<div class="h-screen overflow-y-auto">
<MenuDrawer onlyLink={true} state={menuDrawerState} />
</div>
</DrawerLeft>
</div>
<div class="m-4 flex flex-col"> <div class="m-4 flex flex-col">
<LanguagePicker <div class="w-ful flex justify-between">
clss="self-end max-w-full" <button on:click={() => guistate.pageStates.menu.set(true)} class="rounded-full m-0 p-2">
assignTo={state.language} <MenuIcon class="h-6 w-6 cursor-pointer" />
availableLanguages={t.title.SupportedLanguages()} </button>
preferredLanguages={userLanguages}
/> <LanguagePicker
clss="self-end max-w-full"
assignTo={state.language}
availableLanguages={t.title.SupportedLanguages()}
preferredLanguages={userLanguages}
/>
</div>
<div class="mt-4 flex"> <div class="mt-4 flex">
<div class="m-3 flex-none"> <div class="m-3 flex-none">
<Logo alt="MapComplete Logo" class="h-12 w-12 sm:h-24 sm:w-24" /> <Logo alt="MapComplete Logo" class="h-12 w-12 sm:h-24 sm:w-24" />
</div> </div>
<div class="link-underline flex flex-col"> <div class="link-underline flex flex-col w-full">
<h1 class="m-0 font-extrabold tracking-tight md:text-6xl"> <h1 class="m-0 font-extrabold tracking-tight md:text-6xl">
<Tr t={t.title} /> <Tr t={t.title} />
</h1> </h1>
@ -159,10 +187,12 @@
cls="mr-4 text-base font-semibold sm:text-lg md:mt-5 md:text-xl lg:mx-0" cls="mr-4 text-base font-semibold sm:text-lg md:mt-5 md:text-xl lg:mx-0"
t={Translations.t.index.intro} t={Translations.t.index.intro}
/> />
<a href="#about">
<Tr t={Translations.t.index.learnMore} /> <AccordionSingle>
<ChevronDoubleRight class="inline h-4 w-4" /> <Tr slot="header" t={Translations.t.index.about} />
</a> <Tr cls="link-underline" t={Translations.t.general.aboutMapComplete.intro} />
<Tr t={tr.streetcomplete} />
</AccordionSingle>
</div> </div>
</div> </div>
@ -229,65 +259,15 @@
{/if} {/if}
</LoginToggle> </LoginToggle>
<a
class="button flex"
href={window.location.protocol + "//" + window.location.host + "/studio.html"}
>
<Pencil class="mr-2 h-6 w-6" />
<Tr t={Translations.t.general.morescreen.createYourOwnTheme} />
</a>
<h3 id="about">
<Tr t={Translations.t.index.about} />
</h3>
<Tr cls="link-underline" t={Translations.t.general.aboutMapComplete.intro} />
<span class="link-underline flex flex-col gap-y-1">
<a
class="flex"
href="https://source.mapcomplete.org/MapComplete/MapComplete/"
target="_blank"
>
<Forgejo class="mr-2 h-6 w-6" />
<Tr t={Translations.t.general.attribution.gotoSourceCode} />
</a>
<a
class="flex"
href="https://source.mapcomplete.org/MapComplete/MapComplete/issues"
target="_blank"
>
<Bug class="mr-2 h-6 w-6" />
<Tr t={Translations.t.general.attribution.openIssueTracker} />
</a>
<a class="flex" href={Utils.OsmChaLinkFor(7)} target="_blank">
<ArrowTrendingUp class="mr-2 h-6 w-6" />
<Tr t={Translations.t.general.attribution.openOsmchaLastWeek} />
</a>
<a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
<Mastodon class="mr-2 h-6 w-6" />
<Tr t={Translations.t.general.attribution.followOnMastodon} />
</a>
<a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
<Liberapay class="mr-2 h-6 w-6" />
<Tr t={Translations.t.general.attribution.donate} />
</a>
<a
class="flex"
href={window.location.protocol + "//" + window.location.host + "/privacy.html"}
>
<Eye class="mr-2 h-6 w-6" />
<Tr t={Translations.t.privacy.title} />
</a>
</span>
<Tr t={tr.streetcomplete} />
<div class="subtle mb-16 self-end"> <div class="subtle mb-16 self-end">
v{Constants.vNumber} v{Constants.vNumber}
</div> </div>
</div> </div>
<div class="absolute top-0 w-0 h-0" style="margin-left: -10em">
<MenuDrawer onlyLink={false} state={menuDrawerState} />
</div>
</main> </main>

2
src/UI/Base/Popup.svelte
View file

@ -21,7 +21,7 @@
if (fullscreen) { if (fullscreen) {
defaultClass = shared defaultClass = shared
} }
let dialogClass = "fixed top-0 start-0 end-0 h-modal inset-0 w-full p-4 flex " + zIndex let dialogClass = "fixed top-0 start-0 end-0 h-modal inset-0 w-full p-4 flex class-marker-dialog " + zIndex
if (fullscreen) { if (fullscreen) {
dialogClass += " h-full-child" dialogClass += " h-full-child"
} }

14
src/UI/BigComponents/CopyrightPanel.svelte
View file

@ -1,5 +1,4 @@
<script lang="ts"> <script lang="ts">
import type { SpecialVisualizationState } from "../SpecialVisualization"
import Translations from "../i18n/Translations" import Translations from "../i18n/Translations"
import contributors from "../../assets/contributors.json" import contributors from "../../assets/contributors.json"
import translators from "../../assets/translators.json" import translators from "../../assets/translators.json"
@ -14,18 +13,21 @@
import { UserGroupIcon } from "@babeard/svelte-heroicons/solid" import { UserGroupIcon } from "@babeard/svelte-heroicons/solid"
import Marker from "../Map/Marker.svelte" import Marker from "../Map/Marker.svelte"
import Forgejo from "../../assets/svg/Forgejo.svelte" import Forgejo from "../../assets/svg/Forgejo.svelte"
import type { MapProperties } from "../../Models/MapProperties"
import ThemeConfig from "../../Models/ThemeConfig/ThemeConfig"
import { ImmutableStore } from "../../Logic/UIEventSource"
export let state: SpecialVisualizationState export let state: { theme?: ThemeConfig, mapProperties?: MapProperties }
const t = Translations.t.general.attribution const t = Translations.t.general.attribution
const layoutToUse = state.theme const layoutToUse = state.theme
let maintainer: Translation = undefined let maintainer: Translation = undefined
if (layoutToUse.credits !== undefined && layoutToUse.credits !== "") { if (layoutToUse?.credits !== undefined && layoutToUse?.credits !== "") {
maintainer = t.themeBy.Subs({ author: layoutToUse.credits }) maintainer = t.themeBy.Subs({ author: layoutToUse.credits })
} }
const bgMapAttribution = state.mapProperties.rasterLayer.mapD((layer) => { const bgMapAttribution = state.mapProperties?.rasterLayer?.mapD((layer) => {
const props = layer.properties const props = layer.properties
const attrUrl = props.attribution?.url const attrUrl = props.attribution?.url
const attrText = props.attribution?.text const attrText = props.attribution?.text
@ -45,7 +47,7 @@
}) })
} }
return Translations.t.general.attribution.attributionBackgroundLayer.Subs(props) return Translations.t.general.attribution.attributionBackgroundLayer.Subs(props)
}) }) ?? new ImmutableStore(undefined)
function calculateDataContributions(contributions: Map<string, number>): Translation { function calculateDataContributions(contributions: Map<string, number>): Translation {
if (contributions === undefined) { if (contributions === undefined) {
@ -81,7 +83,7 @@
} }
} }
const datacontributions = new ContributorCount(state).Contributors.map((counts) => const datacontributions = (state.mapProperties ? new ContributorCount(<any>state).Contributors : new ImmutableStore([])).map((counts) =>
calculateDataContributions(counts) calculateDataContributions(counts)
) )

3
src/UI/BigComponents/HotkeyTable.svelte
View file

@ -1,10 +1,7 @@
<script lang="ts"> <script lang="ts">
import Hotkeys from "../Base/Hotkeys" import Hotkeys from "../Base/Hotkeys"
import { Translation } from "../i18n/Translation"
import { Utils } from "../../Utils"
import Translations from "../i18n/Translations" import Translations from "../i18n/Translations"
import Tr from "../Base/Tr.svelte" import Tr from "../Base/Tr.svelte"
import AccordionSingle from "../Flowbite/AccordionSingle.svelte"
let keys = Hotkeys._docs let keys = Hotkeys._docs
const t = Translations.t.hotkeyDocumentation const t = Translations.t.hotkeyDocumentation

291
src/UI/BigComponents/MenuDrawer.svelte
View file

@ -1,6 +1,4 @@
<script lang="ts"> <script lang="ts">
// All the relevant links
import ThemeViewState from "../../Models/ThemeViewState"
import Translations from "../i18n/Translations" import Translations from "../i18n/Translations"
import { CogIcon, EyeIcon, HeartIcon, TranslateIcon } from "@rgossiaux/svelte-heroicons/solid" import { CogIcon, EyeIcon, HeartIcon, TranslateIcon } from "@rgossiaux/svelte-heroicons/solid"
import Page from "../Base/Page.svelte" import Page from "../Base/Page.svelte"
@ -17,7 +15,6 @@
import Mastodon from "../../assets/svg/Mastodon.svelte" import Mastodon from "../../assets/svg/Mastodon.svelte"
import Liberapay from "../../assets/svg/Liberapay.svelte" import Liberapay from "../../assets/svg/Liberapay.svelte"
import DocumentMagnifyingGlass from "@babeard/svelte-heroicons/outline/DocumentMagnifyingGlass" import DocumentMagnifyingGlass from "@babeard/svelte-heroicons/outline/DocumentMagnifyingGlass"
import DocumentChartBar from "@babeard/svelte-heroicons/outline/DocumentChartBar"
import OpenIdEditor from "./OpenIdEditor.svelte" import OpenIdEditor from "./OpenIdEditor.svelte"
import OpenJosm from "../Base/OpenJosm.svelte" import OpenJosm from "../Base/OpenJosm.svelte"
import MapillaryLink from "./MapillaryLink.svelte" import MapillaryLink from "./MapillaryLink.svelte"
@ -53,20 +50,37 @@
import MagnifyingGlassCircle from "@babeard/svelte-heroicons/mini/MagnifyingGlassCircle" import MagnifyingGlassCircle from "@babeard/svelte-heroicons/mini/MagnifyingGlassCircle"
import { AndroidPolyfill } from "../../Logic/Web/AndroidPolyfill" import { AndroidPolyfill } from "../../Logic/Web/AndroidPolyfill"
import Forgejo from "../../assets/svg/Forgejo.svelte" import Forgejo from "../../assets/svg/Forgejo.svelte"
import DocumentArrowUp from "@babeard/svelte-heroicons/mini/DocumentArrowUp"
import ChartBar from "@babeard/svelte-heroicons/solid/ChartBar" import ChartBar from "@babeard/svelte-heroicons/solid/ChartBar"
import QueueList from "@babeard/svelte-heroicons/solid/QueueList" import QueueList from "@babeard/svelte-heroicons/solid/QueueList"
import { MenuState } from "../../Models/MenuState"
import { OsmConnection } from "../../Logic/Osm/OsmConnection"
import FeatureSwitchState from "../../Logic/State/FeatureSwitchState"
import ThemeConfig from "../../Models/ThemeConfig/ThemeConfig"
import type { MapProperties } from "../../Models/MapProperties"
import FavouritesFeatureSource from "../../Logic/FeatureSource/Sources/FavouritesFeatureSource"
import Hotkeys from "../Base/Hotkeys"
import { ArrowTrendingUp } from "@babeard/svelte-heroicons/solid/ArrowTrendingUp"
import ArrowTopRightOnSquare from "@babeard/svelte-heroicons/mini/ArrowTopRightOnSquare"
export let state: ThemeViewState export let state: {
favourites: FavouritesFeatureSource
guistate: MenuState,
osmConnection: OsmConnection,
theme?: ThemeConfig,
featureSwitches: Partial<FeatureSwitchState>,
mapProperties?: MapProperties,
userRelatedState?: UserRelatedState
}
let hotkeys = Hotkeys._docs
let userdetails = state.osmConnection.userDetails let userdetails = state.osmConnection.userDetails
let usersettingslayer = new LayerConfig(<LayerConfigJson>usersettings, "usersettings", true) let usersettingslayer = new LayerConfig(<LayerConfigJson>usersettings, "usersettings", true)
let theme = state.theme let theme = state.theme
let featureSwitches = state.featureSwitches let featureSwitches = state.featureSwitches
let showHome = featureSwitches.featureSwitchBackToThemeOverview let showHome = featureSwitches?.featureSwitchBackToThemeOverview
let pg = state.guistate.pageStates let pg = state.guistate.pageStates
let location = state.mapProperties.location let location = state.mapProperties?.location
export let onlyLink: boolean export let onlyLink: boolean
const t = Translations.t.general.menu const t = Translations.t.general.menu
let shown = new UIEventSource(state.guistate.pageStates.menu.data || !onlyLink) let shown = new UIEventSource(state.guistate.pageStates.menu.data || !onlyLink)
@ -143,32 +157,36 @@
</Page> </Page>
<LoginToggle {state} silentFail> <LoginToggle {state} silentFail>
<Page {onlyLink} shown={pg.favourites}> {#if state.favourites}
<svelte:fragment slot="header"> <Page {onlyLink} shown={pg.favourites}>
<HeartIcon />
<Tr t={Translations.t.favouritePoi.tab} />
</svelte:fragment>
<h3>
<Tr t={Translations.t.favouritePoi.title} />
</h3>
<div>
<Favourites {state} />
<h3>
<Tr t={Translations.t.reviews.your_reviews} />
</h3>
<ReviewsOverview {state} />
</div>
</Page>
<div class="hidden-on-mobile w-full">
<Page {onlyLink} shown={pg.hotkeys}>
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<BoltIcon /> <HeartIcon />
<Tr t={Translations.t.hotkeyDocumentation.title} /> <Tr t={Translations.t.favouritePoi.tab} />
</svelte:fragment> </svelte:fragment>
<HotkeyTable />
<h3>
<Tr t={Translations.t.favouritePoi.title} />
</h3>
<div>
<Favourites {state} />
<h3>
<Tr t={Translations.t.reviews.your_reviews} />
</h3>
<ReviewsOverview {state} />
</div>
</Page> </Page>
</div> {/if}
{#if $hotkeys.length > 0}
<div class="hidden-on-mobile w-full">
<Page {onlyLink} shown={pg.hotkeys}>
<svelte:fragment slot="header">
<BoltIcon />
<Tr t={Translations.t.hotkeyDocumentation.title} />
</svelte:fragment>
<HotkeyTable />
</Page>
</div>
{/if}
<div class="self-end"> <div class="self-end">
<LogoutButton osmConnection={state.osmConnection} /> <LogoutButton osmConnection={state.osmConnection} />
@ -178,108 +196,103 @@
</SidebarUnit> </SidebarUnit>
<!-- Theme related: documentation links, download, ... --> <!-- Theme related: documentation links, download, ... -->
<SidebarUnit> {#if state.theme}
<h3> <SidebarUnit>
<Tr t={t.aboutCurrentThemeTitle} /> <h3>
</h3> <Tr t={t.aboutCurrentThemeTitle} />
</h3>
<Page {onlyLink} shown={pg.about_theme}> <Page {onlyLink} shown={pg.about_theme}>
<svelte:fragment slot="link"> <svelte:fragment slot="link">
<Marker size="h-7 w-7" icons={theme.icon} /> <Marker size="h-7 w-7" icons={theme.icon} />
<Tr t={t.showIntroduction} /> <Tr t={t.showIntroduction} />
</svelte:fragment>
<svelte:fragment slot="header">
<Marker size="h-8 w-8 mr-3" icons={theme.icon} />
<Tr t={theme.title} />
</svelte:fragment>
<ThemeIntroPanel {state} />
</Page>
<FilterPage {onlyLink} {state} />
<RasterLayerOverview {onlyLink} {state} />
<Page {onlyLink} shown={pg.share}>
<svelte:fragment slot="header">
<Share />
<Tr t={Translations.t.general.sharescreen.title} />
</svelte:fragment>
<ShareScreen {state} />
</Page>
{#if state.featureSwitches.featureSwitchEnableExport}
<Page {onlyLink} shown={pg.download}>
<svelte:fragment slot="header">
<ArrowDownTray />
<Tr t={Translations.t.general.download.title} />
</svelte:fragment> </svelte:fragment>
<DownloadPanel {state} /> <svelte:fragment slot="header">
<Marker size="h-8 w-8 mr-3" icons={theme.icon} />
<Tr t={theme.title} />
</svelte:fragment>
<ThemeIntroPanel {state} />
</Page> </Page>
{/if}
{#if theme.official} <FilterPage {onlyLink} {state} />
<a
class="flex" <RasterLayerOverview {onlyLink} {state} />
href={"https://source.mapcomplete.org/MapComplete/MapComplete/src/branch/develop/Docs/Themes/" +
<Page {onlyLink} shown={pg.share}>
<svelte:fragment slot="header">
<Share />
<Tr t={Translations.t.general.sharescreen.title} />
</svelte:fragment>
<ShareScreen {state} />
</Page>
{#if state.featureSwitches?.featureSwitchEnableExport}
<Page {onlyLink} shown={pg.download}>
<svelte:fragment slot="header">
<ArrowDownTray />
<Tr t={Translations.t.general.download.title} />
</svelte:fragment>
<DownloadPanel {state} />
</Page>
{/if}
{#if theme.official}
<a
class="flex"
href={"https://source.mapcomplete.org/MapComplete/MapComplete/src/branch/develop/Docs/Themes/" +
theme.id + theme.id +
".md"} ".md"}
target="_blank" target="_blank"
> >
<DocumentMagnifyingGlass class="h-6 w-6" /> <DocumentMagnifyingGlass class="h-6 w-6" />
<Tr <Tr
t={Translations.t.general.attribution.openThemeDocumentation.Subs({ t={Translations.t.general.attribution.openThemeDocumentation.Subs({
name: theme.title, name: theme.title,
})} })}
/> />
</a> </a>
<a class="flex" href={Utils.OsmChaLinkFor(31, theme.id)} target="_blank"> <a class="flex" href={Utils.OsmChaLinkFor(31, theme.id)} target="_blank">
<QueueList class="h-6 w-6" /> <QueueList class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: theme.title })} /> <Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: theme.title })} />
</a> </a>
<a class="flex" href={`./statistics.html?filter-mapcomplete-changes-theme-search={"search"%3A"${theme.id}"}`} <a class="flex" href={`./statistics.html?filter-mapcomplete-changes-theme-search={"search"%3A"${theme.id}"}`}
target="_blank"> target="_blank">
<ChartBar class="h-6 w-6" /> <ChartBar class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.openStatistics.Subs({theme: theme.title})} /> <Tr t={Translations.t.general.attribution.openStatistics.Subs({theme: theme.title})} />
</a> </a>
{/if} {/if}
</SidebarUnit> </SidebarUnit>
{/if}
<!-- Other links and tools for the given location: open iD/JOSM; community index, ... --> <!-- Other links and tools for the given location: open iD/JOSM; community index, ... -->
<SidebarUnit> {#if state.mapProperties?.location}
<h3> <SidebarUnit>
<Tr t={t.moreUtilsTitle} /> <h3>
</h3> <Tr t={t.moreUtilsTitle} />
</h3>
<Page {onlyLink} shown={pg.community_index}> <Page {onlyLink} shown={pg.community_index}>
<svelte:fragment slot="header"> <svelte:fragment slot="header">
<Community /> <Community />
<Tr t={Translations.t.communityIndex.title} /> <Tr t={Translations.t.communityIndex.title} />
</svelte:fragment> </svelte:fragment>
<CommunityIndexView location={state.mapProperties.location} /> <CommunityIndexView location={state.mapProperties.location} />
</Page> </Page>
<If condition={featureSwitches.featureSwitchEnableLogin}> <If condition={featureSwitches?.featureSwitchEnableLogin}>
<OpenIdEditor mapProperties={state.mapProperties} /> <OpenIdEditor mapProperties={state.mapProperties} />
<OpenJosm {state} /> <OpenJosm {state} />
<PanoramaxLink large={false} mapProperties={state.mapProperties} /> <PanoramaxLink large={false} mapProperties={state.mapProperties} />
<MapillaryLink large={false} mapProperties={state.mapProperties} /> <MapillaryLink large={false} mapProperties={state.mapProperties} />
</If> </If>
<a class="sidebar-button flex" href="geo:{$location.lat},{$location.lon}"> <a class="sidebar-button flex" href="geo:{$location.lat},{$location.lon}">
<ShareIcon /> <ShareIcon />
<Tr t={t.openHereDifferentApp} /> <Tr t={t.openHereDifferentApp} />
</a> </a>
</SidebarUnit>
<a {/if}
class="flex"
href={window.location.protocol + "//" + window.location.host + "/inspector.html"}
>
<MagnifyingGlassCircle class="mr-2 h-6 w-6" />
<Tr t={Translations.t.inspector.menu} />
</a>
</SidebarUnit>
<!-- About MC: various outward links, legal info, ... --> <!-- About MC: various outward links, legal info, ... -->
<SidebarUnit> <SidebarUnit>
@ -293,8 +306,6 @@
</a> </a>
<a class="flex" href="mailto:info@mapcomplete.org"> <a class="flex" href="mailto:info@mapcomplete.org">
<EnvelopeOpen class="h-6 w-6" /> <EnvelopeOpen class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.emailCreators} /> <Tr t={Translations.t.general.attribution.emailCreators} />
@ -329,6 +340,27 @@
<Tr t={Translations.t.translations.activateButton} /> <Tr t={Translations.t.translations.activateButton} />
</a> </a>
<a
class="flex"
href={window.location.protocol + "//" + window.location.host + "/inspector.html"}
>
<MagnifyingGlassCircle class="mr-2 h-6 w-6" />
<Tr t={Translations.t.inspector.menu} />
</a>
{#if !state.theme}
<a class="flex" href={`./statistics.html"}`}
target="_blank">
<ChartBar class="h-6 w-6" />
<Tr t={Translations.t.general.attribution.openStatistics.Subs({theme: "MapComplete"})} />
</a>
{/if}
<a class="flex" href={Utils.OsmChaLinkFor(7)} target="_blank">
<ArrowTrendingUp class="mr-2 h-6 w-6" />
<Tr t={Translations.t.general.attribution.openOsmchaLastWeek} />
</a>
</SidebarUnit> </SidebarUnit>
<SidebarUnit> <SidebarUnit>
<h3> <h3>
@ -341,13 +373,15 @@
</svelte:fragment> </svelte:fragment>
<CopyrightPanel {state} /> <CopyrightPanel {state} />
</Page> </Page>
<Page {onlyLink} shown={pg.copyright_icons}> {#if state?.theme}
<svelte:fragment slot="header"> <Page {onlyLink} shown={pg.copyright_icons}>
<Copyright /> <svelte:fragment slot="header">
<Tr t={Translations.t.general.attribution.iconAttribution.title} /> <Copyright />
</svelte:fragment> <Tr t={Translations.t.general.attribution.iconAttribution.title} />
<CopyrightAllIcons {state} /> </svelte:fragment>
</Page> <CopyrightAllIcons {state} />
</Page>
{/if}
<Page {onlyLink} shown={pg.privacy}> <Page {onlyLink} shown={pg.privacy}>
<svelte:fragment slot="header"> <svelte:fragment slot="header">
@ -355,6 +389,9 @@
<Tr t={Translations.t.privacy.title} /> <Tr t={Translations.t.privacy.title} />
</svelte:fragment> </svelte:fragment>
<PrivacyPolicy {state} /> <PrivacyPolicy {state} />
<a href="./privacy.html" class="button w-fit float-right" target="_blank">
<ArrowTopRightOnSquare class="w-8 h-8" />
</a>
</Page> </Page>
</SidebarUnit> </SidebarUnit>

83
src/UI/BigComponents/PendingChangesIndicator.svelte
View file

@ -11,48 +11,49 @@
export let compact: boolean = true export let compact: boolean = true
const changes: Changes = state.changes const changes: Changes = state.changes
const isUploading: Store<boolean> = changes.isUploading const isUploading: Store<boolean> = changes?.isUploading
const errors = changes.errors const errors = changes?.errors
const pending = changes.pendingChanges const pending = changes?.pendingChanges
</script> </script>
{#if changes}
<div
class="pointer-events-auto flex flex-col"
on:click={() => changes.flushChanges("Pending changes indicator clicked")}
>
{#if $isUploading}
<Loading>
<Tr cls="thx" t={Translations.t.general.uploadingChanges} />
</Loading>
{:else if $pending.length === 1}
<Tr cls="alert" t={Translations.t.general.uploadPendingSingle} />
{:else if $pending.length > 1}
<Tr cls="alert" t={Translations.t.general.uploadPending.Subs({ count: $pending.length })} />
{/if}
<div {#each $errors as error}
class="pointer-events-auto flex flex-col" <Tr cls="alert" t={Translations.t.general.uploadError.Subs({ error })} />
on:click={() => changes.flushChanges("Pending changes indicator clicked")} {/each}
>
{#if $isUploading}
<Loading>
<Tr cls="thx" t={Translations.t.general.uploadingChanges} />
</Loading>
{:else if $pending.length === 1}
<Tr cls="alert" t={Translations.t.general.uploadPendingSingle} />
{:else if $pending.length > 1}
<Tr cls="alert" t={Translations.t.general.uploadPending.Subs({ count: $pending.length })} />
{/if}
{#each $errors as error} {#if !compact && $pending.length > 0}
<Tr cls="alert" t={Translations.t.general.uploadError.Subs({ error })} /> <button on:click={() => state.changes.pendingChanges.set([])}>
{/each} <Tr t={Translations.t.general.clearPendingChanges} />
</button>
{#if !compact && $pending.length > 0} <ul>
<button on:click={() => state.changes.pendingChanges.set([])}> {#each $pending as pending}
<Tr t={Translations.t.general.clearPendingChanges} /> <li>
</button> {#if pending.changes !== undefined}
Create {pending.type}/{pending.id}
<ul> {JSON.stringify(TagUtils.KVObjtoProperties(pending.tags))}
{#each $pending as pending} {:else}
<li> Modify {pending.type}/{pending.id} {JSON.stringify(pending.tags)}
{#if pending.changes !== undefined} {/if}
Create {pending.type}/{pending.id} {#if pending.type === "way" && pending.changes?.nodes}
{JSON.stringify(TagUtils.KVObjtoProperties(pending.tags))} {pending.changes.nodes.join(" ")}
{:else} {/if}
Modify {pending.type}/{pending.id} {JSON.stringify(pending.tags)} </li>
{/if} {/each}
{#if pending.type === "way" && pending.changes?.nodes} </ul>
{pending.changes.nodes.join(" ")} {/if}
{/if} </div>
</li> {/if}
{/each}
</ul>
{/if}
</div>

27
src/UI/Popup/DisabledQuestions.svelte
View file

@ -3,29 +3,30 @@
import { Stores } from "../../Logic/UIEventSource" import { Stores } from "../../Logic/UIEventSource"
import Tr from "../Base/Tr.svelte" import Tr from "../Base/Tr.svelte"
import Translations from "../i18n/Translations" import Translations from "../i18n/Translations"
import type { SpecialVisualizationState } from "../SpecialVisualization"
import ThemeViewState from "../../Models/ThemeViewState" import ThemeViewState from "../../Models/ThemeViewState"
/** /**
* Shows _all_ disabled questions * Shows _all_ disabled questions
*/ */
export let state: ThemeViewState export let state: ThemeViewState
let layers = state.theme.layers.filter((l) => l.isNormal()) let layers = state.theme?.layers?.filter((l) => l.isNormal())
let allDisabled = Stores.concat<string>( let allDisabled = Stores.concat<string>(
layers.map((l) => state.userRelatedState.getThemeDisabled(state.theme.id, l.id)) layers?.map((l) => state.userRelatedState.getThemeDisabled(state.theme.id, l.id)) ?? []
).map((l) => [].concat(...l)) ).map((l) => [].concat(...l))
const t = Translations.t.general.questions const t = Translations.t.general.questions
</script> </script>
<h3> {#if state.theme}
<Tr t={t.disabledTitle} /> <h3>
</h3> <Tr t={t.disabledTitle} />
{#if $allDisabled.length === 0} </h3>
<Tr t={t.noneDisabled} /> {#if $allDisabled.length === 0}
{:else} <Tr t={t.noneDisabled} />
<Tr t={t.disabledIntro} /> {:else}
{#each layers as layer (layer.id)} <Tr t={t.disabledIntro} />
<DisabledQuestionsLayer {state} {layer} /> {#each layers as layer (layer.id)}
{/each} <DisabledQuestionsLayer {state} {layer} />
{/each}
{/if}
{/if} {/if}

2
src/UI/SpecialVisualisations/SettingsVisualisations.ts
View file

@ -24,7 +24,7 @@ export class SettingsVisualisations {
docs: "A component to set the language of the user interface", docs: "A component to set the language of the user interface",
constr(state: SpecialVisualizationState): SvelteUIElement { constr(state: SpecialVisualizationState): SvelteUIElement {
const availableLanguages = Locale.showLinkToWeblate.map((showTranslations) => const availableLanguages = Locale.showLinkToWeblate.map((showTranslations) =>
showTranslations ? LanguageUtils.usedLanguagesSorted : state.theme.language showTranslations ? LanguageUtils.usedLanguagesSorted : (state?.theme?.language ?? LanguageUtils.usedLanguagesSorted)
) )
return new SvelteUIElement(LanguagePicker, { return new SvelteUIElement(LanguagePicker, {
assignTo: state.userRelatedState.language, assignTo: state.userRelatedState.language,