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 comment menu icon

Browse source
This commit is contained in:
Fedor Katurov 2022-01-25 16:24:27 +07:00
parent 8b3e118a7b
commit fdd404cd4d
5 changed files with 46 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/comment/CommentMenu/index.tsx
View file

@ -1,5 +1,7 @@
import React, { FC, useCallback, useState } from 'react'; import React, { FC, useCallback, useState } from 'react';
import { MenuDots } from '~/components/common/MenuDots';
import styles from './styles.module.scss'; import styles from './styles.module.scss';
interface IProps { interface IProps {
@ -15,7 +17,7 @@ const CommentMenu: FC<IProps> = ({ onEdit, onDelete }) => {
return ( return (
<div className={styles.wrap} onFocus={onFocus} onBlur={onBlur} tabIndex={-1}> <div className={styles.wrap} onFocus={onFocus} onBlur={onBlur} tabIndex={-1}>
<div className={styles.dot} /> <MenuDots onClick={onFocus} />
{is_menu_opened && ( {is_menu_opened && (
<div className={styles.menu}> <div className={styles.menu}>

15
src/components/comment/CommentMenu/styles.module.scss
View file

@ -2,8 +2,8 @@
.wrap { .wrap {
position: absolute; position: absolute;
right: 0; right: -3px;
top: 0; top: -3px;
width: 48px; width: 48px;
height: 48px; height: 48px;
z-index: 10; z-index: 10;
@ -17,17 +17,6 @@
} }
} }
.dot {
width: 10px;
height: 10px;
border-radius: 100%;
background: transparentize(black, 0.7);
position: absolute;
right: 6px;
top: 6px;
transition: background 0.25s;
}
@keyframes appear { @keyframes appear {
0% { 0% {
opacity: 0; opacity: 0;

3
src/components/common/MenuDots/index.tsx
View file

@ -2,10 +2,11 @@ import React, { FC } from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import styles from '~/components/flow/FlowCell/styles.module.scss';
import { Icon } from '~/components/input/Icon'; import { Icon } from '~/components/input/Icon';
import { ButtonProps } from '~/utils/types'; import { ButtonProps } from '~/utils/types';
import styles from './styles.module.scss';
interface Props extends ButtonProps {} interface Props extends ButtonProps {}
const MenuDots: FC<Props> = ({ ...rest }) => ( const MenuDots: FC<Props> = ({ ...rest }) => (

39
src/components/common/MenuDots/styles.module.scss Normal file
View file

@ -0,0 +1,39 @@
@import "src/styles/variables";
@import "src/styles/mixins";
.button {
width: 48px;
height: 48px;
display: flex;
align-items: flex-start;
justify-content: flex-end;
fill: white;
padding: 5px;
box-sizing: border-box;
cursor: pointer;
}
.dots {
@include blur($content_bg, 5px, 0.7);
padding: 5px 0 0 0;
background: $content_bg;
border-radius: $radius;
width: 18px;
height: 30px;
position: relative;
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.3;
transition: opacity 0.25s;
:hover > & {
opacity: 1;
}
}
}

37
src/components/flow/FlowCell/styles.module.scss
View file

@ -118,40 +118,3 @@
bottom: 0; bottom: 0;
z-index: 11; z-index: 11;
} }
.button {
width: 48px;
height: 48px;
display: flex;
align-items: flex-start;
justify-content: flex-end;
fill: white;
padding: 7px;
box-sizing: border-box;
cursor: pointer;
}
.dots {
@include blur($content_bg, 5px, 0.7);
padding: 5px 0 0 0;
background: $content_bg;
border-radius: $radius;
width: 18px;
height: 30px;
position: relative;
svg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0.5;
transition: opacity 0.25s;
:hover > & {
opacity: 1;
}
}
}