diff --git a/app/assets/javascripts/discourse/widgets/header.js.es6 b/app/assets/javascripts/discourse/widgets/header.js.es6 index e381c6a7233..4e87632666c 100644 --- a/app/assets/javascripts/discourse/widgets/header.js.es6 +++ b/app/assets/javascripts/discourse/widgets/header.js.es6 @@ -45,7 +45,10 @@ createWidget('header-notifications', { if (!currentUser.get('read_first_notification')) { contents.push(h('span.ring')); if (!attrs.active && attrs.ringBackdrop) { - contents.push(h('span.ring-backdrop')); + contents.push(h('span.ring-backdrop', + {}, + h('h1.ring-first-notification', {} ,I18n.t('user.first_notification')) + )); } }; diff --git a/app/assets/stylesheets/common/base/discourse.scss b/app/assets/stylesheets/common/base/discourse.scss index 1684695bdc8..91731735c30 100644 --- a/app/assets/stylesheets/common/base/discourse.scss +++ b/app/assets/stylesheets/common/base/discourse.scss @@ -171,11 +171,21 @@ body { height: 80px; top: -18px !important; right: -18px !important; - box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.8); + box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.85); border-radius: 100%; z-index: 1040; } +.ring-first-notification { + position: absolute; + color: $secondary; + text-align: left; + right: 60px; + top: 70px; + width: 290px; + line-height: 30px; +} + .ring { $gradient-start: transparent; $gradient-end: #090; diff --git a/app/assets/stylesheets/mobile/ring.scss b/app/assets/stylesheets/mobile/ring.scss index 2da82b54c9e..9dc97e956ec 100644 --- a/app/assets/stylesheets/mobile/ring.scss +++ b/app/assets/stylesheets/mobile/ring.scss @@ -1,3 +1,7 @@ .ring { top: -7px !important; } + +.ring-first-notification { + right: 20px; +} diff --git a/config/locales/client.en.yml b/config/locales/client.en.yml index f4689a68430..2d4e080f67d 100644 --- a/config/locales/client.en.yml +++ b/config/locales/client.en.yml @@ -514,6 +514,7 @@ en: each_browser_note: "Note: You have to change this setting on every browser you use." dismiss_notifications: "Dismiss All" dismiss_notifications_tooltip: "Mark all unread notifications as read" + first_notification: "Click on user profile to view your first notification" disable_jump_reply: "Don't jump to my post after I reply" dynamic_favicon: "Show new / updated topic count on browser icon" external_links_in_new_tab: "Open all external links in a new tab"