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

Usertests: explicitly mark the 'switch layers' button in special interactions, see #1316

Browse source
This commit is contained in:
Pieter Vander Vennet 2023-06-14 23:58:57 +02:00
parent c5c6bba731
commit 6709a27f71
8 changed files with 58 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
UI/BigComponents/OpenBackgroundSelectorButton.svelte
View file

@ -1,11 +1,23 @@
<script lang="ts">
import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
import MapControlButton from "../Base/MapControlButton.svelte"
import ThemeViewState from "../../Models/ThemeViewState"
/**
* A mapcontrol button which allows the user to select a different background.
* Even though the componenet is very small, it gets it's own class as it is often reused
*/
import {Square3Stack3dIcon} from "@babeard/svelte-heroicons/solid";
import type {SpecialVisualizationState} from "../SpecialVisualization";
import Translations from "../i18n/Translations";
import MapControlButton from "../Base/MapControlButton.svelte";
import Tr from "../Base/Tr.svelte";
export let state: ThemeViewState
export let state: SpecialVisualizationState
export let hideTooltip = false
</script>
<MapControlButton on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}>
<Square3Stack3dIcon class="h-6 w-6" />
<MapControlButton
on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
>
<Square3Stack3dIcon class="h-6 w-6"/>
{#if !hideTooltip}
<Tr cls="mx-2" t={Translations.t.general.backgroundSwitch}/>
{/if}
</MapControlButton>

9
UI/Popup/AddNewPoint/AddNewPoint.svelte
View file

@ -31,8 +31,7 @@
import BackButton from "../../Base/BackButton.svelte"
import ToSvelte from "../../Base/ToSvelte.svelte"
import Svg from "../../../Svg"
import MapControlButton from "../../Base/MapControlButton.svelte"
import {Square3Stack3dIcon} from "@babeard/svelte-heroicons/solid"
import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
export let coordinate: { lon: number; lat: number }
export let state: SpecialVisualizationState
@ -329,11 +328,7 @@
</div>
<div class="absolute bottom-0 left-0 p-4">
<MapControlButton
on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
>
<Square3Stack3dIcon class="h-6 w-6"/>
</MapControlButton>
<OpenBackgroundSelectorButton {state}/>
</div>
</div>
<div class="flex flex-wrap-reverse md:flex-nowrap">

16
UI/Popup/ImportButtons/PointImportFlow.svelte
View file

@ -1,11 +1,10 @@
<script lang="ts">
import ImportFlow from "./ImportFlow.svelte"
import { PointImportFlowState } from "./PointImportFlowState"
import {PointImportFlowState} from "./PointImportFlowState"
import NewPointLocationInput from "../../BigComponents/NewPointLocationInput.svelte"
import LayerConfig from "../../../Models/ThemeConfig/LayerConfig"
import { UIEventSource } from "../../../Logic/UIEventSource"
import MapControlButton from "../../Base/MapControlButton.svelte"
import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
import {UIEventSource} from "../../../Logic/UIEventSource"
import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
export let importFlow: PointImportFlowState
@ -52,11 +51,8 @@
{value}
/>
</div>
<MapControlButton
on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
cls="absolute bottom-0"
>
<Square3Stack3dIcon class="h-6 w-6" />
</MapControlButton>
<div class="absolute bottom-0">
<OpenBackgroundSelectorButton {state}/>
</div>
</div>
</ImportFlow>

23
UI/Popup/ImportButtons/WayImportFlow.svelte
View file

@ -4,17 +4,17 @@
*/
import WayImportFlowState from "./WayImportFlowState"
import ImportFlow from "./ImportFlow.svelte"
import MapControlButton from "../../Base/MapControlButton.svelte"
import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
import { UIEventSource } from "../../../Logic/UIEventSource"
import { Map as MlMap } from "maplibre-gl"
import { MapLibreAdaptor } from "../../Map/MapLibreAdaptor"
import {UIEventSource} from "../../../Logic/UIEventSource"
import {Map as MlMap} from "maplibre-gl"
import {MapLibreAdaptor} from "../../Map/MapLibreAdaptor"
import MaplibreMap from "../../Map/MaplibreMap.svelte"
import ShowDataLayer from "../../Map/ShowDataLayer"
import StaticFeatureSource from "../../../Logic/FeatureSource/Sources/StaticFeatureSource"
import { ImportFlowUtils } from "./ImportFlow"
import { GeoOperations } from "../../../Logic/GeoOperations"
import {ImportFlowUtils} from "./ImportFlow"
import {GeoOperations} from "../../../Logic/GeoOperations"
import ConflateImportFlowState from "./ConflateImportFlowState"
import OpenBackgroundSelectorButton from "../../BigComponents/OpenBackgroundSelectorButton.svelte";
export let importFlow: WayImportFlowState | ConflateImportFlowState
const state = importFlow.state
@ -50,11 +50,8 @@
<div class="h-32">
<MaplibreMap {map} />
</div>
<MapControlButton
on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
cls="absolute bottom-0"
>
<Square3Stack3dIcon class="h-6 w-6" />
</MapControlButton>
<div class="absolute bottom-0">
<OpenBackgroundSelectorButton/>
</div>
</div>
</ImportFlow>

2
UI/SpecialVisualization.ts
View file

@ -64,7 +64,7 @@ export interface SpecialVisualizationState {
readonly perLayer: ReadonlyMap<string, GeoIndexedStoreForLayer>
readonly userRelatedState: {
readonly showTags: UIEventSource<"no" | undefined | "always" | "yes">
readonly showTags: UIEventSource<"no" | undefined | "always" | "yes" | "full">
readonly mangroveIdentity: MangroveIdentity
readonly showAllQuestionsAtOnce: UIEventSource<boolean>
readonly preferencesAsTags: Store<Record<string, string>>

34
UI/ThemeViewGUI.svelte
View file

@ -1,22 +1,21 @@
<script lang="ts">
import { Store, UIEventSource } from "../Logic/UIEventSource"
import { Map as MlMap } from "maplibre-gl"
import {Store, UIEventSource} from "../Logic/UIEventSource"
import {Map as MlMap} from "maplibre-gl"
import MaplibreMap from "./Map/MaplibreMap.svelte"
import FeatureSwitchState from "../Logic/State/FeatureSwitchState"
import MapControlButton from "./Base/MapControlButton.svelte"
import ToSvelte from "./Base/ToSvelte.svelte"
import If from "./Base/If.svelte"
import { GeolocationControl } from "./BigComponents/GeolocationControl"
import type { Feature } from "geojson"
import {GeolocationControl} from "./BigComponents/GeolocationControl"
import type {Feature} from "geojson"
import SelectedElementView from "./BigComponents/SelectedElementView.svelte"
import LayerConfig from "../Models/ThemeConfig/LayerConfig"
import Filterview from "./BigComponents/Filterview.svelte"
import ThemeViewState from "../Models/ThemeViewState"
import type { MapProperties } from "../Models/MapProperties"
import type {MapProperties} from "../Models/MapProperties"
import Geosearch from "./BigComponents/Geosearch.svelte"
import Translations from "./i18n/Translations"
import { CogIcon, EyeIcon, MenuIcon, XCircleIcon } from "@rgossiaux/svelte-heroicons/solid"
import { Square3Stack3dIcon } from "@babeard/svelte-heroicons/solid"
import {CogIcon, EyeIcon, MenuIcon, XCircleIcon} from "@rgossiaux/svelte-heroicons/solid"
import Tr from "./Base/Tr.svelte"
import CommunityIndexView from "./BigComponents/CommunityIndexView.svelte"
@ -30,25 +29,26 @@
import CopyrightPanel from "./BigComponents/CopyrightPanel"
import DownloadPanel from "./DownloadFlow/DownloadPanel.svelte"
import ModalRight from "./Base/ModalRight.svelte"
import { Utils } from "../Utils"
import {Utils} from "../Utils"
import Hotkeys from "./Base/Hotkeys"
import { VariableUiElement } from "./Base/VariableUIElement"
import {VariableUiElement} from "./Base/VariableUIElement"
import SvelteUIElement from "./Base/SvelteUIElement"
import OverlayToggle from "./BigComponents/OverlayToggle.svelte"
import LevelSelector from "./BigComponents/LevelSelector.svelte"
import ExtraLinkButton from "./BigComponents/ExtraLinkButton"
import SelectedElementTitle from "./BigComponents/SelectedElementTitle.svelte"
import Svg from "../Svg"
import { ShareScreen } from "./BigComponents/ShareScreen"
import {ShareScreen} from "./BigComponents/ShareScreen"
import ThemeIntroPanel from "./BigComponents/ThemeIntroPanel.svelte"
import type { RasterLayerPolygon } from "../Models/RasterLayers"
import { AvailableRasterLayers } from "../Models/RasterLayers"
import type {RasterLayerPolygon} from "../Models/RasterLayers"
import {AvailableRasterLayers} from "../Models/RasterLayers"
import RasterLayerOverview from "./Map/RasterLayerOverview.svelte"
import IfHidden from "./Base/IfHidden.svelte"
import { onDestroy } from "svelte"
import { OpenJosm } from "./BigComponents/OpenJosm"
import {onDestroy} from "svelte"
import {OpenJosm} from "./BigComponents/OpenJosm"
import MapillaryLink from "./BigComponents/MapillaryLink.svelte"
import OpenIdEditor from "./BigComponents/OpenIdEditor.svelte"
import OpenBackgroundSelectorButton from "./BigComponents/OpenBackgroundSelectorButton.svelte";
export let state: ThemeViewState
let layout = state.layout
@ -161,11 +161,7 @@
<div class="flex w-full items-end justify-between px-4">
<div class="flex">
<!-- bottom left elements -->
<MapControlButton
on:click={() => state.guistate.backgroundLayerSelectionIsOpened.setData(true)}
>
<Square3Stack3dIcon class="h-6 w-6" />
</MapControlButton>
<OpenBackgroundSelectorButton {state} hideTooltip={true}/>
<a
class="bg-black-transparent pointer-events-auto h-fit max-h-12 cursor-pointer self-end overflow-hidden rounded-2xl pl-1 pr-2 text-white opacity-50 hover:opacity-100"
on:click={() => {

1
langs/en.json
View file

@ -161,6 +161,7 @@
"backToIndex": "Go back to the overview with all thematic maps",
"backToMapcomplete": "Back to the theme overview",
"backgroundMap": "Select a background layer",
"backgroundSwitch": "Switch background",
"cancel": "Cancel",
"confirm": "Confirm",
"customThemeIntro": "<h3>Custom themes</h3>These are previously visited user-generated themes.",

26
public/css/index-tailwind-output.css
View file

@ -804,6 +804,11 @@ video {
margin-right: 0.25rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.my-4 {
margin-top: 1rem;
margin-bottom: 1rem;
@ -1242,27 +1247,6 @@ video {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@-webkit-keyframes ping {
75%, 100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
@keyframes ping {
75%, 100% {
-webkit-transform: scale(2);
transform: scale(2);
opacity: 0;
}
}
.animate-ping {
-webkit-animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
}
.cursor-pointer {
cursor: pointer;
}