midgard/mapcomplete
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

UX(notes): small improvements to creating and adding comments to notes, fix #2166

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-09-24 15:25:13 +02:00
parent 392fe3b190
commit 3191f0876a
2 changed files with 31 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/UI/Popup/Notes/AddNoteComment.svelte
View file

@ -65,6 +65,7 @@
tags.data["closed_at"] = undefined tags.data["closed_at"] = undefined
NoteCommentElement.addCommentTo(txt.data, tags, state) NoteCommentElement.addCommentTo(txt.data, tags, state)
tags.ping() tags.ping()
txt.set(undefined)
isProcessing.set(false) isProcessing.set(false)
} }
</script> </script>

54
src/UI/Popup/Notes/CreateNewNote.svelte
View file

@ -19,6 +19,7 @@
import Loading from "../../Base/Loading.svelte" import Loading from "../../Base/Loading.svelte"
import NextButton from "../../Base/NextButton.svelte" import NextButton from "../../Base/NextButton.svelte"
import Note from "../../../assets/svg/Note.svelte" import Note from "../../../assets/svg/Note.svelte"
import TitledPanel from "../../Base/TitledPanel.svelte"
export let coordinate: UIEventSource<{ lon: number; lat: number }> export let coordinate: UIEventSource<{ lon: number; lat: number }>
export let state: SpecialVisualizationState export let state: SpecialVisualizationState
@ -32,6 +33,8 @@
let isDisplayed = notelayer?.isDisplayed let isDisplayed = notelayer?.isDisplayed
let submitted = false let submitted = false
let textEntered = false
function enableNoteLayer() { function enableNoteLayer() {
state.guistate.closeAll() state.guistate.closeAll()
isDisplayed.setData(true) isDisplayed.setData(true)
@ -91,14 +94,19 @@
<Tr t={Translations.t.notes.isCreated} /> <Tr t={Translations.t.notes.isCreated} />
</div> </div>
{:else} {:else}
<h3> <TitledPanel>
<Tr t={Translations.t.notes.createNoteTitle} />
</h3>
{#if $isDisplayed} <Tr slot="title" t={Translations.t.notes.createNoteTitle} />
<!-- The layer is displayed, so we can add a note without worrying for duplicates -->
{#if $hasFilter} {#if !$isDisplayed}
<div class="flex flex-col"> <div class="alert">
<Tr t={Translations.t.notes.noteLayerNotEnabled} />
</div>
<SubtleButton on:click={enableNoteLayer}>
<Layers slot="image" class="mr-4 h-8 w-8" />
<Tr slot="message" t={Translations.t.notes.noteLayerDoEnable} />
</SubtleButton>
{:else if $hasFilter}
<!-- ...but a filter is set ...--> <!-- ...but a filter is set ...-->
<div class="alert"> <div class="alert">
<Tr t={Translations.t.notes.noteLayerHasFilters} /> <Tr t={Translations.t.notes.noteLayerHasFilters} />
@ -107,10 +115,12 @@
<Layers class="mr-4 h-8 w-8" /> <Layers class="mr-4 h-8 w-8" />
<Tr slot="message" t={Translations.t.notes.disableAllNoteFilters} /> <Tr slot="message" t={Translations.t.notes.disableAllNoteFilters} />
</SubtleButton> </SubtleButton>
</div>
{:else} {:else}
<!-- The layer with notes is displayed without filters, so we can add a note without worrying for duplicates -->
<div class="h-full flex flex-col justify-between">
<form <form
class="low-interaction flex flex-col rounded-sm p-2" class="flex flex-col rounded-sm p-2"
on:submit|preventDefault={uploadNote} on:submit|preventDefault={uploadNote}
> >
<label class="neutral-label"> <label class="neutral-label">
@ -120,14 +130,6 @@
</div> </div>
</label> </label>
<div class="h-56 w-full">
<NewPointLocationInput value={coordinate} {state}>
<div class="h-20 w-full pb-10" slot="image">
<Note class="h-10 w-full" />
</div>
</NewPointLocationInput>
</div>
<LoginToggle {state}> <LoginToggle {state}>
<span slot="loading"><!--empty: don't show a loading message--></span> <span slot="loading"><!--empty: don't show a loading message--></span>
<div slot="not-logged-in" class="alert"> <div slot="not-logged-in" class="alert">
@ -146,16 +148,16 @@
</div> </div>
{/if} {/if}
</form> </form>
{/if}
{:else} <div class="h-56 w-full">
<div class="flex flex-col"> <NewPointLocationInput value={coordinate} {state}>
<div class="alert"> <div class="h-20 w-full pb-10" slot="image">
<Tr t={Translations.t.notes.noteLayerNotEnabled} /> <Note class="h-10 w-full" />
</div> </div>
<SubtleButton on:click={enableNoteLayer}> </NewPointLocationInput>
<Layers slot="image" class="mr-4 h-8 w-8" />
<Tr slot="message" t={Translations.t.notes.noteLayerDoEnable} />
</SubtleButton>
</div> </div>
</div>
{/if} {/if}
</TitledPanel>
{/if} {/if}