1a87937973
* Add back overflow:hidden to field descriptions * Add explaining comment * Put back overflow:hidden in FieldsEditor * Move inline padding from Fields component but EditorField+LabelContainer * Simplify editor design by making editor toolbar not sticky * Make tag editor in note editor non-sticky as well * Fix merge mess * The floating elements were portaled because I passed in undefined and they have a default argument - Fix unrelated to PR
53 lines
1.4 KiB
Svelte
53 lines
1.4 KiB
Svelte
<!--
|
|
Copyright: Ankitects Pty Ltd and contributors
|
|
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
|
|
-->
|
|
<script lang="ts">
|
|
import { getContext } from "svelte";
|
|
import type { Readable } from "svelte/store";
|
|
|
|
import { directionKey, fontFamilyKey, fontSizeKey } from "../lib/context-keys";
|
|
import { context } from "./EditingArea.svelte";
|
|
|
|
const { content } = context.get();
|
|
|
|
const fontFamily = getContext<Readable<string>>(fontFamilyKey);
|
|
const fontSize = getContext<Readable<number>>(fontSizeKey);
|
|
const direction = getContext<Readable<"ltr" | "rtl">>(directionKey);
|
|
|
|
$: empty = $content.length === 0;
|
|
</script>
|
|
|
|
{#if empty}
|
|
<div
|
|
class="field-description"
|
|
style:font-family={$fontFamily}
|
|
style:font-size="{$fontSize}px"
|
|
style:direction={$direction}
|
|
>
|
|
<slot />
|
|
</div>
|
|
{/if}
|
|
|
|
<style>
|
|
.field-description {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
|
|
opacity: 0.4;
|
|
pointer-events: none;
|
|
|
|
/* Stay a on single line */
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
|
|
/* The field description is placed absolutely on top of the editor field */
|
|
/* So we need to make sure it does not escape the editor field if the */
|
|
/* description is too long */
|
|
overflow: hidden;
|
|
}
|
|
</style>
|