UX: Move do not disturb to profile panel (#11592)

app/assets/javascripts/discourse/app/lib/formatter.js

@@ -170,7 +170,10 @@ export function durationTiny(distance, ageOpts) {
 
 function relativeAgeTiny(date, ageOpts) {
   const format = "tiny";
-  const distance = Math.round((new Date() - date) / 1000);
+  let distance = Math.round((new Date() - date) / 1000);
+  if (distance < 0) {
+    distance = Math.round((date - new Date()) / 1000);
+  }
   const dividedDistance = Math.round(distance / 60.0);
   const distanceInMinutes = dividedDistance < 1 ? 1 : dividedDistance;
 

app/assets/javascripts/discourse/app/widgets/do-not-disturb.js

@@ -1,37 +1,31 @@
 import I18n from "I18n";
 import { createWidget } from "discourse/widgets/widget";
+import { dateNode } from "discourse/helpers/node";
 import { h } from "virtual-dom";
 import { iconNode } from "discourse-common/lib/icon-library";
 import showModal from "discourse/lib/show-modal";
 
 export default createWidget("do-not-disturb", {
-  tagName: "div.btn.do-not-disturb-btn",
+  tagName: "li.do-not-disturb",
   saving: false,
 
   html() {
     if (this.currentUser.isInDoNotDisturb()) {
-      let remainingTime = moment()
-        .to(moment(this.currentUser.do_not_disturb_until))
-        .split(" ")
-        .slice(1)
-        .join(" "); // The first word is "in" and we don't want that.
       return [
-        h("div.do-not-disturb-inner-container", [
-          h("div.do-not-disturb-background", iconNode("moon")),
-
+        h("a.do-not-disturb-inner-container", [
+          iconNode("toggle-on"),
           h("span.do-not-disturb-label", [
             h("span", I18n.t("do_not_disturb.label")),
-            h(
-              "span.time-remaining",
-              I18n.t("do_not_disturb.remaining", { remaining: remainingTime })
-            ),
+            dateNode(this.currentUser.do_not_disturb_until),
           ]),
         ]),
       ];
     } else {
       return [
-        iconNode("far-moon"),
-        h("span.do-not-disturb-label", I18n.t("do_not_disturb.label")),
+        h("a.do-not-disturb-inner-container", [
+          iconNode("toggle-off"),
+          h("span.do-not-disturb-label", I18n.t("do_not_disturb.label")),
+        ]),
       ];
     }
   },

app/assets/javascripts/discourse/app/widgets/quick-access-notifications.js

@@ -5,7 +5,6 @@ import { createWidgetFrom } from "discourse/widgets/widget";
 createWidgetFrom(QuickAccessPanel, "quick-access-notifications", {
   buildKey: () => "quick-access-notifications",
   emptyStatePlaceholderItemKey: "notifications.empty",
-  showDoNotDisturb: true,
 
   markReadRequest() {
     return ajax("/notifications/mark-read", { type: "PUT" });

app/assets/javascripts/discourse/app/widgets/quick-access-panel.js

@@ -102,10 +102,6 @@ export default createWidget("quick-access-panel", {
     let bottomItems = [];
 
     if (!this.hideBottomItems()) {
-      if (this.showDoNotDisturb) {
-        bottomItems.push(this.attach("do-not-disturb"));
-      }
-
       bottomItems.push(
         // intentionally a link so it can be ctrl clicked
         this.attach("link", {

app/assets/javascripts/discourse/app/widgets/quick-access-profile.js

@@ -24,7 +24,8 @@ createWidgetFrom(QuickAccessPanel, "quick-access-profile", {
   },
 
   itemHtml(item) {
-    return this.attach("quick-access-item", item);
+    const widgetType = item.widget || "quick-access-item";
+    return this.attach(widgetType, item);
   },
 
   _getItems() {
@@ -79,6 +80,8 @@ createWidgetFrom(QuickAccessPanel, "quick-access-profile", {
         className: "preferences",
       }
     );
+    defaultItems.push({ widget: "do-not-disturb" });
+
     return defaultItems;
   },
 

app/assets/javascripts/discourse/tests/acceptance/do-not-disturb-test.js

@@ -25,8 +25,9 @@ acceptance("Do not disturb", function (needs) {
 
     await visit("/");
     await click(".header-dropdown-toggle.current-user");
+    await click(".menu-links-row .user-preferences-link");
 
-    await click(".do-not-disturb-btn");
+    await click(".do-not-disturb");
 
     assert.ok(exists(".do-not-disturb-modal"), "modal to choose time appears");
 
@@ -54,14 +55,13 @@ acceptance("Do not disturb", function (needs) {
 
     await visit("/");
     await click(".header-dropdown-toggle.current-user");
-
-    assert.ok(
-      queryAll(".do-not-disturb-btn .time-remaining")[0].textContent ===
-        "an hour remaining",
-      "The remaining time is displayed"
+    await click(".menu-links-row .user-preferences-link");
+    assert.equal(
+      queryAll(".do-not-disturb .relative-date")[0].textContent,
+      "1h"
     );
 
-    await click(".do-not-disturb-btn");
+    await click(".do-not-disturb");
 
     assert.ok(
       queryAll(".do-not-disturb-background").length === 0,

app/assets/javascripts/discourse/tests/unit/lib/formatter-test.js

@@ -143,6 +143,22 @@ discourseModule("Unit | Utility | formatter", function (hooks) {
     assert.equal(formatDays(500), shortDateYear(500));
     assert.equal(formatDays(365 * 2 + 1), shortDateYear(365 * 2 + 1)); // one leap year
 
+    assert.equal(formatMins(-1), "1m");
+    assert.equal(formatMins(-2), "2m");
+    assert.equal(formatMins(-60), "1h");
+    assert.equal(formatHours(-4), "4h");
+    assert.equal(formatHours(-23), "23h");
+    assert.equal(formatHours(-23.5), "1d");
+    assert.equal(formatDays(-1), "1d");
+    assert.equal(formatDays(-14), "14d");
+    assert.equal(formatDays(-15), shortDateYear(-15));
+    assert.equal(formatDays(-92), shortDateYear(-92));
+    assert.equal(formatDays(-364), shortDateYear(-364));
+    assert.equal(formatDays(-365), shortDateYear(-365));
+    assert.equal(formatDays(-366), shortDateYear(-366)); // leap year
+    assert.equal(formatDays(-500), shortDateYear(-500));
+    assert.equal(formatDays(-365 * 2 - 1), shortDateYear(-365 * 2 - 1)); // one leap year
+
     var originalValue = this.siteSettings.relative_date_duration;
     this.siteSettings.relative_date_duration = 7;
     assert.equal(formatDays(7), "7d");

app/assets/stylesheets/common/base/discourse.scss

@@ -433,45 +433,46 @@ table {
   height: 1.25em;
 
   .d-icon.d-icon-moon {
+    display: block;
     color: var(--tertiary-or-white) !important;
     line-height: unset;
     font-size: 0.875em;
-    margin: 0;
+    margin: 0 !important;
   }
 }
 
-.do-not-disturb-btn {
+.user-menu .quick-access-panel li.do-not-disturb {
   display: flex;
   flex: 0 0 100%;
   flex-wrap: wrap;
   align-items: center;
-  justify-content: center;
-  margin-bottom: 0.5em;
+  background: var(--secondary);
 
   .do-not-disturb-inner-container {
     display: flex;
+    width: 100%;
     align-items: center;
 
     .do-not-disturb-label {
       display: flex;
-      flex-direction: column;
-      padding-top: 2px;
-      margin-left: 0.6em;
+      align-items: center;
     }
 
-    .time-remaining {
+    .relative-date {
       text-align: left;
       font-size: $font-down-3;
-      margin-top: 0.3em;
+      padding-top: 3px;
+      margin-left: 0.75em;
       color: var(--primary-medium);
     }
-    .do-not-disturb-background {
-      width: 1.75em;
-      height: 1.75em;
 
-      .d-icon-far-moon {
-        margin-right: 0;
-      }
+    .d-icon-toggle-off,
+    .d-icon-toggle-on {
+      padding-top: 0;
+    }
+
+    .d-icon-toggle-on {
+      color: var(--tertiary);
     }
   }
 }

lib/svg_sprite/svg_sprite.rb

@@ -190,6 +190,8 @@ module SvgSprite
     "thumbtack",
     "times",
     "times-circle",
+    "toggle-off",
+    "toggle-on",
     "trash-alt",
     "tv",
     "undo",