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

Comments: add quick actions to the comments list view #18657

Merged
merged 12 commits into from
Oct 12, 2017
Merged

Comments: add quick actions to the comments list view #18657

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
9a8646b
Comments: makes comments actions visible on hover
Oct 9, 2017
b159bce
Comments: fixes vertical align problem on the quick action buttons
Oct 9, 2017
d054ca8
Comments: fixes vertical align problem on the quick actions button group
Oct 10, 2017
cc48f97
Comments: removes edit action when the action panel is in compact state
Oct 10, 2017
d22c49f
Comments: stop propagation of clicks on the actions panel so they won…
Oct 10, 2017
426e0a6
Comments: uses a single symbol for the approve action
Oct 10, 2017
af32073
Comments: adds some color to the quick actions
Oct 10, 2017
7e23b37
Comments: adds reply to quick actions
Oct 11, 2017
7004a8c
Comments: hides quick actions on mobile
Oct 11, 2017
c08b7b4
Comment: rolls back the approve icon to circle for approved comments …
Oct 11, 2017
c6b8676
Comments: makes reply the first quick action
Oct 11, 2017
40e9245
Comments: add feature flag to enable quick actions on development and…
Oct 12, 2017
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
62 changes: 45 additions & 17 deletions client/blocks/comment-detail/comment-detail-actions.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,21 +13,33 @@ import { includes } from 'lodash';
/**
* Internal dependencies
*/
import ButtonGroup from 'components/button-group';
import Button from 'components/button';

const commentActions = {
unapproved: [ 'like', 'approve', 'edit', 'spam', 'trash' ],
approved: [ 'like', 'approve', 'edit', 'spam', 'trash' ],
unapproved: [ 'like', 'approve', 'edit', 'reply', 'spam', 'trash' ],
approved: [ 'like', 'approve', 'edit', 'reply', 'spam', 'trash' ],
spam: [ 'approve', 'delete' ],
trash: [ 'approve', 'spam', 'delete' ],
};

const hasAction = ( status, action ) => includes( commentActions[ status ], action );

const CommentDetailActionsContainer = ( { compact, children } ) =>
compact ? (
<div className="comment-detail__actions is-quick">
<ButtonGroup>{ children }</ButtonGroup>
</div>
) : (
<div className="comment-detail__actions">{ children }</div>
);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Minor point, but can we clean this up later to stick with one component per file? Another option would be to have CommentDetailActions extend Component, to give us more flexibility with helper methods.


export const CommentDetailActions = ( {
compact,
commentIsLiked,
commentStatus,
deleteCommentPermanently,
toggleReply,
toggleApprove,
toggleEditMode,
toggleLike,
Expand All @@ -40,71 +52,87 @@ export const CommentDetailActions = ( {
const isTrash = 'trash' === commentStatus;

return (
<div className="comment-detail__actions">
<CommentDetailActionsContainer { ...{ compact } }>
{ hasAction( commentStatus, 'reply' ) &&
compact && (
<Button compact={ compact } className="comment-detail__action-edit" onClick={ toggleReply }>
<Gridicon icon="reply" />
</Button>
) }

{ hasAction( commentStatus, 'like' ) && (
<Button
borderless
{ ...{ borderless: ! compact, compact } }
className={ classNames( 'comment-detail__action-like', { 'is-liked': commentIsLiked } ) }
onClick={ toggleLike }
>
<Gridicon icon={ commentIsLiked ? 'star' : 'star-outline' } />
<span>{ commentIsLiked ? translate( 'Liked' ) : translate( 'Like' ) }</span>
{ compact || (
<span>{ commentIsLiked ? translate( 'Liked' ) : translate( 'Like' ) }</span>
) }
</Button>
) }

{ hasAction( commentStatus, 'approve' ) && (
<Button
borderless
{ ...{ borderless: ! compact, compact } }
className={ classNames( 'comment-detail__action-approve', {
'is-approved': isApproved,
} ) }
onClick={ toggleApprove }
>
<Gridicon icon={ isApproved ? 'checkmark-circle' : 'checkmark' } />
<span>{ isApproved ? translate( 'Approved' ) : translate( 'Approve' ) }</span>
{ compact || (
<span>{ isApproved ? translate( 'Approved' ) : translate( 'Approve' ) }</span>
) }
</Button>
) }

{ hasAction( commentStatus, 'edit' ) && (
<Button borderless className="comment-detail__action-edit" onClick={ toggleEditMode }>
{ hasAction( commentStatus, 'edit' ) &&
! compact && (
<Button
{ ...{ borderless: ! compact, compact } }
className="comment-detail__action-edit"
onClick={ toggleEditMode }
>
<Gridicon icon="pencil" />
<span>{ translate( 'Edit' ) }</span>
{ compact || <span>{ translate( 'Edit' ) }</span> }
</Button>
) }

{ hasAction( commentStatus, 'spam' ) && (
<Button
borderless
{ ...{ borderless: ! compact, compact } }
className={ classNames( 'comment-detail__action-spam', { 'is-spam': isSpam } ) }
onClick={ toggleSpam }
>
<Gridicon icon="spam" />
<span>{ isSpam ? translate( 'Spammed' ) : translate( 'Spam' ) }</span>
{ compact || <span>{ isSpam ? translate( 'Spammed' ) : translate( 'Spam' ) }</span> }
</Button>
) }

{ hasAction( commentStatus, 'trash' ) && (
<Button
borderless
{ ...{ borderless: ! compact, compact } }
className={ classNames( 'comment-detail__action-trash', { 'is-trash': isTrash } ) }
onClick={ toggleTrash }
>
<Gridicon icon="trash" />
<span>{ isTrash ? translate( 'Trashed' ) : translate( 'Trash' ) }</span>
{ compact || <span>{ isTrash ? translate( 'Trashed' ) : translate( 'Trash' ) }</span> }
</Button>
) }

{ hasAction( commentStatus, 'delete' ) && (
<Button
borderless
{ ...{ borderless: ! compact, compact } }
className="comment-detail__action-delete"
onClick={ deleteCommentPermanently }
>
<Gridicon icon="trash" />
<span>{ translate( 'Delete Permanently' ) }</span>
{ compact || <span>{ translate( 'Delete Permanently' ) }</span> }
</Button>
) }
</div>
</CommentDetailActionsContainer>
);
};

Expand Down
Loading