Fix sticky field labels - Make editor toolbar+tag editor non sticky in editor (#2058)

* 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
2025-09-25 01:06:35 -04:00 · 2022-09-12 11:22:22 +02:00 · 2022-09-12 11:22:22 +02:00 · 1a87937973
commit 1a87937973
parent 8f8f3bd465
10 changed files with 205 additions and 201 deletions
--- a/ts/components/WithFloating.svelte
+++ b/ts/components/WithFloating.svelte
@ -25,7 +25,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    import subscribeToUpdates from "../sveltelib/subscribe-updates";
    import FloatingArrow from "./FloatingArrow.svelte";

-    export let portalTarget: HTMLElement | undefined = undefined;
+    export let portalTarget: HTMLElement | null = null;

    export let placement: Placement | Placement[] | "auto" = "bottom";
    export let offset = 5;
--- a/ts/editor/EditorField.svelte
+++ b/ts/editor/EditorField.svelte
@ -117,6 +117,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
    .editor-field {
        position: relative;
+        padding: 0 3px;
        --border-color: var(--border);
    }
 </style>
--- a/ts/editor/FieldDescription.svelte
+++ b/ts/editor/FieldDescription.svelte
@ -43,5 +43,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        /* 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>
--- a/ts/editor/Fields.svelte
+++ b/ts/editor/Fields.svelte
@ -2,6 +2,10 @@
 Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
+<!--
+@component
+Contains the fields. This contains the scrollable area.
+-->
 <div class="fields">
    <slot />
 </div>
@ -12,6 +16,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
        grid-auto-rows: min-content;
        grid-gap: 6px;

-        padding: 0 3px 5px;
+        /* Add space after the last field and the start of the tag editor */
+        padding-bottom: 5px;
+
+        /* Move the scrollbar for the NoteEditor into this element */
+        overflow-y: auto;
+
+        /* Push the tag editor to the bottom of the note editor */
+        flex-grow: 1;
    }
 </style>
--- a/ts/editor/FieldsEditor.svelte
+++ b/ts/editor/FieldsEditor.svelte
@ -1,16 +0,0 @@
-<!--
-Copyright: Ankitects Pty Ltd and contributors
-License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
-<div class="fields-editor">
-    <slot />
-</div>
-
-<style lang="scss">
-    .fields-editor {
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-    }
-</style>
--- a/ts/editor/LabelContainer.svelte
+++ b/ts/editor/LabelContainer.svelte
@ -37,16 +37,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 <style lang="scss">
    .label-container {
        display: flex;
-        position: sticky;
        justify-content: space-between;
-        top: 0;
-        padding-bottom: 1px;
+        padding: 0 3px 1px;

-        /* slightly wider than EditingArea
-           to cover field borders on scroll */
-        left: -1px;
-        right: -1px;
+        position: sticky;
+        top: 0;
        z-index: 10;
+
        background: var(--label-color);

        .clickable {
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@ -44,7 +44,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html

    import Absolute from "../components/Absolute.svelte";
    import Badge from "../components/Badge.svelte";
-    import StickyContainer from "../components/StickyContainer.svelte";
    import { bridgeCommand } from "../lib/bridgecommand";
    import { TagEditor } from "../tag-editor";
    import { ChangeTimer } from "./change-timer";
@ -56,7 +55,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    import EditorField from "./EditorField.svelte";
    import FieldDescription from "./FieldDescription.svelte";
    import Fields from "./Fields.svelte";
-    import FieldsEditor from "./FieldsEditor.svelte";
    import FrameElement from "./FrameElement.svelte";
    import { alertIcon } from "./icons";
    import ImageHandle from "./image-overlay";
@ -321,7 +319,6 @@ Functionality exclusive to specifc note-editing views (e.g. in the browser or
 the AddCards dialog) should be implemented in the user of this component.
 -->
 <div class="note-editor">
-    <FieldsEditor>
    <EditorToolbar {size} {wrap} api={toolbar}>
        <slot slot="notetypeButtons" name="notetypeButtons" />
    </EditorToolbar>
@ -353,9 +350,7 @@ the AddCards dialog) should be implemented in the user of this component.
                    }}
                    on:focusout={() => {
                        $focusedField = null;
-                            bridgeCommand(
-                                `blur:${index}:${getNoteId()}:${get(content)}`,
-                            );
+                        bridgeCommand(`blur:${index}:${getNoteId()}:${get(content)}`);
                    }}
                    on:mouseenter={() => {
                        $hoveredField = fields[index];
@ -407,9 +402,7 @@ the AddCards dialog) should be implemented in the user of this component.
                                                !richTextsHidden[index];

                                            if (!richTextsHidden[index]) {
-                                                    refocusInput(
-                                                        richTextInputs[index].api,
-                                                    );
+                                                refocusInput(richTextInputs[index].api);
                                            }
                                        }}
                                    />
