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;
</script>
<Badge on:click={() => modal.show()}>
<Badge on:click={() => modal.show()} iconSize={125}>
{@html infoCircle}
</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);
&.light {
@include elevation(2, $opacity-boost: -0.08);
&:hover,
&:focus-within {
@include elevation(3);
}
@include elevation(3);
}
&.dark {
@include elevation(3, $opacity-boost: -0.08);
&:hover,
&:focus-within {
@include elevation(4);
}
@include elevation(4);
}
padding: 1rem 1.75rem 0.75rem 1.25rem;
&.rtl {
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;
}
h1 {
@ -73,16 +58,15 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
.help-badge {
right: 0;
bottom: 4px;
color: var(--fg-faint);
transition: color var(--transition) linear;
&:hover {
transition: none;
color: var(--fg);
}
bottom: 12px;
color: #555;
&.rtl {
right: unset;
left: 0;
}
}
:global(.night-mode) .help-badge {
color: var(--fg);
}
</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 horizontalHandle } from "@mdi/svg/svg/drag-horizontal.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 infoCircle } from "bootstrap-icons/icons/info-circle.svg";