muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

fixed popup appearance

Browse source
This commit is contained in:
Fedor Katurov 2020-10-31 21:04:24 +07:00
parent b43c47a044
commit ef6c5b9068
3 changed files with 12 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/components/tags/TagAutocomplete/index.tsx
View file

@ -43,18 +43,19 @@ const TagAutocompleteUnconnected: FC<Props> = ({
const onKeyDown = useCallback( const onKeyDown = useCallback(
event => { event => {
const all = [...categories, ...tags];
switch (event.key) { switch (event.key) {
case 'ArrowDown': case 'ArrowDown':
event.preventDefault(); event.preventDefault();
setSelected(selected < options.length - 1 ? selected + 1 : -1); setSelected(selected < all.length - 1 ? selected + 1 : -1);
return; return;
case 'ArrowUp': case 'ArrowUp':
event.preventDefault(); event.preventDefault();
setSelected(selected > -1 ? selected - 1 : options.length - 1); setSelected(selected > -1 ? selected - 1 : all.length - 1);
return; return;
case 'Enter': case 'Enter':
event.preventDefault(); event.preventDefault();
onSelect(selected >= 0 ? [...categories, ...tags][selected] : search); onSelect(selected >= 0 ? all[selected] : search);
} }
}, },
[setSelected, selected, categories, tags, onSelect, search] [setSelected, selected, categories, tags, onSelect, search]
@ -107,7 +108,7 @@ const TagAutocompleteUnconnected: FC<Props> = ({
window.removeEventListener('resize', onScroll); window.removeEventListener('resize', onScroll);
window.removeEventListener('scroll', onScroll); window.removeEventListener('scroll', onScroll);
}; };
}, []); }, [options]);
return ( return (
<div className={classNames(styles.window, { [styles.top]: top, [styles.left]: left })}> <div className={classNames(styles.window, { [styles.top]: top, [styles.left]: left })}>

8
src/components/tags/TagAutocomplete/styles.module.scss
View file

@ -6,22 +6,22 @@
$row_height: 24px; $row_height: 24px;
.window { .window {
box-shadow: transparentize(white, 0.8) 0 0 0 1px; box-shadow: transparentize(white, 0.9) 0 0 0 1px, transparentize(black, 0.7) 4px 4px;
position: absolute; position: absolute;
top: -2px; top: -2px;
right: -2px; right: -2px;
width: calc(100vw - 15px); width: calc(100vw - 15px);
max-width: 300px; max-width: 300px;
background: darken($content_bg, 1%); background: darken($content_bg, 2%);
z-index: 10; z-index: 10;
border-radius: 3px; border-radius: 3px;
padding: $tag_height + 2px 0 0; padding: $tag_height + 4px 0 0;
animation: appear 0.25s forwards; animation: appear 0.25s forwards;
&.top { &.top {
bottom: -2px; bottom: -2px;
top: auto; top: auto;
padding: 0 0 $tag_height; padding: 0 0 $tag_height + 4px;
} }
&.left { &.left {

7
src/components/tags/TagAutocompleteRow/styles.module.scss
View file

@ -7,7 +7,6 @@ $row_height: 24px;
align-items: center; align-items: center;
justify-content: flex-start; justify-content: flex-start;
font: $font_16_semibold; font: $font_16_semibold;
border-top: lighten($content_bg, 2%) solid 1px;
opacity: 0.5; opacity: 0.5;
cursor: pointer; cursor: pointer;
transition: all 0.1s; transition: all 0.1s;
@ -17,12 +16,12 @@ $row_height: 24px;
&:hover, &.selected { &:hover, &.selected {
opacity: 1; opacity: 1;
background: lighten($content_bg, 4%); background: transparentize($wisegreen, 0.5);
} }
&.right { &.right {
color: $wisegreen; color: lighten($wisegreen, 4%);
opacity: 0.7; opacity: 1;
} }
svg { svg {