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

UX: add background to 'add new point'-button if disabled

Browse source
This commit is contained in:
Pieter Vander Vennet 2024-04-27 00:29:10 +02:00
parent 40efc9aefd
commit 46211e4c2e
3 changed files with 12 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -2265,6 +2265,7 @@ video {
--alert-color: #fee4d1;
--alert-foreground-color: var(--foreground-color);
--low-interaction-background: #eeeeee;
--low-interaction-background-50: #eeeeee90;
--low-interaction-foreground: black;
--low-interaction-contrast: #ff00ff;
--interactive-background: #dddddd;
@ -2491,6 +2492,10 @@ button.primary:not(.no-image-background) svg path, .button.primary:not(.no-image
transition: all 250ms;
}
button.disabled.low-interaction, .button.disabled.low-interaction {
background-color: var(--low-interaction-background-50);
}
button.disabled, .button.disabled {
cursor: default;
border: 2px dashed var(--button-background);

2
src/UI/ThemeViewGUI.svelte
View file

@ -287,7 +287,7 @@
<If condition={featureSwitches.featureSwitchEnableLogin}>
{#if state.layout.hasPresets() || state.layout.hasNoteLayer()}
<button
class="pointer-events-auto w-fit"
class="pointer-events-auto w-fit low-interaction"
class:disabled={$currentZoom < Constants.minZoomLevelToAddNewPoint}
on:click={() => {
state.openNewDialog()

6
src/index.css
View file

@ -27,6 +27,7 @@
--alert-foreground-color: var(--foreground-color);
--low-interaction-background: #eeeeee;
--low-interaction-background-50: #eeeeee90;
--low-interaction-foreground: black;
--low-interaction-contrast: #ff00ff;
@ -264,6 +265,10 @@ button.primary:not(.no-image-background) svg path, .button.primary:not(.no-image
transition: all 250ms;
}
button.disabled.low-interaction, .button.disabled.low-interaction {
background-color: var(--low-interaction-background-50);
}
button.disabled, .button.disabled {
cursor: default;
@ -274,6 +279,7 @@ button.disabled, .button.disabled {
}
button.disabled:hover, .button.disabled:hover {
cursor: default;
border: 2px dashed var(--button-background);