@ -489,17 +482,24 @@ the AddCards dialog) should be implemented in the user of this component.
            <FrameElement />
        </DecoratedElements>
    </Fields>
-    </FieldsEditor>

-    <StickyContainer --gutter-block="0.1rem" --sticky-borders="1px 0 0" class="d-flex">
+    <div class="note-editor-tag-editor">
        <TagEditor {tags} on:tagsupdate={saveTags} />
-    </StickyContainer>
+    </div>
 </div>

 <style lang="scss">
    .note-editor {
-        height: 100%;
        display: flex;
        flex-direction: column;
+        height: 100%;
+    }
+
+    .note-editor-tag-editor {
+        padding: 2px 0 0;
+
+        border-width: thin 0 0;
+        border-style: solid;
+        border-color: var(--medium-border);
    }
 </style>
--- a/ts/editor/editor-toolbar/EditorToolbar.svelte
+++ b/ts/editor/editor-toolbar/EditorToolbar.svelte
@ -53,7 +53,6 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    import ButtonToolbar from "../../components/ButtonToolbar.svelte";
    import DynamicallySlottable from "../../components/DynamicallySlottable.svelte";
    import Item from "../../components/Item.svelte";
-    import StickyContainer from "../../components/StickyContainer.svelte";
    import BlockButtons from "./BlockButtons.svelte";
    import InlineButtons from "./InlineButtons.svelte";
    import NotetypeButtons from "./NotetypeButtons.svelte";
@ -85,7 +84,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    setContextProperty(api);
 </script>

-<StickyContainer --gutter-block="0.1rem" --sticky-borders="0 0 1px">
+<div class="editor-toolbar">
    <ButtonToolbar {size} {wrap}>
        <DynamicallySlottable slotHost={Item} api={toolbar}>
            <Item id="notetype">
@ -111,4 +110,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
            </Item>
        </DynamicallySlottable>
    </ButtonToolbar>
-</StickyContainer>
+</div>
+
+<style lang="scss">
+    .editor-toolbar {
+        padding: 0 0 2px;
+
+        border-width: 0 0 thin;
+        border-style: solid;
+        border-color: var(--medium-border);
+    }
+</style>
--- a/ts/sveltelib/portal.ts
+++ b/ts/sveltelib/portal.ts
@ -7,11 +7,11 @@
 */
 function portal(
    element: HTMLElement,
-    targetElement: Element = document.body,
+    targetElement: Element | null = document.body,
 ): { update(target: Element): void; destroy(): void } {
-    let target: Element;
+    let target: Element | null;

-    async function update(newTarget: Element) {
+    async function update(newTarget: Element | null) {
        target = newTarget;

        if (!target) {
--- a/ts/tag-editor/TagEditor.svelte
+++ b/ts/tag-editor/TagEditor.svelte
@ -382,7 +382,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
    $: anyTagsSelected = tagTypes.some((tag) => tag.selected);
 </script>

-<div class="tag-editor-area" on:focusout={deselectIfLeave} bind:offsetHeight={height}>
+<div class="tag-editor" on:focusout={deselectIfLeave} bind:offsetHeight={height}>
    <TagOptionsButton
        bind:badgeHeight
        tagsSelected={anyTagsSelected}
@ -483,13 +483,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </div>

 <style lang="scss">
-    .tag-editor-area {
+    .tag-editor {
        display: flex;
        flex-flow: row wrap;
        align-items: flex-end;
-        padding: 0 1px 1px;
-        overflow: hidden;
-        margin-bottom: 3px;
    }

    .tag-relative {