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

Add slide out animation to EditingArea, RichTextInput and PlainTextInput

Browse source 
only for collapsing, because it is choppy on expansion (common issue with Svelte transitions).
This commit is contained in:
Matthias Metelka 2022-08-11 23:57:53 +02:00
parent 3dca559f88
commit 9a2b3410d0
3 changed files with 66 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
ts/editor/EditingArea.svelte
View file

@ -51,6 +51,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { fontFamilyKey, fontSizeKey } from "../lib/context-keys"; import { fontFamilyKey, fontSizeKey } from "../lib/context-keys";
import FocusTrap from "./FocusTrap.svelte"; import FocusTrap from "./FocusTrap.svelte";
import { slide } from "svelte/transition";
export let fontFamily: string; export let fontFamily: string;
const fontFamilyStore = writable(fontFamily); const fontFamilyStore = writable(fontFamily);
@ -177,7 +178,12 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<FocusTrap bind:this={focusTrap} on:focus={focusEditingInputInsteadIfAvailable} /> <FocusTrap bind:this={focusTrap} on:focus={focusEditingInputInsteadIfAvailable} />
<div bind:this={editingArea} class="editing-area" on:focusout={trapFocusOnBlurOut}> <div
bind:this={editingArea}
class="editing-area"
on:focusout={trapFocusOnBlurOut}
out:slide={{ duration: 200 }}
>
<slot /> <slot />
</div> </div>

15
ts/editor/plain-text-input/PlainTextInput.svelte
View file

@ -38,6 +38,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import { context as noteEditorContext } from "../NoteEditor.svelte"; import { context as noteEditorContext } from "../NoteEditor.svelte";
import removeProhibitedTags from "./remove-prohibited"; import removeProhibitedTags from "./remove-prohibited";
import { storedToUndecorated, undecoratedToStored } from "./transform"; import { storedToUndecorated, undecoratedToStored } from "./transform";
import { slide } from "svelte/transition";
export let hidden: boolean; export let hidden: boolean;
@ -140,12 +141,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
setupLifecycleHooks(api); setupLifecycleHooks(api);
</script> </script>
<div {#if !hidden}
<div
class="plain-text-input" class="plain-text-input"
class:light-theme={!$pageTheme.isDark} class:light-theme={!$pageTheme.isDark}
class:hidden
on:focusin={() => ($focusedInput = api)} on:focusin={() => ($focusedInput = api)}
> out:slide={{ duration: 200 }}
>
<CodeMirror <CodeMirror
{configuration} {configuration}
{code} {code}
@ -153,7 +155,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
bind:api={codeMirror} bind:api={codeMirror}
on:change={onChange} on:change={onChange}
/> />
</div> </div>
{/if}
<style lang="scss"> <style lang="scss">
.plain-text-input { .plain-text-input {
@ -166,10 +169,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
:global(.CodeMirror-lines) { :global(.CodeMirror-lines) {
padding: 8px 0; padding: 8px 0;
} }
&.hidden {
display: none;
}
} }
:global(.CodeMirror) { :global(.CodeMirror) {

7
ts/editor/rich-text-input/RichTextInput.svelte
View file

@ -69,6 +69,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
import useRichTextResolve from "./rich-text-resolve"; import useRichTextResolve from "./rich-text-resolve";
import RichTextStyles from "./RichTextStyles.svelte"; import RichTextStyles from "./RichTextStyles.svelte";
import { fragmentToStored, storedToFragment } from "./transform"; import { fragmentToStored, storedToFragment } from "./transform";
import { slide } from "svelte/transition";
export let hidden: boolean; export let hidden: boolean;
@ -200,7 +201,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
setupLifecycleHooks(api); setupLifecycleHooks(api);
</script> </script>
<div class="rich-text-input" on:focusin={setFocus} {hidden}> {#if !hidden}
<div class="rich-text-input" on:focusin={setFocus} out:slide={{ duration: 200 }}>
{#if $content.length === 0} {#if $content.length === 0}
<div <div
class="rich-text-placeholder" class="rich-text-placeholder"
@ -239,7 +241,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
{/await} {/await}
</RichTextStyles> </RichTextStyles>
<slot name="plain-text-badge" /> <slot name="plain-text-badge" />
</div> </div>
{/if}
<style lang="scss"> <style lang="scss">
.rich-text-input { .rich-text-input {