From 9616a08fa6eedfe8bc7d6056b69643b4a43a7dc3 Mon Sep 17 00:00:00 2001 From: chapoi <101828855+chapoi@users.noreply.github.com> Date: Fri, 2 Jun 2023 03:55:27 +0900 Subject: [PATCH] UX: Add show more btn to reviewable item (#21579) --- .../components/reviewable-flagged-post.hbs | 41 +++++++++------- .../app/components/reviewable-flagged-post.js | 40 +++++++++++++++- .../discourse/tests/acceptance/review-test.js | 4 +- .../stylesheets/common/base/reviewables.scss | 48 ++++++++++++++----- config/locales/client.en.yml | 2 + spec/fabricators/post_fabricator.rb | 17 +++++++ spec/system/page_objects/pages/review.rb | 30 ++++++++++++ spec/system/reviewables_spec.rb | 34 +++++++++++++ 8 files changed, 183 insertions(+), 33 deletions(-) create mode 100644 spec/system/page_objects/pages/review.rb create mode 100644 spec/system/reviewables_spec.rb diff --git a/app/assets/javascripts/discourse/app/components/reviewable-flagged-post.hbs b/app/assets/javascripts/discourse/app/components/reviewable-flagged-post.hbs index 763cd988b4d..0e9e7d2bb89 100644 --- a/app/assets/javascripts/discourse/app/components/reviewable-flagged-post.hbs +++ b/app/assets/javascripts/discourse/app/components/reviewable-flagged-post.hbs @@ -1,33 +1,40 @@
- - + +
- +
-
-
- {{#if this.reviewable.blank_post}} -

{{i18n "review.deleted_post"}}

- {{else}} - {{html-safe this.reviewable.cooked}} - {{/if}} -
+
+ {{#if @reviewable.blank_post}} +

{{i18n "review.deleted_post"}}

+ {{else}} + {{html-safe @reviewable.cooked}} + {{/if}}
+ + {{#if this.isLongPost}} + + {{/if}} {{yield}} diff --git a/app/assets/javascripts/discourse/app/components/reviewable-flagged-post.js b/app/assets/javascripts/discourse/app/components/reviewable-flagged-post.js index 87d5ddb040f..95e3668e14a 100644 --- a/app/assets/javascripts/discourse/app/components/reviewable-flagged-post.js +++ b/app/assets/javascripts/discourse/app/components/reviewable-flagged-post.js @@ -1,3 +1,39 @@ -import Component from "@ember/component"; +import Component from "@glimmer/component"; +import { action } from "@ember/object"; +import { tracked } from "@glimmer/tracking"; +import { bind } from "discourse-common/utils/decorators"; -export default Component.extend({}); +export default class ReviewableFlaggedPost extends Component { + @tracked isCollapsed = false; + @tracked isLongPost = false; + maxPostHeight = 300; + + @action + toggleContent() { + this.isCollapsed = !this.isCollapsed; + } + + @bind + calculatePostBodySize(element) { + if (element?.offsetHeight > this.maxPostHeight) { + this.isCollapsed = true; + this.isLongPost = true; + } else { + this.isCollapsed = false; + this.isLongPost = false; + } + } + + get collapseButtonProps() { + if (this.isCollapsed) { + return { + label: "review.show_more", + icon: "chevron-down", + }; + } + return { + label: "review.show_less", + icon: "chevron-up", + }; + } +} diff --git a/app/assets/javascripts/discourse/tests/acceptance/review-test.js b/app/assets/javascripts/discourse/tests/acceptance/review-test.js index 2f1d9f3dec9..55185b1b1fc 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/review-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/review-test.js @@ -113,9 +113,7 @@ acceptance("Review", function (needs) { ); assert.strictEqual( - query( - ".reviewable-flagged-post .post-body .post-body__scroll" - ).innerHTML.trim(), + query(".reviewable-flagged-post .post-body").innerHTML.trim(), "cooked content" ); diff --git a/app/assets/stylesheets/common/base/reviewables.scss b/app/assets/stylesheets/common/base/reviewables.scss index 849439360ef..7651faf5532 100644 --- a/app/assets/stylesheets/common/base/reviewables.scss +++ b/app/assets/stylesheets/common/base/reviewables.scss @@ -313,7 +313,7 @@ } .reviewable-scores { - margin-top: 1.5rem; + margin-top: 1rem; min-width: 50%; color: var(--primary-high); @@ -470,24 +470,50 @@ max-width: var(--topic-body-width); margin-top: 0.5em; - &__scroll { - max-height: 300px; - overflow-y: auto; + &.is-collapsed { + max-height: 50vh; + overflow: hidden; + &:after { content: ""; position: absolute; + left: 0; bottom: 0; + height: 25%; width: 100%; - height: 1.5em; - background: linear-gradient( - to bottom, - rgba(var(--secondary-rgb), 0), - rgba(var(--secondary-rgb), 100%) - ); + background: linear-gradient(to bottom, transparent, var(--secondary)); + } + + + .post-body__toggle-btn { + transform: translateX(-50%) translateY(-50%); + } + } + p { + margin-bottom: 0; + } + &__toggle-btn { + background: var(--primary-very-low); + color: var(--primary-high); + font-size: var(--font-down-2); + box-shadow: shadow("dropdown-lite"); + margin-left: 50%; + transform: translateX(-50%); + border-radius: 4px; + + .d-icon { + color: var(--primary-high); + } + + &:hover { + background: var(--primary-very-low); + color: var(--tertiary); + + .d-icon { + color: var(--tertiary); + } } } - p, aside { margin: 0 0 1em 0; } diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 225e87179d6..2fdcfa4cdc5 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -453,6 +453,8 @@ en: placeholder: "type the message title, url or id here" review: + show_more: "Show more" + show_less: "Show less" order_by: "Order by" date_filter: "Posted between" in_reply_to: "in reply to" diff --git a/spec/fabricators/post_fabricator.rb b/spec/fabricators/post_fabricator.rb index 07e8a734482..cbfbc1b35b3 100644 --- a/spec/fabricators/post_fabricator.rb +++ b/spec/fabricators/post_fabricator.rb @@ -16,6 +16,23 @@ Fabricator(:post_with_long_raw_content, from: :post) do than the typical test post raw content. It really is some long content, folks." end +Fabricator(:post_with_very_long_raw_content, from: :post) do + raw "This is a sample post with very long raw content. The raw content is actually so long + that there is no way it could be longer. It is adding so many characters to the post content + so that we can use it in testing for scenarios where a post is very long and might cause issues. + The post is so long in fact, that the text is split into various paragraphs. Some people are not + very concise in their words. They tend to ramble and ramble on about certain information. This + is why we need to make sure that we are going about testing in certain ways so that when people + such as those that ramble on, are making posts, we can be sure that the posts are not causing + any issues. When issues happen it can cause lots of problems. For example, if a post is too long, + it affects the way it can be viewed by others. + Depending on the screen size, it may cause a lot of scrolling to take place. This is not good. + In certain cases, we want to truncate the content of the post when its too long so that it does + not cause issues. This is why we need to make sure that we are testing for these scenarios. I think + this post has gotten very long, however, I would like to make sure that it is a bit longer, so I + will add one final sentence. This is my final sentence, thank you for reading, goodbye." +end + Fabricator(:post_with_youtube, from: :post) do raw "http://www.youtube.com/watch?v=9bZkp7q19f0" cooked '

http://www.youtube.com/watch?v=9bZkp7q19f0

' diff --git a/spec/system/page_objects/pages/review.rb b/spec/system/page_objects/pages/review.rb new file mode 100644 index 00000000000..4bd2e588320 --- /dev/null +++ b/spec/system/page_objects/pages/review.rb @@ -0,0 +1,30 @@ +# frozen_string_literal: true + +module PageObjects + module Pages + class Review < PageObjects::Pages::Base + POST_BODY_TOGGLE_SELECTOR = ".post-body__toggle-btn" + POST_BODY_COLLAPSED_SELECTOR = ".post-body.is-collapsed" + + def click_post_body_toggle + find(POST_BODY_TOGGLE_SELECTOR).click + end + + def has_post_body_toggle? + page.has_css?(POST_BODY_TOGGLE_SELECTOR) + end + + def has_no_post_body_toggle? + page.has_no_css?(POST_BODY_TOGGLE_SELECTOR) + end + + def has_post_body_collapsed? + page.has_css?(POST_BODY_COLLAPSED_SELECTOR) + end + + def has_no_post_body_collapsed? + page.has_no_css?(POST_BODY_COLLAPSED_SELECTOR) + end + end + end +end diff --git a/spec/system/reviewables_spec.rb b/spec/system/reviewables_spec.rb new file mode 100644 index 00000000000..6684aee0b59 --- /dev/null +++ b/spec/system/reviewables_spec.rb @@ -0,0 +1,34 @@ +# frozen_string_literal: true + +describe "Reviewables", type: :system, js: true do + let(:review_page) { PageObjects::Pages::Review.new } + fab!(:admin) { Fabricate(:admin) } + fab!(:theme) { Fabricate(:theme) } + fab!(:long_post) { Fabricate(:post_with_very_long_raw_content) } + + before { sign_in(admin) } + + describe "when there is a reviewable with a long post" do + fab!(:long_reviewable) { Fabricate(:reviewable_flagged_post, target: long_post) } + + it "should show a button to expand/collapse the post content" do + visit("/review") + expect(review_page).to have_post_body_collapsed + expect(review_page).to have_post_body_toggle + review_page.click_post_body_toggle + expect(review_page).to have_no_post_body_collapsed + review_page.click_post_body_toggle + expect(review_page).to have_post_body_collapsed + end + end + + describe "when there is a reviewable with a short post" do + fab!(:short_reviewable) { Fabricate(:reviewable_flagged_post) } + + it "should not show a button to expand/collapse the post content" do + visit("/review") + expect(review_page).to have_no_post_body_collapsed + expect(review_page).to have_no_post_body_toggle + end + end +end