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

working comment menu

Browse source
This commit is contained in:
Fedor Katurov 2019-12-03 15:08:20 +07:00
parent 1bf9fe6b83
commit 11ec71766f
3 changed files with 37 additions and 22 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/components/node/CommentContent/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC, useMemo, memo, createElement, useCallback } from 'react'; import React, { FC, useMemo, memo, createElement, useCallback, useState } from 'react';
import { IComment, IFile } from '~/redux/types'; import { IComment, IFile } from '~/redux/types';
import path from 'ramda/es/path'; import path from 'ramda/es/path';
import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom'; import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom';

25
src/components/node/CommentMenu/index.tsx
View file

@ -1,4 +1,4 @@
import React, { FC } from 'react'; import React, { FC, useState, useCallback } from 'react';
import styles from './styles.scss'; import styles from './styles.scss';
interface IProps { interface IProps {
@ -7,12 +7,25 @@ interface IProps {
} }
const CommentMenu: FC<IProps> = ({ onEdit, onDelete }) => { const CommentMenu: FC<IProps> = ({ onEdit, onDelete }) => {
const [is_menu_opened, setIsMenuOpened] = useState(false);
const onFocus = useCallback(() => setIsMenuOpened(true), [setIsMenuOpened]);
const onBlur = useCallback(() => setIsMenuOpened(false), [setIsMenuOpened]);
return ( return (
<div className={styles.wrap}> <div className={styles.wrap} onFocus={onFocus} onBlur={onBlur} tabIndex={-1}>
<div className={styles.menu}> <div className={styles.dot} />
<div className={styles.item}>Редактировать</div>
<div className={styles.item}>Удалить</div> {is_menu_opened && (
</div> <div className={styles.menu}>
<div className={styles.item} onMouseDown={onEdit}>
Редактировать
</div>
<div className={styles.item} onMouseDown={onDelete}>
Удалить
</div>
</div>
)}
</div> </div>
); );
}; };

32
src/components/node/CommentMenu/styles.scss
View file

@ -5,23 +5,25 @@
width: 48px; width: 48px;
height: 48px; height: 48px;
z-index: 3; z-index: 3;
outline: none;
cursor: pointer;
&:hover { &:hover {
.menu { .dot {
display: flex; background: $secondary;
} }
} }
}
&::before { .dot {
content: ' '; width: 10px;
width: 10px; height: 10px;
height: 10px; border-radius: 100%;
border-radius: 100%; background: transparentize(black, 0.7);
background: transparentize(black, 0.7); position: absolute;
position: absolute; right: 6px;
right: 5px; top: 6px;
top: 5px; transition: background 0.25s;
}
} }
@keyframes appear { @keyframes appear {
@ -35,9 +37,9 @@
.menu { .menu {
position: absolute; position: absolute;
right: 0; right: 5px;
top: 0; top: 5px;
display: none; display: flex;
flex-direction: column; flex-direction: column;
z-index: 6; z-index: 6;