X-Git-Url: http://these/git/?a=blobdiff_plain;f=src%2Fshared%2Fcomponents%2Fpost%2Fpost-listing.tsx;h=922fa61efbb72c23508d7e3f80168ecd02dd0365;hb=02ffa85b589ea630b259f6c2617b399e05972716;hp=a95599b258e74c5fd480ce1fa418d28a0078662c;hpb=f8fd90cc2edc77af4dc6d463da8adb499a77b971;p=lemmy-ui.git

diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx
index a95599b..922fa61 100644
--- a/src/shared/components/post/post-listing.tsx
+++ b/src/shared/components/post/post-listing.tsx
@@ -201,7 +201,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post = this.postView.post;
 
     return (
-      <div className="post-listing">
+      <div className="post-listing mt-2">
         {!this.state.showEdit ? (
           <>
             {this.listing()}
@@ -386,10 +386,10 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
             </span>
           )}
           {this.props.showCommunity && (
-            <span>
-              <span className="mx-1"> {i18n.t("to")} </span>
-              <CommunityLink community={post_view.community} />
-            </span>
+            <>
+              {" "}
+              {i18n.t("to")} <CommunityLink community={post_view.community} />
+            </>
           )}
         </li>
         {post_view.post.language_id !== 0 && (
@@ -497,7 +497,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post = this.postView.post;
     return (
       <Link
-        className={`d-inline-block ${
+        className={`d-inline ${
           !post.featured_community && !post.featured_local
             ? "text-body"
             : "text-primary"
@@ -505,8 +505,8 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
         to={`/post/${post.id}`}
         title={i18n.t("comments")}
       >
-        <div
-          className="d-inline-block"
+        <span
+          className="d-inline"
           dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
         />
       </Link>
@@ -519,88 +519,78 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
 
     return (
       <div className="post-title overflow-hidden">
-        <h5>
-          {url ? (
-            this.props.showBody ? (
-              <a
-                className={`d-inline-block ${
-                  !post.featured_community && !post.featured_local
-                    ? "text-body"
-                    : "text-primary"
-                }`}
-                href={url}
-                title={url}
-                rel={relTags}
-              >
-                <div
-                  className="d-inline-block"
-                  dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
-                />
-              </a>
-            ) : (
-              this.postLink
-            )
+        <h5 className="d-inline">
+          {url && this.props.showBody ? (
+            <a
+              className={
+                !post.featured_community && !post.featured_local
+                  ? "text-body"
+                  : "text-primary"
+              }
+              href={url}
+              title={url}
+              rel={relTags}
+              dangerouslySetInnerHTML={mdToHtmlInline(post.name)}
+            ></a>
           ) : (
             this.postLink
           )}
-          {(url && isImage(url)) ||
-            (post.thumbnail_url && (
-              <button
-                className="btn btn-link text-monospace text-muted small d-inline-block"
-                data-tippy-content={i18n.t("expand_here")}
-                onClick={linkEvent(this, this.handleImageExpandClick)}
-              >
-                <Icon
-                  icon={
-                    !this.state.imageExpanded ? "plus-square" : "minus-square"
-                  }
-                  classes="icon-inline"
-                />
-              </button>
-            ))}
-          {post.removed && (
-            <small className="ml-2 text-muted font-italic">
-              {i18n.t("removed")}
-            </small>
-          )}
-          {post.deleted && (
-            <small
-              className="unselectable pointer ml-2 text-muted font-italic"
-              data-tippy-content={i18n.t("deleted")}
-            >
-              <Icon icon="trash" classes="icon-inline text-danger" />
-            </small>
-          )}
-          {post.locked && (
-            <small
-              className="unselectable pointer ml-2 text-muted font-italic"
-              data-tippy-content={i18n.t("locked")}
-            >
-              <Icon icon="lock" classes="icon-inline text-danger" />
-            </small>
-          )}
-          {post.featured_community && (
-            <small
-              className="unselectable pointer ml-2 text-muted font-italic"
-              data-tippy-content={i18n.t("featured")}
-            >
-              <Icon icon="pin" classes="icon-inline text-primary" />
-            </small>
-          )}
-          {post.featured_local && (
-            <small
-              className="unselectable pointer ml-2 text-muted font-italic"
-              data-tippy-content={i18n.t("featured")}
-            >
-              <Icon icon="pin" classes="icon-inline text-secondary" />
-            </small>
-          )}
-          {post.nsfw && (
-            <small className="ml-2 text-muted font-italic">
-              {i18n.t("nsfw")}
-            </small>
-          )}
         </h5>
+        {(url && isImage(url)) ||
+          (post.thumbnail_url && (
+            <button
+              className="btn btn-link text-monospace text-muted small d-inline-block"
+              data-tippy-content={i18n.t("expand_here")}
+              onClick={linkEvent(this, this.handleImageExpandClick)}
+            >
+              <Icon
+                icon={
+                  !this.state.imageExpanded ? "plus-square" : "minus-square"
+                }
+                classes="icon-inline"
+              />
+            </button>
+          ))}
+        {post.removed && (
+          <small className="ml-2 badge text-bg-secondary">
+            {i18n.t("removed")}
+          </small>
+        )}
+        {post.deleted && (
+          <small
+            className="unselectable pointer ml-2 text-muted font-italic"
+            data-tippy-content={i18n.t("deleted")}
+          >
+            <Icon icon="trash" classes="icon-inline text-danger" />
+          </small>
+        )}
+        {post.locked && (
+          <small
+            className="unselectable pointer ml-2 text-muted font-italic"
+            data-tippy-content={i18n.t("locked")}
+          >
+            <Icon icon="lock" classes="icon-inline text-danger" />
+          </small>
+        )}
+        {post.featured_community && (
+          <small
+            className="unselectable pointer ml-2 text-muted font-italic"
+            data-tippy-content={i18n.t("featured")}
+          >
+            <Icon icon="pin" classes="icon-inline text-primary" />
+          </small>
+        )}
+        {post.featured_local && (
+          <small
+            className="unselectable pointer ml-2 text-muted font-italic"
+            data-tippy-content={i18n.t("featured")}
+          >
+            <Icon icon="pin" classes="icon-inline text-secondary" />
+          </small>
+        )}
+        {post.nsfw && (
+          <small className="ml-2 badge text-bg-danger">{i18n.t("nsfw")}</small>
+        )}
       </div>
     );
   }
@@ -631,11 +621,11 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post = this.postView.post;
 
     return (
-      <div className="d-flex align-items-center justify-content-start flex-wrap text-muted font-weight-bold mb-1">
+      <div className="d-flex align-items-center justify-content-start flex-wrap text-muted font-weight-bold">
         {this.commentsButton}
         {canShare() && (
           <button
-            className="btn btn-link"
+            className="btn btn-sm btn-link"
             onClick={linkEvent(this, this.handleShare)}
             type="button"
           >
@@ -654,12 +644,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;
@@ -667,37 +668,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}
-            {/* Any mod can do these, not limited to hierarchy*/}
-            {(amMod(this.props.moderators) || amAdmin()) && (
-              <>
-                {this.lockButton}
-                {this.featureButton}
-              </>
-            )}
-            {(this.canMod_ || this.canAdmin_) && <>{this.modRemoveButton}</>}
-          </>
+
+        {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()) && (
+                <>
+                  <li>
+                    <hr className="dropdown-divider" />
+                  </li>
+                  <li>{this.lockButton}</li>
+                  {this.featureButtons}
+                </>
+              )}
+
+              {(this.canMod_ || this.canAdmin_) && (
+                <li>{this.modRemoveButton}</li>
+              )}
+            </ul>
+          </div>
         )}
-        {!mobile && this.showMoreButton}
       </>
     );
   }
@@ -706,7 +723,7 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
     const post_view = this.postView;
     return (
       <Link
-        className="btn btn-link text-muted py-0 pl-0 text-muted"
+        className="btn btn-link text-muted pl-0 text-muted"
         title={i18n.t("number_of_comments", {
           count: Number(post_view.counts.comments),
           formattedCount: Number(post_view.counts.comments),
@@ -846,12 +863,12 @@ 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")}
       >
-        <Icon icon="flag" inline />
+        <Icon classes="mr-1" icon="flag" inline />
+        {i18n.t("create_report")}
       </button>
     );
   }
@@ -859,12 +876,16 @@ 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")}
       >
-        {this.state.blockLoading ? <Spinner /> : <Icon icon="slash" inline />}
+        {this.state.blockLoading ? (
+          <Spinner />
+        ) : (
+          <Icon classes="mr-1" icon="slash" inline />
+        )}
+        {i18n.t("block_user")}
       </button>
     );
   }
@@ -872,12 +893,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>
     );
   }
@@ -887,37 +908,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 })}
-            inline
-          />
+          <>
+            <Icon
+              icon="trash"
+              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
@@ -940,25 +950,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 })}
-            inline
-          />
+          <>
+            <Icon
+              icon="lock"
+              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")
@@ -969,48 +981,56 @@ export class PostListing extends Component<PostListingProps, PostListingState> {
       ? i18n.t("unfeature_from_local")
       : i18n.t("feature_in_local");
     return (
-      <span>
-        <button
-          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() && (
+      <>
+        <li>
           <button
-            className="btn btn-link btn-animate text-muted py-0"
-            onClick={linkEvent(this, this.handleModFeaturePostLocal)}
-            data-tippy-content={labelLocal}
-            aria-label={labelLocal}
+            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}
           >
-            {this.state.featureLocalLoading ? (
+            {this.state.featureCommunityLoading ? (
               <Spinner />
             ) : (
-              <span>
+              <>
                 <Icon
                   icon="pin"
-                  classes={classNames({ "text-success": featuredLocal })}
+                  classes={classNames("mr-1", {
+                    "text-success": featuredCommunity,
+                  })}
                   inline
                 />
-                {i18n.t("local")}
-              </span>
+                {i18n.t("community")}
+              </>
             )}
           </button>
-        )}
-      </span>
+        </li>
+        <li>
+          {amAdmin() && (
+            <button
+              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}
+            >
+              {this.state.featureLocalLoading ? (
+                <Spinner />
+              ) : (
+                <>
+                  <Icon
+                    icon="pin"
+                    classes={classNames("mr-1", {
+                      "text-success": featuredLocal,
+                    })}
+                    inline
+                  />
+                  {i18n.t("local")}
+                </>
+              )}
+            </button>
+          )}
+        </li>
+      </>
     );
   }
 
@@ -1018,7 +1038,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