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

UX: work on layout

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-06-16 19:00:43 +02:00
parent a87e3376e0
commit d6a20b7222
43 changed files with 5086 additions and 838 deletions
Download patch file Download diff file Expand all files Collapse all files

7
src/UI/AllThemesGui.svelte
View file

@ -148,15 +148,14 @@
</ThemesList>
<UnofficialThemeList search={themeSearchText} {state} />
<LoginButton osmConnection={state.osmConnection} />
</LoginToggle>
<h3 id="about">
<Tr t={Translations.t.index.about} />
</h3>
<Tr cls="link-underline" t={Translations.t.general.aboutMapComplete.intro} />
<span class="links-as-button flex flex-col gap-y-1">
<span class="link-underline flex flex-col gap-y-1">
<a class="flex" href="https://github.com/pietervdvn/MapComplete/" target="_blank">
<Github class="mr-2 h-6 w-6" />
<Tr t={Translations.t.general.attribution.gotoSourceCode} />
@ -192,7 +191,7 @@
<Tr t={Translations.t.privacy.title} />
</a>
</span>
</LoginToggle>
<Tr t={tr.streetcomplete} />

4
src/UI/Base/OpenJosm.svelte
View file

@ -34,8 +34,8 @@
</script>
{#if $showButton}
<div class="flex">
<button class="small soft flex grow items-center" on:click={openJosm}>
<div class="flex flex-col">
<button class="as-link" on:click={openJosm}>
<Josm_logo class="h-6 w-6 pr-2" />
<Tr t={t.editJosm} />
</button>

6
src/UI/Base/ShareButton.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import Share from "../../assets/svg/Share.svelte"
import { ariaLabel } from "../../Utils/ariaLabel"
import Translations from "../i18n/Translations"
import Share from "@babeard/svelte-heroicons/solid/Share"
export let generateShareData: () => {
text: string
@ -38,8 +38,8 @@
</slot>
</button>
{:else}
<button on:click={share}>
<Share class="h-8 w-8 pr-2" />
<button on:click={share} class="w-full">
<Share class="h-8 w-8" />
{text}
</button>
{/if}

15
src/UI/BigComponents/Histogram.ts
View file

@ -6,10 +6,11 @@ import { FixedUiElement } from "../Base/FixedUiElement"
import { Utils } from "../../Utils"
import BaseUIElement from "../BaseUIElement"
import SvelteUIElement from "../Base/SvelteUIElement"
import Up from "../../assets/svg/Up.svelte"
import Circle from "../../assets/svg/Circle.svelte"
import ChevronUp from "@babeard/svelte-heroicons/solid/ChevronUp"
import ChevronDown from "@babeard/svelte-heroicons/solid/ChevronDown"
export default class Histogram<T> extends VariableUiElement {
export default class Histogram extends VariableUiElement {
private static defaultPalette = [
"#ff5858",
"#ffad48",
@ -36,9 +37,9 @@ export default class Histogram<T> extends VariableUiElement {
sortMode.map((m) => {
switch (m) {
case "name":
return new SvelteUIElement(Up)
return new SvelteUIElement(ChevronUp)
case "name-rev":
return new SvelteUIElement(Up).SetStyle("transform: rotate(180deg)")
return new SvelteUIElement(ChevronDown)
default:
return new SvelteUIElement(Circle)
}
@ -58,9 +59,9 @@ export default class Histogram<T> extends VariableUiElement {
sortMode.map((m) => {
switch (m) {
case "count":
return new SvelteUIElement(Up)
return new SvelteUIElement(ChevronUp)
case "count-rev":
return new SvelteUIElement(Up).SetStyle("transform: rotate(180deg)")
return new SvelteUIElement(ChevronDown)
default:
return new SvelteUIElement(Circle)
}
@ -145,7 +146,7 @@ export default class Histogram<T> extends VariableUiElement {
]).SetClass("block w-full"),
]),
{
contentStyle: keys.map((_) => ["width: 20%"]),
contentStyle: keys.map(() => ["width: 20%"]),
}
).SetClass("w-full zebra-table")
},

19
src/UI/BigComponents/SelectedElementView.svelte
View file

@ -21,10 +21,21 @@
selectedElement.properties.id
)
let layer: LayerConfig =
selectedElement.properties.id === "settings"
? UserRelatedState.usersettingsConfig
: state.layout.getMatchingLayer(tags.data)
function getLayer(properties: Record<string, string>){
if(properties.id === "settings"){
return UserRelatedState.usersettingsConfig
}
if (properties.id === "new_point_dialog") {
return state.layout.layers.find((l) => l.id === "last_click")
}
if (properties.id === "location_track") {
return state.layout.layers.find((l) => l.id === "gps_track")
}
return state.layout.getMatchingLayer(properties)
}
let layer: LayerConfig = getLayer(selectedElement.properties)
let stillMatches = tags.map(
(tags) => !layer?.source?.osmTags || layer.source.osmTags?.matchesProperties(tags)

2
src/UI/BigComponents/ShareScreen.svelte
View file

@ -12,10 +12,10 @@
import Translations from "../i18n/Translations"
import { Utils } from "../../Utils"
import { DocumentDuplicateIcon } from "@rgossiaux/svelte-heroicons/outline"
import Share from "../../assets/svg/Share.svelte"
import ToSvelte from "../Base/ToSvelte.svelte"
import Img from "../Base/Img"
import Qr from "../../Utils/Qr"
import Share from "@babeard/svelte-heroicons/solid/Share"
export let state: ThemeViewState
const tr = Translations.t.general.sharescreen

12
src/UI/BigComponents/ThemeIntroPanel.svelte
View file

@ -12,10 +12,9 @@
import { GeoLocationState } from "../../Logic/State/GeoLocationState"
import If from "../Base/If.svelte"
import { ExclamationTriangleIcon } from "@babeard/svelte-heroicons/mini"
import Add from "../../assets/svg/Add.svelte"
import Location_refused from "../../assets/svg/Location_refused.svelte"
import Location from "../../assets/svg/Location.svelte"
import SpecialTranslation from "../Popup/TagRendering/SpecialTranslation.svelte"
import ChevronDoubleLeft from "@babeard/svelte-heroicons/mini/ChevronDoubleLeft"
/**
* The theme introduction panel
@ -150,11 +149,14 @@
{/if}
</div>
<div class="links-as-button links-w-full m-2 flex flex-col gap-y-1">
<If condition={state.featureSwitches.featureSwitchBackToThemeOverview}>
<div class="link-underline w-full m-2 mx-4 flex">
<!-- bottom buttons, a bit hidden away: switch layout -->
<a class="flex" href={Utils.HomepageLink()}>
<Add class="h-6 w-6" />
<a class="flex justify-end items-center w-fit" href={Utils.HomepageLink()}>
<ChevronDoubleLeft class="w-4 h-4" />
<Tr t={Translations.t.general.backToIndex} />
</a>
</div>
</If>
</div>

6
src/UI/BigComponents/UploadTraceToOsmUI.svelte
View file

@ -8,12 +8,12 @@
import Invalid from "../../assets/svg/Invalid.svelte"
import Tr from "../Base/Tr.svelte"
import Confirm from "../../assets/svg/Confirm.svelte"
import Upload from "../../assets/svg/Upload.svelte"
import Loading from "../Base/Loading.svelte"
import Close from "../../assets/svg/Close.svelte"
import { placeholder } from "../../Utils/placeholder"
import { ariaLabel } from "../../Utils/ariaLabel"
import { selectDefault } from "../../Utils/selectDefault"
import ArrowUpTray from "@babeard/svelte-heroicons/solid/ArrowUpTray"
export let trace: (title: string) => string
export let state: {
@ -113,7 +113,7 @@
currentStep.setData("please_confirm")
}}
>
<Upload class="h-12 w-12" />
<ArrowUpTray class="h-12 w-12" />
<Tr t={t.title} />
</button>
{:else if $currentStep === "please_confirm"}
@ -170,7 +170,7 @@
</button>
<button class="primary flex flex-grow gap-x-2" on:click={() => uploadTrace()}>
<Upload class="h-8 w-8" />
<ArrowUpTray class="h-8 w-8" />
<Tr t={t.confirm} />
</button>
</div>

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

@ -36,7 +36,7 @@
<div
class="no-weblate my-1 flex grid-cols-2 flex-wrap items-center justify-between rounded border-2 border-dashed border-gray-300 px-1"
>
<button class="link m-0 ml-1 cursor-pointer justify-self-start" on:click={() => select()}>
<button class="as-link" on:click={() => select()}>
<TagRenderingAnswer
{state}
config={titleConfig}

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

@ -3,12 +3,12 @@
import FavouriteSummary from "./FavouriteSummary.svelte"
import Translations from "../i18n/Translations"
import Tr from "../Base/Tr.svelte"
import { DownloadIcon } from "@rgossiaux/svelte-heroicons/solid"
import { Utils } from "../../Utils"
import { GeoOperations } from "../../Logic/GeoOperations"
import type { Feature, Point } from "geojson"
import LoginToggle from "../Base/LoginToggle.svelte"
import LoginButton from "../Base/LoginButton.svelte"
import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
/**
* A panel showing all your favourites
@ -54,13 +54,13 @@
<FavouriteSummary {feature} {state} />
{/each}
<div class="mt-8">
<button class="flex p-2" on:click={() => downloadGeojson()}>
<DownloadIcon class="h-6 w-6" />
<div class="mt-8 flex">
<button on:click={() => downloadGeojson()}>
<ArrowDownTray class="h-6 w-6" />
<Tr t={Translations.t.favouritePoi.downloadGeojson} />
</button>
<button class="flex p-2" on:click={() => downloadGPX()}>
<DownloadIcon class="h-6 w-6" />
<button on:click={() => downloadGPX()}>
<ArrowDownTray class="h-6 w-6" />
<Tr t={Translations.t.favouritePoi.downloadGpx} />
</button>
</div>

2
src/UI/Image/UploadImage.svelte
View file

@ -84,7 +84,7 @@
</FileSelector>
<div class="text-sm">
<button
class="link small"
class="as-link"
style="margin: 0; padding: 0"
on:click={() => {
state.guistate.openUsersettings("picture-license")

2
src/UI/Popup/DeleteFlow/DeleteWizard.svelte
View file

@ -90,7 +90,7 @@
</div>
{:else if currentState === "start"}
<button
class="flex items-center"
class="w-full"
on:click={() => {
currentState = "confirm"
}}

5
src/UI/Popup/ExportAsGpxViz.ts
View file

@ -8,6 +8,9 @@ import { SpecialVisualization, SpecialVisualizationState } from "../SpecialVisua
import { UIEventSource } from "../../Logic/UIEventSource"
import { Feature, LineString } from "geojson"
import LayerConfig from "../../Models/ThemeConfig/LayerConfig"
import ToSvelte from "../Base/ToSvelte.svelte"
import SvelteUIElement from "../Base/SvelteUIElement"
import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
export class ExportAsGpxViz implements SpecialVisualization {
funcName = "export_as_gpx"
@ -26,7 +29,7 @@ export class ExportAsGpxViz implements SpecialVisualization {
return undefined
}
return new SubtleButton(
Svg.download_svg(),
new SvelteUIElement(ArrowDownTray),
new Combine([
t.downloadFeatureAsGpx.SetClass("font-bold text-lg"),
t.downloadGpxHelper.SetClass("subtle"),

17
src/UI/Popup/MarkAsFavourite.svelte
View file

@ -26,22 +26,23 @@
<LoginToggle ignoreLoading={true} {state}>
{#if $isFavourite}
<div class="flex h-fit items-start">
<HeartSolidIcon class="mr-2 w-16 shrink-0" on:click={() => markFavourite(false)} />
<div class="flex w-full flex-col">
<button class="flex flex-col items-start" on:click={() => markFavourite(false)}>
<button on:click={() => markFavourite(false)}>
<HeartSolidIcon class="mr-2 w-16 shrink-0" on:click={() => markFavourite(false)} />
<div class="flex flex-col items-start">
<Tr t={t.button.unmark} />
<Tr cls="normal-font subtle" t={t.button.unmarkNotDeleted} />
</div>
</button>
</div>
</div>
<Tr cls="font-bold thanks m-2 p-2 block" t={t.button.isFavourite} />
{:else}
<div class="flex items-start">
<HeartOutlineIcon class="mr-2 w-16 shrink-0" on:click={() => markFavourite(true)} />
<button class="flex w-full flex-col items-start" on:click={() => markFavourite(true)}>
<button on:click={() => markFavourite(true)}>
<HeartOutlineIcon class="mr-2 w-16 shrink-0" on:click={() => markFavourite(true)} />
<div class="flex w-full flex-col items-start">
<Tr t={t.button.markAsFavouriteTitle} />
<Tr cls="normal-font subtle" t={t.button.markDescription} />
</div>
</button>
</div>
{/if}
</LoginToggle>

7
src/UI/Popup/MoveWizard.svelte
View file

@ -64,7 +64,7 @@
{:else if currentStep === "start"}
{#if moveWizardState.reasons.length === 1}
<button
class="flex"
class="w-full"
on:click={() => {
reason.setData(moveWizardState.reasons[0])
currentStep = "pick_location"
@ -77,7 +77,7 @@
</button>
{:else}
<button
class="flex"
class="w-full"
on:click={() => {
currentStep = "reason"
}}
@ -127,13 +127,12 @@
)}
>
<button
class="primary flex w-full"
class="primary w-full"
on:click={() => {
moveWizardState.moveFeature(newLocation.data, reason.data, featureToMove)
currentStep = "moved"
}}
>
<Move class="mr-2 h-6 w-6" />
<Tr t={t.confirmMove} />
</button>

6
src/UI/Popup/TagRendering/EditButton.svelte
View file

@ -1,7 +1,7 @@
<script lang="ts">
import { PencilAltIcon } from "@rgossiaux/svelte-heroicons/solid"
import { ariaLabel } from "../../../Utils/ariaLabel.js"
import { Translation } from "../../i18n/Translation"
import Pencil from "@babeard/svelte-heroicons/solid/Pencil"
/**
* A small, round button with an edit-icon (and aria-labels etc)
@ -15,9 +15,9 @@
<button
on:click
class="secondary h-8 w-8 shrink-0 self-start rounded-full p-1"
class="h-8 w-8 shrink-0 self-start rounded-full p-1 as-link"
aria-labelledby={arialabel === undefined ? ariaLabelledBy : undefined}
use:ariaLabel={arialabel}
>
<PencilAltIcon />
<Pencil class="h-4 w-4 hover-alert" />
</button>

2
src/UI/Reviews/SingleReview.svelte
View file

@ -39,7 +39,7 @@
($byLoggedInUser ? "border-interactive" : "")}
>
{#if showSub}
<button class="link" on:click={() => selectFeature()}>
<button class="as-link" on:click={() => selectFeature()}>
<h3>{sub}</h3>
</button>
{/if}

2
src/UI/Reviews/StarElement.svelte
View file

@ -38,7 +38,7 @@
{:else}
<button
use:ariaLabel={Translations.t.reviews.rate.Subs({ n: i + 1 })}
class="small soft no-image-background rounded-full"
class="rounded-full as-link"
style="padding: 0; border: none;"
bind:this={container}
on:click={(e) => {

9
src/UI/SpecialVisualizations.ts
View file

@ -28,7 +28,6 @@ import { Translation } from "./i18n/Translation"
import Translations from "./i18n/Translations"
import OpeningHoursVisualization from "./OpeningHours/OpeningHoursVisualization"
import { SubtleButton } from "./Base/SubtleButton"
import Svg from "../Svg"
import NoteCommentElement from "./Popup/Notes/NoteCommentElement"
import List from "./Base/List"
import StatisticsPanel from "./BigComponents/StatisticsPanel"
@ -96,6 +95,8 @@ import DynLink from "./Base/DynLink.svelte"
import Locale from "./i18n/Locale"
import LanguageUtils from "../Utils/LanguageUtils"
import MarkdownUtils from "../Utils/MarkdownUtils"
import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
import Trash from "@babeard/svelte-heroicons/mini/Trash"
class NearbyImageVis implements SpecialVisualization {
// Class must be in SpecialVisualisations due to weird cyclical import that breaks the tests
@ -490,7 +491,7 @@ export default class SpecialVisualizations {
state,
feature,
layer,
})
}).SetClass("p-0 m-0")
},
},
new ShareLinkViz(),
@ -878,7 +879,7 @@ export default class SpecialVisualizations {
const t = Translations.t.general.download
return new SubtleButton(
Svg.download_svg(),
new SvelteUIElement(ArrowDownTray),
new Combine([
t.downloadFeatureAsGeojson.SetClass("font-bold text-lg"),
t.downloadGeoJsonHelper.SetClass("subtle"),
@ -930,7 +931,7 @@ export default class SpecialVisualizations {
constr: (state) => {
return new SubtleButton(
Svg.delete_icon_svg().SetStyle("height: 1.5rem"),
new SvelteUIElement(Trash).SetClass("h-6"),
Translations.t.general.removeLocationHistory
).onClick(() => {
state.historicalUserLocations.features.setData([])

3
src/UI/StylesheetTestGui.svelte
View file

@ -68,6 +68,9 @@
<Community class="h-6 w-6" />
Secondary action (disabled)
</button>
<button class="as-link">
Mimick link
</button>
</div>
<input type="text" />

12
src/UI/ThemeViewGUI.svelte
View file

@ -59,8 +59,6 @@
import Filter from "../assets/svg/Filter.svelte"
import Add from "../assets/svg/Add.svelte"
import Community from "../assets/svg/Community.svelte"
import Download from "../assets/svg/Download.svelte"
import Share from "../assets/svg/Share.svelte"
import Favourites from "./Favourites/Favourites.svelte"
import ImageOperations from "./Image/ImageOperations.svelte"
import VisualFeedbackPanel from "./BigComponents/VisualFeedbackPanel.svelte"
@ -76,6 +74,8 @@
import CloseAnimation from "./Base/CloseAnimation.svelte"
import { LastClickFeatureSource } from "../Logic/FeatureSource/Sources/LastClickFeatureSource"
import Github from "../assets/svg/Github.svelte"
import ArrowDownTray from "@babeard/svelte-heroicons/mini/ArrowDownTray"
import Share from "@babeard/svelte-heroicons/solid/Share"
export let state: ThemeViewState
let layout = state.layout
@ -496,7 +496,7 @@
<div class="flex" slot="title1">
<If condition={state.featureSwitches.featureSwitchEnableExport}>
<Download class="h-4 w-4" />
<ArrowDownTray class="h-4 w-4" />
<Tr t={Translations.t.general.download.title} />
</If>
</div>
@ -565,7 +565,7 @@
<Tr t={Translations.t.general.menu.aboutMapComplete} />
</div>
<div class="links-as-button links-w-full m-2 flex flex-col gap-y-1" slot="content0">
<div class="link-underline links-w-full m-2 flex flex-col gap-y-1" slot="content0">
<Tr t={Translations.t.general.aboutMapComplete.intro} />
<a class="flex" href={Utils.HomepageLink()}>
@ -594,7 +594,7 @@
</a>
<button
class="small soft flex"
class="as-link"
on:click={() => state.guistate.communityIndexPanelIsOpened.setData(true)}
>
<Community class="h-6 w-6" />
@ -608,7 +608,7 @@
</If>
<button
class="small soft flex"
class="as-link"
on:click={() => state.guistate.privacyPanelIsOpened.setData(true)}
>
<EyeIcon class="h-6 w-6 pr-1" />