langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Make help button more obvious, and remove hover animations

Browse Source 
There's been a fair bit of talk on the forums about users not discovering
the help info, so this will hopefully make finding it easier.

Ideally we'd use a single var(--fg), but it feels a bit too strong in
light mode.

The animations we were showing on hover/focus made the UI feel
laggy. This has come up before, and we already disable them for buttons.
I experimented with removing the transitions (but keeping the change on
hover) - it feels much more responsive, but I also didn't feel that it
was contributing anything useful - the user knows where they've placed
the mouse or cursor, and the extra movement feels like a bit of a
distraction. Happy to discuss if people feel differently, though.
This commit is contained in:
Damien Elmes 2023-12-08 13:01:16 +10:00
parent b103e09a5e
commit f10a29a93d
3 changed files with 10 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ts/components/HelpModal.svelte
View File

@ -53,7 +53,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let activeIndex = startIndex; let activeIndex = startIndex;
</script> </script>
<Badge on:click={() => modal.show()}> <Badge on:click={() => modal.show()} iconSize={125}>
{@html infoCircle} {@html infoCircle}
</Badge> </Badge>

32
ts/components/TitledContainer.svelte
View File

@ -41,31 +41,16 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
border-radius: var(--border-radius-medium, 10px); border-radius: var(--border-radius-medium, 10px);
&.light { &.light {
@include elevation(2, $opacity-boost: -0.08); @include elevation(3);
&:hover,
&:focus-within {
@include elevation(3);
}
} }
&.dark { &.dark {
@include elevation(3, $opacity-boost: -0.08); @include elevation(4);
&:hover,
&:focus-within {
@include elevation(4);
}
} }
padding: 1rem 1.75rem 0.75rem 1.25rem; padding: 1rem 1.75rem 0.75rem 1.25rem;
&.rtl { &.rtl {
padding: 1rem 1.25rem 0.75rem 1.75rem; padding: 1rem 1.25rem 0.75rem 1.75rem;
} }
&:hover,
&:focus-within {
.help-badge {
color: var(--fg-subtle);
}
}
transition: box-shadow var(--transition) ease-in-out;
page-break-inside: avoid; page-break-inside: avoid;
} }
h1 { h1 {
@ -73,16 +58,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
.help-badge { .help-badge {
right: 0; right: 0;
bottom: 4px; bottom: 12px;
color: var(--fg-faint); color: #555;
transition: color var(--transition) linear;
&:hover {
transition: none;
color: var(--fg);
}
&.rtl { &.rtl {
right: unset; right: unset;
left: 0; left: 0;
} }
} }
:global(.night-mode) .help-badge {
color: var(--fg);
}
</style> </style>

2
ts/components/icons.ts
View File

@ -12,5 +12,5 @@ export { default as chevronRight } from "@mdi/svg/svg/chevron-right.svg";
export { default as chevronUp } from "@mdi/svg/svg/chevron-up.svg"; export { default as chevronUp } from "@mdi/svg/svg/chevron-up.svg";
export { default as horizontalHandle } from "@mdi/svg/svg/drag-horizontal.svg"; export { default as horizontalHandle } from "@mdi/svg/svg/drag-horizontal.svg";
export { default as verticalHandle } from "@mdi/svg/svg/drag-vertical.svg"; export { default as verticalHandle } from "@mdi/svg/svg/drag-vertical.svg";
export { default as infoCircle } from "@mdi/svg/svg/help-circle.svg";
export { default as revertIcon } from "bootstrap-icons/icons/arrow-counterclockwise.svg"; export { default as revertIcon } from "bootstrap-icons/icons/arrow-counterclockwise.svg";
export { default as infoCircle } from "bootstrap-icons/icons/info-circle.svg";