midgard/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

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>