diff options
author | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-02-23 15:23:33 -0600 |
---|---|---|
committer | Jose Ivan Vargas <jvargas@gitlab.com> | 2017-02-23 15:47:23 -0600 |
commit | 2f681138dc2338b50af0b4d2bfbd24032e97f2e3 (patch) | |
tree | 193846079dc7a920539e2eb8391a54a12f13484a /app | |
parent | 621bfdaa9f9abe977310fb2692a4194b5a87347c (diff) | |
download | gitlab-ce-2f681138dc2338b50af0b4d2bfbd24032e97f2e3.tar.gz |
Modified the user_callout behaviour
Now it appends a template instead of relying in a partial
to show it.
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/user_callout.js | 45 | ||||
-rw-r--r-- | app/assets/stylesheets/pages/profile.scss | 1 | ||||
-rw-r--r-- | app/views/dashboard/projects/index.html.haml | 2 | ||||
-rw-r--r-- | app/views/shared/_user_callout.html.haml | 14 | ||||
-rw-r--r-- | app/views/users/show.html.haml | 4 |
5 files changed, 38 insertions, 28 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 |