From 07cf318bcde49b2dec8ba937fa999b436677cbb7 Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Fri, 27 Mar 2020 14:19:20 +0100 Subject: [PATCH 1/3] style multi comments --- .../Comments/components/MultiComment.tsx | 107 ++++++++++++++++++ .../Workspace/screens/Comments/index.tsx | 25 +--- 2 files changed, 110 insertions(+), 22 deletions(-) create mode 100644 packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx new file mode 100644 index 00000000000..954b808e24e --- /dev/null +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx @@ -0,0 +1,107 @@ +import React from 'react'; +import { formatDistanceStrict } from 'date-fns'; +import { css } from '@styled-system/css'; +import { useOvermind } from 'app/overmind'; +import { Text } from '@codesandbox/components'; + +export const MultiComment = ({ x, y, ids }) => { + const { + state: { + comments: { currentComments }, + }, + actions: { comments }, + } = useOvermind(); + + const list = css({ + position: 'fixed', + left: x - 10, + top: y + 20, + backgroundColor: 'sideBar.background', + border: '1px solid', + borderColor: 'sideBar.border', + paddingY: 2, + paddingX: 0, + zIndex: 999999999999999, + listStyle: 'none', + borderRadius: 4, + + '&::before': { + content: "''", + display: 'block', + position: 'absolute', + left: '7px', + width: 0, + height: 0, + borderStyle: 'solid', + top: '-11px', + borderColor: 'transparent', + borderBottomColor: 'sideBar.border', + + borderWidth: '11px', + borderTopWidth: 0, + }, + + '&::after': { + content: "''", + display: 'block', + position: 'absolute', + left: 2, + width: 0, + height: 0, + borderStyle: 'solid', + top: '-10px', + borderColor: 'transparent', + borderBottomColor: 'sideBar.background', + borderWidth: '10px', + borderTopWidth: 0, + }, + }); + + const item = css({ + border: 'none', + backgroundColor: 'transparent', + padding: 2, + width: 200, + cursor: 'pointer', + position: 'relative', + '&:hover': { + color: 'list.hoverForeground', + backgroundColor: 'list.hoverBackground', + }, + }); + + return ( + + ); +}; diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx index 109b22f0e87..62ffe954f84 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/index.tsx @@ -1,4 +1,5 @@ import { CommentsFilterOption } from '@codesandbox/common/lib/types'; + import { Icon, List, @@ -14,6 +15,7 @@ import React from 'react'; import { AddComment } from './AddComment'; import { Comment } from './Comment'; import { CommentDialog } from './Dialog'; +import { MultiComment } from './components/MultiComment'; export const Comments: React.FC = () => { const { @@ -138,28 +140,7 @@ export const Comments: React.FC = () => { {currentComments.length ? null : } {currentCommentId && } - {multiCommentsSelector && ( -
    - {multiCommentsSelector.ids.map(id => ( -
  • - -
    • - ))} -
- )} + {multiCommentsSelector && } ); }; From 01765f6e879f3515a294af810311b08759d2219c Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Fri, 27 Mar 2020 14:29:34 +0100 Subject: [PATCH 2/3] use element --- .../Comments/components/MultiComment.tsx | 75 +++++++++++-------- 1 file changed, 42 insertions(+), 33 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx index 954b808e24e..ef70967abd5 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx @@ -2,9 +2,15 @@ import React from 'react'; import { formatDistanceStrict } from 'date-fns'; import { css } from '@styled-system/css'; import { useOvermind } from 'app/overmind'; -import { Text } from '@codesandbox/components'; +import { Text, Element } from '@codesandbox/components'; -export const MultiComment = ({ x, y, ids }) => { +type MultiCommentProps = { + x: number; + y: number; + ids: string[]; +}; + +export const MultiComment = ({ x, y, ids }: MultiCommentProps) => { const { state: { comments: { currentComments }, @@ -70,38 +76,41 @@ export const MultiComment = ({ x, y, ids }) => { }, }); + const date = comment => + formatDistanceStrict(new Date(comment.insertedAt), new Date(), { + addSuffix: true, + }); + return ( -
    - {ids.map(id => ( -
  • - -
    • - ))} -
+ + {comment.user.username} + + + {date(comment)} + + + + ); + })} + ); }; From 2e3df67b990e4a6e999594e44bc1d8dc6de3fd7f Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Fri, 27 Mar 2020 14:54:26 +0100 Subject: [PATCH 3/3] update lookup --- .../screens/Comments/components/MultiComment.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx index ef70967abd5..3eed4659687 100644 --- a/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx +++ b/packages/app/src/app/pages/Sandbox/Editor/Workspace/screens/Comments/components/MultiComment.tsx @@ -13,9 +13,10 @@ type MultiCommentProps = { export const MultiComment = ({ x, y, ids }: MultiCommentProps) => { const { state: { - comments: { currentComments }, + editor, + comments, }, - actions: { comments }, + actions, } = useOvermind(); const list = css({ @@ -84,14 +85,14 @@ export const MultiComment = ({ x, y, ids }: MultiCommentProps) => { return ( {ids.map(id => { - const comment = currentComments.find(c => c.id === id); + const comment = comments.comments[editor.currentSandbox.id][id]; return ( comments.selectComment(id)} + onClick={() => actions.comments.selectComment(id)} css={item} >