feat: Move advanced post menu into dropdown

This commit is contained in:
Jay Sitter 2023-06-17 18:03:12 -04:00
parent b19df45969
commit 086b0c0cc9

View file

@ -659,6 +659,17 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
); );
} }
get hasAdvancedButtons() {
return (
this.myPost ||
(this.showBody && this.postView.post.body) ||
amMod(this.props.moderators) ||
amAdmin() ||
this.canMod_ ||
this.canAdmin_
);
}
postActions(mobile = false) { postActions(mobile = false) {
// Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button. // Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button.
// Possible enhancement: Make each button a component. // Possible enhancement: Make each button a component.
@ -667,37 +678,52 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
<> <>
{this.saveButton} {this.saveButton}
{this.crossPostButton} {this.crossPostButton}
{mobile && this.showMoreButton}
{(!mobile || this.state.showAdvanced) && ( {this.showBody && post_view.post.body && this.viewSourceButton}
<>
{!this.myPost && ( {this.hasAdvancedButtons && (
<> <div className="dropdown">
{this.reportButton} <button
{this.blockButton} className="btn btn-link btn-animate text-muted py-0 dropdown-toggle"
</> onClick={linkEvent(this, this.handleShowAdvanced)}
)} data-tippy-content={i18n.t("more")}
{this.myPost && (this.showBody || this.state.showAdvanced) && ( data-bs-toggle="dropdown"
<> aria-expanded="false"
{this.editButton} aria-label={i18n.t("more")}
{this.deleteButton} >
</> <Icon icon="more-vertical" inline />
)} </button>
</>
<ul className="dropdown-menu">
{!this.myPost ? (
<>
<li>{this.reportButton}</li>
<li>{this.blockButton}</li>
</>
) : (
<>
<li>{this.editButton}</li>
<li>{this.deleteButton}</li>
</>
)}
{/* Any mod can do these, not limited to hierarchy*/}
{(amMod(this.props.moderators) || amAdmin()) && (
<>
<li>
<hr className="dropdown-divider" />
</li>
<li>{this.lockButton}</li>
{this.featureButtons}
</>
)}
{(this.canMod_ || this.canAdmin_) && (
<li>{this.modRemoveButton}</li>
)}
</ul>
</div>
)} )}
{this.state.showAdvanced && (
<>
{this.showBody && post_view.post.body && this.viewSourceButton}
{/* Any mod can do these, not limited to hierarchy*/}
{(amMod(this.props.moderators) || amAdmin()) && (
<>
{this.lockButton}
{this.featureButton}
</>
)}
{(this.canMod_ || this.canAdmin_) && <>{this.modRemoveButton}</>}
</>
)}
{!mobile && this.showMoreButton}
</> </>
); );
} }
@ -846,7 +872,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
get reportButton() { get reportButton() {
return ( return (
<button <button
className="btn btn-link btn-animate text-muted py-0" className="btn btn-link btn-animate text-muted py-0 dropdown-item"
onClick={linkEvent(this, this.handleShowReportDialog)} onClick={linkEvent(this, this.handleShowReportDialog)}
data-tippy-content={i18n.t("show_report_dialog")} data-tippy-content={i18n.t("show_report_dialog")}
aria-label={i18n.t("show_report_dialog")} aria-label={i18n.t("show_report_dialog")}
@ -859,7 +885,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
get blockButton() { get blockButton() {
return ( return (
<button <button
className="btn btn-link btn-animate text-muted py-0" className="btn btn-link btn-animate text-muted py-0 dropdown-item"
onClick={linkEvent(this, this.handleBlockPersonClick)} onClick={linkEvent(this, this.handleBlockPersonClick)}
data-tippy-content={i18n.t("block_user")} data-tippy-content={i18n.t("block_user")}
aria-label={i18n.t("block_user")} aria-label={i18n.t("block_user")}
@ -872,12 +898,13 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
get editButton() { get editButton() {
return ( return (
<button <button
className="btn btn-link btn-animate text-muted py-0" className="btn btn-link text-muted dropdown-item"
onClick={linkEvent(this, this.handleEditClick)} onClick={linkEvent(this, this.handleEditClick)}
data-tippy-content={i18n.t("edit")} data-tippy-content={i18n.t("edit")}
aria-label={i18n.t("edit")} aria-label={i18n.t("edit")}
> >
<Icon icon="edit" inline /> <Icon classes="mr-1" icon="edit" inline />
{i18n.t("edit")}
</button> </button>
); );
} }
@ -887,7 +914,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
const label = !deleted ? i18n.t("delete") : i18n.t("restore"); const label = !deleted ? i18n.t("delete") : i18n.t("restore");
return ( return (
<button <button
className="btn btn-link btn-animate text-muted py-0" className="btn btn-link text-muted dropdown-item"
onClick={linkEvent(this, this.handleDeleteClick)} onClick={linkEvent(this, this.handleDeleteClick)}
data-tippy-content={label} data-tippy-content={label}
aria-label={label} aria-label={label}
@ -895,29 +922,19 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{this.state.deleteLoading ? ( {this.state.deleteLoading ? (
<Spinner /> <Spinner />
) : ( ) : (
<Icon <>
icon="trash" <Icon
classes={classNames({ "text-danger": deleted })} icon="trash"
inline classes={classNames("mr-1", { "text-danger": deleted })}
/> inline
/>
{i18n.t("delete")}
</>
)} )}
</button> </button>
); );
} }
get showMoreButton() {
return (
<button
className="btn btn-link btn-animate text-muted py-0"
onClick={linkEvent(this, this.handleShowAdvanced)}
data-tippy-content={i18n.t("more")}
aria-label={i18n.t("more")}
>
<Icon icon="more-vertical" inline />
</button>
);
}
get viewSourceButton() { get viewSourceButton() {
return ( return (
<button <button
@ -940,7 +957,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
const label = locked ? i18n.t("unlock") : i18n.t("lock"); const label = locked ? i18n.t("unlock") : i18n.t("lock");
return ( return (
<button <button
className="btn btn-link btn-animate text-muted py-0" className="btn btn-link text-muted dropdown-item"
onClick={linkEvent(this, this.handleModLock)} onClick={linkEvent(this, this.handleModLock)}
data-tippy-content={label} data-tippy-content={label}
aria-label={label} aria-label={label}
@ -948,17 +965,20 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
{this.state.lockLoading ? ( {this.state.lockLoading ? (
<Spinner /> <Spinner />
) : ( ) : (
<Icon <>
icon="lock" <Icon
classes={classNames({ "text-danger": locked })} icon="lock"
inline classes={classNames("mr-1", { "text-danger": locked })}
/> inline
/>
{i18n.t("lock")}
</>
)} )}
</button> </button>
); );
} }
get featureButton() { get featureButtons() {
const featuredCommunity = this.postView.post.featured_community; const featuredCommunity = this.postView.post.featured_community;
const labelCommunity = featuredCommunity const labelCommunity = featuredCommunity
? i18n.t("unfeature_from_community") ? i18n.t("unfeature_from_community")
@ -969,48 +989,56 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
? i18n.t("unfeature_from_local") ? i18n.t("unfeature_from_local")
: i18n.t("feature_in_local"); : i18n.t("feature_in_local");
return ( return (
<span> <>
<button <li>
className="btn btn-link btn-animate text-muted py-0 pl-0"
onClick={linkEvent(this, this.handleModFeaturePostCommunity)}
data-tippy-content={labelCommunity}
aria-label={labelCommunity}
>
{this.state.featureCommunityLoading ? (
<Spinner />
) : (
<span>
<Icon
icon="pin"
classes={classNames({ "text-success": featuredCommunity })}
inline
/>
{i18n.t("community")}
</span>
)}
</button>
{amAdmin() && (
<button <button
className="btn btn-link btn-animate text-muted py-0" className="btn btn-link text-muted dropdown-item"
onClick={linkEvent(this, this.handleModFeaturePostLocal)} onClick={linkEvent(this, this.handleModFeaturePostCommunity)}
data-tippy-content={labelLocal} data-tippy-content={labelCommunity}
aria-label={labelLocal} aria-label={labelCommunity}
> >
{this.state.featureLocalLoading ? ( {this.state.featureCommunityLoading ? (
<Spinner /> <Spinner />
) : ( ) : (
<span> <>
<Icon <Icon
icon="pin" icon="pin"
classes={classNames({ "text-success": featuredLocal })} classes={classNames("mr-1", {
"text-success": featuredCommunity,
})}
inline inline
/> />
{i18n.t("local")} {i18n.t("community")}
</span> </>
)} )}
</button> </button>
)} </li>
</span> <li>
{amAdmin() && (
<button
className="btn btn-link text-muted dropdown-item"
onClick={linkEvent(this, this.handleModFeaturePostLocal)}
data-tippy-content={labelLocal}
aria-label={labelLocal}
>
{this.state.featureLocalLoading ? (
<Spinner />
) : (
<>
<Icon
icon="pin"
classes={classNames("mr-1", {
"text-success": featuredLocal,
})}
inline
/>
{i18n.t("local")}
</>
)}
</button>
)}
</li>
</>
); );
} }
@ -1018,7 +1046,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
const removed = this.postView.post.removed; const removed = this.postView.post.removed;
return ( return (
<button <button
className="btn btn-link btn-animate text-muted py-0" className="btn btn-link text-muted dropdown-item"
onClick={linkEvent( onClick={linkEvent(
this, this,
!removed ? this.handleModRemoveShow : this.handleModRemoveSubmit !removed ? this.handleModRemoveShow : this.handleModRemoveSubmit