From af30f9945ab4da3f73ff70ec44ecda6c685f364e Mon Sep 17 00:00:00 2001 From: Roman Rizzi Date: Thu, 17 Aug 2023 14:37:11 -0300 Subject: [PATCH] UX: Use pill design on both mobile and desktop (#23124) --- .../discourse/app/components/more-topics.hbs | 12 ++-- .../discourse/app/components/more-topics.js | 14 ++-- .../app/components/related-messages.hbs | 6 +- .../app/components/related-messages.js | 34 +++++----- .../app/components/suggested-topics.hbs | 10 +-- .../app/components/suggested-topics.js | 30 ++++----- .../discourse/app/templates/topic.hbs | 2 + .../acceptance/user-private-messages-test.js | 14 ++-- app/assets/stylesheets/common/base/topic.scss | 43 ------------ .../stylesheets/common/components/_index.scss | 1 + .../common/components/more-topics.scss | 65 +++++++++++++++++++ .../stylesheets/desktop/topic-post.scss | 14 ---- app/assets/stylesheets/desktop/topic.scss | 32 --------- .../stylesheets/mobile/components/_index.scss | 1 + .../mobile/components/more-topics.scss | 14 ++++ app/assets/stylesheets/mobile/topic-post.scss | 26 -------- 16 files changed, 143 insertions(+), 175 deletions(-) create mode 100644 app/assets/stylesheets/common/components/more-topics.scss create mode 100644 app/assets/stylesheets/mobile/components/more-topics.scss diff --git a/app/assets/javascripts/discourse/app/components/more-topics.hbs b/app/assets/javascripts/discourse/app/components/more-topics.hbs index e46b60f29b9..015f2de71ab 100644 --- a/app/assets/javascripts/discourse/app/components/more-topics.hbs +++ b/app/assets/javascripts/discourse/app/components/more-topics.hbs @@ -1,7 +1,7 @@ -
- {{#if this.showTopicListsNav}} +
+ {{#unless this.singleList}}
-
    +
      {{#each this.availablePills as |pill|}}
- {{/if}} + {{/unless}} -
+
{{#if @topic.relatedMessages.length}} {{/if}} @@ -41,7 +41,7 @@
{{#if @topic.suggestedTopics.length}} -

+

{{html-safe this.browseMoreMessage}}

{{/if}} diff --git a/app/assets/javascripts/discourse/app/components/more-topics.js b/app/assets/javascripts/discourse/app/components/more-topics.js index 8a99f16a764..40e37fcb0f5 100644 --- a/app/assets/javascripts/discourse/app/components/more-topics.js +++ b/app/assets/javascripts/discourse/app/components/more-topics.js @@ -18,13 +18,13 @@ export default class MoreTopics extends Component { @tracked availablePills = []; @tracked singleList = false; - get showTopicListsNav() { - return this.site.mobileView && !this.singleList; - } - @action rememberTopicListPreference(value) { - this.moreTopicsPreferenceTracking.updatePreference(value); + // Don't change the preference when selecting related PMs. + // It messes with the topics pref. + const rememberPref = value !== "related-messages"; + + this.moreTopicsPreferenceTracking.updatePreference(value, rememberPref); this.buildListPills(); } @@ -33,7 +33,7 @@ export default class MoreTopics extends Component { buildListPills() { next(() => { const pills = Array.from( - document.querySelectorAll(".more-content-topics") + document.querySelectorAll(".more-topics__list") ).map((topicList) => { return { name: topicList.dataset.mobileTitle, @@ -53,7 +53,7 @@ export default class MoreTopics extends Component { const listPresent = pills.find((pill) => pill.id === preference); if (!listPresent) { - const rememberPref = this.site.mobileView && !this.singleList; + const rememberPref = false; this.moreTopicsPreferenceTracking.updatePreference( pills[0].id, diff --git a/app/assets/javascripts/discourse/app/components/related-messages.hbs b/app/assets/javascripts/discourse/app/components/related-messages.hbs index 6767440cc14..18d7862cb35 100644 --- a/app/assets/javascripts/discourse/app/components/related-messages.hbs +++ b/app/assets/javascripts/discourse/app/components/related-messages.hbs @@ -1,12 +1,12 @@ diff --git a/app/assets/javascripts/discourse/app/components/related-messages.js b/app/assets/javascripts/discourse/app/components/related-messages.js index 90545638a86..899932f40d2 100644 --- a/app/assets/javascripts/discourse/app/components/related-messages.js +++ b/app/assets/javascripts/discourse/app/components/related-messages.js @@ -1,20 +1,21 @@ -import Component from "@ember/component"; -import discourseComputed from "discourse-common/utils/decorators"; +import Component from "@glimmer/component"; +import { computed } from "@ember/object"; import getURL from "discourse-common/lib/get-url"; import { inject as service } from "@ember/service"; -export default Component.extend({ - tagName: "", - moreTopicsPreferenceTracking: service(), - listId: "related-Messages", +export default class RelatedMessages extends Component { + @service moreTopicsPreferenceTracking; - @discourseComputed("moreTopicsPreferenceTracking.preference") - hidden(preference) { - return this.site.mobileView && preference !== this.listId; - }, + listId = "related-Messages"; + + @computed("moreTopicsPreferenceTracking.preference") + get hidden() { + return this.moreTopicsPreferenceTracking.preference !== this.listId; + } + + get targetUser() { + const topic = this.args.topic; - @discourseComputed("topic") - targetUser(topic) { if (!topic || !topic.isPrivateMessage) { return; } @@ -30,12 +31,11 @@ export default Component.extend({ ) { return allowedUsers.find((u) => u.username !== this.currentUser.username); } - }, + } - @discourseComputed - searchLink() { + get searchLink() { return getURL( `/search?expanded=true&q=%40${this.targetUser.username}%20in%3Apersonal-direct` ); - }, -}); + } +} diff --git a/app/assets/javascripts/discourse/app/components/suggested-topics.hbs b/app/assets/javascripts/discourse/app/components/suggested-topics.hbs index 72aafeeefdb..215a9d1de3f 100644 --- a/app/assets/javascripts/discourse/app/components/suggested-topics.hbs +++ b/app/assets/javascripts/discourse/app/components/suggested-topics.hbs @@ -1,6 +1,6 @@ \ 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 977102564d1..4b6ead15b29 100644 --- a/app/assets/javascripts/discourse/app/components/suggested-topics.js +++ b/app/assets/javascripts/discourse/app/components/suggested-topics.js @@ -1,24 +1,24 @@ +import Component from "@glimmer/component"; import { computed } from "@ember/object"; -import Component from "@ember/component"; -import discourseComputed from "discourse-common/utils/decorators"; import { inject as service } from "@ember/service"; -export default Component.extend({ - tagName: "", - moreTopicsPreferenceTracking: service(), - listId: "suggested-topics", +export default class SuggestedTopics extends Component { + @service moreTopicsPreferenceTracking; + @service currentUser; - suggestedTitleLabel: computed("topic", function () { - const href = this.currentUser && this.currentUser.pmPath(this.topic); - if (this.topic.get("isPrivateMessage") && href) { + listId = "suggested-topics"; + + get suggestedTitleLabel() { + const href = this.currentUser && this.currentUser.pmPath(this.args.topic); + if (this.args.topic.isPrivateMessage && href) { return "suggested_topics.pm_title"; } else { return "suggested_topics.title"; } - }), + } - @discourseComputed("moreTopicsPreferenceTracking.preference") - hidden(preference) { - return this.site.mobileView && preference !== this.listId; - }, -}); + @computed("moreTopicsPreferenceTracking.preference") + get hidden() { + return this.moreTopicsPreferenceTracking.preference !== this.listId; + } +} diff --git a/app/assets/javascripts/discourse/app/templates/topic.hbs b/app/assets/javascripts/discourse/app/templates/topic.hbs index b80e8fc831d..f21a87e46f7 100644 --- a/app/assets/javascripts/discourse/app/templates/topic.hbs +++ b/app/assets/javascripts/discourse/app/templates/topic.hbs @@ -548,6 +548,8 @@ {{/if}} {{/if}} +
+