From 001320c9f142bbb39ce23cd5a203b4687c101e17 Mon Sep 17 00:00:00 2001 From: Roman Rizzi Date: Thu, 3 Aug 2023 17:39:51 -0300 Subject: [PATCH] FIX: Display browse more message as long as there are suggested topics (#22967) --- .../discourse/app/components/more-topics.hbs | 8 +- .../discourse/app/components/more-topics.js | 112 ++++++++++++++++- .../app/components/suggested-topics.hbs | 4 - .../app/components/suggested-topics.js | 113 +----------------- .../acceptance/user-private-messages-test.js | 4 +- app/assets/stylesheets/common/base/topic.scss | 22 ++-- app/assets/stylesheets/desktop/topic.scss | 3 +- 7 files changed, 134 insertions(+), 132 deletions(-) diff --git a/app/assets/javascripts/discourse/app/components/more-topics.hbs b/app/assets/javascripts/discourse/app/components/more-topics.hbs index c3acb2d76ff..a7b4e22181d 100644 --- a/app/assets/javascripts/discourse/app/components/more-topics.hbs +++ b/app/assets/javascripts/discourse/app/components/more-topics.hbs @@ -36,4 +36,10 @@ {{/if}} - \ No newline at end of file + + +{{#if @topic.suggestedTopics.length}} +

+ {{html-safe this.browseMoreMessage}} +

+{{/if}} \ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/more-topics.js b/app/assets/javascripts/discourse/app/components/more-topics.js index 6d676bb59b4..8a99f16a764 100644 --- a/app/assets/javascripts/discourse/app/components/more-topics.js +++ b/app/assets/javascripts/discourse/app/components/more-topics.js @@ -1,12 +1,19 @@ import Component from "@glimmer/component"; import { inject as service } from "@ember/service"; import { next } from "@ember/runloop"; -import { action } from "@ember/object"; +import { action, computed } from "@ember/object"; import { tracked } from "@glimmer/tracking"; +import I18n from "I18n"; +import { categoryBadgeHTML } from "discourse/helpers/category-link"; +import getURL from "discourse-common/lib/get-url"; +import { iconHTML } from "discourse-common/lib/icon-library"; export default class MoreTopics extends Component { @service site; @service moreTopicsPreferenceTracking; + @service pmTopicTrackingState; + @service topicTrackingState; + @service currentUser; @tracked availablePills = []; @tracked singleList = false; @@ -62,4 +69,107 @@ export default class MoreTopics extends Component { this.availablePills = pills; }); } + + @computed( + "pmTopicTrackingState.isTracking", + "pmTopicTrackingState.statesModificationCounter", + "topicTrackingState.messageCount" + ) + get browseMoreMessage() { + return this.args.topic.isPrivateMessage + ? this._privateMessageBrowseMoreMessage() + : this._topicBrowseMoreMessage(); + } + + _privateMessageBrowseMoreMessage() { + const username = this.currentUser.username; + const suggestedGroupName = this.args.topic.suggested_group_name; + const inboxFilter = suggestedGroupName ? "group" : "user"; + + const unreadCount = this.pmTopicTrackingState.lookupCount("unread", { + inboxFilter, + groupName: suggestedGroupName, + }); + + const newCount = this.pmTopicTrackingState.lookupCount("new", { + inboxFilter, + groupName: suggestedGroupName, + }); + + if (unreadCount + newCount > 0) { + const hasBoth = unreadCount > 0 && newCount > 0; + + if (suggestedGroupName) { + return I18n.messageFormat("user.messages.read_more_group_pm_MF", { + HAS_UNREAD_AND_NEW: hasBoth, + UNREAD: unreadCount, + NEW: newCount, + username, + groupName: suggestedGroupName, + groupLink: this._groupLink(username, suggestedGroupName), + basePath: getURL(""), + }); + } else { + return I18n.messageFormat("user.messages.read_more_personal_pm_MF", { + HAS_UNREAD_AND_NEW: hasBoth, + UNREAD: unreadCount, + NEW: newCount, + username, + basePath: getURL(""), + }); + } + } else if (suggestedGroupName) { + return I18n.t("user.messages.read_more_in_group", { + groupLink: this._groupLink(username, suggestedGroupName), + }); + } else { + return I18n.t("user.messages.read_more", { + basePath: getURL(""), + username, + }); + } + } + + _topicBrowseMoreMessage() { + let category = this.args.topic.category; + + if (category && category.id === this.site.uncategorized_category_id) { + category = null; + } + + let unreadTopics = 0; + let newTopics = 0; + + if (this.currentUser) { + unreadTopics = this.topicTrackingState.countUnread(); + newTopics = this.topicTrackingState.countNew(); + } + + if (newTopics + unreadTopics > 0) { + return I18n.messageFormat("topic.read_more_MF", { + HAS_UNREAD_AND_NEW: unreadTopics > 0 && newTopics > 0, + UNREAD: unreadTopics, + NEW: newTopics, + HAS_CATEGORY: category ? true : false, + categoryLink: category ? categoryBadgeHTML(category) : null, + basePath: getURL(""), + }); + } else if (category) { + return I18n.t("topic.read_more_in_category", { + categoryLink: categoryBadgeHTML(category), + latestLink: getURL("/latest"), + }); + } else { + return I18n.t("topic.read_more", { + categoryLink: getURL("/categories"), + latestLink: getURL("/latest"), + }); + } + } + + _groupLink(username, groupName) { + return `${iconHTML("users")} ${groupName}`; + } } diff --git a/app/assets/javascripts/discourse/app/components/suggested-topics.hbs b/app/assets/javascripts/discourse/app/components/suggested-topics.hbs index 90e8f6d2297..72aafeeefdb 100644 --- a/app/assets/javascripts/discourse/app/components/suggested-topics.hbs +++ b/app/assets/javascripts/discourse/app/components/suggested-topics.hbs @@ -23,8 +23,4 @@ {{/if}} - -

