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 selected = false;
export let active = false; export let active = false;
let buttonRef: HTMLButtonElement; let buttonRef: HTMLElement;
$: if (selected && buttonRef) { $: if (selected && buttonRef) {
/* buttonRef.scrollIntoView({ behavior: "smooth", block: "start" }); */ /* 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> </script>
<button <div
bind:this={buttonRef} bind:this={buttonRef}
tabindex="-1" tabindex="-1"
class="autocomplete-item" class="autocomplete-item"
@ -30,21 +30,27 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
on:mouseleave on:mouseleave
> >
<slot /> <slot />
</button> </div>
<style lang="scss"> <style lang="scss">
@use "sass/vars"; @use "sass/vars";
@use "sass/button-mixins" as button; @use "sass/button-mixins" as button;
.autocomplete-item { .autocomplete-item {
@include button.base($with-disabled: false, $active-class: active); padding: 4px 8px;
padding: 1px 7px 2px;
text-align: start; text-align: start;
white-space: nowrap; white-space: nowrap;
flex-grow: 1; flex-grow: 1;
border-radius: 0; 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 { &.selected {
@include button.base( @include button.base(
$primary: true, $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; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
align-items: flex-end; align-items: flex-end;
background: var(--canvas-inset);
border-radius: var(--border-radius);
padding: 6px;
} }
.tag-relative { .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; flex-flow: column nowrap;
width: 80vw; width: 80vw;
max-height: 7rem; max-height: 30vh;
font-size: 11px; font-size: 13px;
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow-y: auto; overflow-y: auto;