From 4df683f88d8c5d8d18da0779d36611396718baef Mon Sep 17 00:00:00 2001 From: Kris Date: Thu, 30 Jun 2022 14:15:39 -0400 Subject: [PATCH] UX: Remove experimental sidebar notification text (#17290) --- .../categories-section/category-section-link.js | 12 +++--------- .../app/lib/sidebar/tags-section/tag-section-link.js | 12 +++--------- .../lib/sidebar/topics-section/base-section-link.js | 2 +- .../topics-section/everything-section-link.js | 10 +++------- .../sidebar/topics-section/my-posts-section-link.js | 6 ++---- .../sidebar/topics-section/tracked-section-link.js | 10 +++------- .../components/sidebar/categories-section.hbs | 2 +- .../templates/components/sidebar/section-link.hbs | 4 ++-- .../templates/components/sidebar/tags-section.hbs | 2 +- .../templates/components/sidebar/topics-section.hbs | 2 +- .../acceptance/sidebar-categories-section-test.js | 9 ++++----- .../tests/acceptance/sidebar-tags-section-test.js | 6 +++--- .../tests/acceptance/sidebar-topics-section-test.js | 12 ++++++------ app/assets/stylesheets/common/base/sidebar.scss | 10 +++------- 14 files changed, 36 insertions(+), 63 deletions(-) diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/categories-section/category-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/categories-section/category-section-link.js index ea39390be65..ea478618384 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/categories-section/category-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/categories-section/category-section-link.js @@ -1,5 +1,3 @@ -import I18n from "I18n"; - import { htmlSafe } from "@ember/template"; import { tracked } from "@glimmer/tracking"; @@ -54,15 +52,11 @@ export default class CategorySectionLink { return htmlSafe(categoryBadgeHTML(this.category, { link: false })); } - get badgeText() { + get badgeCount() { if (this.totalUnread > 0) { - return I18n.t("sidebar.unread_count", { - count: this.totalUnread, - }); + return this.totalUnread; } else if (this.totalNew > 0) { - return I18n.t("sidebar.new_count", { - count: this.totalNew, - }); + return this.totalNew; } } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/tags-section/tag-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/tags-section/tag-section-link.js index fda4b8fa290..3aa9e3871c7 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/tags-section/tag-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/tags-section/tag-section-link.js @@ -1,5 +1,3 @@ -import I18n from "I18n"; - import { tracked } from "@glimmer/tracking"; import { bind } from "discourse-common/utils/decorators"; @@ -47,15 +45,11 @@ export default class TagSectionLink { return this.tagName; } - get badgeText() { + get badgeCount() { if (this.totalUnread > 0) { - return I18n.t("sidebar.unread_count", { - count: this.totalUnread, - }); + return this.totalUnread; } else if (this.totalNew > 0) { - return I18n.t("sidebar.new_count", { - count: this.totalNew, - }); + return this.totalNew; } } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/topics-section/base-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/topics-section/base-section-link.js index fa217833ef9..b0a32d208f2 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/topics-section/base-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/topics-section/base-section-link.js @@ -61,7 +61,7 @@ export default class BaseSectionLink { /** * @returns {string} Text for the badge within the link */ - get badgeText() {} + get badgeCount() {} _notImplemented() { throw "not implemented"; diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/topics-section/everything-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/topics-section/everything-section-link.js index 8192a75f688..187bb66d925 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/topics-section/everything-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/topics-section/everything-section-link.js @@ -52,15 +52,11 @@ export default class EverythingSectionLink extends BaseSectionLink { return "discovery.latest discovery.new discovery.unread discovery.top"; } - get badgeText() { + get badgeCount() { if (this.totalUnread > 0) { - return I18n.t("sidebar.unread_count", { - count: this.totalUnread, - }); + return this.totalUnread; } else if (this.totalNew > 0) { - return I18n.t("sidebar.new_count", { - count: this.totalNew, - }); + return this.totalNew; } else { return; } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/topics-section/my-posts-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/topics-section/my-posts-section-link.js index 703bce8cf5c..ebee50a237e 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/topics-section/my-posts-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/topics-section/my-posts-section-link.js @@ -51,11 +51,9 @@ export default class MyPostsSectionLink extends BaseSectionLink { return I18n.t("sidebar.sections.topics.links.my_posts.content"); } - get badgeText() { + get badgeCount() { if (this._hasDraft) { - return I18n.t("sidebar.sections.topics.links.my_posts.draft_count", { - count: this.draftCount, - }); + return this.draftCount; } } diff --git a/app/assets/javascripts/discourse/app/lib/sidebar/topics-section/tracked-section-link.js b/app/assets/javascripts/discourse/app/lib/sidebar/topics-section/tracked-section-link.js index 997903c91a7..047ef711d96 100644 --- a/app/assets/javascripts/discourse/app/lib/sidebar/topics-section/tracked-section-link.js +++ b/app/assets/javascripts/discourse/app/lib/sidebar/topics-section/tracked-section-link.js @@ -56,15 +56,11 @@ export default class TrackedSectionLink extends BaseSectionLink { return "discovery.latest discovery.new discovery.unread discovery.top"; } - get badgeText() { + get badgeCount() { if (this.totalUnread > 0) { - return I18n.t("sidebar.unread_count", { - count: this.totalUnread, - }); + return this.totalUnread; } else if (this.totalNew > 0) { - return I18n.t("sidebar.new_count", { - count: this.totalNew, - }); + return this.totalNew; } else { return; } diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs index cd975451613..54e3ac794e6 100644 --- a/app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/categories-section.hbs @@ -17,7 +17,7 @@ @content={{sectionLink.text}} @currentWhen={{sectionLink.currentWhen}} @model={{sectionLink.model}} - @badgeText={{sectionLink.badgeText}} > + @badgeCount={{sectionLink.badgeCount}} > {{/each}} {{else}} diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs index 747286ac08a..a4c89013393 100644 --- a/app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/section-link.hbs @@ -11,9 +11,9 @@ {{@content}} - {{#if @badgeText}} + {{#if @badgeCount}} - {{@badgeText}} + {{@badgeCount}} {{/if}} diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/tags-section.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/tags-section.hbs index 7e37080e946..821f587e35b 100644 --- a/app/assets/javascripts/discourse/app/templates/components/sidebar/tags-section.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/tags-section.hbs @@ -15,7 +15,7 @@ @title={{sectionLink.title}} @content={{sectionLink.text}} @currentWhen={{sectionLink.currentWhen}} - @badgeText={{sectionLink.badgeText}} + @badgeCount={{sectionLink.badgeCount}} @model={{sectionLink.model}}> {{/each}} diff --git a/app/assets/javascripts/discourse/app/templates/components/sidebar/topics-section.hbs b/app/assets/javascripts/discourse/app/templates/components/sidebar/topics-section.hbs index 1c31a57a701..db4a2a923d9 100644 --- a/app/assets/javascripts/discourse/app/templates/components/sidebar/topics-section.hbs +++ b/app/assets/javascripts/discourse/app/templates/components/sidebar/topics-section.hbs @@ -16,7 +16,7 @@ @title={{sectionLink.title}} @content={{sectionLink.text}} @currentWhen={{sectionLink.currentWhen}} - @badgeText={{sectionLink.badgeText}} + @badgeCount={{sectionLink.badgeCount}} @model={{sectionLink.model}} /> {{/each}} diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js index 01ddaa6d901..71780134fb9 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-categories-section-test.js @@ -1,4 +1,3 @@ -import I18n from "I18n"; import { test } from "qunit"; import { click, currentURL, settled, visit } from "@ember/test-helpers"; @@ -315,7 +314,7 @@ acceptance("Sidebar - Categories Section", function (needs) { query( `.sidebar-section-link-${category1.slug} .sidebar-section-link-content-badge` ).textContent.trim(), - I18n.t("sidebar.unread_count", { count: 1 }), + "1", `displays 1 unread count for ${category1.slug} section link` ); @@ -323,7 +322,7 @@ acceptance("Sidebar - Categories Section", function (needs) { query( `.sidebar-section-link-${category2.slug} .sidebar-section-link-content-badge` ).textContent.trim(), - I18n.t("sidebar.unread_count", { count: 2 }), + "2", `displays 2 unread count for ${category2.slug} section link` ); @@ -342,7 +341,7 @@ acceptance("Sidebar - Categories Section", function (needs) { query( `.sidebar-section-link-${category1.slug} .sidebar-section-link-content-badge` ).textContent.trim(), - I18n.t("sidebar.new_count", { count: 1 }), + "1", `displays 1 new count for ${category1.slug} section link` ); @@ -379,7 +378,7 @@ acceptance("Sidebar - Categories Section", function (needs) { query( `.sidebar-section-link-${category2.slug} .sidebar-section-link-content-badge` ).textContent.trim(), - I18n.t("sidebar.unread_count", { count: 1 }), + "1", `displays 1 unread count for ${category2.slug} section link` ); }); diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js index 4114da8b9c9..2b545979c21 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js @@ -269,7 +269,7 @@ acceptance("Sidebar - Tags section", function (needs) { query( `.sidebar-section-link-tag1 .sidebar-section-link-content-badge` ).textContent.trim(), - I18n.t("sidebar.unread_count", { count: 1 }), + "1", `displays 1 unread count for tag1 section link` ); @@ -277,7 +277,7 @@ acceptance("Sidebar - Tags section", function (needs) { query( `.sidebar-section-link-tag2 .sidebar-section-link-content-badge` ).textContent.trim(), - I18n.t("sidebar.unread_count", { count: 1 }), + "1", `displays 1 unread count for tag2 section link` ); @@ -301,7 +301,7 @@ acceptance("Sidebar - Tags section", function (needs) { query( `.sidebar-section-link-tag1 .sidebar-section-link-content-badge` ).textContent.trim(), - I18n.t("sidebar.new_count", { count: 1 }), + "1", `displays 1 new count for tag1 section link` ); diff --git a/app/assets/javascripts/discourse/tests/acceptance/sidebar-topics-section-test.js b/app/assets/javascripts/discourse/tests/acceptance/sidebar-topics-section-test.js index 5f04e100d6c..3d6eedfd48d 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-topics-section-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-topics-section-test.js @@ -333,7 +333,7 @@ acceptance("Sidebar - Topics Section", function (needs) { query( ".sidebar-section-link-everything .sidebar-section-link-content-badge" ).textContent.trim(), - "3 unread", + "3", "it displays the right unread count" ); @@ -359,7 +359,7 @@ acceptance("Sidebar - Topics Section", function (needs) { query( ".sidebar-section-link-everything .sidebar-section-link-content-badge" ).textContent.trim(), - "2 unread", + "2", "it updates the unread count" ); @@ -391,7 +391,7 @@ acceptance("Sidebar - Topics Section", function (needs) { query( ".sidebar-section-link-everything .sidebar-section-link-content-badge" ).textContent.trim(), - "1 new", + "1", "it displays the new count once there are no unread topics" ); @@ -553,7 +553,7 @@ acceptance("Sidebar - Topics Section", function (needs) { query( ".sidebar-section-link-tracked .sidebar-section-link-content-badge" ).textContent.trim(), - "3 unread", + "3", "it displays the right unread count" ); @@ -578,7 +578,7 @@ acceptance("Sidebar - Topics Section", function (needs) { query( ".sidebar-section-link-tracked .sidebar-section-link-content-badge" ).textContent.trim(), - "2 unread", + "2", "it updates the unread count" ); @@ -606,7 +606,7 @@ acceptance("Sidebar - Topics Section", function (needs) { query( ".sidebar-section-link-tracked .sidebar-section-link-content-badge" ).textContent.trim(), - "1 new", + "1", "it displays the new count once there are no tracked unread topics" ); diff --git a/app/assets/stylesheets/common/base/sidebar.scss b/app/assets/stylesheets/common/base/sidebar.scss index 2c0cc828c24..9d3b064ed51 100644 --- a/app/assets/stylesheets/common/base/sidebar.scss +++ b/app/assets/stylesheets/common/base/sidebar.scss @@ -107,11 +107,6 @@ font-weight: bold; } - .sidebar-section-link-content-badge { - width: 30%; - text-align: right; - } - .sidebar-section-link-content-text { width: 70%; @@ -140,10 +135,11 @@ } .sidebar-section-link-content-badge { - color: var(--tertiary); font-size: var(--font-down-1); - font-weight: normal; + color: var(--tertiary); margin-left: auto; + font-weight: normal; + margin-right: 0.4em; } .sidebar-section-header-caret {