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 tag autocomplete style

Browse source
This commit is contained in:
Fedor Katurov 2022-07-26 16:30:56 +07:00
parent bafa999195
commit 32a2a1dbbc
5 changed files with 52 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

33
src/components/menu/MenuButton/styles.module.scss
View file

@ -1,10 +1,10 @@
@import "src/styles/variables.scss";
.menu {
position: relative;
cursor: pointer;
}
@import "src/styles/variables.scss";
.popper {
@include outer_shadow;
@ -32,32 +32,5 @@
}
.arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
[data-popper-placement*='bottom'] & {
border-width: 0 10px 10px 10px;
border-color: transparent transparent lighten($menu_bg, 6%) transparent;
top: -10px;
}
[data-popper-placement*='top'] & {
border-width: 10px 10px 0 10px;
border-color: lighten($menu_bg, 6%) transparent transparent transparent;
bottom: -10px;
}
[data-popper-placement*='right'] & {
border-width: 10px 10px 10px 0;
border-color: transparent lighten($menu_bg, 6%) transparent transparent;
left: -10px;
}
[data-popper-placement*='left'] & {
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent lighten($menu_bg, 6%);
right: -10px;
}
@include popper_arrow;
}

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

@ -35,15 +35,17 @@ const TagAutocomplete: VFC<TagAutocompleteProps> = ({
);
const scroll = useRef<HTMLDivElement>(null);
const wrapper = useRef<HTMLDivElement>(null);
const [arrowElement, setArrowElement] = useState<HTMLDivElement | null>(null);
const pop = usePopper(wrapper?.current?.parentElement, wrapper.current, {
placement: 'bottom-end',
strategy: 'fixed',
modifiers: [
{ name: 'arrow', options: { element: arrowElement } },
{
name: 'offset',
options: {
offset: [0, 4],
offset: [0, 10],
},
},
],
@ -93,6 +95,7 @@ const TagAutocomplete: VFC<TagAutocompleteProps> = ({
style={pop.styles.popper}
{...pop.attributes.popper}
>
<div style={pop.styles.arrow} ref={setArrowElement} className={styles.arrow} />
<div className={styles.scroll} ref={scroll}>
<TagAutocompleteRow
selected={selected === -1}

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

@ -8,7 +8,9 @@
$row_height: 24px;
.window {
box-shadow: transparentize(white, 0.9) 0 0 0 1px;
@include outer_shadow;
@include blur;
position: absolute;
top: -2px;
right: -2px;
@ -19,14 +21,22 @@ $row_height: 24px;
border-radius: 4px;
animation: appear 0.25s forwards;
visibility: hidden;
pointer-events: none;
touch-action: none;
&.visible {
visibility: visible;
pointer-events: all;
touch-action: initial;
}
}
.scroll {
overflow: hidden;
padding: 0 0 $gap * 0.5;
padding: 0;
border-radius: 4px;
}
.arrow {
@include popper_arrow;
}

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

@ -1,6 +1,6 @@
@import "src/styles/variables";
$row_height: 24px;
$row_height: 26px;
.row {
height: $row_height;
@ -18,7 +18,7 @@ $row_height: 24px;
&:hover, &.selected {
opacity: 1;
background: transparentize($wisegreen, 0.5);
background: transparentize($wisegreen, 0.6);
}
&.right {

31
src/styles/_mixins.scss
View file

@ -283,3 +283,34 @@
opacity: 1;
}
}
@mixin popper_arrow {
width: 0;
height: 0;
border-style: solid;
position: absolute;
[data-popper-placement*='bottom'] & {
border-width: 0 10px 10px 10px;
border-color: transparent transparent lighten($menu_bg, 6%) transparent;
top: -10px;
}
[data-popper-placement*='top'] & {
border-width: 10px 10px 0 10px;
border-color: lighten($menu_bg, 6%) transparent transparent transparent;
bottom: -10px;
}
[data-popper-placement*='right'] & {
border-width: 10px 10px 10px 0;
border-color: transparent lighten($menu_bg, 6%) transparent transparent;
left: -10px;
}
[data-popper-placement*='left'] & {
border-width: 10px 0 10px 10px;
border-color: transparent transparent transparent lighten($menu_bg, 6%);
right: -10px;
}
}