Make dupes highlight persist on field blur (#2182)

This commit is contained in:
Matthias Metelka 2022-11-05 02:05:21 +01:00 committed by GitHub
parent 03fe2385ef
commit 96381f3f2c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 7 deletions

View File

@ -56,6 +56,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let field: FieldData;
export let collapsed = false;
export let flipInputs = false;
export let dupe = false;
const directionStore = writable<"ltr" | "rtl">();
setContext(directionKey, directionStore);
@ -89,7 +90,14 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
<slot name="field-label" />
<Collapsible collapse={collapsed} let:collapsed={hidden}>
<div use:elementResolve class="editor-field" on:focusin on:focusout {hidden}>
<div
use:elementResolve
class="editor-field"
class:dupe
on:focusin
on:focusout
{hidden}
>
<EditingArea
{content}
fontFamily={field.fontFamily}
@ -120,10 +128,13 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
@include elevation(1);
outline-offset: -1px;
&.dupe,
&.dupe:focus-within {
outline: 2px solid var(--accent-danger);
}
&:focus-within {
/* --focus-color set in NoteEditor.svelte */
outline: 2px solid var(--focus-color);
outline-offset: -1px;
outline: 2px solid var(--border-focus);
}
}
</style>

View File

@ -436,9 +436,7 @@ the AddCards dialog) should be implemented in the user of this component.
$hoveredField = null;
}}
collapsed={fieldsCollapsed[index]}
--focus-color={cols[index] === "dupe"
? "var(--accent-danger)"
: "var(--border-focus)"}
dupe={cols[index] === "dupe"}
>
<svelte:fragment slot="field-label">
<LabelContainer