Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try/inline block commenting #7

Merged
merged 2 commits into from
Jun 7, 2024
Merged

Try/inline block commenting #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
871c745
Added UI Design changes for Comment Popover section
juhibhatt19 Jun 6, 2024
b9e182a
Resolved conflicts & added sidebar UI changes
juhibhatt19 Jun 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
127 changes: 85 additions & 42 deletions packages/block-library/src/collab/discussion-board.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,22 +249,16 @@ const DiscussionBoard = ( { contentRef, onClose } ) => {
<VStack spacing="3">
{ 0 < commentsCount && ! isCurrentThreadResolved && (
<>
<div
className="block-editor-format-toolbar__comment-board__resolved"
title={ __( 'Mark as resolved' ) }
>
<CheckboxControl
checked={ isResolved }
onChange={ () => showConfirmationOverlay() }
/>
</div>
{ currentThread.comments.map(
( {
createdBy,
comment,
timestamp,
commentId,
} ) => (
(
{
createdBy,
comment,
timestamp,
commentId,
},
index
) => (
<VStack
spacing="2"
key={ timestamp }
Expand All @@ -275,33 +269,75 @@ const DiscussionBoard = ( { contentRef, onClose } ) => {
spacing="1"
justify="space-between"
>
<Icon
icon={ userIcon }
size={ 35 }
/>
<VStack spacing="1">
<span>{ createdBy }</span>
<time
dateTime={ format(
'c',
timestamp
) }
>
{ dateI18n(
dateTimeFormat,
timestamp
<HStack
alignment="left"
spacing="3"
justify="start"
>
<Icon
icon={ userIcon }
className="comment-board__userIcon"
size={ 45 }
/>
<VStack spacing="1">
<span className="comment-board__userName">
{ createdBy }
</span>
<time
dateTime={ format(
'c',
timestamp
) }
>
{ dateI18n(
dateTimeFormat,
timestamp
) }
</time>
</VStack>
</HStack>
<HStack
alignment="right"
spacing="1"
justify="end"
className="comment-board__actions"
>
{ index === 0 && (
<div
className="block-editor-format-toolbar__comment-board__resolved"
title={ __(
'Mark as resolved'
) }
>
<CheckboxControl
checked={
isResolved
}
onChange={ () =>
showConfirmationOverlay()
}
label={ __(
'Resolve'
) }
/>
</div>
) }
<Button
icon={ deleteIcon }
label={ __(
'Delete comment'
) }
</time>
</VStack>
<Button
icon={ deleteIcon }
label={ __( 'Delete comment' ) }
onClick={ () =>
deleteComment( commentId )
}
/>
onClick={ () =>
deleteComment(
commentId
)
}
/>
</HStack>
</HStack>
<p>{ comment }</p>
<p className="comment-board__commentText">
{ comment }
</p>
</VStack>
)
) }
Expand All @@ -310,14 +346,21 @@ const DiscussionBoard = ( { contentRef, onClose } ) => {
<VStack spacing="2">
{ 0 === commentsCount && (
<HStack alignment="left" spacing="1">
<Icon icon={ userIcon } size={ 35 } />
<span>{ currentUser }</span>
<Icon
icon={ userIcon }
className="comment-board__userIcon"
size={ 45 }
/>
<span className="comment-board__userName">
{ currentUser }
</span>
</HStack>
) }
<TextControl
value={ inputComment }
onChange={ ( val ) => setInputComment( val ) }
placeholder={ __( 'Comment or add others with @' ) }
className="block-editor-format-toolbar__comment-input"
/>
<HStack alignment="right" spacing="1">
<Button
Expand Down
50 changes: 49 additions & 1 deletion packages/block-library/src/collab/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,14 @@
.block-editor-format-toolbar__comment-board {
max-width: 300px;
max-width: 350px;
min-width: auto;
width: 90vw;

.components-popover__content {
width: auto;
padding: 1rem;
border: 1px solid rgba(0, 0, 0, 0.125);
box-shadow: 2px 2px 8px 2px #e9ecef;
border-radius: 4px;
}

.comment-board__comment {
Expand All @@ -15,6 +18,51 @@
&__resolved {
align-self: end;
}

.comment-board__actions {
width: auto;
}

.comment-board__userName {
font-size: 16px;
text-transform: capitalize;
}

.comment-board__userIcon {
border: 1px solid #c5c5c5;
}

.comment-board__commentText {
font-size: 14px;
margin-top: 5px;
}

.block-editor-format-toolbar__comment-input {
.components-text-control__input {
border: 1px solid #ccc;
height: 40px;
&::placeholder {
font-style: italic;
}
&:focus {
border: 0;
}
}
}
.block-editor-format-toolbar__comment-board__resolved {
min-width: auto;
* {
min-width: auto;
}
span.components-checkbox-control__input-container {
display: none;
& + label {
text-decoration: underline;
cursor: pointer;
color: rgb(0, 124, 186);
}
}
}
}

/* Targeting class starting with .block-editor-collab__ */
Expand Down
24 changes: 14 additions & 10 deletions packages/editor/src/components/collab-sidebar/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,15 +61,16 @@ export default function CollabSidebar() {
<VStack
key={ index }
className="editor-collab-sidebar__thread"
spacing="3"
>
<HStack
alignment="left"
spacing="1"
spacing="3"
justify="flex-start"
>
<Icon icon={ userIcon } size={ 35 } />
<Icon icon={ userIcon } className='editor-collab-sidebar__userIcon' size={ 35 } />
<VStack spacing="1">
<span>{ thread.createdBy }</span>
<span className='editor-collab-sidebar__userName'>{ thread.createdBy }</span>
<time
dateTime={ format(
'c',
Expand All @@ -90,12 +91,12 @@ export default function CollabSidebar() {
>
<HStack
alignment="center"
spacing="1"
spacing="3"
justify="flex-start"
>
<Icon icon={ userIcon } size={ 35 } />
<Icon icon={ userIcon } className='editor-collab-sidebar__userIcon' size={ 35 } />
<VStack spacing="1">
<span>{ comment.createdBy }</span>
<span className='editor-collab-sidebar__userName'>{ comment.createdBy }</span>
<time
dateTime={ format(
'c',
Expand All @@ -122,12 +123,12 @@ export default function CollabSidebar() {
<VStack className="editor-collab-sidebar__resolved">
<HStack
alignment="center"
spacing="1"
spacing="3"
justify="flex-start"
>
<Icon icon={ userIcon } size={ 35 } />
<Icon icon={ userIcon } className='editor-collab-sidebar__userIcon' size={ 35 } />
<VStack spacing="1">
<span>{ thread.resolvedBy }</span>
<span className='editor-collab-sidebar__userName'>{ thread.resolvedBy }</span>
<time
dateTime={ format(
'c',
Expand All @@ -149,8 +150,11 @@ export default function CollabSidebar() {
<Icon
icon={ resolvedIcon }
size={ 20 }
className='editor-collab-sidebar__resolvedIcon'
/>
<Text>
<Text
className='editor-collab-sidebar__resolvedText'
>
{ __( 'Marked as resolved' ) }
</Text>
</HStack>
Expand Down
26 changes: 26 additions & 0 deletions packages/editor/src/components/collab-sidebar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,4 +17,30 @@
padding: 10px 15px;
background-color: #fff;
}

&__userName {
font-size: 14px;
text-transform: capitalize;
}

&__userIcon {
border: 1px solid #c5c5c5;
}

&__resolvedIcon {
fill: green;
border-radius: 50%;
width: 18px;
height: 18px;
border: 1px solid green;
margin-right: 2px;
margin-top: 5px;
}

&__resolvedText {
font-style: italic;
font-weight: 500 !important;
color: gray !important;
margin-top: 5px !important;
}
}
Loading