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

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 @@
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();
}
}
}
......
......@@ -279,7 +279,6 @@ table.u2f-registrations {
}
.user-callout {
display: none;
margin: 24px auto 0;
.bordered-box {
......
......@@ -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'
......
.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'
......@@ -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
......
.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') }
......@@ -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');
});
......
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