diff --git a/src/components/node/CommentContent/index.tsx b/src/components/node/CommentContent/index.tsx index 017bbcda..0f08b2a8 100644 --- a/src/components/node/CommentContent/index.tsx +++ b/src/components/node/CommentContent/index.tsx @@ -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 path from 'ramda/es/path'; import { formatCommentText, getURL, getPrettyDate } from '~/utils/dom'; diff --git a/src/components/node/CommentMenu/index.tsx b/src/components/node/CommentMenu/index.tsx index ac856bd9..9339f6b7 100644 --- a/src/components/node/CommentMenu/index.tsx +++ b/src/components/node/CommentMenu/index.tsx @@ -1,4 +1,4 @@ -import React, { FC } from 'react'; +import React, { FC, useState, useCallback } from 'react'; import styles from './styles.scss'; interface IProps { @@ -7,12 +7,25 @@ interface IProps { } const CommentMenu: FC = ({ onEdit, onDelete }) => { + const [is_menu_opened, setIsMenuOpened] = useState(false); + + const onFocus = useCallback(() => setIsMenuOpened(true), [setIsMenuOpened]); + const onBlur = useCallback(() => setIsMenuOpened(false), [setIsMenuOpened]); + return ( -
-
-
Редактировать
-
Удалить
-
+
+
+ + {is_menu_opened && ( +
+
+ Редактировать +
+
+ Удалить +
+
+ )}
); }; diff --git a/src/components/node/CommentMenu/styles.scss b/src/components/node/CommentMenu/styles.scss index 6f606138..69b933eb 100644 --- a/src/components/node/CommentMenu/styles.scss +++ b/src/components/node/CommentMenu/styles.scss @@ -5,23 +5,25 @@ width: 48px; height: 48px; z-index: 3; + outline: none; + cursor: pointer; &:hover { - .menu { - display: flex; + .dot { + background: $secondary; } } +} - &::before { - content: ' '; - width: 10px; - height: 10px; - border-radius: 100%; - background: transparentize(black, 0.7); - position: absolute; - right: 5px; - top: 5px; - } +.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 { @@ -35,9 +37,9 @@ .menu { position: absolute; - right: 0; - top: 0; - display: none; + right: 5px; + top: 5px; + display: flex; flex-direction: column; z-index: 6;