muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-24 20:36: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(
event => {
const all = [...categories, ...tags];
switch (event.key) {
case 'ArrowDown':
event.preventDefault();
setSelected(selected < options.length - 1 ? selected + 1 : -1);
setSelected(selected < all.length - 1 ? selected + 1 : -1);
return;
case 'ArrowUp':
event.preventDefault();
setSelected(selected > -1 ? selected - 1 : options.length - 1);
setSelected(selected > -1 ? selected - 1 : all.length - 1);
return;
case 'Enter':
event.preventDefault();
onSelect(selected >= 0 ? [...categories, ...tags][selected] : search);
onSelect(selected >= 0 ? all[selected] : search);
}
},
[setSelected, selected, categories, tags, onSelect, search]
@ -107,7 +108,7 @@ const TagAutocompleteUnconnected: FC<Props> = ({
window.removeEventListener('resize', onScroll);
window.removeEventListener('scroll', onScroll);
};
}, []);
}, [options]);
return (
<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;
.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;
top: -2px;
right: -2px;
width: calc(100vw - 15px);
max-width: 300px;
background: darken($content_bg, 1%);
background: darken($content_bg, 2%);
z-index: 10;
border-radius: 3px;
padding: $tag_height + 2px 0 0;
padding: $tag_height + 4px 0 0;
animation: appear 0.25s forwards;
&.top {
bottom: -2px;
top: auto;
padding: 0 0 $tag_height;
padding: 0 0 $tag_height + 4px;
}
&.left {

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

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