diff --git a/app/assets/javascripts/discourse/app/components/site-header.js b/app/assets/javascripts/discourse/app/components/site-header.js index 4248d31adf5..3f799828736 100644 --- a/app/assets/javascripts/discourse/app/components/site-header.js +++ b/app/assets/javascripts/discourse/app/components/site-header.js @@ -238,43 +238,6 @@ const SiteHeaderComponent = MountWidget.extend( this.currentUser.on("status-changed", this, "queueRerender"); } - if (!this.siteSettings.enable_user_tips) { - if ( - this.currentUser && - !this.get("currentUser.read_first_notification") - ) { - document.body.classList.add("unread-first-notification"); - } - - // Allow first notification to be dismissed on a click anywhere - if ( - this.currentUser && - !this.get("currentUser.read_first_notification") && - !this.get("currentUser.enforcedSecondFactor") - ) { - this._dismissFirstNotification = (e) => { - if (document.body.classList.contains("unread-first-notification")) { - document.body.classList.remove("unread-first-notification"); - } - if ( - !e.target.closest("#current-user") && - !e.target.closest(".ring-backdrop") && - this.currentUser && - !this.get("currentUser.read_first_notification") && - !this.get("currentUser.enforcedSecondFactor") - ) { - this.eventDispatched( - "header:dismiss-first-notification-mask", - "header" - ); - } - }; - document.addEventListener("click", this._dismissFirstNotification, { - once: true, - }); - } - } - const header = document.querySelector("header.d-header"); this._itsatrap = new ItsATrap(header); const dirs = this.currentUser?.redesigned_user_menu_enabled @@ -365,8 +328,6 @@ const SiteHeaderComponent = MountWidget.extend( this._itsatrap?.destroy(); this._itsatrap = null; - - document.removeEventListener("click", this._dismissFirstNotification); }, buildArgs() { diff --git a/app/assets/javascripts/discourse/app/widgets/header.js b/app/assets/javascripts/discourse/app/widgets/header.js index 216f9445d29..390e3fcdfec 100644 --- a/app/assets/javascripts/discourse/app/widgets/header.js +++ b/app/assets/javascripts/discourse/app/widgets/header.js @@ -1,7 +1,6 @@ -import DiscourseURL, { userPath } from "discourse/lib/url"; +import DiscourseURL from "discourse/lib/url"; import I18n from "I18n"; import { addExtraUserClasses } from "discourse/helpers/user-avatar"; -import { ajax } from "discourse/lib/ajax"; import { avatarImg } from "discourse/widgets/post"; import { createWidget } from "discourse/widgets/widget"; import getURL from "discourse-common/lib/get-url"; @@ -88,11 +87,7 @@ createWidget("header-notifications", { const count = unread + reviewables; if (count > 0) { if (this._shouldHighlightAvatar()) { - if (this.siteSettings.enable_user_tips) { - contents.push(h("span.ring")); - } else { - this._addAvatarHighlight(contents); - } + contents.push(h("span.ring")); } contents.push( @@ -124,11 +119,7 @@ createWidget("header-notifications", { const unreadHighPriority = user.unread_high_priority_notifications; if (!!unreadHighPriority) { if (this._shouldHighlightAvatar()) { - if (this.siteSettings.enable_user_tips) { - contents.push(h("span.ring")); - } else { - this._addAvatarHighlight(contents); - } + contents.push(h("span.ring")); } // add the counter for the unread high priority @@ -155,52 +146,12 @@ createWidget("header-notifications", { return ( !user.read_first_notification && !user.enforcedSecondFactor && - !attrs.active && - attrs.ringBackdrop - ); - }, - - _addAvatarHighlight(contents) { - contents.push(h("span.ring")); - contents.push(h("span.ring-backdrop-spotlight")); - contents.push( - h( - "span.ring-backdrop", - {}, - h("h1.ring-first-notification", {}, [ - h( - "span", - { className: "first-notification" }, - I18n.t("user.first_notification") - ), - h("span", { className: "read-later" }, [ - this.attach("link", { - action: "readLater", - className: "read-later-link", - label: "user.skip_new_user_tips.read_later", - }), - ]), - h("span", {}, [ - I18n.t("user.skip_new_user_tips.not_first_time"), - " ", - this.attach("link", { - action: "skipNewUserTips", - className: "skip-new-user-tips", - label: "user.skip_new_user_tips.skip_link", - title: "user.skip_new_user_tips.description", - }), - ]), - ]) - ) + !attrs.active ); }, didRenderWidget() { - if ( - !this.currentUser || - !this.siteSettings.enable_user_tips || - !this._shouldHighlightAvatar() - ) { + if (!this.currentUser || !this._shouldHighlightAvatar()) { return; } @@ -363,7 +314,6 @@ createWidget("header-icons", { this.attach("user-dropdown", { active: attrs.userVisible, action: "toggleUserMenu", - ringBackdrop: attrs.ringBackdrop, user: attrs.user, }) ); @@ -485,7 +435,6 @@ export default createWidget("header", { searchVisible: false, hamburgerVisible: false, userVisible: false, - ringBackdrop: true, inTopicContext: false, }; @@ -508,7 +457,6 @@ export default createWidget("header", { hamburgerVisible: state.hamburgerVisible, userVisible: state.userVisible, searchVisible: state.searchVisible, - ringBackdrop: state.ringBackdrop, flagCount: attrs.flagCount, user: this.currentUser, sidebarEnabled: attrs.sidebarEnabled, @@ -631,10 +579,6 @@ export default createWidget("header", { }, toggleUserMenu() { - if (this.currentUser.get("read_first_notification")) { - this.state.ringBackdrop = false; - } - this.state.userVisible = !this.state.userVisible; this.toggleBodyScrolling(this.state.userVisible); @@ -731,43 +675,6 @@ export default createWidget("header", { } }, - headerDismissFirstNotificationMask() { - // Dismiss notifications - if (document.body.classList.contains("unread-first-notification")) { - document.body.classList.remove("unread-first-notification"); - } - this.store - .findStale( - "notification", - { - recent: true, - silent: this.get("currentUser.enforcedSecondFactor"), - limit: 5, - }, - { cacheKey: "recent-notifications" } - ) - .refresh(); - // Update UI - this.state.ringBackdrop = false; - this.scheduleRerender(); - }, - - readLater() { - this.headerDismissFirstNotificationMask(); - }, - - skipNewUserTips() { - this.headerDismissFirstNotificationMask(); - ajax(userPath(this.currentUser.username_lower), { - type: "PUT", - data: { - skip_new_user_tips: true, - }, - }).then(() => { - this.currentUser.set("skip_new_user_tips", true); - }); - }, - headerKeyboardTrigger(msg) { switch (msg.type) { case "search": diff --git a/app/assets/javascripts/discourse/tests/acceptance/user-tips-test.js b/app/assets/javascripts/discourse/tests/acceptance/user-tips-test.js index 3ae693249ff..aae76692250 100644 --- a/app/assets/javascripts/discourse/tests/acceptance/user-tips-test.js +++ b/app/assets/javascripts/discourse/tests/acceptance/user-tips-test.js @@ -12,8 +12,6 @@ acceptance("User Tips - first_notification", function (needs) { needs.hooks.afterEach(() => hideAllUserTips()); test("Shows first notification user tip", async function (assert) { - this.siteSettings.enable_user_tips = true; - await visit("/t/internationalization-localization/280"); assert.equal( query(".user-tip-title").textContent.trim(), diff --git a/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js b/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js index 3a8cac10f08..15f1cdd5c99 100644 --- a/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js +++ b/app/assets/javascripts/discourse/tests/integration/components/site-header-test.js @@ -7,8 +7,7 @@ import { triggerKeyEvent, waitUntil, } from "@ember/test-helpers"; -import { count, exists, query } from "discourse/tests/helpers/qunit-helpers"; -import pretender, { response } from "discourse/tests/helpers/create-pretender"; +import { exists, query } from "discourse/tests/helpers/qunit-helpers"; import { hbs } from "ember-cli-htmlbars"; module("Integration | Component | site-header", function (hooks) { @@ -19,43 +18,6 @@ module("Integration | Component | site-header", function (hooks) { this.currentUser.set("read_first_notification", false); }); - test("first notification mask", async function (assert) { - await render(hbs``); - - assert.strictEqual( - count(".ring-backdrop"), - 1, - "there is the first notification mask" - ); - - // Click anywhere - await click("header.d-header"); - - assert.ok( - !exists(".ring-backdrop"), - "it hides the first notification mask" - ); - }); - - test("do not call authenticated endpoints as anonymous", async function (assert) { - this.owner.unregister("service:current-user"); - - await render(hbs``); - - assert.ok( - !exists(".ring-backdrop"), - "there is no first notification mask for anonymous users" - ); - - pretender.get("/notifications", () => { - assert.ok(false, "it should not try to refresh notifications"); - return response(403, {}); - }); - - // Click anywhere - await click("header.d-header"); - }); - test("displaying unread and reviewable notifications count when user's notifications and reviewables count are updated", async function (assert) { this.currentUser.set("all_unread_notifications_count", 1); this.currentUser.set("redesigned_user_menu_enabled", true); @@ -83,22 +45,6 @@ module("Integration | Component | site-header", function (hooks) { assert.strictEqual(unreadBadge.textContent, "8"); }); - test("user avatar is highlighted when the user receives the first notification", async function (assert) { - this.currentUser.set("all_unread_notifications_count", 1); - this.currentUser.set("redesigned_user_menu_enabled", true); - this.currentUser.set("read_first_notification", false); - await render(hbs``); - assert.ok(exists(".ring-first-notification")); - }); - - test("user avatar is not highlighted when the user receives notifications beyond the first one", async function (assert) { - this.currentUser.set("redesigned_user_menu_enabled", true); - this.currentUser.set("all_unread_notifications_count", 1); - this.currentUser.set("read_first_notification", true); - await render(hbs``); - assert.ok(!exists(".ring-first-notification")); - }); - test("hamburger menu icon shows pending reviewables count", async function (assert) { this.currentUser.set("reviewable_count", 1); await render(hbs``); diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss index 696e29f10d9..d0260200709 100644 --- a/app/assets/stylesheets/common/base/discourse.scss +++ b/app/assets/stylesheets/common/base/discourse.scss @@ -505,56 +505,6 @@ table { } } -.ring-backdrop-spotlight { - position: absolute; - width: 80px; - height: 80px; - top: -18px; - right: -18px; - background-image: radial-gradient( - 40px at 50% 50%, - rgba(255, 255, 255, 0.15) 95%, - rgba(var(--always-black-rgb), 0.65) 100% - ); -} - -.ring-backdrop { - position: absolute; - width: 80px; - height: 80px; - top: -18px !important; - right: -18px !important; - box-shadow: 0 0 0 9999px rgba(var(--always-black-rgb), 0.65); - z-index: z("modal", "overlay"); -} - -.ring-first-notification { - position: absolute; - text-align: left; - right: 70px; - top: 60px; - width: 230px; - line-height: var(--line-height-medium); - - .first-notification, - .read-later { - display: block; - margin-bottom: 36px; - } - - .skip-new-user-tips, - .read-later-link { - font-size: var(--font-down-1); - text-decoration: underline; - } - - &, - .skip-new-user-tips, - .read-later-link { - color: #eee; - } -} - .ring { $gradient-start: transparent; $gradient-end: #090; diff --git a/app/assets/stylesheets/mobile/ring.scss b/app/assets/stylesheets/mobile/ring.scss index 1dc41f8ed68..2da82b54c9e 100644 --- a/app/assets/stylesheets/mobile/ring.scss +++ b/app/assets/stylesheets/mobile/ring.scss @@ -1,7 +1,3 @@ .ring { top: -7px !important; } - -.ring-first-notification { - top: 40px; -} diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index 709b79f8e2f..40d7e4d6ed4 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -1153,13 +1153,9 @@ en: You will be notified about activity directly relevant to you, including replies to your topics and posts, when someone @mentions you or quotes you, and replies to topics you are watching. Notifications will also be sent to your email when you haven’t logged in for a while.

Look for the %{icon} to decide which specific topics, categories and tags you want to be notified about. For more, see your notification preferences. - first_notification: "Your first notification! Select it to begin." dynamic_favicon: "Show counts on browser icon" skip_new_user_tips: description: "Skip new user onboarding tips and badges" - not_first_time: "Not your first time?" - skip_link: "Skip these tips" - read_later: "I'll read it later." reset_seen_user_tips: "Show user tips again" theme_default_on_all_devices: "Make this the default theme on all my devices" color_scheme_default_on_all_devices: "Set default color scheme(s) on all my devices"