Merge branch 'user-callouts' into 'master'

Added user-callouts

Closes #27269

See merge request !9249

3 files changed, 101 insertions, 0 deletions

diff --git a/app/assets/javascripts/dispatcher.js.es6 b/app/assets/javascripts/dispatcher.js.es6
index 089ecedeb78..0f678492d4c 100644
--- a/app/assets/javascripts/dispatcher.js.es6
+++ b/app/assets/javascripts/dispatcher.js.es6
@@ -36,6 +36,7 @@
 /* global Shortcuts */
 
 const ShortcutsBlob = require('./shortcuts_blob');
+const UserCallout = require('./user_callout');
 
 (function() {
   var Dispatcher;
@@ -277,6 +278,9 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'ci:lints:show':
           new gl.CILintEditor();
           break;
+        case 'users:show':
+          new UserCallout();
+          break;
       }
       switch (path.first()) {
         case 'sessions':
@@ -313,6 +317,7 @@ const ShortcutsBlob = require('./shortcuts_blob');
         case 'dashboard':
         case 'root':
           shortcut_handler = new ShortcutsDashboardNavigation();
+          new UserCallout();
           break;
         case 'profiles':
           new NotificationsForm();
diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js
new file mode 100644
index 00000000000..74b869502a4
--- /dev/null
+++ b/app/assets/javascripts/user_callout.js
@@ -0,0 +1,58 @@
+/* global Cookies */
+
+const userCalloutElementName = '.user-callout';
+const closeButton = '.close-user-callout';
+const userCalloutBtn = '.user-callout-btn';
+const userCalloutSvgAttrName = 'callout-svg';
+
+const USER_CALLOUT_COOKIE = 'user_callout_dismissed';
+
+const USER_CALLOUT_TEMPLATE = `
+  <div class="bordered-box landing content-block">
+    <button class="btn btn-default close close-user-callout" type="button">
+      <i class="fa fa-times dismiss-icon"></i>
+    </button>
+    <div class="row">
+      <div class="col-sm-3 col-xs-12 svg-container">
+      </div>
+      <div class="col-sm-8 col-xs-12 inner-content">
+        <h4>
+          Customize your experience
+        </h4>
+        <p>
+          Change syntax themes, default project pages, and more in preferences.
+        </p>
+        <a class="btn user-callout-btn" href="/profile/preferences">Check it out</a>
+      </div>
+  </div>
+</div>`;
+
+class UserCallout {
+  constructor() {
+    this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE);
+    this.userCalloutBody = $(userCalloutElementName);
+    this.userCalloutSvg = $(userCalloutElementName).attr(userCalloutSvgAttrName);
+    $(userCalloutElementName).removeAttr(userCalloutSvgAttrName);
+    this.init();
+  }
+
+  init() {
+    const $template = $(USER_CALLOUT_TEMPLATE);
+    if (!this.isCalloutDismissed || this.isCalloutDismissed === 'false') {
+      $template.find('.svg-container').append(this.userCalloutSvg);
+      this.userCalloutBody.append($template);
+      $template.find(closeButton).on('click', e => this.dismissCallout(e));
+      $template.find(userCalloutBtn).on('click', e => this.dismissCallout(e));
+    }
+  }
+
+  dismissCallout(e) {
+    Cookies.set(USER_CALLOUT_COOKIE, 'true');
+    const $currentTarget = $(e.currentTarget);
+    if ($currentTarget.hasClass('close-user-callout')) {
+      this.userCalloutBody.empty();
+    }
+  }
+}
+
+module.exports = UserCallout;
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index 8031c4467a4..aad1a8986b0 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -277,3 +277,41 @@ table.u2f-registrations {
     padding-left: 18px;
   }
 }
+
+.user-callout {
+  margin: 24px auto 0;
+
+  .bordered-box {
+    border: 1px solid $border-color;
+    border-radius: $border-radius-default;
+  }
+
+  .landing {
+    margin-bottom: $gl-padding;
+
+    .close {
+      margin-right: 20px;
+    }
+
+    .dismiss-icon {
+      float: right;
+      cursor: pointer;
+      color: $cycle-analytics-dismiss-icon-color;
+    }
+
+    .svg-container {
+      text-align: center;
+
+      svg {
+        width: 136px;
+        height: 136px;
+      }
+    }
+  }
+
+  @media(max-width: $screen-xs-max) {
+    .inner-content {
+      padding-left: 30px;
+    }
+  }
+}