grishka/lemmy
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Add are you sure dialogs to mod actions.

Browse source 
- Fixes #386
This commit is contained in:
Dessalines 2020-01-01 22:09:07 -05:00
parent 081d8ddd12
commit f05b50020f
1 changed files with 154 additions and 69 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

223
ui/src/components/comment-node.tsx vendored
View file

@ -42,6 +42,8 @@ interface CommentNodeState {
banType: BanType; banType: BanType;
showConfirmTransferSite: boolean; showConfirmTransferSite: boolean;
showConfirmTransferCommunity: boolean; showConfirmTransferCommunity: boolean;
showConfirmAppointAsMod: boolean;
showConfirmAppointAsAdmin: boolean;
collapsed: boolean; collapsed: boolean;
viewSource: boolean; viewSource: boolean;
} }
@ -71,6 +73,8 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
viewSource: false, viewSource: false,
showConfirmTransferSite: false, showConfirmTransferSite: false,
showConfirmTransferCommunity: false, showConfirmTransferCommunity: false,
showConfirmAppointAsMod: false,
showConfirmAppointAsAdmin: false,
}; };
constructor(props: any, context: any) { constructor(props: any, context: any) {
@ -206,6 +210,18 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
/> />
)} )}
<ul class="list-inline mb-1 text-muted small font-weight-bold"> <ul class="list-inline mb-1 text-muted small font-weight-bold">
{this.props.markable && (
<li className="list-inline-item">
<span
class="pointer"
onClick={linkEvent(this, this.handleMarkRead)}
>
{node.comment.read
? i18n.t('mark_as_unread')
: i18n.t('mark_as_read')}
</span>
</li>
)}
{UserService.Instance.user && !this.props.viewOnly && ( {UserService.Instance.user && !this.props.viewOnly && (
<> <>
<li className="list-inline-item"> <li className="list-inline-item">
@ -246,28 +262,51 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
</li> </li>
</> </>
)} )}
<li className="list-inline-item">•</li>
<li className="list-inline-item">
<span
className="pointer"
onClick={linkEvent(this, this.handleViewSource)}
>
<T i18nKey="view_source">#</T>
</span>
</li>
<li className="list-inline-item">
<Link
className="text-muted"
to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}
>
<T i18nKey="link">#</T>
</Link>
</li>
{/* Admins and mods can remove comments */} {/* Admins and mods can remove comments */}
{(this.canMod || this.canAdmin) && ( {(this.canMod || this.canAdmin) && (
<li className="list-inline-item"> <>
{!node.comment.removed ? ( <li className="list-inline-item">•</li>
<span <li className="list-inline-item">
class="pointer" {!node.comment.removed ? (
onClick={linkEvent(this, this.handleModRemoveShow)} <span
> class="pointer"
<T i18nKey="remove">#</T> onClick={linkEvent(
</span> this,
) : ( this.handleModRemoveShow
<span )}
class="pointer" >
onClick={linkEvent( <T i18nKey="remove">#</T>
this, </span>
this.handleModRemoveSubmit ) : (
)} <span
> class="pointer"
<T i18nKey="restore">#</T> onClick={linkEvent(
</span> this,
)} this.handleModRemoveSubmit
</li> )}
>
<T i18nKey="restore">#</T>
</span>
)}
</li>
</>
)} )}
{/* Mods can ban from community, and appoint as mods to community */} {/* Mods can ban from community, and appoint as mods to community */}
{this.canMod && ( {this.canMod && (
@ -299,17 +338,43 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
)} )}
{!node.comment.banned_from_community && ( {!node.comment.banned_from_community && (
<li className="list-inline-item"> <li className="list-inline-item">
<span {!this.state.showConfirmAppointAsMod ? (
class="pointer" <span
onClick={linkEvent( class="pointer"
this, onClick={linkEvent(
this.handleAddModToCommunity this,
)} this.handleShowConfirmAppointAsMod
> )}
{this.isMod >
? i18n.t('remove_as_mod') {this.isMod
: i18n.t('appoint_as_mod')} ? i18n.t('remove_as_mod')
</span> : i18n.t('appoint_as_mod')}
</span>
) : (
<>
<span class="d-inline-block mr-1">
<T i18nKey="are_you_sure">#</T>
</span>
<span
class="pointer d-inline-block mr-1"
onClick={linkEvent(
this,
this.handleAddModToCommunity
)}
>
<T i18nKey="yes">#</T>
</span>
<span
class="pointer d-inline-block"
onClick={linkEvent(
this,
this.handleCancelConfirmAppointAsMod
)}
>
<T i18nKey="no">#</T>
</span>
</>
)}
</li> </li>
)} )}
</> </>
@ -381,14 +446,40 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
)} )}
{!node.comment.banned && ( {!node.comment.banned && (
<li className="list-inline-item"> <li className="list-inline-item">
<span {!this.state.showConfirmAppointAsAdmin ? (
class="pointer" <span
onClick={linkEvent(this, this.handleAddAdmin)} class="pointer"
> onClick={linkEvent(
{this.isAdmin this,
? i18n.t('remove_as_admin') this.handleShowConfirmAppointAsAdmin
: i18n.t('appoint_as_admin')} )}
</span> >
{this.isAdmin
? i18n.t('remove_as_admin')
: i18n.t('appoint_as_admin')}
</span>
) : (
<>
<span class="d-inline-block mr-1">
<T i18nKey="are_you_sure">#</T>
</span>
<span
class="pointer d-inline-block mr-1"
onClick={linkEvent(this, this.handleAddAdmin)}
>
<T i18nKey="yes">#</T>
</span>
<span
class="pointer d-inline-block"
onClick={linkEvent(
this,
this.handleCancelConfirmAppointAsAdmin
)}
>
<T i18nKey="no">#</T>
</span>
</>
)}
</li> </li>
)} )}
</> </>
@ -432,34 +523,6 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
)} )}
</> </>
)} )}
<li className="list-inline-item">
<span
className="pointer"
onClick={linkEvent(this, this.handleViewSource)}
>
<T i18nKey="view_source">#</T>
</span>
</li>
<li className="list-inline-item">
<Link
className="text-muted"
to={`/post/${node.comment.post_id}/comment/${node.comment.id}`}
>
<T i18nKey="link">#</T>
</Link>
</li>
{this.props.markable && (
<li className="list-inline-item">
<span
class="pointer"
onClick={linkEvent(this, this.handleMarkRead)}
>
{node.comment.read
? i18n.t('mark_as_unread')
: i18n.t('mark_as_read')}
</span>
</li>
)}
</ul> </ul>
</div> </div>
)} )}
@ -725,13 +788,13 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
} }
handleModBanFromCommunityShow(i: CommentNode) { handleModBanFromCommunityShow(i: CommentNode) {
i.state.showBanDialog = true; i.state.showBanDialog = !i.state.showBanDialog;
i.state.banType = BanType.Community; i.state.banType = BanType.Community;
i.setState(i.state); i.setState(i.state);
} }
handleModBanShow(i: CommentNode) { handleModBanShow(i: CommentNode) {
i.state.showBanDialog = true; i.state.showBanDialog = !i.state.showBanDialog;
i.state.banType = BanType.Site; i.state.banType = BanType.Site;
i.setState(i.state); i.setState(i.state);
} }
@ -784,6 +847,16 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
i.setState(i.state); i.setState(i.state);
} }
handleShowConfirmAppointAsMod(i: CommentNode) {
i.state.showConfirmAppointAsMod = true;
i.setState(i.state);
}
handleCancelConfirmAppointAsMod(i: CommentNode) {
i.state.showConfirmAppointAsMod = false;
i.setState(i.state);
}
handleAddModToCommunity(i: CommentNode) { handleAddModToCommunity(i: CommentNode) {
let form: AddModToCommunityForm = { let form: AddModToCommunityForm = {
user_id: i.props.node.comment.creator_id, user_id: i.props.node.comment.creator_id,
@ -791,6 +864,17 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
added: !i.isMod, added: !i.isMod,
}; };
WebSocketService.Instance.addModToCommunity(form); WebSocketService.Instance.addModToCommunity(form);
i.state.showConfirmAppointAsMod = false;
i.setState(i.state);
}
handleShowConfirmAppointAsAdmin(i: CommentNode) {
i.state.showConfirmAppointAsAdmin = true;
i.setState(i.state);
}
handleCancelConfirmAppointAsAdmin(i: CommentNode) {
i.state.showConfirmAppointAsAdmin = false;
i.setState(i.state); i.setState(i.state);
} }
@ -800,6 +884,7 @@ export class CommentNode extends Component<CommentNodeProps, CommentNodeState> {
added: !i.isAdmin, added: !i.isAdmin,
}; };
WebSocketService.Instance.addAdmin(form); WebSocketService.Instance.addAdmin(form);
i.state.showConfirmAppointAsAdmin = false;
i.setState(i.state); i.setState(i.state);
} }