Revert "UX: Remove experimental sidebar notification text (#17290)" (#17548)

This reverts commit 4df683f88d. We've decided to bring back the words for counts in the experimental sidebar.
2022-07-18 10:34:22 +08:00 · 2022-07-18 10:34:22 +08:00 · 54e63b3d31
parent a0a0f6f37c
commit 54e63b3d31
14 changed files with 63 additions and 36 deletions
--- 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,3 +1,5 @@
+import I18n from "I18n";
+
 import { htmlSafe } from "@ember/template";

 import { tracked } from "@glimmer/tracking";
@ -54,11 +56,15 @@ export default class CategorySectionLink {
    );
  }

-  get badgeCount() {
+  get badgeText() {
    if (this.totalUnread > 0) {
-      return this.totalUnread;
+      return I18n.t("sidebar.unread_count", {
+        count: this.totalUnread,
+      });
    } else if (this.totalNew > 0) {
-      return this.totalNew;
+      return I18n.t("sidebar.new_count", {
+        count: this.totalNew,
+      });
    }
  }

--- 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,3 +1,5 @@
+import I18n from "I18n";
+
 import { tracked } from "@glimmer/tracking";

 import { bind } from "discourse-common/utils/decorators";
@ -45,11 +47,15 @@ export default class TagSectionLink {
    return this.tagName;
  }

-  get badgeCount() {
+  get badgeText() {
    if (this.totalUnread > 0) {
-      return this.totalUnread;
+      return I18n.t("sidebar.unread_count", {
+        count: this.totalUnread,
+      });
    } else if (this.totalNew > 0) {
-      return this.totalNew;
+      return I18n.t("sidebar.new_count", {
+        count: this.totalNew,
+      });
    }
  }

--- 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 badgeCount() {}
+  get badgeText() {}

  _notImplemented() {
    throw "not implemented";
--- 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,11 +52,15 @@ export default class EverythingSectionLink extends BaseSectionLink {
    return "discovery.latest discovery.new discovery.unread discovery.top";
  }

-  get badgeCount() {
+  get badgeText() {
    if (this.totalUnread > 0) {
-      return this.totalUnread;
+      return I18n.t("sidebar.unread_count", {
+        count: this.totalUnread,
+      });
    } else if (this.totalNew > 0) {
-      return this.totalNew;
+      return I18n.t("sidebar.new_count", {
+        count: this.totalNew,
+      });
    } else {
      return;
    }
--- 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,9 +51,11 @@ export default class MyPostsSectionLink extends BaseSectionLink {
    return I18n.t("sidebar.sections.topics.links.my_posts.content");
  }

-  get badgeCount() {
+  get badgeText() {
    if (this._hasDraft) {
-      return this.draftCount;
+      return I18n.t("sidebar.sections.topics.links.my_posts.draft_count", {
+        count: this.draftCount,
+      });
    }
  }

--- 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,11 +56,15 @@ export default class TrackedSectionLink extends BaseSectionLink {
    return "discovery.latest discovery.new discovery.unread discovery.top";
  }

-  get badgeCount() {
+  get badgeText() {
    if (this.totalUnread > 0) {
-      return this.totalUnread;
+      return I18n.t("sidebar.unread_count", {
+        count: this.totalUnread,
+      });
    } else if (this.totalNew > 0) {
-      return this.totalNew;
+      return I18n.t("sidebar.new_count", {
+        count: this.totalNew,
+      });
    } else {
      return;
    }
--- 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}}
-        @badgeCount={{sectionLink.badgeCount}} >
+        @badgeText={{sectionLink.badgeText}} >
      </Sidebar::SectionLink>
    {{/each}}
  {{else}}
--- 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}}
    </span>

-    {{#if @badgeCount}}
+    {{#if @badgeText}}
      <span class="sidebar-section-link-content-badge">
-        {{@badgeCount}}
+        {{@badgeText}}
      </span>
    {{/if}}
  </Sidebar::SectionLinkTo>
--- 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}}
-        @badgeCount={{sectionLink.badgeCount}}
+        @badgeText={{sectionLink.badgeText}}
        @model={{sectionLink.model}}>
      </Sidebar::SectionLink>
    {{/each}}
--- 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}}
-      @badgeCount={{sectionLink.badgeCount}}
+      @badgeText={{sectionLink.badgeText}}
      @model={{sectionLink.model}} />
  {{/each}}
 </Sidebar::Section>
--- 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,3 +1,4 @@
+import I18n from "I18n";
 import { test } from "qunit";
 import { click, currentURL, settled, visit } from "@ember/test-helpers";
 import {
@ -317,7 +318,7 @@ acceptance("Sidebar - Categories Section", function (needs) {
      query(
        `.sidebar-section-link-${category1.slug} .sidebar-section-link-content-badge`
      ).textContent.trim(),
-      "1",
+      I18n.t("sidebar.unread_count", { count: 1 }),
      `displays 1 unread count for ${category1.slug} section link`
    );

@ -325,7 +326,7 @@ acceptance("Sidebar - Categories Section", function (needs) {
      query(
        `.sidebar-section-link-${category2.slug} .sidebar-section-link-content-badge`
      ).textContent.trim(),
-      "2",
+      I18n.t("sidebar.unread_count", { count: 2 }),
      `displays 2 unread count for ${category2.slug} section link`
    );

@ -344,7 +345,7 @@ acceptance("Sidebar - Categories Section", function (needs) {
      query(
        `.sidebar-section-link-${category1.slug} .sidebar-section-link-content-badge`
      ).textContent.trim(),
-      "1",
+      I18n.t("sidebar.new_count", { count: 1 }),
      `displays 1 new count for ${category1.slug} section link`
    );

@ -381,7 +382,7 @@ acceptance("Sidebar - Categories Section", function (needs) {
      query(
        `.sidebar-section-link-${category2.slug} .sidebar-section-link-content-badge`
      ).textContent.trim(),
-      "1",
+      I18n.t("sidebar.unread_count", { count: 1 }),
      `displays 1 unread count for ${category2.slug} section link`
    );
  });
--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-tags-section-test.js
@ -263,7 +263,7 @@ acceptance("Sidebar - Tags section", function (needs) {
      query(
        `.sidebar-section-link-tag1 .sidebar-section-link-content-badge`
      ).textContent.trim(),
-      "1",
+      I18n.t("sidebar.unread_count", { count: 1 }),
      `displays 1 unread count for tag1 section link`
    );

@ -271,7 +271,7 @@ acceptance("Sidebar - Tags section", function (needs) {
      query(
        `.sidebar-section-link-tag2 .sidebar-section-link-content-badge`
      ).textContent.trim(),
-      "1",
+      I18n.t("sidebar.unread_count", { count: 1 }),
      `displays 1 unread count for tag2 section link`
    );

@ -295,7 +295,7 @@ acceptance("Sidebar - Tags section", function (needs) {
      query(
        `.sidebar-section-link-tag1 .sidebar-section-link-content-badge`
      ).textContent.trim(),
-      "1",
+      I18n.t("sidebar.new_count", { count: 1 }),
      `displays 1 new count for tag1 section link`
    );

--- a/app/assets/javascripts/discourse/tests/acceptance/sidebar-topics-section-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/sidebar-topics-section-test.js
@ -335,7 +335,7 @@ acceptance("Sidebar - Topics Section", function (needs) {
      query(
        ".sidebar-section-link-everything .sidebar-section-link-content-badge"
      ).textContent.trim(),
-      "3",
+      "3 unread",
      "it displays the right unread count"
    );

@ -361,7 +361,7 @@ acceptance("Sidebar - Topics Section", function (needs) {
      query(
        ".sidebar-section-link-everything .sidebar-section-link-content-badge"
      ).textContent.trim(),
-      "2",
+      "2 unread",
      "it updates the unread count"
    );

@ -393,7 +393,7 @@ acceptance("Sidebar - Topics Section", function (needs) {
      query(
        ".sidebar-section-link-everything .sidebar-section-link-content-badge"
      ).textContent.trim(),
-      "1",
+      "1 new",
      "it displays the new count once there are no unread topics"
    );

@ -549,7 +549,7 @@ acceptance("Sidebar - Topics Section", function (needs) {
      query(
        ".sidebar-section-link-tracked .sidebar-section-link-content-badge"
      ).textContent.trim(),
-      "3",
+      "3 unread",
      "it displays the right unread count"
    );

@ -574,7 +574,7 @@ acceptance("Sidebar - Topics Section", function (needs) {
      query(
        ".sidebar-section-link-tracked .sidebar-section-link-content-badge"
      ).textContent.trim(),
-      "2",
+      "2 unread",
      "it updates the unread count"
    );

@ -602,7 +602,7 @@ acceptance("Sidebar - Topics Section", function (needs) {
      query(
        ".sidebar-section-link-tracked .sidebar-section-link-content-badge"
      ).textContent.trim(),
-      "1",
+      "1 new",
      "it displays the new count once there are no tracked unread topics"
    );

--- a/app/assets/stylesheets/common/base/sidebar.scss
+++ b/app/assets/stylesheets/common/base/sidebar.scss
@ -170,6 +170,11 @@
      font-weight: bold;
    }

+    .sidebar-section-link-content-badge {
+      width: 30%;
+      text-align: right;
+    }
+
    .sidebar-section-link-content-text {
      @include ellipsis;

@ -198,11 +203,10 @@
  }

  .sidebar-section-link-content-badge {
-    font-size: var(--font-down-1);
    color: var(--tertiary);
-    margin-left: auto;
+    font-size: var(--font-down-1);
    font-weight: normal;
-    margin-right: 0.4em;
+    margin-left: auto;
  }

  .sidebar-section-header-caret {