From 57f37723fa2a5de6897cc3fcec6773cedfa99c0b Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Mon, 4 Apr 2022 15:51:05 +0700 Subject: [PATCH] added notes menu --- .env.local | 8 +-- src/components/comment/CommentMenu/index.tsx | 37 ++++------- src/components/common/CornerMenu/index.tsx | 37 +++++++++++ .../common/CornerMenu/styles.module.scss | 62 +++++++++++++++++++ src/components/containers/Columns/index.tsx | 22 +++++++ .../containers/Columns/styles.module.scss | 27 ++++++++ src/components/notes/NoteCard/index.tsx | 3 + .../notes/NoteCard/styles.module.scss | 1 + src/components/notes/NoteMenu/index.tsx | 25 ++++++++ src/containers/lab/LabGrid/index.tsx | 17 ++--- src/containers/lab/LabGrid/styles.module.scss | 26 -------- .../settings/SettingsNotes/index.tsx | 14 +---- .../settings/SettingsNotes/styles.module.scss | 27 -------- tsconfig.tsbuildinfo | 2 +- 14 files changed, 203 insertions(+), 105 deletions(-) create mode 100644 src/components/common/CornerMenu/index.tsx create mode 100644 src/components/common/CornerMenu/styles.module.scss create mode 100644 src/components/containers/Columns/index.tsx create mode 100644 src/components/containers/Columns/styles.module.scss create mode 100644 src/components/notes/NoteMenu/index.tsx diff --git a/.env.local b/.env.local index 5046a0a7..9c946691 100644 --- a/.env.local +++ b/.env.local @@ -1,6 +1,6 @@ #NEXT_PUBLIC_API_HOST=https://pig.staging.vault48.org/ #NEXT_PUBLIC_REMOTE_CURRENT=https://pig.staging.vault48.org/static/ -NEXT_PUBLIC_API_HOST=http://localhost:8888/ -NEXT_PUBLIC_REMOTE_CURRENT=http://localhost:8888/static/ -#NEXT_PUBLIC_API_HOST=https://pig.vault48.org/ -#NEXT_PUBLIC_REMOTE_CURRENT=https://pig.vault48.org/static/ +#NEXT_PUBLIC_API_HOST=http://localhost:8888/ +#NEXT_PUBLIC_REMOTE_CURRENT=http://localhost:8888/static/ +NEXT_PUBLIC_API_HOST=https://pig.vault48.org/ +NEXT_PUBLIC_REMOTE_CURRENT=https://pig.vault48.org/static/ diff --git a/src/components/comment/CommentMenu/index.tsx b/src/components/comment/CommentMenu/index.tsx index 0786a843..49c14dfe 100644 --- a/src/components/comment/CommentMenu/index.tsx +++ b/src/components/comment/CommentMenu/index.tsx @@ -1,8 +1,6 @@ -import React, { FC, useCallback, useState } from 'react'; +import React, { FC, useMemo } from 'react'; -import { MenuDots } from '~/components/common/MenuDots'; - -import styles from './styles.module.scss'; +import { CornerMenu } from '~/components/common/CornerMenu'; interface IProps { onEdit: () => void; @@ -10,27 +8,18 @@ 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 && ( -
-
- Редактировать -
-
- Удалить -
-
- )} -
+ const actions = useMemo( + () => [ + { + title: 'Редактировать', + action: onEdit, + }, + { title: 'Удалить', action: onDelete }, + ], + [onEdit, onDelete] ); + + return ; }; export { CommentMenu }; diff --git a/src/components/common/CornerMenu/index.tsx b/src/components/common/CornerMenu/index.tsx new file mode 100644 index 00000000..9b4ac9da --- /dev/null +++ b/src/components/common/CornerMenu/index.tsx @@ -0,0 +1,37 @@ +import React, { useCallback, useState, VFC } from 'react'; + +import styles from '~/components/comment/CommentMenu/styles.module.scss'; +import { MenuDots } from '~/components/common/MenuDots'; + +interface MenuAction { + title: string; + action: () => void; +} +interface CornerMenuProps { + actions: MenuAction[]; +} + +const CornerMenu: VFC = ({ actions }) => { + const [is_menu_opened, setIsMenuOpened] = useState(false); + + const onFocus = useCallback(() => setIsMenuOpened(true), [setIsMenuOpened]); + const onBlur = useCallback(() => setIsMenuOpened(false), [setIsMenuOpened]); + + return ( +
+ + + {is_menu_opened && ( +
+ {actions.map(({ title, action }) => ( +
+ {title} +
+ ))} +
+ )} +
+ ); +}; + +export { CornerMenu }; diff --git a/src/components/common/CornerMenu/styles.module.scss b/src/components/common/CornerMenu/styles.module.scss new file mode 100644 index 00000000..1943f26c --- /dev/null +++ b/src/components/common/CornerMenu/styles.module.scss @@ -0,0 +1,62 @@ +@import "src/styles/variables"; + +.wrap { + position: absolute; + right: -3px; + top: -3px; + width: 48px; + height: 48px; + z-index: 10; + outline: none; + cursor: pointer; + + &:hover { + .dot { + background: $secondary; + } + } +} + +@keyframes appear { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +.menu { + position: absolute; + right: 5px; + top: 5px; + display: flex; + flex-direction: column; + z-index: 6; + white-space: nowrap; + + animation: appear 0.25s forwards; +} + +.item { + user-select: none; + font: $font_12_semibold; + text-transform: uppercase; + padding: 8px $gap; + background: $content_bg; + cursor: pointer; + + &:first-child { + border-top-left-radius: $radius; + border-top-right-radius: $radius; + } + + &:last-child { + border-bottom-left-radius: $radius; + border-bottom-right-radius: $radius; + } + + &:hover { + background: $primary; + } +} diff --git a/src/components/containers/Columns/index.tsx b/src/components/containers/Columns/index.tsx new file mode 100644 index 00000000..094beb83 --- /dev/null +++ b/src/components/containers/Columns/index.tsx @@ -0,0 +1,22 @@ +import React, { FC } from 'react'; + +import Masonry from 'react-masonry-css'; + +import styles from './styles.module.scss'; + +const defaultColumns = { + default: 2, + 1280: 1, +}; + +interface ColumnsProps { + cols?: Record; +} + +const Columns: FC = ({ children, cols = defaultColumns }) => ( + + {children} + +); + +export { Columns }; diff --git a/src/components/containers/Columns/styles.module.scss b/src/components/containers/Columns/styles.module.scss new file mode 100644 index 00000000..41c651d9 --- /dev/null +++ b/src/components/containers/Columns/styles.module.scss @@ -0,0 +1,27 @@ +@import "src/styles/variables"; +@import "src/styles/mixins"; + +div.wrap { + display: flex; + width: 100%; + margin-right: 0; + padding: $gap $gap * 0.5; + + @include tablet { + padding: 0 $gap * 0.5; + } +} + +.column { + background-clip: padding-box; + box-sizing: border-box; + padding: 0 $gap * 0.5; + + @include tablet { + padding: 0; + } + + & > div { + margin-bottom: $gap; + } +} diff --git a/src/components/notes/NoteCard/index.tsx b/src/components/notes/NoteCard/index.tsx index 41392263..a87cf6aa 100644 --- a/src/components/notes/NoteCard/index.tsx +++ b/src/components/notes/NoteCard/index.tsx @@ -3,6 +3,7 @@ import React, { VFC } from 'react'; import { Card } from '~/components/containers/Card'; import { Markdown } from '~/components/containers/Markdown'; import { Padder } from '~/components/containers/Padder'; +import { NoteMenu } from '~/components/notes/NoteMenu'; import { formatText, getPrettyDate } from '~/utils/dom'; import styles from './styles.module.scss'; @@ -15,8 +16,10 @@ interface NoteCardProps { const NoteCard: VFC = ({ content, createdAt }) => ( + + {getPrettyDate(createdAt)} ); diff --git a/src/components/notes/NoteCard/styles.module.scss b/src/components/notes/NoteCard/styles.module.scss index 4a378faa..2a7e7c8c 100644 --- a/src/components/notes/NoteCard/styles.module.scss +++ b/src/components/notes/NoteCard/styles.module.scss @@ -5,6 +5,7 @@ min-width: 0; word-break: break-word; padding: 0; + position: relative; & > * { @include row_shadow; diff --git a/src/components/notes/NoteMenu/index.tsx b/src/components/notes/NoteMenu/index.tsx new file mode 100644 index 00000000..de257857 --- /dev/null +++ b/src/components/notes/NoteMenu/index.tsx @@ -0,0 +1,25 @@ +import React, { useMemo, VFC } from 'react'; + +import { CornerMenu } from '~/components/common/CornerMenu'; + +interface NoteMenuProps { + onEdit: () => void; + onDelete: () => void; +} + +const NoteMenu: VFC = ({ onEdit, onDelete }) => { + const actions = useMemo( + () => [ + { + title: 'Редактировать', + action: onEdit, + }, + { title: 'Удалить', action: onDelete }, + ], + [onEdit, onDelete] + ); + + return ; +}; + +export { NoteMenu }; diff --git a/src/containers/lab/LabGrid/index.tsx b/src/containers/lab/LabGrid/index.tsx index 18f590c5..e7f45526 100644 --- a/src/containers/lab/LabGrid/index.tsx +++ b/src/containers/lab/LabGrid/index.tsx @@ -2,6 +2,7 @@ import React, { FC } from 'react'; import Masonry from 'react-masonry-css'; +import { Columns } from '~/components/containers/Columns'; import { InfiniteScroll } from '~/components/containers/InfiniteScroll'; import { LabNoResults } from '~/components/lab/LabNoResults'; import { LabNode } from '~/components/lab/LabNode'; @@ -35,11 +36,7 @@ const LabGrid: FC = () => { if (isLoading) { return ( - + @@ -49,7 +46,7 @@ const LabGrid: FC = () => { - + ); } @@ -59,11 +56,7 @@ const LabGrid: FC = () => { return ( - + {nodes.map(node => ( = () => { commentCount={node.comment_count} /> ))} - + ); }; diff --git a/src/containers/lab/LabGrid/styles.module.scss b/src/containers/lab/LabGrid/styles.module.scss index ed884444..e69de29b 100644 --- a/src/containers/lab/LabGrid/styles.module.scss +++ b/src/containers/lab/LabGrid/styles.module.scss @@ -1,26 +0,0 @@ -@import "src/styles/variables.scss"; - -div.wrap { - display: flex; - width: 100%; - margin-right: 0; - - @include tablet { - padding: 0 $gap * 0.5; - } -} - -.column { - background-clip: padding-box; - box-sizing: border-box; - padding: 0 $gap * 0.5; - margin-top: -$gap * 0.5; - - @include tablet { - padding: 0; - } - - & > div { - margin-bottom: $gap; - } -} diff --git a/src/containers/settings/SettingsNotes/index.tsx b/src/containers/settings/SettingsNotes/index.tsx index 54b31127..6006eb7b 100644 --- a/src/containers/settings/SettingsNotes/index.tsx +++ b/src/containers/settings/SettingsNotes/index.tsx @@ -3,6 +3,7 @@ import React, { useState, VFC } from 'react'; import Masonry from 'react-masonry-css'; import { Card } from '~/components/containers/Card'; +import { Columns } from '~/components/containers/Columns'; import { Filler } from '~/components/containers/Filler'; import { Group } from '~/components/containers/Group'; import { Markdown } from '~/components/containers/Markdown'; @@ -20,11 +21,6 @@ import styles from './styles.module.scss'; interface SettingsNotesProps {} -const breakpointCols = { - default: 2, - 1280: 1, -}; - const SettingsNotes: VFC = () => { const [text, setText] = useState(''); const { notes } = useGetNotes(''); @@ -44,11 +40,7 @@ const SettingsNotes: VFC = () => { - +