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

UX: improve rendering of disabled GPS button (esp. if not available)

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-08-09 14:37:57 +02:00
parent 23dae52bad
commit a7c7064636
4 changed files with 7 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
assets/svg/location-refused.svg
View file

@ -1,7 +1,7 @@
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1">
<g id="surface1">
<path style=" stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:1;" d="M 372.8125 175.78125 L 312.5 175.78125 C 306.570312 115.964844 259.332031 68.597656 199.53125 62.5 L 199.53125 1.71875 L 175.46875 1.71875 L 175.46875 62.5 C 115.511719 68.765625 68.269531 116.398438 62.5 176.40625 L 2.1875 176.40625 L 2.1875 201.09375 L 62.5 201.09375 C 68.292969 261.152344 115.871094 308.664062 175.9375 314.375 L 175.9375 375 L 200 375 L 200 314.21875 C 259.703125 308.089844 306.78125 260.679688 312.5 200.9375 L 372.34375 200.9375 L 372.34375 175.78125 Z M 187.5 289.84375 C 167.40625 289.867188 147.761719 283.878906 131.09375 272.65625 C 96.832031 249.789062 79.742188 208.519531 87.8125 168.125 C 91.808594 148.441406 101.476562 130.351562 115.625 116.09375 C 144.636719 86.929688 188.359375 78.113281 226.40625 93.75 C 264.28125 109.484375 288.949219 146.488281 288.90625 187.5 C 288.988281 214.550781 278.304688 240.519531 259.21875 259.6875 C 249.785156 269.242188 238.519531 276.789062 226.09375 281.875 C 213.71875 287.035156 200.441406 289.691406 187.03125 289.6875 Z M 187.5 289.84375 "/>
<path style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" d="M 372.8125 175.78125 L 312.5 175.78125 C 306.570312 115.964844 259.332031 68.597656 199.53125 62.5 L 199.53125 1.71875 L 175.46875 1.71875 L 175.46875 62.5 C 115.511719 68.765625 68.269531 116.398438 62.5 176.40625 L 2.1875 176.40625 L 2.1875 201.09375 L 62.5 201.09375 C 68.292969 261.152344 115.871094 308.664062 175.9375 314.375 L 175.9375 375 L 200 375 L 200 314.21875 C 259.703125 308.089844 306.78125 260.679688 312.5 200.9375 L 372.34375 200.9375 L 372.34375 175.78125 Z M 187.5 289.84375 C 167.40625 289.867188 147.761719 283.878906 131.09375 272.65625 C 96.832031 249.789062 79.742188 208.519531 87.8125 168.125 C 91.808594 148.441406 101.476562 130.351562 115.625 116.09375 C 144.636719 86.929688 188.359375 78.113281 226.40625 93.75 C 264.28125 109.484375 288.949219 146.488281 288.90625 187.5 C 288.988281 214.550781 278.304688 240.519531 259.21875 259.6875 C 249.785156 269.242188 238.519531 276.789062 226.09375 281.875 C 213.71875 287.035156 200.441406 289.691406 187.03125 289.6875 Z M 187.5 289.84375 "/>
<path style="fill-rule:nonzero;fill:rgb(74.117649%,5.882353%,0%);fill-opacity:1;stroke-width:0.426333;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:4;" d="M 3.18875 2.36425 C 2.9815 2.379 2.80175 2.51325 2.72825 2.70775 C 2.655 2.90225 2.7015 3.1215 2.84725 3.26975 L 19.9735 21.26175 C 20.10475 21.4 20.29975 21.45775 20.485 21.413 C 20.67025 21.3685 20.81775 21.22825 20.8715 21.0455 C 20.92525 20.8625 20.87725 20.665 20.74575 20.527 L 3.61975 2.53475 C 3.5095 2.41525 3.35075 2.35225 3.18875 2.36425 Z M 3.18875 2.36425 " transform="matrix(15.625,0,0,15.625,0,0)"/>
</g>
</svg>
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 1.9 KiB

1
src/UI/Base/MapControlButton.svelte
View file