- {{html-safe this.browseMoreMessage}} -

\ No newline at end of file diff --git a/app/assets/javascripts/discourse/app/components/suggested-topics.js b/app/assets/javascripts/discourse/app/components/suggested-topics.js index 3a46a0670ec..977102564d1 100644 --- a/app/assets/javascripts/discourse/app/components/suggested-topics.js +++ b/app/assets/javascripts/discourse/app/components/suggested-topics.js @@ -1,10 +1,6 @@ -import { computed, get } from "@ember/object"; +import { computed } from "@ember/object"; import Component from "@ember/component"; -import I18n from "I18n"; -import { categoryBadgeHTML } from "discourse/helpers/category-link"; import discourseComputed from "discourse-common/utils/decorators"; -import getURL from "discourse-common/lib/get-url"; -import { iconHTML } from "discourse-common/lib/icon-library"; import { inject as service } from "@ember/service"; export default Component.extend({ @@ -25,111 +21,4 @@ export default Component.extend({ hidden(preference) { return this.site.mobileView && preference !== this.listId; }, - - @discourseComputed( - "topic", - "pmTopicTrackingState.isTracking", - "pmTopicTrackingState.statesModificationCounter", - "topicTrackingState.messageCount" - ) - browseMoreMessage(topic) { - return topic.isPrivateMessage - ? this._privateMessageBrowseMoreMessage(topic) - : this._topicBrowseMoreMessage(topic); - }, - - _privateMessageBrowseMoreMessage(topic) { - const username = this.currentUser.username; - const suggestedGroupName = topic.suggested_group_name; - const inboxFilter = suggestedGroupName ? "group" : "user"; - - const unreadCount = this.pmTopicTrackingState.lookupCount("unread", { - inboxFilter, - groupName: suggestedGroupName, - }); - - const newCount = this.pmTopicTrackingState.lookupCount("new", { - inboxFilter, - groupName: suggestedGroupName, - }); - - if (unreadCount + newCount > 0) { - const hasBoth = unreadCount > 0 && newCount > 0; - - if (suggestedGroupName) { - return I18n.messageFormat("user.messages.read_more_group_pm_MF", { - HAS_UNREAD_AND_NEW: hasBoth, - UNREAD: unreadCount, - NEW: newCount, - username, - groupName: suggestedGroupName, - groupLink: this._groupLink(username, suggestedGroupName), - basePath: getURL(""), - }); - } else { - return I18n.messageFormat("user.messages.read_more_personal_pm_MF", { - HAS_UNREAD_AND_NEW: hasBoth, - UNREAD: unreadCount, - NEW: newCount, - username, - basePath: getURL(""), - }); - } - } else if (suggestedGroupName) { - return I18n.t("user.messages.read_more_in_group", { - groupLink: this._groupLink(username, suggestedGroupName), - }); - } else { - return I18n.t("user.messages.read_more", { - basePath: getURL(""), - username, - }); - } - }, - - _topicBrowseMoreMessage(topic) { - let category = topic.get("category"); - - if ( - category && - get(category, "id") === this.site.uncategorized_category_id - ) { - category = null; - } - - let unreadTopics = 0; - let newTopics = 0; - - if (this.currentUser) { - unreadTopics = this.topicTrackingState.countUnread(); - newTopics = this.topicTrackingState.countNew(); - } - - if (newTopics + unreadTopics > 0) { - return I18n.messageFormat("topic.read_more_MF", { - HAS_UNREAD_AND_NEW: unreadTopics > 0 && newTopics > 0, - UNREAD: unreadTopics, - NEW: newTopics, - HAS_CATEGORY: category ? true : false, - categoryLink: category ? categoryBadgeHTML(category) : null, - basePath: getURL(""), - }); - } else if (category) { - return I18n.t("topic.read_more_in_category", { - categoryLink: categoryBadgeHTML(category), - latestLink: getURL("/latest"), - }); - } else { - return I18n.t("topic.read_more", { - categoryLink: getURL("/categories"), - latestLink: getURL("/latest"), - }); - } - }, - - _groupLink(username, groupName) { - return `${iconHTML("users")} ${groupName}`; - }, }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js index 202f0adb1e5..6313c55ae10 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/user-private-messages-test.js @@ -736,10 +736,9 @@ acceptance( ); acceptance( - "User Private Messages - user with group messages - Mobile", + "User Private Messages - user with group messages - browse more message", function (needs) { withGroupMessagesSetup(needs); - needs.mobileView(); test("suggested messages without new or unread", async function (assert) { await visit("/t/12"); @@ -793,7 +792,6 @@ acceptance( }); test("suggested messages for group messages with new and unread", async function (assert) { - needs.mobileView(); await visit("/t/13"); await publishGroupNewToMessageBus({ groupIds: [14], topicId: 1 }); diff --git a/app/assets/stylesheets/common/base/topic.scss b/app/assets/stylesheets/common/base/topic.scss index 6540b894ae0..ad8f88e6945 100644 --- a/app/assets/stylesheets/common/base/topic.scss +++ b/app/assets/stylesheets/common/base/topic.scss @@ -369,27 +369,31 @@ a.badge-category { } // Target the .badge-category text, the bullet icon needs to maintain `display: block` -.more-content-topics h3 .badge-wrapper.bullet span.badge-category, -.more-content-topics h3 .badge-wrapper.box span, -.more-content-topics h3 .badge-wrapper.bar span { +.suggested-topics-message .badge-wrapper.bullet span.badge-category, +.suggested-topics-message .badge-wrapper.box span, +.suggested-topics-message .badge-wrapper.bar span { display: inline; } -.more-content-topicss h3 .badge-wrapper.bullet span.badge-category { +.suggested-topics-message .badge-wrapper.bullet span.badge-category { // Override vertical-align: text-top from `badges.css.scss` vertical-align: baseline; line-height: var(--line-height-medium); } -.more-content-topics h3 .badge-wrapper.bullet, -.more-content-topics h3 .badge-wrapper.bullet span.badge-category-parent-bg, -.more-content-topics h3 .badge-wrapper.bullet span.badge-category-bg { +.suggested-topics-message .badge-wrapper.bullet { + margin-right: 0; +} + +.suggested-topics-message .badge-wrapper.bullet, +.suggested-topics-message .badge-wrapper.bullet span.badge-category-parent-bg, +.suggested-topics-message .badge-wrapper.bullet span.badge-category-bg { // Top of bullet aligns with top of line - adjust line height to vertically align bullet. line-height: 0.8; } -.more-content-topics .badge-wrapper.bullet span.badge-category, -.more-content-topics .badge-wrapper.bar span.badge-category { +.suggested-topics-message .badge-wrapper.bullet span.badge-category, +.suggested-topics-message .badge-wrapper.bar span.badge-category { max-width: 150px; } diff --git a/app/assets/stylesheets/desktop/topic.scss b/app/assets/stylesheets/desktop/topic.scss index c7ab3ad82bc..83f9e0b6f98 100644 --- a/app/assets/stylesheets/desktop/topic.scss +++ b/app/assets/stylesheets/desktop/topic.scss @@ -146,8 +146,7 @@ .topic-list-header, .posts-map, - .views, - .suggested-topics-message { + .views { display: none; } }