langfingaz/anki
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add background to tag editor and improve autocomplete items (#2130)

Browse Source
This commit is contained in:
Matthias Metelka 2022-10-13 02:08:30 +02:00 committed by GitHub
parent e14f87ba99
commit 0a3d38125d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 16 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
ts/tag-editor/AutocompleteItem.svelte
View File

@ -6,7 +6,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
export let selected = false;
export let active = false;
let buttonRef: HTMLButtonElement;
let buttonRef: HTMLElement;
$: if (selected && buttonRef) {
/* buttonRef.scrollIntoView({ behavior: "smooth", block: "start" }); */
@ -18,7 +18,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
}
</script>
<button
<div
bind:this={buttonRef}
tabindex="-1"
class="autocomplete-item"
@ -30,21 +30,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:mouseleave
>
<slot />
</button>
</div>
<style lang="scss">
@use "sass/vars";
@use "sass/button-mixins" as button;
.autocomplete-item {
@include button.base($with-disabled: false, $active-class: active);
padding: 1px 7px 2px;
padding: 4px 8px;
text-align: start;
white-space: nowrap;
flex-grow: 1;
border-radius: 0;
border: 1px solid transparent;
&:not(:first-child) {
border-top-color: var(--border-subtle);
}
&:hover {
@include button.base($with-disabled: false, $active-class: active);
}
&.selected {
@include button.base(
$primary: true,

3
ts/tag-editor/TagEditor.svelte
View File

@ -490,6 +490,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
display: flex;
flex-flow: row wrap;
align-items: flex-end;
background: var(--canvas-inset);
border-radius: var(--border-radius);
padding: 6px;
}
.tag-relative {

4
ts/tag-editor/WithAutocomplete.svelte
View File

@ -186,9 +186,9 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
flex-flow: column nowrap;
width: 80vw;
max-height: 7rem;
max-height: 30vh;
font-size: 11px;
font-size: 13px;
overflow-x: hidden;
text-overflow: ellipsis;
overflow-y: auto;