From f2ac9e4c12e8f5adcf31d7550bca554fde90998c Mon Sep 17 00:00:00 2001
From: Jordan Vidrine <30537603+jordanvidrine@users.noreply.github.com>
Date: Wed, 31 Jan 2024 16:56:07 -0600
Subject: [PATCH] UX: Refactor Do Not Disturb indicator (#25508)
---
.../javascripts/discourse/app/widgets/header.js | 4 +++-
.../tests/acceptance/do-not-disturb-test.js | 16 ++++++++++------
.../tests/acceptance/user-status-test.js | 8 ++++----
.../stylesheets/common/base/discourse.scss | 14 ++++++--------
lib/svg_sprite.rb | 1 +
vendor/assets/svg-icons/discourse-additional.svg | 4 ++++
6 files changed, 28 insertions(+), 19 deletions(-)
diff --git a/app/assets/javascripts/discourse/app/widgets/header.js b/app/assets/javascripts/discourse/app/widgets/header.js
index 118d9e47966..96b1c01f085 100644
--- a/app/assets/javascripts/discourse/app/widgets/header.js
+++ b/app/assets/javascripts/discourse/app/widgets/header.js
@@ -88,7 +88,9 @@ createWidget("header-notifications", {
}
if (user.isInDoNotDisturb()) {
- contents.push(h("div.do-not-disturb-background", iconNode("moon")));
+ contents.push(
+ h("div.do-not-disturb-background", iconNode("discourse-dnd"))
+ );
} else {
if (user.new_personal_messages_notifications_count) {
contents.push(
diff --git a/app/assets/javascripts/discourse/tests/acceptance/do-not-disturb-test.js b/app/assets/javascripts/discourse/tests/acceptance/do-not-disturb-test.js
index c4b0cdced77..7c831e6ad1f 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/do-not-disturb-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/do-not-disturb-test.js
@@ -41,8 +41,10 @@ acceptance("Do not disturb", function (needs) {
assert.dom(".d-modal").doesNotExist("modal is hidden");
assert.ok(
- exists(".header-dropdown-toggle .do-not-disturb-background .d-icon-moon"),
- "moon icon is present in header"
+ exists(
+ ".header-dropdown-toggle .do-not-disturb-background .d-icon-discourse-dnd"
+ ),
+ "dnd icon is present in header"
);
});
@@ -73,8 +75,10 @@ acceptance("Do not disturb", function (needs) {
.doesNotExist("DND modal is hidden after making a choice");
assert.ok(
- exists(".header-dropdown-toggle .do-not-disturb-background .d-icon-moon"),
- "moon icon is shown in header avatar"
+ exists(
+ ".header-dropdown-toggle .do-not-disturb-background .d-icon-discourse-dnd"
+ ),
+ "dnd icon is shown in header avatar"
);
});
@@ -87,7 +91,7 @@ acceptance("Do not disturb", function (needs) {
assert.ok(
exists(".do-not-disturb-background"),
- "The active moon icon is shown"
+ "The active dnd icon is shown"
);
await click(".header-dropdown-toggle.current-user");
@@ -106,7 +110,7 @@ acceptance("Do not disturb", function (needs) {
assert.notOk(
exists(".do-not-disturb-background"),
- "The active moon icons are removed"
+ "The active dnd icon is removed"
);
assert.notOk(
exists(".do-not-disturb .relative-date"),
diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-status-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-status-test.js
index 1ecd4d49934..500c45e2394 100644
--- a/app/assets/javascripts/discourse/tests/acceptance/user-status-test.js
+++ b/app/assets/javascripts/discourse/tests/acceptance/user-status-test.js
@@ -374,7 +374,7 @@ acceptance(
await click(".btn-primary"); // save
assert
- .dom(".do-not-disturb-background .d-icon-moon")
+ .dom(".do-not-disturb-background .d-icon-discourse-dnd")
.exists("the DnD mode indicator on the menu is shown");
});
@@ -390,7 +390,7 @@ acceptance(
await click(".btn-primary"); // save
assert
- .dom(".do-not-disturb-background .d-icon-moon")
+ .dom(".do-not-disturb-background .d-icon-discourse-dnd")
.exists("the DnD mode indicator on the menu is shown");
});
@@ -404,7 +404,7 @@ acceptance(
await click(".btn.delete-status");
assert
- .dom(".do-not-disturb-background .d-icon-moon")
+ .dom(".do-not-disturb-background .d-icon-discourse-dnd")
.doesNotExist("there is no DnD mode indicator on the menu");
});
@@ -421,7 +421,7 @@ acceptance(
await click(".btn-primary"); // save
assert
- .dom(".do-not-disturb-background .d-icon-moon")
+ .dom(".do-not-disturb-background .d-icon-discourse-dnd")
.doesNotExist("there is no DnD mode indicator on the menu");
});
diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss
index b39d670b343..d126e75118f 100644
--- a/app/assets/stylesheets/common/base/discourse.scss
+++ b/app/assets/stylesheets/common/base/discourse.scss
@@ -392,7 +392,6 @@ textarea {
position: absolute;
left: 0;
bottom: -1px;
- z-index: 1002;
}
.do-not-disturb-background {
@@ -400,16 +399,15 @@ textarea {
align-items: center;
justify-content: center;
width: 1.25em;
- background-color: var(--tertiary-med-or-tertiary);
+ background-color: var(--secondary);
border-radius: 50%;
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 !important;
+ .d-icon.d-icon-discourse-dnd {
+ color: var(--header_primary-medium) !important;
+ font-size: 1em;
+ height: 1em;
+ width: 1em;
}
}
diff --git a/lib/svg_sprite.rb b/lib/svg_sprite.rb
index 6e237a8b3c2..63fe74c0195 100644
--- a/lib/svg_sprite.rb
+++ b/lib/svg_sprite.rb
@@ -71,6 +71,7 @@ module SvgSprite
discourse-bell-slash
discourse-bookmark-clock
discourse-compress
+ discourse-dnd
discourse-emojis
discourse-expand
discourse-other-tab
diff --git a/vendor/assets/svg-icons/discourse-additional.svg b/vendor/assets/svg-icons/discourse-additional.svg
index 48b856ea686..2cc3846994c 100644
--- a/vendor/assets/svg-icons/discourse-additional.svg
+++ b/vendor/assets/svg-icons/discourse-additional.svg
@@ -69,4 +69,8 @@ Additional SVG icons
+
+
+
+