GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-09-19 22:42:25 -04:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Always show spinning reverse icon on mobile

Browse source
This commit is contained in:
Henrik Giesel 2021-06-21 21:35:20 +02:00
parent e5978d7ffe
commit 8a2ac57cc5
1 changed files with 6 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ts/deckoptions/RevertButton.svelte
View file

@ -10,6 +10,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import Badge from "./Badge.svelte"; import Badge from "./Badge.svelte";
import { gearIcon, revertIcon } from "./icons"; import { gearIcon, revertIcon } from "./icons";
import { isEqual as isEqualLodash, cloneDeep } from "lodash-es"; import { isEqual as isEqualLodash, cloneDeep } from "lodash-es";
import { touchDeviceKey } from "components/contextKeys";
import { getContext } from "svelte";
type T = unknown; type T = unknown;
@ -32,6 +34,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
$: modified = !isEqual(value, defaultValue); $: modified = !isEqual(value, defaultValue);
$: className = !modified ? "opacity-25" : ""; $: className = !modified ? "opacity-25" : "";
const isTouchDevice = getContext<boolean>(touchDeviceKey);
function revert(): void { function revert(): void {
value = cloneDeep(defaultValue); value = cloneDeep(defaultValue);
} }
@ -53,7 +57,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<DropdownMenu id={menuId}> <DropdownMenu id={menuId}>
<DropdownItem <DropdownItem
class="spinner" class={`spinner ${isTouchDevice ? "spin-always" : ""}`}
on:click={() => { on:click={() => {
revert(); revert();
// Otherwise the menu won't close when the item is clicked // Otherwise the menu won't close when the item is clicked
@ -67,7 +71,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</WithDropdownMenu> </WithDropdownMenu>
<style lang="scss"> <style lang="scss">
:global(.spinner:hover .badge) { :global(.spinner:hover .badge, .spinner.spin-always .badge) {
animation: spin-animation 1s infinite; animation: spin-animation 1s infinite;
animation-timing-function: linear; animation-timing-function: linear;
} }