@ -27,6 +27,7 @@
on:click={(e) => dispatch("click", e)}
on:keydown
use:ariaLabelStore={arialabelString}
disabled={!$enabled}
class={twJoin(
"pointer-events-auto relative h-fit w-fit rounded-full",
cls,

4
src/UI/ThemeViewGUI.svelte
View file

@ -208,7 +208,8 @@
let openBackgroundButton: UIEventSource<HTMLElement> = new UIEventSource<HTMLElement>(undefined)
let addNewFeatureMode = state.userRelatedState.addNewFeatureMode
let gpsButtonAriaLabel = state.geolocation.geolocationState.gpsAvailable.map(available => {
let gpsAvailable = state.geolocation.geolocationState.gpsAvailable
let gpsButtonAriaLabel = gpsAvailable.map(available => {
if (!available) {
return Translations.t.general.labels.locationNotAvailable
}
@ -433,6 +434,7 @@
<If condition={featureSwitches.featureSwitchGeolocation}>
<div class="relative m-0">
<MapControlButton
enabled={gpsAvailable}
arialabelDynamic={gpsButtonAriaLabel}
on:click={() => state.geolocationControl.handleClick()}
on:keydown={forwardEventToMap}

2
src/assets/svg/Location_refused.svelte
View file

@ -1,4 +1,4 @@
<script>
export let color = "#000000"
</script>
<svg {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown on:focus xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1"> <g id="surface1"> <path style=" stroke:none;fill-rule:nonzero;fill:{color};fill-opacity:1;" d="M 372.8125 175.78125 L 312.5 175.78125 C 306.570312 115.964844 259.332031 68.597656 199.53125 62.5 L 199.53125 1.71875 L 175.46875 1.71875 L 175.46875 62.5 C 115.511719 68.765625 68.269531 116.398438 62.5 176.40625 L 2.1875 176.40625 L 2.1875 201.09375 L 62.5 201.09375 C 68.292969 261.152344 115.871094 308.664062 175.9375 314.375 L 175.9375 375 L 200 375 L 200 314.21875 C 259.703125 308.089844 306.78125 260.679688 312.5 200.9375 L 372.34375 200.9375 L 372.34375 175.78125 Z M 187.5 289.84375 C 167.40625 289.867188 147.761719 283.878906 131.09375 272.65625 C 96.832031 249.789062 79.742188 208.519531 87.8125 168.125 C 91.808594 148.441406 101.476562 130.351562 115.625 116.09375 C 144.636719 86.929688 188.359375 78.113281 226.40625 93.75 C 264.28125 109.484375 288.949219 146.488281 288.90625 187.5 C 288.988281 214.550781 278.304688 240.519531 259.21875 259.6875 C 249.785156 269.242188 238.519531 276.789062 226.09375 281.875 C 213.71875 287.035156 200.441406 289.691406 187.03125 289.6875 Z M 187.5 289.84375 "/> <path style="fill-rule:nonzero;fill:rgb(74.117649%,5.882353%,0%);fill-opacity:1;stroke-width:0.426333;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:4;" d="M 3.18875 2.36425 C 2.9815 2.379 2.80175 2.51325 2.72825 2.70775 C 2.655 2.90225 2.7015 3.1215 2.84725 3.26975 L 19.9735 21.26175 C 20.10475 21.4 20.29975 21.45775 20.485 21.413 C 20.67025 21.3685 20.81775 21.22825 20.8715 21.0455 C 20.92525 20.8625 20.87725 20.665 20.74575 20.527 L 3.61975 2.53475 C 3.5095 2.41525 3.35075 2.35225 3.18875 2.36425 Z M 3.18875 2.36425 " transform="matrix(15.625,0,0,15.625,0,0)"/> </g> </svg>
<svg {...$$restProps} on:click on:mouseover on:mouseenter on:mouseleave on:keydown on:focus xmlns="http://www.w3.org/2000/svg" width="375px" height="375px" viewBox="0 0 375 375" version="1.1"> <g id="surface1"> <path style=" stroke:none;fill-rule:nonzero;fill-opacity:1;" d="M 372.8125 175.78125 L 312.5 175.78125 C 306.570312 115.964844 259.332031 68.597656 199.53125 62.5 L 199.53125 1.71875 L 175.46875 1.71875 L 175.46875 62.5 C 115.511719 68.765625 68.269531 116.398438 62.5 176.40625 L 2.1875 176.40625 L 2.1875 201.09375 L 62.5 201.09375 C 68.292969 261.152344 115.871094 308.664062 175.9375 314.375 L 175.9375 375 L 200 375 L 200 314.21875 C 259.703125 308.089844 306.78125 260.679688 312.5 200.9375 L 372.34375 200.9375 L 372.34375 175.78125 Z M 187.5 289.84375 C 167.40625 289.867188 147.761719 283.878906 131.09375 272.65625 C 96.832031 249.789062 79.742188 208.519531 87.8125 168.125 C 91.808594 148.441406 101.476562 130.351562 115.625 116.09375 C 144.636719 86.929688 188.359375 78.113281 226.40625 93.75 C 264.28125 109.484375 288.949219 146.488281 288.90625 187.5 C 288.988281 214.550781 278.304688 240.519531 259.21875 259.6875 C 249.785156 269.242188 238.519531 276.789062 226.09375 281.875 C 213.71875 287.035156 200.441406 289.691406 187.03125 289.6875 Z M 187.5 289.84375 "/> <path style="fill-rule:nonzero;fill:rgb(74.117649%,5.882353%,0%);fill-opacity:1;stroke-width:0.426333;stroke-linecap:round;stroke-linejoin:miter;stroke:rgb(100%,100%,100%);stroke-opacity:1;stroke-miterlimit:4;" d="M 3.18875 2.36425 C 2.9815 2.379 2.80175 2.51325 2.72825 2.70775 C 2.655 2.90225 2.7015 3.1215 2.84725 3.26975 L 19.9735 21.26175 C 20.10475 21.4 20.29975 21.45775 20.485 21.413 C 20.67025 21.3685 20.81775 21.22825 20.8715 21.0455 C 20.92525 20.8625 20.87725 20.665 20.74575 20.527 L 3.61975 2.53475 C 3.5095 2.41525 3.35075 2.35225 3.18875 2.36425 Z M 3.18875 2.36425 " transform="matrix(15.625,0,0,15.625,0,0)"/> </g> </svg>