Merge pull request #1362 from jsit/feat/move-advanced-post-menu-into-dropdown

feat: Move advanced post menu into dropdown

src/shared/components/post/post-listing.tsx

@@ -646,12 +646,23 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         {mobile && !this.props.viewOnly && this.mobileVotes}
         {UserService.Instance.myUserInfo &&
           !this.props.viewOnly &&
-          this.postActions(mobile)}
+          this.postActions()}
       </div>
     );
   }
 
-  postActions(mobile = false) {
+  get hasAdvancedButtons() {
+    return (
+      this.myPost ||
+      (this.showBody && this.postView.post.body) ||
+      amMod(this.props.moderators) ||
+      amAdmin() ||
+      this.canMod_ ||
+      this.canAdmin_
+    );
+  }
+
+  postActions() {
     // Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button.
     // Possible enhancement: Make each button a component.
     const post_view = this.postView;
@@ -659,37 +670,53 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       <>
         {this.saveButton}
         {this.crossPostButton}
-        {mobile && this.showMoreButton}
+
-        {(!mobile || this.state.showAdvanced) && (
-          <>
-            {!this.myPost && (
-              <>
-                {this.reportButton}
-                {this.blockButton}
-              </>
-            )}
-            {this.myPost && (this.showBody || this.state.showAdvanced) && (
-              <>
-                {this.editButton}
-                {this.deleteButton}
-              </>
-            )}
-          </>
-        )}
-        {this.state.showAdvanced && (
-          <>
         {this.showBody && post_view.post.body && this.viewSourceButton}
+
+        {this.hasAdvancedButtons && (
+          <div className="dropdown">
+            <button
+              className="btn btn-link btn-animate text-muted py-0 dropdown-toggle"
+              onClick={linkEvent(this, this.handleShowAdvanced)}
+              data-tippy-content={i18n.t("more")}
+              data-bs-toggle="dropdown"
+              aria-expanded="false"
+              aria-controls="advancedButtonsDropdown"
+              aria-label={i18n.t("more")}
+            >
+              <Icon icon="more-vertical" inline />
+            </button>
+
+            <ul className="dropdown-menu" id="advancedButtonsDropdown">
+              {!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()) && (
                 <>
-                {this.lockButton}
+                  <li>
-                {this.featureButton}
+                    <hr className="dropdown-divider" />
+                  </li>
+                  <li>{this.lockButton}</li>
+                  {this.featureButtons}
                 </>
               )}
-            {(this.canMod_ || this.canAdmin_) && <>{this.modRemoveButton}</>}
+
-          </>
+              {(this.canMod_ || this.canAdmin_) && (
+                <li>{this.modRemoveButton}</li>
+              )}
+            </ul>
+          </div>
         )}
-        {!mobile && this.showMoreButton}
       </>
     );
   }
@@ -838,7 +865,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get reportButton() {
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(this, this.handleShowReportDialog)}
         data-tippy-content={i18n.t("show_report_dialog")}
         aria-label={i18n.t("show_report_dialog")}
@@ -851,7 +878,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get blockButton() {
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(this, this.handleBlockPersonClick)}
         data-tippy-content={i18n.t("block_user")}
         aria-label={i18n.t("block_user")}
@@ -864,12 +891,12 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
   get editButton() {
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(this, this.handleEditClick)}
-        data-tippy-content={i18n.t("edit")}
         aria-label={i18n.t("edit")}
       >
-        <Icon icon="edit" inline />
+        <Icon classes="mr-1" icon="edit" inline />
+        {i18n.t("edit")}
       </button>
     );
   }
@@ -879,37 +906,26 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const label = !deleted ? i18n.t("delete") : i18n.t("restore");
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(this, this.handleDeleteClick)}
-        data-tippy-content={label}
         aria-label={label}
       >
         {this.state.deleteLoading ? (
           <Spinner />
         ) : (
+          <>
             <Icon
               icon="trash"
-            classes={classNames({ "text-danger": deleted })}
+              classes={classNames("mr-1", { "text-danger": deleted })}
               inline
             />
+            {label}
+          </>
         )}
       </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() {
     return (
       <button
@@ -932,25 +948,27 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const label = locked ? i18n.t("unlock") : i18n.t("lock");
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(this, this.handleModLock)}
-        data-tippy-content={label}
         aria-label={label}
       >
         {this.state.lockLoading ? (
           <Spinner />
         ) : (
+          <>
             <Icon
               icon="lock"
-            classes={classNames({ "text-danger": locked })}
+              classes={classNames("mr-1", { "text-danger": locked })}
               inline
             />
+            {label}
+          </>
         )}
       </button>
     );
   }
 
-  get featureButton() {
+  get featureButtons() {
     const featuredCommunity = this.postView.post.featured_community;
     const labelCommunity = featuredCommunity
       ? i18n.t("unfeature_from_community")
@@ -961,9 +979,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       ? i18n.t("unfeature_from_local")
       : i18n.t("feature_in_local");
     return (
-      <span>
+      <>
+        <li>
           <button
-          className="btn btn-link btn-animate text-muted py-0 pl-0"
+            className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
             onClick={linkEvent(this, this.handleModFeaturePostCommunity)}
             data-tippy-content={labelCommunity}
             aria-label={labelCommunity}
@@ -971,19 +990,23 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             {this.state.featureCommunityLoading ? (
               <Spinner />
             ) : (
-            <span>
+              <>
                 <Icon
                   icon="pin"
-                classes={classNames({ "text-success": featuredCommunity })}
+                  classes={classNames("mr-1", {
+                    "text-success": featuredCommunity,
+                  })}
                   inline
                 />
                 {i18n.t("community")}
-            </span>
+              </>
             )}
           </button>
+        </li>
+        <li>
           {amAdmin() && (
             <button
-            className="btn btn-link btn-animate text-muted py-0"
+              className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
               onClick={linkEvent(this, this.handleModFeaturePostLocal)}
               data-tippy-content={labelLocal}
               aria-label={labelLocal}
@@ -991,18 +1014,21 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
               {this.state.featureLocalLoading ? (
                 <Spinner />
               ) : (
-              <span>
+                <>
                   <Icon
                     icon="pin"
-                  classes={classNames({ "text-success": featuredLocal })}
+                    classes={classNames("mr-1", {
+                      "text-success": featuredLocal,
+                    })}
                     inline
                   />
                   {i18n.t("local")}
-              </span>
+                </>
               )}
             </button>
           )}
-      </span>
+        </li>
+      </>
     );
   }
 
@@ -1010,7 +1036,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const removed = this.postView.post.removed;
     return (
       <button
-        className="btn btn-link btn-animate text-muted py-0"
+        className="btn btn-link btn-sm d-flex align-items-center rounded-0 dropdown-item"
         onClick={linkEvent(
           this,
           !removed ? this.handleModRemoveShow : this.handleModRemoveSubmit