From ec1d3726eda1fcfcc8fa08706c1bb42409e60974 Mon Sep 17 00:00:00 2001 From: Jay Sitter Date: Sat, 17 Jun 2023 13:08:56 -0400 Subject: [PATCH 01/12] fix(a11y): Add aria-label to fetaured pins --- src/shared/components/post/post-listing.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index b9d41250..36d96a96 100644 --- a/src/shared/components/post/post-listing.tsx +++ b/src/shared/components/post/post-listing.tsx @@ -582,7 +582,8 @@ export class PostListing extends Component { {post.featured_community && ( @@ -590,7 +591,8 @@ export class PostListing extends Component { {post.featured_local && ( From 7c264916a3f5ac329d4003abc5ce7068f0fd05ba Mon Sep 17 00:00:00 2001 From: Jay Sitter Date: Sat, 17 Jun 2023 18:03:12 -0400 Subject: [PATCH 03/12] feat: Move advanced post menu into dropdown --- src/shared/components/post/post-listing.tsx | 214 +++++++++++--------- 1 file changed, 121 insertions(+), 93 deletions(-) diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index 36d96a96..99bec629 100644 --- a/src/shared/components/post/post-listing.tsx +++ b/src/shared/components/post/post-listing.tsx @@ -661,6 +661,17 @@ export class PostListing extends Component { ); } + get hasAdvancedButtons() { + return ( + this.myPost || + (this.showBody && this.postView.post.body) || + amMod(this.props.moderators) || + amAdmin() || + this.canMod_ || + this.canAdmin_ + ); + } + postActions(mobile = false) { // Possible enhancement: Priority+ pattern instead of just hard coding which get hidden behind the show more button. // Possible enhancement: Make each button a component. @@ -669,37 +680,52 @@ export class PostListing extends Component { <> {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.showBody && post_view.post.body && this.viewSourceButton} + + {this.hasAdvancedButtons && ( +
+ + +
    + {!this.myPost ? ( + <> +
  • {this.reportButton}
    • +
  • {this.blockButton}
    • + + ) : ( + <> +
  • {this.editButton}
    • +
  • {this.deleteButton}
    • + + )} + + {/* Any mod can do these, not limited to hierarchy*/} + {(amMod(this.props.moderators) || amAdmin()) && ( + <> +
  • +
    +
    • +
  • {this.lockButton}
    • + {this.featureButtons} + + )} + + {(this.canMod_ || this.canAdmin_) && ( +
  • {this.modRemoveButton}
    • + )} +
+
)} - {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} ); } @@ -848,7 +874,7 @@ export class PostListing extends Component { get reportButton() { return ( ); } @@ -889,7 +916,7 @@ export class PostListing extends Component { const label = !deleted ? i18n.t("delete") : i18n.t("restore"); return ( ); } - get showMoreButton() { - return ( - - ); - } - get viewSourceButton() { return ( ); } - get featureButton() { + get featureButtons() { const featuredCommunity = this.postView.post.featured_community; const labelCommunity = featuredCommunity ? i18n.t("unfeature_from_community") @@ -971,48 +991,56 @@ export class PostListing extends Component { ? i18n.t("unfeature_from_local") : i18n.t("feature_in_local"); return ( - - - {amAdmin() && ( + <> +
  • - )} - +
    • +
  • + {amAdmin() && ( + + )} +
    • + ); } @@ -1020,7 +1048,7 @@ export class PostListing extends Component { const removed = this.postView.post.removed; return ( @@ -961,7 +959,6 @@ export class PostListing extends Component { From fb2c9f74916cd61cc738c92c15b29f15ecf106f8 Mon Sep 17 00:00:00 2001 From: Jay Sitter Date: Sat, 17 Jun 2023 19:10:53 -0400 Subject: [PATCH 07/12] fix(a11y): Add aria-controls for advanced button dropdown --- src/shared/components/post/post-listing.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index 1ba9bb1c..afe7f89b 100644 --- a/src/shared/components/post/post-listing.tsx +++ b/src/shared/components/post/post-listing.tsx @@ -691,12 +691,13 @@ export class PostListing extends Component { data-tippy-content={i18n.t("more")} data-bs-toggle="dropdown" aria-expanded="false" + aria-controls="advancedButtonsDropdown" aria-label={i18n.t("more")} > -
      +
        {!this.myPost ? ( <>
      • {this.reportButton}
        • From b4c83b214b3ca1a5f0f9930d469f6b6602f54c5d Mon Sep 17 00:00:00 2001 From: Jay Sitter Date: Sat, 17 Jun 2023 21:02:58 -0400 Subject: [PATCH 08/12] fix: Fix vertical alignment and border radius of advanced dropdown menu items --- src/shared/components/post/post-listing.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index afe7f89b..319c8b50 100644 --- a/src/shared/components/post/post-listing.tsx +++ b/src/shared/components/post/post-listing.tsx @@ -875,7 +875,7 @@ export class PostListing extends Component { get reportButton() { return ( - ))} - {post.removed && ( - - {i18n.t("removed")} - - )} - {post.deleted && ( - - - - )} - {post.locked && ( - - - - )} - {post.featured_community && ( - - - - )} - {post.featured_local && ( - - - - )} - {post.nsfw && ( - - {i18n.t("nsfw")} - - )} + {(url && isImage(url)) || + (post.thumbnail_url && ( + + ))} + {post.removed && ( + + {i18n.t("removed")} + + )} + {post.deleted && ( + + + + )} + {post.locked && ( + + + + )} + {post.featured_community && ( + + + + )} + {post.featured_local && ( + + + + )} + {post.nsfw && ( + + {i18n.t("nsfw")} + + )} ); } From 3e0ad0d56de0f9ef528c502e8c1427247a637a96 Mon Sep 17 00:00:00 2001 From: Jay Sitter Date: Sun, 18 Jun 2023 00:41:47 -0400 Subject: [PATCH 12/12] fix: Fix display inline of post title --- src/shared/components/post/post-listing.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/shared/components/post/post-listing.tsx b/src/shared/components/post/post-listing.tsx index 1120de1c..222e4857 100644 --- a/src/shared/components/post/post-listing.tsx +++ b/src/shared/components/post/post-listing.tsx @@ -497,7 +497,7 @@ export class PostListing extends Component { const post = this.postView.post; return ( { to={`/post/${post.id}`} title={i18n.t("comments")} > -