element.offsetWidth}
- use:heightAction={(element) => element.offsetHeight}
->
-
-
-
-
diff --git a/ts/components/PaneContent.svelte b/ts/components/PaneContent.svelte
deleted file mode 100644
index 516e4a85b..000000000
--- a/ts/components/PaneContent.svelte
+++ /dev/null
@@ -1,81 +0,0 @@
-
-
-
-
+
{@html chevronDown}
@@ -20,7 +19,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
opacity: 0.4;
transition: opacity var(--transition) ease-in-out,
transform var(--transition) ease-in;
- &.highlighted {
+ :global(.collapse-label:hover) & {
opacity: 1;
}
&.collapsed {
diff --git a/ts/editor/CollapseLabel.svelte b/ts/editor/CollapseLabel.svelte
new file mode 100644
index 000000000..051424ba0
--- /dev/null
+++ b/ts/editor/CollapseLabel.svelte
@@ -0,0 +1,29 @@
+
+
+
+
+
+
+
+
+
diff --git a/ts/editor/EditorField.svelte b/ts/editor/EditorField.svelte
index 82ca7887e..9238250c0 100644
--- a/ts/editor/EditorField.svelte
+++ b/ts/editor/EditorField.svelte
@@ -132,7 +132,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
/* make room for thicker focus border */
margin: 1px;
- border-radius: 5px;
+ border-radius: var(--border-radius);
border: 1px solid var(--border);
@include elevation(1);
diff --git a/ts/editor/Fields.svelte b/ts/editor/Fields.svelte
index 557d59353..f3c3b94ea 100644
--- a/ts/editor/Fields.svelte
+++ b/ts/editor/Fields.svelte
@@ -2,13 +2,19 @@
Copyright: Ankitects Pty Ltd and contributors
License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
-->
+
+
-
-
-
+
+
+
+
+
diff --git a/ts/editor/NoteEditor.svelte b/ts/editor/NoteEditor.svelte
index b4d316b2b..b2044b519 100644
--- a/ts/editor/NoteEditor.svelte
+++ b/ts/editor/NoteEditor.svelte
@@ -47,12 +47,7 @@ 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 HorizontalResizer from "../components/HorizontalResizer.svelte";
- import Pane from "../components/Pane.svelte";
- import PaneContent from "../components/PaneContent.svelte";
- import { ResizablePane } from "../components/types";
import { TagEditor } from "../tag-editor";
- import TagAddButton from "../tag-editor/tag-options-button/TagAddButton.svelte";
import { ChangeTimer } from "./change-timer";
import { clearableArray } from "./destroyable";
import DuplicateLink from "./DuplicateLink.svelte";
@@ -197,9 +192,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
const tagsCollapsed = writable
();
export function setTagsCollapsed(collapsed: boolean): void {
$tagsCollapsed = collapsed;
- if (collapsed) {
- lowerResizer.move([tagsPane, fieldsPane], tagsPane.minHeight);
- }
+ }
+
+ function updateTagsCollapsed(collapsed: boolean) {
+ $tagsCollapsed = collapsed;
+ bridgeCommand(`setTagsCollapsed:${$tagsCollapsed}`);
}
let noteId: number | null = null;
@@ -312,8 +309,10 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
import { wrapInternal } from "@tslib/wrap";
+ import Shortcut from "components/Shortcut.svelte";
import { mathjaxConfig } from "../editable/mathjax-element";
+ import CollapseLabel from "./CollapseLabel.svelte";
import { refocusInput } from "./helpers";
import * as oldEditorAdapter from "./old-editor-adapter";
@@ -376,39 +375,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
setContextProperty(api);
setupLifecycleHooks(api);
- let clientHeight: number;
-
- const fieldsPane = new ResizablePane();
- const tagsPane = new ResizablePane();
-
- let lowerResizer: HorizontalResizer;
- let tagEditor: TagEditor;
-
$: tagAmount = $tags.length;
-
- let snapTags = $tagsCollapsed;
-
- function collapseTags(): void {
- lowerResizer.move([tagsPane, fieldsPane], tagsPane.minHeight);
- $tagsCollapsed = snapTags = true;
- }
-
- function expandTags(): void {
- lowerResizer.move([tagsPane, fieldsPane], tagsPane.maxHeight);
- $tagsCollapsed = snapTags = false;
- }
-
- window.addEventListener("resize", () => snapResizer(snapTags));
-
- function snapResizer(collapse: boolean): void {
- if (collapse) {
- collapseTags();
- bridgeCommand("collapseTags");
- } else {
- expandTags();
- bridgeCommand("expandTags");
- }
- }
-
+
@@ -435,223 +402,166 @@ the AddCards dialog) should be implemented in the user of this component.
{/if}
-
{
- fieldsPane.height = e.detail.height;
- }}
- >
-
-
- {#each fieldsData as field, index}
- {@const content = fieldStores[index]}
+
+ {#each fieldsData as field, index}
+ {@const content = fieldStores[index]}
- {
- $focusedField = fields[index];
- bridgeCommand(`focus:${index}`);
- }}
- on:focusout={() => {
- $focusedField = null;
- bridgeCommand(
- `blur:${index}:${getNoteId()}:${transformContentBeforeSave(
- get(content),
- )}`,
- );
- }}
- on:mouseenter={() => {
- $hoveredField = fields[index];
- }}
- on:mouseleave={() => {
- $hoveredField = null;
- }}
- collapsed={fieldsCollapsed[index]}
- dupe={cols[index] === "dupe"}
- --description-font-size="{field.fontSize}px"
- --description-content={`"${field.description}"`}
- >
-
- {
- fieldsCollapsed[index] = !fieldsCollapsed[index];
-
- const defaultInput = !plainTextDefaults[index]
- ? richTextInputs[index]
- : plainTextInputs[index];
-
- if (!fieldsCollapsed[index]) {
- refocusInput(defaultInput.api);
- } else if (!plainTextDefaults[index]) {
- plainTextsHidden[index] = true;
- } else {
- richTextsHidden[index] = true;
- }
- }}
- --icon-align="bottom"
- >
-
-
- {field.name}
-
-
-
- {#if cols[index] === "dupe"}
-
- {/if}
- {#if plainTextDefaults[index]}
- {
- richTextsHidden[index] =
- !richTextsHidden[index];
-
- if (!richTextsHidden[index]) {
- refocusInput(
- richTextInputs[index].api,
- );
- }
- }}
- />
- {:else}
- {
- plainTextsHidden[index] =
- !plainTextsHidden[index];
-
- if (!plainTextsHidden[index]) {
- refocusInput(
- plainTextInputs[index].api,
- );
- }
- }}
- />
- {/if}
-
-
-
-
-
-
- {
- saveFieldNow();
- $focusedInput = null;
- }}
- bind:this={richTextInputs[index]}
- />
-
-
-
-
- {
- saveFieldNow();
- $focusedInput = null;
- }}
- bind:this={plainTextInputs[index]}
- />
-
-
-
- {/each}
-
-
-
- {#if insertSymbols}
-
- {/if}
-
-
-
-
-
snapResizer(!$tagsCollapsed)}
- on:release={() => {
- snapResizer(snapTags);
- }}
- >
-
- {
- tagEditor.appendEmptyTag();
+ {
+ $focusedField = fields[index];
+ bridgeCommand(`focus:${index}`);
}}
- keyCombination="Control+Shift+T"
+ on:focusout={() => {
+ $focusedField = null;
+ bridgeCommand(
+ `blur:${index}:${getNoteId()}:${transformContentBeforeSave(
+ get(content),
+ )}`,
+ );
+ }}
+ on:mouseenter={() => {
+ $hoveredField = fields[index];
+ }}
+ on:mouseleave={() => {
+ $hoveredField = null;
+ }}
+ collapsed={fieldsCollapsed[index]}
+ dupe={cols[index] === "dupe"}
+ --description-font-size="{field.fontSize}px"
+ --description-content={`"${field.description}"`}
>
- {@html tagAmount > 0 ? `${tagAmount} ${tr.editingTags()}` : ""}
-
-
-
+
+ {
+ fieldsCollapsed[index] = !fieldsCollapsed[index];
- {
- tagsPane.height = e.detail.height;
- if (tagsPane.maxHeight > 0) {
- snapTags = tagsPane.height < tagsPane.maxHeight / 2;
- }
+ const defaultInput = !plainTextDefaults[index]
+ ? richTextInputs[index]
+ : plainTextInputs[index];
+
+ if (!fieldsCollapsed[index]) {
+ refocusInput(defaultInput.api);
+ } else if (!plainTextDefaults[index]) {
+ plainTextsHidden[index] = true;
+ } else {
+ richTextsHidden[index] = true;
+ }
+ }}
+ --icon-align="bottom"
+ >
+
+
+ {field.name}
+
+
+
+ {#if cols[index] === "dupe"}
+
+ {/if}
+ {#if plainTextDefaults[index]}
+ {
+ richTextsHidden[index] =
+ !richTextsHidden[index];
+
+ if (!richTextsHidden[index]) {
+ refocusInput(richTextInputs[index].api);
+ }
+ }}
+ />
+ {:else}
+ {
+ plainTextsHidden[index] =
+ !plainTextsHidden[index];
+
+ if (!plainTextsHidden[index]) {
+ refocusInput(plainTextInputs[index].api);
+ }
+ }}
+ />
+ {/if}
+
+
+
+
+
+
+ {
+ saveFieldNow();
+ $focusedInput = null;
+ }}
+ bind:this={richTextInputs[index]}
+ />
+
+
+
+
+ {
+ saveFieldNow();
+ $focusedInput = null;
+ }}
+ bind:this={plainTextInputs[index]}
+ />
+
+
+
+ {/each}
+
+
+
+ {#if insertSymbols}
+
+ {/if}
+
+
+
{
+ updateTagsCollapsed(false);
}}
- --opacity={(() => {
- if (!$tagsCollapsed) {
- return 1;
- } else {
- return snapTags ? tagsPane.height / tagsPane.maxHeight : 1;
- }
- })()}
+ />
+ updateTagsCollapsed(!$tagsCollapsed)}
>
-
- {
- expandTags();
- $tagsCollapsed = false;
- }}
- on:heightChange={(e) => {
- tagsPane.maxHeight = e.detail.height;
- if (!$tagsCollapsed) {
- expandTags();
- }
- }}
- />
-
-
+ {@html `${tagAmount > 0 ? tagAmount : ""} ${tr.editingTags()}`}
+
+
+
+