diff --git a/app/assets/javascripts/user_callout.js b/app/assets/javascripts/user_callout.js new file mode 100644 index 00000000000..b91fc698629 --- /dev/null +++ b/app/assets/javascripts/user_callout.js @@ -0,0 +1,22 @@ +/* eslint-disable arrow-parens, class-methods-use-this, no-param-reassign */ +/* global Cookies */ + +((global) => { + const userCalloutElementName = '#user-callout'; + + class UserCallout { + constructor() { + this.init(); + } + + init() { + $(document) + .on('DOMContentLoaded', () => { + const element = $(userCalloutElementName); + console.log('element:', element); + }); + } + } + + global.UserCallout = UserCallout; +})(window.gl || (window.gl = {})); \ No newline at end of file diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index ba0af072716..1de05112fa7 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/app/assets/stylesheets/framework/variables.scss @@ -201,6 +201,7 @@ $table-permission-x-bg: #d9edf7; $username-color: #666; $description-color: #666; $profiler-border: #eee; +$user-callout-right: 120px; /* tanuki logo colors */ $tanuki-red: #e24329; diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 8031c4467a4..9add1bafdb3 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -277,3 +277,33 @@ table.u2f-registrations { padding-left: 18px; } } + +#user-callout { + margin: 24px auto 0; + + .bordered-box { + border: 1px solid $border-color; + border-radius: $border-radius-default; + } + + .landing { + margin-bottom: $gl-padding; + overflow: hidden; + + .dismiss-icon { + position: absolute; + right: $user-callout-right; + cursor: pointer; + color: $cycle-analytics-dismiss-icon-color; + } + + .svg-container { + text-align: center; + + svg { + width: 136px; + height: 136px; + } + } + } +} diff --git a/app/views/dashboard/_projects_head.html.haml b/app/views/dashboard/_projects_head.html.haml index 48b0fd504f4..0aec51cf7c9 100644 --- a/app/views/dashboard/_projects_head.html.haml +++ b/app/views/dashboard/_projects_head.html.haml @@ -1,5 +1,18 @@ = content_for :flash_message do = render 'shared/project_limit' +#user-callout + .bordered-box.landing.content-block + = icon("times", class: "dismiss-icon") + .row + .col-sm-3.col-xs-12.svg-container + = custom_icon('icon_cycle_analytics_splash') + .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' .top-area %ul.nav-links = nav_link(page: [dashboard_projects_path, root_path]) do diff --git a/app/views/users/show.html.haml b/app/views/users/show.html.haml index dc2fea450bd..a3e35961261 100644 --- a/app/views/users/show.html.haml +++ b/app/views/users/show.html.haml @@ -98,7 +98,19 @@ Snippets %div{ class: container_class } - .tab-content + #user-callout + .bordered-box.landing.content-block + = icon("times", class: "dismiss-icon") + .row + .col-sm-3.col-xs-12.svg-container + = custom_icon('icon_cycle_analytics_splash') + .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' #activity.tab-pane .row-content-block.calender-block.white.second-block.hidden-xs .user-calendar{ data: { href: user_calendar_path } } @@ -127,8 +139,11 @@ = spinner :javascript - var userProfile; + var userProfile, userCallout; userProfile = new gl.User({ action: "#{controller.action_name}" }); + + userCallout = new gl.UserCallout(); +