diff --git a/ui/src/components/comment-node.tsx b/ui/src/components/comment-node.tsx index 7dbaafdc2..a4e398f10 100644 --- a/ui/src/components/comment-node.tsx +++ b/ui/src/components/comment-node.tsx @@ -22,6 +22,7 @@ interface CommentNodeState { showConfirmTransferSite: boolean; showConfirmTransferCommunity: boolean; collapsed: boolean; + viewSource: boolean; } interface CommentNodeProps { @@ -46,6 +47,7 @@ export class CommentNode extends Component { banExpires: null, banType: BanType.Community, collapsed: false, + viewSource: false, showConfirmTransferSite: false, showConfirmTransferCommunity: false, } @@ -106,7 +108,9 @@ export class CommentNode extends Component { {this.state.showEdit && } {!this.state.showEdit && !this.state.collapsed &&
-
+ {this.state.viewSource ?
{this.commentUnlessRemoved}
: +
+ }
    {UserService.Instance.user && !this.props.viewOnly && <> @@ -201,6 +205,9 @@ export class CommentNode extends Component { } } +
  • + # +
  • #
  • @@ -297,6 +304,11 @@ export class CommentNode extends Component { (this.props.node.comment.creator_id != UserService.Instance.user.id) && (UserService.Instance.user.id == this.props.admins[0].id); } + + get commentUnlessRemoved(): string { + let node = this.props.node; + return node.comment.removed ? `*${i18n.t('removed')}*` : node.comment.deleted ? `*${i18n.t('deleted')}*` : node.comment.content; + } handleReplyClick(i: CommentNode) { i.state.showReply = true; @@ -527,4 +539,9 @@ export class CommentNode extends Component { i.state.collapsed = !i.state.collapsed; i.setState(i.state); } + + handleViewSource(i: CommentNode) { + i.state.viewSource = !i.state.viewSource; + i.setState(i.state); + } } diff --git a/ui/src/components/post-listing.tsx b/ui/src/components/post-listing.tsx index 5b83c74ee..8234cc8a6 100644 --- a/ui/src/components/post-listing.tsx +++ b/ui/src/components/post-listing.tsx @@ -19,6 +19,7 @@ interface PostListingState { showConfirmTransferSite: boolean; showConfirmTransferCommunity: boolean; imageExpanded: boolean; + viewSource: boolean; } interface PostListingProps { @@ -44,6 +45,7 @@ export class PostListing extends Component { showConfirmTransferSite: false, showConfirmTransferCommunity: false, imageExpanded: false, + viewSource: false, } constructor(props: any, context: any) { @@ -168,103 +170,110 @@ export class PostListing extends Component { #
- {UserService.Instance.user && this.props.editable && -
    -
  • - {post.saved ? i18n.t('unsave') : i18n.t('save')} -
  • -
  • - # -
  • - {this.myPost && - <> +
      + {UserService.Instance.user && this.props.editable && + <> +
    • + {post.saved ? i18n.t('unsave') : i18n.t('save')} +
    • +
    • + # +
    • + {this.myPost && + <> +
    • + # +
    • +
    • + + {!post.deleted ? i18n.t('delete') : i18n.t('restore')} + +
    • + + } + {this.canMod && + <> +
    • + {!post.removed ? + # : + # + } +
    • +
    • + {post.locked ? i18n.t('unlock') : i18n.t('lock')} +
    • + + } + {/* Mods can ban from community, and appoint as mods to community */} + {this.canMod && + <> + {!this.isMod && +
    • + {!post.banned_from_community ? + # : + # + } +
    • + } + {!post.banned_from_community && +
    • + {this.isMod ? i18n.t('remove_as_mod') : i18n.t('appoint_as_mod')} +
    • + } + + } + {/* Community creators and admins can transfer community to another mod */} + {(this.amCommunityCreator || this.canAdmin) && this.isMod &&
    • - # -
    • -
    • - - {!post.deleted ? i18n.t('delete') : i18n.t('restore')} - -
    • - - } - {this.canMod && - <> -
    • - {!post.removed ? - # : - # + {!this.state.showConfirmTransferCommunity ? + # + : <> + # + # + # + }
    • + } + {/* Admins can ban from all, and appoint other admins */} + {this.canAdmin && + <> + {!this.isAdmin && +
    • + {!post.banned ? + # : + # + } +
    • + } + {!post.banned && +
    • + {this.isAdmin ? i18n.t('remove_as_admin') : i18n.t('appoint_as_admin')} +
    • + } + + } + {/* Site Creator can transfer to another admin */} + {this.amSiteCreator && this.isAdmin &&
    • - {post.locked ? i18n.t('unlock') : i18n.t('lock')} + {!this.state.showConfirmTransferSite ? + # + : <> + # + # + # + + }
    • - - } - {/* Mods can ban from community, and appoint as mods to community */} - {this.canMod && - <> - {!this.isMod && -
    • - {!post.banned_from_community ? - # : - # - } -
    • - } - {!post.banned_from_community && -
    • - {this.isMod ? i18n.t('remove_as_mod') : i18n.t('appoint_as_mod')} -
    • - } - - } - {/* Community creators and admins can transfer community to another mod */} - {(this.amCommunityCreator || this.canAdmin) && this.isMod && -
    • - {!this.state.showConfirmTransferCommunity ? - # - : <> - # - # - # - - } -
    • - } - {/* Admins can ban from all, and appoint other admins */} - {this.canAdmin && - <> - {!this.isAdmin && -
    • - {!post.banned ? - # : - # - } -
    • - } - {!post.banned && -
    • - {this.isAdmin ? i18n.t('remove_as_admin') : i18n.t('appoint_as_admin')} -
    • - } - - } - {/* Site Creator can transfer to another admin */} - {this.amSiteCreator && this.isAdmin && -
    • - {!this.state.showConfirmTransferSite ? - # - : <> - # - # - # - - } -
    • - } -
    - } + } + + } + {this.props.showBody && post.body && +
  • + # +
  • + } +
{this.state.showRemoveDialog &&
@@ -287,7 +296,13 @@ export class PostListing extends Component {
} - {this.props.showBody && post.body &&
} + {this.props.showBody && post.body && + <> + {this.state.viewSource ?
{post.body}
: +
+ } + + }
) @@ -566,5 +581,10 @@ export class PostListing extends Component { i.state.imageExpanded = !i.state.imageExpanded; i.setState(i.state); } + + handleViewSource(i: PostListing) { + i.state.viewSource = !i.state.viewSource; + i.setState(i.state); + } } diff --git a/ui/src/translations/en.ts b/ui/src/translations/en.ts index 2d3523e96..f89a98793 100644 --- a/ui/src/translations/en.ts +++ b/ui/src/translations/en.ts @@ -29,6 +29,7 @@ export const en = { preview: 'Preview', upload_image: 'upload image', formatting_help: 'formatting help', + view_source: 'view source', unlock: 'unlock', lock: 'lock', link: 'link',