From 1761317b3782344f7e4ef28175f63a2478711734 Mon Sep 17 00:00:00 2001
From: Guo Xiang Tan <tgx_world@hotmail.com>
Date: Wed, 16 Nov 2016 12:24:33 +0800
Subject: [PATCH] UX: Add help text to first notification.

---
 .../javascripts/discourse/widgets/header.js.es6      |  5 ++++-
 app/assets/stylesheets/common/base/discourse.scss    | 12 +++++++++++-
 app/assets/stylesheets/mobile/ring.scss              |  4 ++++
 config/locales/client.en.yml                         |  1 +
 4 files changed, 20 insertions(+), 2 deletions(-)

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"