Modified the user_callout behaviour

Now it appends a template instead of relying in a partial
to show it.

7 files changed, 44 insertions, 45 deletions

diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js
index c10f0e8de5e..300d825ec9a 100644
--- a/app/assets/javascripts/user_callout.js
+++ b/app/assets/javascripts/user_callout.js
@@ -4,29 +4,54 @@
 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();
-    this.toggleUserCallout();
   }
 
   init() {
-    $(document)
-      .on('click', closeButton, () => this.dismissCallout())
-      .on('click', userCalloutBtn, () => this.dismissCallout());
+    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() {
+  dismissCallout(e) {
     Cookies.set(USER_CALLOUT_COOKIE, 'true');
-  }
-
-  toggleUserCallout() {
-    if (!this.isCalloutDismissed) {
-      $(userCalloutElementName).show();
+    const $currentTarget = $(e.currentTarget);
+    if ($currentTarget.hasClass('close-user-callout')) {
+      this.userCalloutBody.empty();
     }
   }
 }
diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss
index dd252bf1e57..aad1a8986b0 100644
--- a/app/assets/stylesheets/pages/profile.scss
+++ b/app/assets/stylesheets/pages/profile.scss
@@ -279,7 +279,6 @@ table.u2f-registrations {
 }
 
 .user-callout {
-  display: none;
   margin: 24px auto 0;
 
   .bordered-box {
diff --git a/app/views/dashboard/projects/index.html.haml b/app/views/dashboard/projects/index.html.haml
index 8276cce693c..b82b933c3ad 100644
--- a/app/views/dashboard/projects/index.html.haml
+++ b/app/views/dashboard/projects/index.html.haml
@@ -5,7 +5,7 @@
 - page_title    "Projects"
 - header_title  "Projects", dashboard_projects_path
 
-= render partial: 'shared/user_callout'
+.user-callout{ 'callout-svg' => custom_icon('icon_customization') }
 
 - if @projects.any? || params[:filter_projects]
   = render 'dashboard/projects_head'
diff --git a/app/views/shared/_user_callout.html.haml b/app/views/shared/_user_callout.html.haml
deleted file mode 100644
index 3f310251568..00000000000
--- a/app/views/shared/_user_callout.html.haml
+++ /dev/null
@@ -1,14 +0,0 @@
-.user-callout
-  .bordered-box.landing.content-block
-    %button.btn.btn-default.close.close-user-callout{ type: "button" }
-      = icon("times", class: "dismiss-icon")
-    .row
-      .col-sm-3.col-xs-12.svg-container
-        = custom_icon('icon_customization')
-      .col-sm-8.col-xs-12.inner-content
-        %h4
-          Customize your experience
-        %p
-          Change syntax themes, default project pages, and more in preferences.
-
-        = link_to "Check it out",  profile_preferences_path, class: 'btn user-callout-btn'
diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml
index 6203c668ff5..c130f3d9e17 100644
--- a/app/views/users/show.html.haml
+++ b/app/views/users/show.html.haml
@@ -96,9 +96,9 @@
       %li.js-snippets-tab
         = link_to user_snippets_path, data: {target: 'div#snippets', action: 'snippets', toggle: 'tab'} do
           Snippets
-    
+
   %div{ class: container_class }
-    = render partial: 'shared/user_callout'
+    .user-callout{ 'callout-svg' => custom_icon('icon_customization') }
     .tab-content
       #activity.tab-pane
         .row-content-block.calender-block.white.second-block.hidden-xs
diff --git a/spec/javascripts/fixtures/user_callout.html.haml b/spec/javascripts/fixtures/user_callout.html.haml
index ad564469a27..275359bde0a 100644
--- a/spec/javascripts/fixtures/user_callout.html.haml
+++ b/spec/javascripts/fixtures/user_callout.html.haml
@@ -1,13 +1,2 @@
-.user-callout
-  .bordered-box.landing.content-block
-    %button.btn.btn-default.close.close-user-callout{ type: "button" }
-      %i.fa.fa-times.dismiss-icon
-    .row
-      .col-sm-3.col-xs-12.svg-container
-      .col-sm-8.col-xs-12.inner-content
-        %h4
-          Customize your experience
-        %p
-          Change syntax themes, default project pages, and more in preferences.
-        %a{ href: 'foo', class:'user-callout-btn' }
-          Check it out
+.user-callout{ 'callout-svg' => custom_icon('icon_customization') }
+
diff --git a/spec/javascripts/user_callout_spec.js b/spec/javascripts/user_callout_spec.js
index 097368db6e5..e174fdf35de 100644
--- a/spec/javascripts/user_callout_spec.js
+++ b/spec/javascripts/user_callout_spec.js
@@ -11,22 +11,22 @@ describe('UserCallout', function () {
     loadFixtures(fixtureName);
     this.userCallout = new UserCallout();
     this.closeButton = $('.close-user-callout');
-    this.userCalloutContainer = $('.user-callout');
     this.userCalloutBtn = $('.user-callout-btn');
+    this.userCalloutContainer = $('.user-callout');
     Cookie.set(USER_CALLOUT_COOKIE, 'false');
   });
 
-  it('shows when cookie is set to false', () => {
+  fit('shows when cookie is set to false', () => {
     expect(Cookie.get(USER_CALLOUT_COOKIE)).toBeDefined();
     expect(this.userCalloutContainer.is(':visible')).toBe(true);
   });
 
-  it('hides when user clicks on the dismiss-icon', () => {
+  fit('hides when user clicks on the dismiss-icon', () => {
     this.closeButton.click();
     expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('true');
   });
 
-  it('hides when user clicks on the "check it out" button', () => {
+  fit('hides when user clicks on the "check it out" button', () => {
     this.userCalloutBtn.click();
     expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('true');
   });