diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index a02a3cf8..0e62e6eb 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -27,6 +27,7 @@ import { pictshareAvatarThumbnail, showAvatars, setupTippy, + randomHsl, } from '../utils'; import moment from 'moment'; import { MomentTime } from './moment-time'; @@ -54,6 +55,7 @@ interface CommentNodeState { score: number; upvotes: number; downvotes: number; + borderColor: string; } interface CommentNodeProps { @@ -92,6 +94,7 @@ export class CommentNode extends Component { score: this.props.node.comment.score, upvotes: this.props.node.comment.upvotes, downvotes: this.props.node.comment.downvotes, + borderColor: randomHsl(), }; constructor(props: any, context: any) { @@ -116,7 +119,7 @@ export class CommentNode extends Component { return (
{ className={`details comment-node mb-1 ${ this.isCommentNew ? 'mark' : '' }`} + style={ + !this.props.noIndent && + `border-left: 1px solid; border-color: ${this.state.borderColor} !important` + } > -
    -
  • - - {node.comment.creator_avatar && showAvatars() && ( - - )} - {node.comment.creator_name} - -
  • - {this.isMod && ( -
  • - {i18n.t('mod')} -
  • - )} - {this.isAdmin && ( -
  • - {i18n.t('admin')} -
  • - )} - {this.isPostCreator && ( -
  • - {i18n.t('creator')} -
  • - )} - {(node.comment.banned_from_community || node.comment.banned) && ( -
  • - {i18n.t('banned')} -
  • - )} -
  • - +
    +
    • - - - + + {node.comment.creator_avatar && showAvatars() && ( + + )} + {node.comment.creator_name} + +
    • + {this.isMod && ( +
    • + {i18n.t('mod')} +
    • + )} + {this.isAdmin && ( +
    • + {i18n.t('admin')} +
    • + )} + {this.isPostCreator && ( +
    • + {i18n.t('creator')} +
    • + )} + {(node.comment.banned_from_community || node.comment.banned) && ( +
    • + {i18n.t('banned')} +
    • + )} +
    • + +
    • + + + + + {this.state.score} + +
    • +
    • + + - {this.state.score} + {this.state.upvotes} +
    • +
    • + + + + {this.state.downvotes} +
    • +
      + {this.props.showCommunity && ( +
    • + {i18n.t('to')} + + {node.comment.community_name} + +
    • + )} +
    • +
    • + +
    • - - - - {this.state.upvotes} -
    • -
    • - - - - {this.state.downvotes} -
    • - - {this.props.showCommunity && ( -
    • - {i18n.t('to')} - - {node.comment.community_name} - -
    • - )} -
    • -
    • - - - -
    • -
    • -
      - {this.state.collapsed ? ( - - - - ) : ( - - - - )} -
      -
    • -
    - {this.state.showEdit && ( - - )} - {!this.state.showEdit && !this.state.collapsed && ( -
    - {this.state.viewSource ? ( -
    {this.commentUnlessRemoved}
    - ) : (
    - )} -
      - {this.props.markable && ( -
    • - - - - - -
    • - )} - {UserService.Instance.user && !this.props.viewOnly && ( - <> -
    • - -
    • - {WebSocketService.Instance.site.enable_downvotes && ( -
    • - -
    • + className="unselectable pointer text-monospace" + onClick={linkEvent(this, this.handleCommentCollapse)} + > + {this.state.collapsed ? ( + + + + ) : ( + + + + )} +
    + +
+ {this.state.showEdit && ( + + )} + {!this.state.showEdit && !this.state.collapsed && ( +
+ {this.state.viewSource ? ( +
{this.commentUnlessRemoved}
+ ) : ( +
+ )} +
    + {this.props.markable && (
  • - - + +
  • - {!this.myComment && ( + )} + {UserService.Instance.user && !this.props.viewOnly && ( + <>
  • - - + - +
  • - )} -
  • - - - - - -
  • - {!this.state.showAdvanced ? ( + {WebSocketService.Instance.site.enable_downvotes && ( +
  • + +
  • + )}
  • - +
  • - ) : ( - <> + {!this.myComment && ( +
  • + + + + + +
  • + )} +
  • + + + + + +
  • + {!this.state.showAdvanced ? (
  • - - + +
  • -
  • - - - - - -
  • - {this.myComment && ( - <> -
  • -
  • - - - - - -
  • -
  • - - - - - -
  • - - )} - {/* Admins and mods can remove comments */} - {(this.canMod || this.canAdmin) && ( - <> -
  • - {!node.comment.removed ? ( - - {i18n.t('remove')} - - ) : ( - - {i18n.t('restore')} - + ) : ( + <> +
  • + - - )} - {/* Mods can ban from community, and appoint as mods to community */} - {this.canMod && ( - <> - {!this.isMod && ( + data-tippy-content={ + node.comment.saved + ? i18n.t('unsave') + : i18n.t('save') + } + > + + + + +
  • +
  • + + + + + +
  • + {this.myComment && ( + <> +
  • - {!node.comment.banned_from_community ? ( + + + + + +
  • +
  • + + + + + +
  • + + )} + {/* Admins and mods can remove comments */} + {(this.canMod || this.canAdmin) && ( + <> +
  • + {!node.comment.removed ? ( - {i18n.t('ban')} + {i18n.t('remove')} ) : ( - {i18n.t('unban')} + {i18n.t('restore')} )}
  • - )} - {!node.comment.banned_from_community && ( + + )} + {/* Mods can ban from community, and appoint as mods to community */} + {this.canMod && ( + <> + {!this.isMod && ( +
  • + {!node.comment.banned_from_community ? ( + + {i18n.t('ban')} + + ) : ( + + {i18n.t('unban')} + + )} +
  • + )} + {!node.comment.banned_from_community && ( +
  • + {!this.state.showConfirmAppointAsMod ? ( + + {this.isMod + ? i18n.t('remove_as_mod') + : i18n.t('appoint_as_mod')} + + ) : ( + <> + + {i18n.t('are_you_sure')} + + + {i18n.t('yes')} + + + {i18n.t('no')} + + + )} +
  • + )} + + )} + {/* Community creators and admins can transfer community to another mod */} + {(this.amCommunityCreator || this.canAdmin) && + this.isMod && (
  • - {!this.state.showConfirmAppointAsMod ? ( + {!this.state.showConfirmTransferCommunity ? ( - {this.isMod - ? i18n.t('remove_as_mod') - : i18n.t('appoint_as_mod')} + {i18n.t('transfer_community')} ) : ( <> @@ -492,7 +553,7 @@ export class CommentNode extends Component { class="pointer d-inline-block mr-1" onClick={linkEvent( this, - this.handleAddModToCommunity + this.handleTransferCommunity )} > {i18n.t('yes')} @@ -501,7 +562,8 @@ export class CommentNode extends Component { class="pointer d-inline-block" onClick={linkEvent( this, - this.handleCancelConfirmAppointAsMod + this + .handleCancelShowConfirmTransferCommunity )} > {i18n.t('no')} @@ -510,21 +572,89 @@ export class CommentNode extends Component { )}
  • )} - - )} - {/* Community creators and admins can transfer community to another mod */} - {(this.amCommunityCreator || this.canAdmin) && - this.isMod && ( + {/* Admins can ban from all, and appoint other admins */} + {this.canAdmin && ( + <> + {!this.isAdmin && ( +
  • + {!node.comment.banned ? ( + + {i18n.t('ban_from_site')} + + ) : ( + + {i18n.t('unban_from_site')} + + )} +
  • + )} + {!node.comment.banned && ( +
  • + {!this.state.showConfirmAppointAsAdmin ? ( + + {this.isAdmin + ? i18n.t('remove_as_admin') + : i18n.t('appoint_as_admin')} + + ) : ( + <> + + {i18n.t('are_you_sure')} + + + {i18n.t('yes')} + + + {i18n.t('no')} + + + )} +
  • + )} + + )} + {/* Site Creator can transfer to another admin */} + {this.amSiteCreator && this.isAdmin && (
  • - {!this.state.showConfirmTransferCommunity ? ( + {!this.state.showConfirmTransferSite ? ( - {i18n.t('transfer_community')} + {i18n.t('transfer_site')} ) : ( <> @@ -535,7 +665,7 @@ export class CommentNode extends Component { class="pointer d-inline-block mr-1" onClick={linkEvent( this, - this.handleTransferCommunity + this.handleTransferSite )} > {i18n.t('yes')} @@ -544,8 +674,7 @@ export class CommentNode extends Component { class="pointer d-inline-block" onClick={linkEvent( this, - this - .handleCancelShowConfirmTransferCommunity + this.handleCancelShowConfirmTransferSite )} > {i18n.t('no')} @@ -554,124 +683,14 @@ export class CommentNode extends Component { )}
  • )} - {/* Admins can ban from all, and appoint other admins */} - {this.canAdmin && ( - <> - {!this.isAdmin && ( -
  • - {!node.comment.banned ? ( - - {i18n.t('ban_from_site')} - - ) : ( - - {i18n.t('unban_from_site')} - - )} -
  • - )} - {!node.comment.banned && ( -
  • - {!this.state.showConfirmAppointAsAdmin ? ( - - {this.isAdmin - ? i18n.t('remove_as_admin') - : i18n.t('appoint_as_admin')} - - ) : ( - <> - - {i18n.t('are_you_sure')} - - - {i18n.t('yes')} - - - {i18n.t('no')} - - - )} -
  • - )} - - )} - {/* Site Creator can transfer to another admin */} - {this.amSiteCreator && this.isAdmin && ( -
  • - {!this.state.showConfirmTransferSite ? ( - - {i18n.t('transfer_site')} - - ) : ( - <> - - {i18n.t('are_you_sure')} - - - {i18n.t('yes')} - - - {i18n.t('no')} - - - )} -
  • - )} - - )} - - )} -
-
- )} + + )} + + )} + +
+ )} +
{this.state.showRemoveDialog && (