forked from MapComplete/MapComplete
More design tweaking
This commit is contained in:
parent
c097c73bec
commit
0b2ce63284
2 changed files with 211 additions and 197 deletions
|
|
@ -11,7 +11,7 @@
|
|||
import CommunityIndexView from "./CommunityIndexView.svelte"
|
||||
import Community from "../../assets/svg/Community.svelte"
|
||||
import LoginToggle from "../Base/LoginToggle.svelte"
|
||||
import { Sidebar, SidebarWrapper } from "flowbite-svelte"
|
||||
import { Sidebar, SidebarWrapper } from "flowbite-svelte"
|
||||
import HotkeyTable from "./HotkeyTable.svelte"
|
||||
import { Utils } from "../../Utils"
|
||||
import Constants from "../../Models/Constants"
|
||||
|
|
@ -46,6 +46,8 @@
|
|||
import Marker from "../Map/Marker.svelte"
|
||||
import LogoutButton from "../Base/LogoutButton.svelte"
|
||||
import { LanguageIcon } from "@babeard/svelte-heroicons/solid"
|
||||
import { BoltIcon } from "@babeard/svelte-heroicons/mini"
|
||||
import Copyright from "../../assets/svg/Copyright.svelte"
|
||||
|
||||
export let state: ThemeViewState
|
||||
let userdetails = state.osmConnection.userDetails
|
||||
|
|
@ -60,249 +62,259 @@
|
|||
</script>
|
||||
|
||||
<Sidebar asideClass="max-w-screen p-0 low-interaction p-6 link-underline">
|
||||
<h2>Menu</h2>
|
||||
<div class="flex flex-col">
|
||||
<div class="flex flex-col">
|
||||
|
||||
<!-- User related: avatar, settings, favourits, logout -->
|
||||
<div class="sidebar-unit">
|
||||
<!-- User related: avatar, settings, favourits, logout -->
|
||||
<div class="sidebar-unit">
|
||||
<LoginToggle {state}>
|
||||
<LoginButton osmConnection={state.osmConnection} slot="not-logged-in"></LoginButton>
|
||||
<div class="flex gap-x-2">
|
||||
{#if $userdetails.img}
|
||||
<img src={$userdetails.img} class="rounded-full w-14 h-14" />
|
||||
{/if}
|
||||
<div class="flex flex-col justify-between">
|
||||
<b>{$userdetails.name}</b>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</LoginToggle>
|
||||
|
||||
|
||||
<Page {onlyLink} shown={pg.usersettings}>
|
||||
<div class="flex" slot="header">
|
||||
<CogIcon class="h-6 w-6" />
|
||||
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
|
||||
</div>
|
||||
|
||||
<!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
|
||||
<LoginToggle {state}>
|
||||
<LoginButton osmConnection={state.osmConnection} slot="not-logged-in"></LoginButton>
|
||||
<div class="flex gap-x-2">
|
||||
{#if $userdetails.img}
|
||||
<img src={$userdetails.img} class="rounded-full w-14 h-14" />
|
||||
{/if}
|
||||
<div class="flex flex-col justify-between">
|
||||
<b>{$userdetails.name}</b>
|
||||
|
||||
</div>
|
||||
<div class="flex flex-col" slot="not-logged-in">
|
||||
<LanguagePicker availableLanguages={layout.language} />
|
||||
<Tr cls="alert" t={Translations.t.userinfo.notLoggedIn} />
|
||||
<LoginButton clss="primary" osmConnection={state.osmConnection} />
|
||||
</div>
|
||||
</LoginToggle>
|
||||
|
||||
|
||||
<Page {onlyLink} shown={pg.usersettings}>
|
||||
<div class="flex" slot="header">
|
||||
<CogIcon class="h-6 w-6" />
|
||||
<Tr t={UserRelatedState.usersettingsConfig.title.GetRenderValue({})} />
|
||||
</div>
|
||||
|
||||
<!-- All shown components are set by 'usersettings.json', which happily uses some special visualisations created specifically for it -->
|
||||
<LoginToggle {state}>
|
||||
<div class="flex flex-col" slot="not-logged-in">
|
||||
<LanguagePicker availableLanguages={layout.language} />
|
||||
<Tr cls="alert" t={Translations.t.userinfo.notLoggedIn} />
|
||||
<LoginButton clss="primary" osmConnection={state.osmConnection} />
|
||||
</div>
|
||||
<SelectedElementView
|
||||
highlightedRendering={state.guistate.highlightedUserSetting}
|
||||
layer={usersettingslayer}
|
||||
selectedElement={{
|
||||
<SelectedElementView
|
||||
highlightedRendering={state.guistate.highlightedUserSetting}
|
||||
layer={usersettingslayer}
|
||||
selectedElement={{
|
||||
type: "Feature",
|
||||
properties: { id: "settings" },
|
||||
geometry: { type: "Point", coordinates: [0, 0] },
|
||||
}}
|
||||
|
||||
{state}
|
||||
tags={state.userRelatedState.preferencesAsTags}
|
||||
/>
|
||||
</LoginToggle>
|
||||
|
||||
|
||||
</Page>
|
||||
|
||||
<LoginToggle {state}>
|
||||
<Page {onlyLink} shown={pg.favourites}>
|
||||
|
||||
<div class="flex" slot="header">
|
||||
<HeartIcon class="h-6 w-6" />
|
||||
<Tr t={Translations.t.favouritePoi.tab} />
|
||||
</div>
|
||||
<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="self-end">
|
||||
<LogoutButton osmConnection={state.osmConnection} />
|
||||
</div>
|
||||
{state}
|
||||
tags={state.userRelatedState.preferencesAsTags}
|
||||
/>
|
||||
</LoginToggle>
|
||||
|
||||
|
||||
<LanguagePicker/>
|
||||
</Page>
|
||||
|
||||
<LoginToggle {state}>
|
||||
<Page {onlyLink} shown={pg.favourites}>
|
||||
|
||||
<div class="flex" slot="header">
|
||||
<HeartIcon class="h-6 w-6" />
|
||||
<Tr t={Translations.t.favouritePoi.tab} />
|
||||
</div>
|
||||
<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="self-end">
|
||||
<LogoutButton osmConnection={state.osmConnection} />
|
||||
</div>
|
||||
</LoginToggle>
|
||||
|
||||
<div style="width: 90%">
|
||||
<LanguagePicker />
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Theme related: documentation links, download, ... -->
|
||||
<div class="sidebar-unit">
|
||||
<h3>
|
||||
About this map
|
||||
</h3>
|
||||
|
||||
<Page {onlyLink} shown={pg.about_theme}>
|
||||
<dic slot="link">
|
||||
Show introduction
|
||||
</dic>
|
||||
<div class="flex" slot="header">
|
||||
<Marker icons={layout.icon} size="h-4 w-4" />
|
||||
<Tr t={layout.title} />
|
||||
<!-- Theme related: documentation links, download, ... -->
|
||||
<div class="sidebar-unit">
|
||||
<h3>
|
||||
About this map
|
||||
</h3>
|
||||
|
||||
<Page {onlyLink} shown={pg.about_theme}>
|
||||
<dic slot="link">
|
||||
Show introduction
|
||||
</dic>
|
||||
<div class="flex" slot="header">
|
||||
<Marker icons={layout.icon} size="h-4 w-4" />
|
||||
<Tr t={layout.title} />
|
||||
</div>
|
||||
<ThemeIntroPanel {state} />
|
||||
</Page>
|
||||
|
||||
<FilterPage {onlyLink} {state} />
|
||||
|
||||
<RasterLayerOverview {onlyLink} {state} />
|
||||
|
||||
<Page {onlyLink} shown={pg.share}>
|
||||
<div class="flex" slot="header">
|
||||
<Share class="h-4 w-4" />
|
||||
<Tr t={Translations.t.general.sharescreen.title} />
|
||||
</div>
|
||||
<ShareScreen {state} />
|
||||
</Page>
|
||||
|
||||
|
||||
{#if state.featureSwitches.featureSwitchEnableExport}
|
||||
<Page {onlyLink} shown={pg.download}>
|
||||
<div slot="header" class="flex">
|
||||
<ArrowDownTray class="h-4 w-4" />
|
||||
<Tr t={Translations.t.general.download.title} />
|
||||
</div>
|
||||
<ThemeIntroPanel {state} />
|
||||
<DownloadPanel {state} />
|
||||
</Page>
|
||||
{/if}
|
||||
|
||||
<FilterPage {onlyLink} {state} />
|
||||
|
||||
<RasterLayerOverview {onlyLink} {state} />
|
||||
|
||||
<Page {onlyLink} shown={pg.share}>
|
||||
<div class="flex" slot="header">
|
||||
<Share class="h-4 w-4" />
|
||||
<Tr t={Translations.t.general.sharescreen.title} />
|
||||
</div>
|
||||
<ShareScreen {state} />
|
||||
</Page>
|
||||
|
||||
|
||||
{#if state.featureSwitches.featureSwitchEnableExport}
|
||||
<Page {onlyLink} shown={pg.download}>
|
||||
<div slot="header" class="flex">
|
||||
<ArrowDownTray class="h-4 w-4" />
|
||||
<Tr t={Translations.t.general.download.title} />
|
||||
</div>
|
||||
<DownloadPanel {state} />
|
||||
</Page>
|
||||
{/if}
|
||||
|
||||
{#if layout.official}
|
||||
<a
|
||||
class="flex"
|
||||
href={"https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Themes/" +
|
||||
{#if layout.official}
|
||||
<a
|
||||
class="flex"
|
||||
href={"https://github.com/pietervdvn/MapComplete/blob/develop/Docs/Themes/" +
|
||||
layout.id +
|
||||
".md"}
|
||||
target="_blank"
|
||||
>
|
||||
<DocumentMagnifyingGlass class="h-6 w-6" />
|
||||
<Tr
|
||||
t={Translations.t.general.attribution.openThemeDocumentation.Subs({
|
||||
target="_blank"
|
||||
>
|
||||
<DocumentMagnifyingGlass class="h-6 w-6" />
|
||||
<Tr
|
||||
t={Translations.t.general.attribution.openThemeDocumentation.Subs({
|
||||
name: layout.title,
|
||||
})}
|
||||
/>
|
||||
</a>
|
||||
/>
|
||||
</a>
|
||||
|
||||
<a class="flex" href={Utils.OsmChaLinkFor(31, layout.id)} target="_blank">
|
||||
<DocumentChartBar class="h-6 w-6" />
|
||||
<Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: layout.title })} />
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
<a class="flex" href={Utils.OsmChaLinkFor(31, layout.id)} target="_blank">
|
||||
<DocumentChartBar class="h-6 w-6" />
|
||||
<Tr t={Translations.t.general.attribution.openOsmcha.Subs({ theme: layout.title })} />
|
||||
</a>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Other links and tools for the given location: open iD/JOSM; community index, ... -->
|
||||
<div class="sidebar-unit">
|
||||
<!-- Other links and tools for the given location: open iD/JOSM; community index, ... -->
|
||||
<div class="sidebar-unit">
|
||||
|
||||
<h3>
|
||||
Discover more
|
||||
</h3>
|
||||
<h3>
|
||||
Discover more
|
||||
</h3>
|
||||
|
||||
<Page {onlyLink} shown={pg.community_index}>
|
||||
<div class="flex gap-x-2" slot="header">
|
||||
<Community class="h-6 w-6" />
|
||||
<Tr t={Translations.t.communityIndex.title} />
|
||||
</div>
|
||||
<CommunityIndexView location={state.mapProperties.location} />
|
||||
</Page>
|
||||
<Page {onlyLink} shown={pg.community_index}>
|
||||
<div class="flex gap-x-2" slot="header">
|
||||
<Community class="h-6 w-6" />
|
||||
<Tr t={Translations.t.communityIndex.title} />
|
||||
</div>
|
||||
<CommunityIndexView location={state.mapProperties.location} />
|
||||
</Page>
|
||||
|
||||
|
||||
<If condition={featureSwitches.featureSwitchEnableLogin}>
|
||||
<OpenIdEditor mapProperties={state.mapProperties} />
|
||||
<OpenJosm {state} />
|
||||
<MapillaryLink large={false} mapProperties={state.mapProperties} />
|
||||
</If>
|
||||
<If condition={featureSwitches.featureSwitchEnableLogin}>
|
||||
<OpenIdEditor mapProperties={state.mapProperties} />
|
||||
<OpenJosm {state} />
|
||||
<MapillaryLink large={false} mapProperties={state.mapProperties} />
|
||||
</If>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- About MC: various outward links, legal info, ... -->
|
||||
<div class="sidebar-unit">
|
||||
<!-- About MC: various outward links, legal info, ... -->
|
||||
<div class="sidebar-unit">
|
||||
|
||||
<h3>
|
||||
<Tr t={Translations.t.general.menu.aboutMapComplete} />
|
||||
</h3>
|
||||
<h3>
|
||||
<Tr t={Translations.t.general.menu.aboutMapComplete} />
|
||||
</h3>
|
||||
|
||||
{#if $showHome}
|
||||
<a class="flex" href={Utils.HomepageLink()}>
|
||||
<Add class="h-6 w-6" />
|
||||
{#if Utils.isIframe}
|
||||
<Tr t={Translations.t.general.seeIndex} />
|
||||
{:else}
|
||||
<Tr t={Translations.t.general.backToIndex} />
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
{#if $showHome}
|
||||
<a class="flex" href={Utils.HomepageLink()}>
|
||||
<Add class="h-6 w-6" />
|
||||
{#if Utils.isIframe}
|
||||
<Tr t={Translations.t.general.seeIndex} />
|
||||
{:else}
|
||||
<Tr t={Translations.t.general.backToIndex} />
|
||||
{/if}
|
||||
</a>
|
||||
{/if}
|
||||
|
||||
|
||||
<div class="hidden-on-mobile">
|
||||
|
||||
<Page {onlyLink} shown={pg.hotkeys}>
|
||||
<Tr t={ Translations.t.hotkeyDocumentation.title} slot="header" />
|
||||
<div class="flex" slot="header">
|
||||
<BoltIcon class="w-6 h-6" />
|
||||
<Tr t={ Translations.t.hotkeyDocumentation.title} />
|
||||
</div>
|
||||
<HotkeyTable />
|
||||
</Page>
|
||||
</div>
|
||||
|
||||
<a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">
|
||||
<Github class="h-6 w-6" />
|
||||
<Tr t={Translations.t.general.attribution.gotoSourceCode} />
|
||||
</a>
|
||||
<a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">
|
||||
<Github class="h-6 w-6" />
|
||||
<Tr t={Translations.t.general.attribution.gotoSourceCode} />
|
||||
</a>
|
||||
|
||||
<a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
|
||||
<Bug class="h-6 w-6" />
|
||||
<Tr t={Translations.t.general.attribution.openIssueTracker} />
|
||||
</a>
|
||||
<a class="flex" href="https://github.com/pietervdvn/MapComplete/issues" target="_blank">
|
||||
<Bug class="h-6 w-6" />
|
||||
<Tr t={Translations.t.general.attribution.openIssueTracker} />
|
||||
</a>
|
||||
|
||||
|
||||
<a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
|
||||
<Mastodon class="h-6 w-6" />
|
||||
<Tr t={Translations.t.general.attribution.followOnMastodon} />
|
||||
</a>
|
||||
<a class="flex" href="https://en.osm.town/@MapComplete" target="_blank">
|
||||
<Mastodon class="h-6 w-6" />
|
||||
<Tr t={Translations.t.general.attribution.followOnMastodon} />
|
||||
</a>
|
||||
|
||||
<a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
|
||||
<Liberapay class="h-6 w-6" />
|
||||
<Tr t={Translations.t.general.attribution.donate} />
|
||||
</a>
|
||||
<a class="flex" href="https://liberapay.com/pietervdvn/" target="_blank">
|
||||
<Liberapay class="h-6 w-6" />
|
||||
<Tr t={Translations.t.general.attribution.donate} />
|
||||
</a>
|
||||
|
||||
|
||||
<Page {onlyLink} shown={pg.copyright}>
|
||||
<Tr slot="header" t={Translations.t.general.attribution.attributionTitle} />
|
||||
<CopyrightPanel {state} />
|
||||
</Page>
|
||||
|
||||
|
||||
<Page {onlyLink} shown={pg.copyright_icons}>
|
||||
<div slot="header">
|
||||
<Tr t={ Translations.t.general.attribution.iconAttribution.title} />
|
||||
</div>
|
||||
<CopyrightAllIcons {state} />
|
||||
|
||||
</Page>
|
||||
|
||||
|
||||
<Page {onlyLink} shown={pg.privacy}>
|
||||
<div class="flex gap-x-2" slot="header">
|
||||
<EyeIcon class="w-6 pr-2" />
|
||||
<Tr t={Translations.t.privacy.title} />
|
||||
</div>
|
||||
<PrivacyPolicy {state} />
|
||||
</Page>
|
||||
|
||||
|
||||
<div class="subtle self-end">
|
||||
{Constants.vNumber}
|
||||
<Page {onlyLink} shown={pg.copyright}>
|
||||
<div slot="header" class="flex">
|
||||
<Copyright class="w-8 h-8" />
|
||||
<Tr t={Translations.t.general.attribution.attributionTitle} />
|
||||
</div>
|
||||
<CopyrightPanel {state} />
|
||||
</Page>
|
||||
|
||||
|
||||
<Page {onlyLink} shown={pg.copyright_icons}>
|
||||
<div slot="header" class="flex">
|
||||
<Copyright class="w-8 h-8" />
|
||||
<Tr t={ Translations.t.general.attribution.iconAttribution.title} />
|
||||
</div>
|
||||
<CopyrightAllIcons {state} />
|
||||
|
||||
</Page>
|
||||
|
||||
|
||||
<Page {onlyLink} shown={pg.privacy}>
|
||||
<div class="flex gap-x-2" slot="header">
|
||||
<EyeIcon class="w-6 pr-2" />
|
||||
<Tr t={Translations.t.privacy.title} />
|
||||
</div>
|
||||
<PrivacyPolicy {state} />
|
||||
</Page>
|
||||
|
||||
|
||||
<div class="subtle self-end">
|
||||
{Constants.vNumber}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</Sidebar>
|
||||
|
||||
|
|
@ -319,10 +331,12 @@
|
|||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
}
|
||||
|
||||
:global(.sidebar-unit > h3) {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5rem
|
||||
}
|
||||
|
||||
:global(.sidebar-unit svg) {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
|
|
|
|||
|
|
@ -190,7 +190,7 @@
|
|||
<!-- Top components -->
|
||||
|
||||
<div
|
||||
class="flex bg-black-light-transparent pointer-events-auto items-center justify-between px-4 py-2 flex-wrap-reverse">
|
||||
class="flex bg-black-light-transparent pointer-events-auto items-center justify-between px-4 py-1 flex-wrap-reverse">
|
||||
<!-- Top bar with tools -->
|
||||
<div class="flex items-center">
|
||||
|
||||
|
|
@ -200,7 +200,7 @@
|
|||
on:click={() => {console.log("Opening...."); state.guistate.menuIsOpened.setData(true)}}
|
||||
on:keydown={forwardEventToMap}
|
||||
>
|
||||
<MenuIcon class="h-8 w-8 cursor-pointer" />
|
||||
<MenuIcon class="h-6 w-6 cursor-pointer" />
|
||||
</MapControlButton>
|
||||
|
||||
<MapControlButton
|
||||
|
|
@ -210,7 +210,7 @@
|
|||
<div
|
||||
class="m-0.5 mx-1 flex cursor-pointer items-center max-[480px]:w-full sm:mx-1 mr-2"
|
||||
>
|
||||
<Marker icons={layout.icon} size="h-6 w-6 shrink-0 md:h-8 md:w-8 mr-0.5 sm:mr-1 md:mr-2" />
|
||||
<Marker icons={layout.icon} size="h-6 w-6 shrink-0 mr-0.5 sm:mr-1 md:mr-2" />
|
||||
<b class="mr-1">
|
||||
<Tr t={layout.title} />
|
||||
</b>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue