Commit 2f681138 authored by Jose Ivan Vargas's avatar Jose Ivan Vargas

Modified the user_callout behaviour

Now it appends a template instead of relying in a partial
to show it.
parent 621bfdaa
...@@ -4,29 +4,54 @@ ...@@ -4,29 +4,54 @@
const userCalloutElementName = '.user-callout'; const userCalloutElementName = '.user-callout';
const closeButton = '.close-user-callout'; const closeButton = '.close-user-callout';
const userCalloutBtn = '.user-callout-btn'; const userCalloutBtn = '.user-callout-btn';
const userCalloutSvgAttrName = 'callout-svg';
const USER_CALLOUT_COOKIE = 'user_callout_dismissed'; 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 { class UserCallout {
constructor() { constructor() {
this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE); this.isCalloutDismissed = Cookies.get(USER_CALLOUT_COOKIE);
this.userCalloutBody = $(userCalloutElementName);
this.userCalloutSvg = $(userCalloutElementName).attr(userCalloutSvgAttrName);
$(userCalloutElementName).removeAttr(userCalloutSvgAttrName);
this.init(); this.init();
this.toggleUserCallout();
} }
init() { init() {
$(document) const $template = $(USER_CALLOUT_TEMPLATE);
.on('click', closeButton, () => this.dismissCallout()) if (!this.isCalloutDismissed || this.isCalloutDismissed === 'false') {
.on('click', userCalloutBtn, () => this.dismissCallout()); $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() { dismissCallout(e) {
if (!this.isCalloutDismissed) { Cookies.set(USER_CALLOUT_COOKIE, 'true');
$(userCalloutElementName).show(); const $currentTarget = $(e.currentTarget);
if ($currentTarget.hasClass('close-user-callout')) {
this.userCalloutBody.empty();
} }
} }
} }
......
...@@ -279,7 +279,6 @@ table.u2f-registrations { ...@@ -279,7 +279,6 @@ table.u2f-registrations {
} }
.user-callout { .user-callout {
display: none;
margin: 24px auto 0; margin: 24px auto 0;
.bordered-box { .bordered-box {
......
...@@ -5,7 +5,7 @@ ...@@ -5,7 +5,7 @@
- page_title "Projects" - page_title "Projects"
- header_title "Projects", dashboard_projects_path - 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] - if @projects.any? || params[:filter_projects]
= render 'dashboard/projects_head' = render 'dashboard/projects_head'
......
.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'
...@@ -98,7 +98,7 @@ ...@@ -98,7 +98,7 @@
Snippets Snippets
%div{ class: container_class } %div{ class: container_class }
= render partial: 'shared/user_callout' .user-callout{ 'callout-svg' => custom_icon('icon_customization') }
.tab-content .tab-content
#activity.tab-pane #activity.tab-pane
.row-content-block.calender-block.white.second-block.hidden-xs .row-content-block.calender-block.white.second-block.hidden-xs
......
.user-callout .user-callout{ 'callout-svg' => custom_icon('icon_customization') }
.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
...@@ -11,22 +11,22 @@ describe('UserCallout', function () { ...@@ -11,22 +11,22 @@ describe('UserCallout', function () {
loadFixtures(fixtureName); loadFixtures(fixtureName);
this.userCallout = new UserCallout(); this.userCallout = new UserCallout();
this.closeButton = $('.close-user-callout'); this.closeButton = $('.close-user-callout');
this.userCalloutContainer = $('.user-callout');
this.userCalloutBtn = $('.user-callout-btn'); this.userCalloutBtn = $('.user-callout-btn');
this.userCalloutContainer = $('.user-callout');
Cookie.set(USER_CALLOUT_COOKIE, 'false'); 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(Cookie.get(USER_CALLOUT_COOKIE)).toBeDefined();
expect(this.userCalloutContainer.is(':visible')).toBe(true); 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(); this.closeButton.click();
expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('true'); 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(); this.userCalloutBtn.click();
expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('true'); expect(Cookie.get(USER_CALLOUT_COOKIE)).toBe('true');
}); });
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment