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

Remove infinite spinning icon for reset parameters dropdown and add a question mark (#3603)

Browse source 
* Add question mark to popup words

* Remove spinning icon

* Formatting
This commit is contained in:
Ben Nguyen 2024-12-06 05:41:34 -08:00 committed by GitHub
parent f345517dcc
commit a4626bf48e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 3 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ftl/core/deck-config.ftl
View file

@ -315,7 +315,7 @@ deck-config-confirm-remove-name = Remove { $name }?
deck-config-save-button = Save deck-config-save-button = Save
deck-config-save-to-all-subdecks = Save to All Subdecks deck-config-save-to-all-subdecks = Save to All Subdecks
deck-config-save-and-optimize = Optimize All Presets deck-config-save-and-optimize = Optimize All Presets
deck-config-revert-button-tooltip = Restore this setting to its default value. deck-config-revert-button-tooltip = Restore this setting to its default value?
## These strings are shown via the Description button at the bottom of the ## These strings are shown via the Description button at the bottom of the
## overview screen. ## overview screen.

27
ts/lib/components/RevertButton.svelte
View file

@ -5,12 +5,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<script lang="ts"> <script lang="ts">
import * as tr from "@generated/ftl"; import * as tr from "@generated/ftl";
import { cloneDeep, isEqual as isEqualLodash } from "lodash-es"; import { cloneDeep, isEqual as isEqualLodash } from "lodash-es";
import { getContext } from "svelte";
import { revertIcon } from "$lib/components/icons"; import { revertIcon } from "$lib/components/icons";
import Badge from "./Badge.svelte"; import Badge from "./Badge.svelte";
import { touchDeviceKey } from "./context-keys";
import DropdownItem from "./DropdownItem.svelte"; import DropdownItem from "./DropdownItem.svelte";
import Icon from "./Icon.svelte"; import Icon from "./Icon.svelte";
import Popover from "./Popover.svelte"; import Popover from "./Popover.svelte";
@ -38,8 +36,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
let showFloating = false; let showFloating = false;
const isTouchDevice = getContext<boolean>(touchDeviceKey);
function revert(): void { function revert(): void {
value = cloneDeep(defaultValue); value = cloneDeep(defaultValue);
showFloating = false; showFloating = false;
@ -68,32 +64,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</div> </div>
<Popover slot="floating"> <Popover slot="floating">
<DropdownItem <DropdownItem on:click={() => revert()}>
class={`spinner ${isTouchDevice ? "spin-always" : ""}`} {tr.deckConfigRevertButtonTooltip()}
on:click={() => revert()}
>
{tr.deckConfigRevertButtonTooltip()}<Badge iconSize={85}>
<Icon icon={revertIcon} />
</Badge>
</DropdownItem> </DropdownItem>
</Popover> </Popover>
</WithFloating> </WithFloating>
<style lang="scss"> <style lang="scss">
:global(.spinner:hover .badge, .spinner.spin-always .badge) {
animation: spin-animation 1s infinite;
animation-timing-function: linear;
}
@keyframes -global-spin-animation {
0% {
transform: rotate(360deg);
}
100% {
transform: rotate(0deg);
}
}
:global(.badge) { :global(.badge) {
cursor: pointer; cursor: pointer;
} }