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

View file

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