GitHub/Anki
1
0
Fork 0
mirror of https://github.com/ankitects/anki.git synced 2025-11-10 14:47:12 -05:00
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Use tweened SVG for triangle instead of CSS hack

Browse source
This commit is contained in:
Matthias Metelka 2022-08-04 00:10:53 +02:00
parent eba053a20b
commit dae8fef432
1 changed files with 45 additions and 41 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

86
ts/editor/PlainTextBadge.svelte
View file

@ -4,6 +4,8 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
--> -->
<script lang="ts"> <script lang="ts">
import { createEventDispatcher, onMount } from "svelte"; import { createEventDispatcher, onMount } from "svelte";
import { tweened } from "svelte/motion";
import { cubicOut } from "svelte/easing";
import { registerShortcut } from "../lib/shortcuts"; import { registerShortcut } from "../lib/shortcuts";
import { context as editorFieldContext } from "./EditorField.svelte"; import { context as editorFieldContext } from "./EditorField.svelte";
@ -13,7 +15,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const dispatch = createEventDispatcher(); const dispatch = createEventDispatcher();
export let off = false; export let off = false;
export let collapsed = false; let hover = false;
function toggle() { function toggle() {
dispatch("toggle"); dispatch("toggle");
@ -24,20 +26,28 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
} }
onMount(() => editorField.element.then(shortcut)); onMount(() => editorField.element.then(shortcut));
let width = 0;
const point = tweened(0, {
duration: 200,
easing: cubicOut,
});
$: point.set(hover ? (off ? 18 : 2) : 10);
$: base = off ? 9 : 11;
</script> </script>
{#if !collapsed} <div
<div class="clickable" style="--width: {width}px" on:click|stopPropagation={toggle}> class="clickable"
<span class:hover
class:off on:click|stopPropagation={toggle}
class:on={!off} on:mouseenter={() => (hover = true)}
class="plain-text-badge" on:mouseleave={() => (hover = false)}
class:highlighted={!off} >
bind:clientWidth={width} <span class="plain-text-toggle" class:off class:on={!off}>
/> <svg width="100%" viewBox="0 0 20 20">
</div> <polygon points="0,{base} 20,{base} 10,{$point}" />
{/if} </svg>
</span>
</div>
<style lang="scss"> <style lang="scss">
.clickable { .clickable {
@ -54,45 +64,39 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
width: 100%; width: 100%;
height: 16px; height: 16px;
} }
&.hover .plain-text-toggle {
opacity: 1;
} }
.plain-text-badge { }
left: calc(50% - var(--width) / 2); .plain-text-toggle {
opacity: 0;
left: calc(50% - 10px);
position: absolute; position: absolute;
opacity: 0; bottom: -11px;
bottom: -4px; width: 16px;
width: 4px; transition: opacity 0.2s ease-in;
height: 4px;
transform: rotate(-45deg); & svg {
stroke: var(--border);
transition: width 0.2s ease-in-out, height 0.2s ease-in-out, stroke-width: 1px;
opacity 0.2s ease-in, background-color 0s 0.2s; & polygon {
stroke-dasharray: 0 20 28.284;
}
}
&.on { &.on {
background: var(--code-bg); fill: var(--code-bg);
border-right: 1px solid var(--border);
border-top: 1px solid var(--border);
} }
&.off { &.off {
background: var(--frame-bg); fill: var(--frame-bg);
border-left: 1px solid var(--border);
border-bottom: 1px solid var(--border);
} }
} }
:global(.editor-field) { :global(.editor-field) {
&:hover { &:focus-within .plain-text-toggle.off svg {
& .plain-text-badge { stroke-width: 2px;
opacity: 1; stroke: var(--focus-border);
&.on,
&.off {
width: 8px;
height: 8px;
}
}
}
&:focus-within .plain-text-badge.off {
border-width: 2px;
border-color: var(--focus-border);
} }
} }
</style> </style>