Skip to content

Commit

Permalink
Comment thread icons (#4659)
Browse files Browse the repository at this point in the history 
* x button

* x button

* new icons

* tooltips

* correct tooltips

* larger icons

* unresolved in grayscale

* clean up

* use remixLocationRouteLabel

* x button on new thread popup

* fragments not divs
  • Loading branch information
@lankaukk
lankaukk authored Dec 15, 2023
1 parent 22a90c8 commit 0ee8f70
Show file tree
Hide file tree
Showing 8 changed files with 132 additions and 96 deletions.
Binary file added editor/resources/editor/icons/light/semantic/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added editor/resources/editor/icons/light/semantic/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added editor/resources/editor/icons/light/semantic/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added editor/resources/editor/icons/light/semantic/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added editor/resources/editor/icons/light/semantic/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added editor/resources/editor/icons/light/semantic/[email protected]
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
114 changes: 64 additions & 50 deletions editor/src/components/canvas/controls/comment-popup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,15 @@ import { create } from '../../../core/shared/property-path'
import { assertNever } from '../../../core/shared/utils'
import { CommentWrapper, MultiplayerWrapper } from '../../../utils/multiplayer-wrapper'
import { when } from '../../../utils/react-conditionals'
import { Button, Icons, UtopiaStyles, useColorTheme } from '../../../uuiui'
import {
Button,
FlexColumn,
FlexRow,
Icn,
Tooltip,
UtopiaStyles,
useColorTheme,
} from '../../../uuiui'
import {
setProp_UNSAFE,
setRightMenuTab,
Expand Down Expand Up @@ -319,58 +327,49 @@ const CommentThread = React.memo(({ comment }: CommentThreadProps) => {
minWidth: 250,
boxShadow: UtopiaStyles.shadowStyles.mid.boxShadow,
background: colorTheme.bg0.value,
borderRadius: 4,
overflow: 'hidden',
}}
onKeyDown={stopPropagation}
onKeyUp={stopPropagation}
onMouseUp={stopPropagation}
>
<div
style={{
position: 'relative',
}}
>
<div
style={{
position: 'absolute',
left: 0,
right: 0,
top: -40,
zIndex: 1,
display: 'flex',
alignItems: 'flex-end',
justifyContent: 'flex-end',
height: 40,
gap: 8,
}}
>
{when(
thread != null,
<>
{when(
readByMe === 'read',
<Button
highlight
spotlight
style={{ padding: '0 6px' }}
onClick={onClickMarkAsUnread}
>
Mark as unread
</Button>,
)}
<Button highlight spotlight style={{ padding: '0 6px' }} onClick={onClickResolve}>
{thread?.metadata.resolved ? 'Unresolve' : 'Resolve'}
</Button>
</>,
)}
<Button highlight spotlight style={{ padding: '0 6px' }} onClick={onClickClose}>
<Icons.Cross />
</Button>
</div>
</div>
{thread == null ? (
<NewCommentPopup onComposerSubmit={onCreateThread} />
) : (
<>
<FlexRow
style={{
background: colorTheme.bg1.value,
justifyContent: 'flex-end',
padding: 6,
borderBottom: `1px solid ${colorTheme.bg3.value}`,
gap: 6,
}}
>
{when(
readByMe === 'read',
<Tooltip title='Mark As Unread' placement='top'>
<Button onClick={onClickMarkAsUnread}>
<Icn category='semantic' type='unread' width={18} height={18} color='main' />
</Button>
</Tooltip>,
)}
<Tooltip title='Resolve' placement='top'>
<Button onClick={onClickResolve}>
<Icn
category='semantic'
type={thread?.metadata.resolved ? 'resolved' : 'resolve'}
width={18}
height={18}
color='main'
/>
</Button>
</Tooltip>
<Button onClick={onClickClose}>
<Icn category='semantic' type='cross-large' width={16} height={16} color='main' />
</Button>
</FlexRow>
<div style={{ position: 'relative' }}>
<div
style={{
Expand Down Expand Up @@ -492,6 +491,10 @@ const NewCommentPopup = React.memo((props: NewCommentPopupProps) => {
[newCommentComposerAnimation, colorTheme, dispatch],
)

const onClickClose = React.useCallback(() => {
dispatch([switchEditorMode(EditorModes.commentMode(null, 'not-dragging'))])
}, [dispatch])

return (
<>
<div
Expand All @@ -502,10 +505,22 @@ const NewCommentPopup = React.memo((props: NewCommentPopupProps) => {
left: 0,
bottom: 0,
right: 0,
cursor: CSSCursor.Comment,
}}
onClick={onClickOutsideNewComment}
/>
<div
style={{
display: 'flex',
justifyContent: 'flex-end',
padding: 6,
height: 35,
borderBottom: `1px solid ${colorTheme.bg3.value}`,
}}
>
<Button onClick={onClickClose}>
<Icn category='semantic' type='cross-large' width={16} height={16} color='main' />
</Button>
</div>
<motion.div animate={newCommentComposerAnimation} style={{ border: '1px solid transparent' }}>
<Composer
data-theme={theme}
Expand Down Expand Up @@ -547,23 +562,22 @@ ListShadow.displayName = 'ListShadow'

const HeaderComment = React.memo(
({ comment, enabled }: { comment: CommentData; enabled: boolean }) => {
const colorTheme = useColorTheme()
const collabs = useStorage((storage) => storage.collaborators)
const user = getCollaboratorById(collabs, comment.userId)
return (
<div
style={{
position: 'absolute',
top: -1,
left: -1,
top: 0,
left: 0,
right: 0,
backgroundColor: 'white',
zIndex: 1,
boxShadow: UtopiaStyles.shadowStyles.highest.boxShadow,
border: `1px solid ${colorTheme.primary50.value}`,
opacity: enabled ? 1 : 0,
transition: 'opacity 100ms linear',
transition: 'all 100ms linear',
minHeight: 67,
transform: 'scale(1.01)',
}}
>
<CommentWrapper user={user} comment={comment} />
Expand Down
114 changes: 68 additions & 46 deletions editor/src/components/inspector/sections/comment-section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ import {
Button,
FlexColumn,
FlexRow,
Icn,
InspectorSubsectionHeader,
Tooltip,
useColorTheme,
} from '../../../uuiui'
import { stopPropagation } from '../common/inspector-utils'
Expand Down Expand Up @@ -193,57 +195,68 @@ const ThreadPreview = React.memo(({ thread }: ThreadPreviewProps) => {
className={'thread-preview'}
key={comment.id}
onClick={onClick}
style={{
backgroundColor: isSelected
? colorTheme.primary10.value
: thread.metadata.resolved
? colorTheme.bg2.value
: 'transparent',
css={{
display: 'flex',
flexDirection: 'row',
paddingBottom: 5,
position: 'relative',
'&:hover': {
backgroundColor: isSelected ? colorTheme.primary10.value : colorTheme.bg2.value,
},
backgroundColor: isSelected ? colorTheme.primary10.value : 'transparent',
}}
>
<CommentWrapper
data-theme={theme}
user={user}
comment={comment}
showActions={false}
style={{ backgroundColor: 'transparent' }}
/>
{when(
remixLocationRouteLabel != null,
<div
style={{
height: 46,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
justifyContent: 'center',
}}
>
<div
style={{
paddingLeft: 44,
paddingBottom: 11,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
width: 8,
height: 8,
borderRadius: 8,
position: 'relative',
left: 5,
background: readByMe === 'unread' ? colorTheme.primary.value : 'transparent',
}}
>
/>
</div>
<div
style={{
display: 'flex',
flexDirection: 'column',
filter: thread.metadata.resolved ? 'grayscale()' : undefined,
}}
>
<CommentWrapper
data-theme={theme}
user={user}
comment={comment}
showActions={false}
style={{ backgroundColor: 'transparent' }}
/>
{when(
remixLocationRouteLabel != null,
<div
style={{
paddingLeft: 44,
fontSize: 9,
color: colorTheme.fg6.value,
}}
>
{thread.metadata.remixLocationRoute ?? ''}
</div>
</div>,
)}
<div
style={{
paddingBottom: 11,
paddingLeft: 44,
paddingRight: 10,
marginTop: -5,
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
}}
>
Route: <span style={{ fontWeight: 500 }}>{remixLocationRouteLabel}</span>
</div>,
)}
{when(
repliesCount > 0,
<div
style={{
paddingLeft: 44,
fontSize: 9,
color: colorTheme.fg6.value,
}}
Expand All @@ -252,22 +265,31 @@ const ThreadPreview = React.memo(({ thread }: ThreadPreviewProps) => {
</div>,
)}
{unless(repliesCount > 0, <div />)}
{when(readByMe === 'unread', 'Unread')}
</div>
<Tooltip title='Resolve' placement='top'>
<Button
highlight
spotlight
css={{
visibility: 'hidden',
'.thread-preview:hover &': {
visibility: 'visible',
},
padding: '0 6px',
position: 'absolute',
right: 10,
top: 10,
}}
onClick={onResolveThread}
>
{thread.metadata.resolved ? 'Unresolve' : 'Resolve'}
<Icn
category='semantic'
type={thread?.metadata.resolved ? 'resolved' : 'resolve'}
width={18}
height={18}
color='main'
css={{
visibility: thread?.metadata.resolved ? 'visible' : 'hidden',
'.thread-preview:hover &': {
visibility: 'visible',
},
}}
/>
</Button>
</div>
</Tooltip>
</div>
)
})
Expand Down

0 comments on commit 0ee8f70

Please sign in to comment.