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

Fix reduce motion bottom border issues (#2185)

Browse source 
* Fix reduce motion bottom border issues

* Disable show/hide on hover with reduce motion setting

for purists.
This commit is contained in:
Matthias Metelka 2022-11-08 13:57:10 +01:00 committed by GitHub
parent e3c3405f09
commit d902b00d0e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 38 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
ts/components/Collapsible.svelte
View file

@ -78,34 +78,35 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<slot {collapsed} /> <slot {collapsed} />
</div> </div>
{#if measuring} {#if animated && measuring}
<!-- Maintain document flow while collapsible height is measured --> <!-- Maintain document flow while collapsible height is measured -->
<div class="collapsible-placeholder" /> <div class="collapsible-placeholder" />
{/if} {/if}
<style lang="scss"> <style lang="scss">
.collapsible.animated { .collapsible {
&.measuring { &.animated {
display: initial; &.measuring {
position: absolute; display: initial;
opacity: 0; position: absolute;
} opacity: 0;
}
&.transitioning { &.transitioning {
overflow: hidden; overflow: hidden;
height: var(--height); height: var(--height);
&.expanded { &.expanded {
overflow: visible; overflow: visible;
}
&.full-hide {
display: initial;
}
} }
} }
&.full-hide { &.full-hide {
&.hidden { &.hidden {
display: none; display: none;
} }
&.transitioning {
display: initial;
}
} }
} }
</style> </style>

4
ts/editor/NoteCreator.svelte
View file

@ -45,7 +45,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
</script> </script>
<NoteEditor bind:this={noteEditor} {api}> <NoteEditor bind:this={noteEditor} {api}>
<svelte:fragment slot="field-state" let:index let:visible> <svelte:fragment slot="field-state" let:index let:show>
<StickyBadge bind:active={stickies[index]} {index} {visible} /> <StickyBadge bind:active={stickies[index]} {index} {show} />
</svelte:fragment> </svelte:fragment>
</NoteEditor> </NoteEditor>

6
ts/editor/NoteEditor.svelte
View file

@ -468,7 +468,7 @@ the AddCards dialog) should be implemented in the user of this component.
{/if} {/if}
{#if plainTextDefaults[index]} {#if plainTextDefaults[index]}
<RichTextBadge <RichTextBadge
visible={!fieldsCollapsed[index] && show={!fieldsCollapsed[index] &&
(fields[index] === $hoveredField || (fields[index] === $hoveredField ||
fields[index] === $focusedField)} fields[index] === $focusedField)}
bind:off={richTextsHidden[index]} bind:off={richTextsHidden[index]}
@ -485,7 +485,7 @@ the AddCards dialog) should be implemented in the user of this component.
/> />
{:else} {:else}
<PlainTextBadge <PlainTextBadge
visible={!fieldsCollapsed[index] && show={!fieldsCollapsed[index] &&
(fields[index] === $hoveredField || (fields[index] === $hoveredField ||
fields[index] === $focusedField)} fields[index] === $focusedField)}
bind:off={plainTextsHidden[index]} bind:off={plainTextsHidden[index]}
@ -505,7 +505,7 @@ the AddCards dialog) should be implemented in the user of this component.
name="field-state" name="field-state"
{field} {field}
{index} {index}
visible={fields[index] === $hoveredField || show={fields[index] === $hoveredField ||
fields[index] === $focusedField} fields[index] === $focusedField}
/> />
</FieldState> </FieldState>

6
ts/editor/PlainTextBadge.svelte
View file

@ -11,11 +11,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { context as editorFieldContext } from "./EditorField.svelte"; import { context as editorFieldContext } from "./EditorField.svelte";
import { plainTextIcon } from "./icons"; import { plainTextIcon } from "./icons";
const animated = !document.body.classList.contains("reduced-motion");
const editorField = editorFieldContext.get(); const editorField = editorFieldContext.get();
const keyCombination = "Control+Shift+X"; const keyCombination = "Control+Shift+X";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
export let visible = false; export let show = false;
export let off = false; export let off = false;
function toggle() { function toggle() {
@ -31,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<span <span
class="plain-text-badge" class="plain-text-badge"
class:visible class:visible={show || !animated}
class:highlighted={!off} class:highlighted={!off}
on:click|stopPropagation={toggle} on:click|stopPropagation={toggle}
> >

6
ts/editor/RichTextBadge.svelte
View file

@ -11,11 +11,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { context as editorFieldContext } from "./EditorField.svelte"; import { context as editorFieldContext } from "./EditorField.svelte";
import { richTextIcon } from "./icons"; import { richTextIcon } from "./icons";
const animated = !document.body.classList.contains("reduced-motion");
const editorField = editorFieldContext.get(); const editorField = editorFieldContext.get();
const keyCombination = "Control+Shift+X"; const keyCombination = "Control+Shift+X";
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
export let visible = false; export let show = false;
export let off = false; export let off = false;
function toggle() { function toggle() {
@ -31,7 +33,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<span <span
class="plain-text-badge" class="plain-text-badge"
class:visible class:visible={show || !animated}
class:highlighted={!off} class:highlighted={!off}
on:click|stopPropagation={toggle} on:click|stopPropagation={toggle}
> >

10
ts/editor/StickyBadge.svelte
View file

@ -12,8 +12,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { context as editorFieldContext } from "./EditorField.svelte"; import { context as editorFieldContext } from "./EditorField.svelte";
import { stickyIcon } from "./icons"; import { stickyIcon } from "./icons";
const animated = !document.body.classList.contains("reduced-motion");
export let active: boolean; export let active: boolean;
export let visible: boolean; export let show: boolean;
const editorField = editorFieldContext.get(); const editorField = editorFieldContext.get();
const keyCombination = "F9"; const keyCombination = "F9";
@ -33,7 +35,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
onMount(() => editorField.element.then(shortcut)); onMount(() => editorField.element.then(shortcut));
</script> </script>
<span class:highlighted={active} class:visible on:click|stopPropagation={toggle}> <span
class:highlighted={active}
class:visible={show || !animated}
on:click|stopPropagation={toggle}
>
<Badge <Badge
tooltip="{tr.editingToggleSticky()} ({getPlatformString(keyCombination)})" tooltip="{tr.editingToggleSticky()} ({getPlatformString(keyCombination)})"
widthMultiplier={0.7}>{@html stickyIcon}</Badge widthMultiplier={0.7}>{@html stickyIcon}</Badge