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 = ` +
+ +
+
+
+
+

+ Customize your experience +

+

+ Change syntax themes, default project pages, and more in preferences. +

+ Check it out +
+
+
`; + 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'); });