Modified the user_callout behaviour

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

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() {
-    Cookies.set(USER_CALLOUT_COOKIE, 'true');
   }
 
-  toggleUserCallout() {
-    if (!this.isCalloutDismissed) {
-      $(userCalloutElementName).show();
+  dismissCallout(e) {
+    Cookies.set(USER_CALLOUT_COOKIE, 'true');
+    const $currentTarget = $(e.currentTarget);
+    if ($currentTarget.hasClass('close-user-callout')) {
+      this.userCalloutBody.empty();
     }
   }
 }

app/assets/stylesheets/pages/profile.scss

@@ -279,7 +279,6 @@ table.u2f-registrations {
 }
 
 .user-callout {
-  display: none;
   margin: 24px auto 0;
 
   .bordered-box {

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'

app/views/shared/_user_callout.html.haml

-.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'

app/views/users/show.html.haml

@@ -98,7 +98,7 @@
           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

spec/javascripts/fixtures/user_callout.html.haml

-.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') }
+

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');
   });