Merge branch 'profile-settings-ui' into 'master'

Profile settings

Closes #13853 

![](https://gitlab.com/gitlab-org/gitlab-ce/uploads/4fb28f2598de6d9ca4e5be8595dbe863/profile-settings.png)

See merge request !3038

app/assets/javascripts/profile.js.coffee

@@ -48,7 +48,7 @@ class @Profile
       $filename.text($filename.data('label'))
 
     $('.js-upload-user-avatar').on 'click', ->
-      $('.edit_user').submit()
+      $('.edit-user').submit()
 
     $avatarInput.on "change", ->
       form = $(this).closest("form")
@@ -62,4 +62,3 @@ class @Profile
         $modalCropImg.attr('src', event.target.result)
 
       fileData = reader.readAsDataURL(this.files[0])
-

app/assets/stylesheets/framework/common.scss

@@ -6,10 +6,13 @@
 .cdark { color: #444 }
 
 /** COMMON CLASSES **/
+.prepend-top-0 { margin-top: 0; }
+.prepend-top-5 { margin-top: 5px; }
 .prepend-top-10 { margin-top:10px }
 .prepend-top-default { margin-top: $gl-padding !important; }
 .prepend-top-20 { margin-top:20px }
 .prepend-left-10 { margin-left:10px }
+.prepend-left-default { margin-left:$gl-padding }
 .prepend-left-20 { margin-left:20px }
 .append-right-10 { margin-right:10px }
 .append-right-20 { margin-right:20px }

app/assets/stylesheets/framework/forms.scss

@@ -28,15 +28,15 @@ input[type='search'].search-input {
   }
 
   &.search-input:-moz-placeholder { /* Firefox 18- */
-    text-align: center;  
+    text-align: center;
   }
 
   &.search-input::-moz-placeholder {  /* Firefox 19+ */
-    text-align: center;  
+    text-align: center;
   }
 
-  &.search-input:-ms-input-placeholder {  
-    text-align: center; 
+  &.search-input:-ms-input-placeholder {
+    text-align: center;
   }
 }
 
@@ -69,6 +69,10 @@ label {
   &.inline-label {
     margin: 0;
   }
+
+  &.label-light {
+    font-weight: 600;
+  }
 }
 
 .inline-input-group {

app/assets/stylesheets/framework/tw_bootstrap.scss

@@ -167,12 +167,6 @@
   }
 }
 
-.alert-help {
-  background-color: $background-color;
-  border: 1px solid $border-color;
-  color: $gl-gray;
-}
-
 // Typography =================================================================
 
 .text-primary,

app/assets/stylesheets/framework/typography.scss

@@ -196,7 +196,7 @@ body {
 
 h1, h2, h3, h4, h5, h6 {
   color: $gl-header-color;
-  font-weight: 500;
+  font-weight: 600;
 }
 
 /** CODE **/

app/assets/stylesheets/framework/variables.scss

@@ -34,6 +34,7 @@ $error-exclamation-point: #E62958;
 $border-radius-default: 3px;
 $list-title-color: #333333;
 $list-text-color: #555555;
+$profile-settings-link-color: $md-link-color;
 
 /*
  * Color schema

app/assets/stylesheets/pages/profile.scss

@@ -5,12 +5,25 @@
   }
 }
 
-.profile-avatar-form-option {
-  hr {
-    margin: 10px 0;
+.profile-settings-sidebar {
+  a {
+    color: $profile-settings-link-color;
   }
 }
 
+.avatar-image {
+  @media (min-width: $screen-sm-min) {
+    float: left;
+    margin-bottom: 0;
+  }
+}
+
+.avatar-file-name {
+  position: relative;
+  top: 2px;
+  display: inline-block;
+}
+
 .oauth-buttons {
   .btn-group {
     margin-right: 10px;
@@ -79,6 +92,13 @@
   margin: auto;
 }
 
+.user-avatar-button {
+  .file-name {
+    display: inline-block;
+    padding-left: 10px;
+  }
+}
+
 .modal-profile-crop {
   .modal-dialog {
     width: 500px;

app/views/profiles/show.html.haml

-.alert.alert-help.prepend-top-default
-  This information will appear on your profile.
-  - if current_user.ldap_user?
-    Some options are unavailable for LDAP accounts
-
-.prepend-top-default
-= form_for @user, url: profile_path, method: :put, html: { multipart: true, class: "edit_user form-horizontal" }, authenticity_token: true do |f|
+= form_for @user, url: profile_path, method: :put, html: { multipart: true, class: "edit-user prepend-top-default" }, authenticity_token: true do |f|
+  = f.hidden_field :avatar_crop_x
+  = f.hidden_field :avatar_crop_y
+  = f.hidden_field :avatar_crop_size
   -if @user.errors.any?
     %div.alert.alert-danger
       %ul
         - @user.errors.full_messages.each do |msg|
           %li= msg
   .row
-    .col-md-7
+    .col-lg-3.profile-settings-sidebar
+      %h4.prepend-top-0
+        Public Avatar
+      %p
+        - if @user.avatar?
+          You can change your avatar here
+          - if Gitlab.config.gravatar.enabled
+            or remove the current avatar to revert to #{link_to Gitlab.config.gravatar.host, "http://" + Gitlab.config.gravatar.host}
+        - else
+          You can upload an avatar here
+          - if Gitlab.config.gravatar.enabled
+            or change it at #{link_to Gitlab.config.gravatar.host, "http://" + Gitlab.config.gravatar.host}
+    .col-lg-9
+      .clearfix.avatar-image.append-bottom-default
+        = image_tag avatar_icon(@user, 160), alt: '', class: 'avatar s160'
+      %h5.prepend-top-0
+        Upload new avatar
+      .prepend-top-5.append-bottom-10
+        %a.btn.js-choose-user-avatar-button
+          Browse file...
+        %span.avatar-file-name.prepend-left-default.js-avatar-filename No file chosen
+        = f.file_field :avatar, class: "js-user-avatar-input hidden"
+      .help-block
+        The maximum file size allowed is 200KB.
+      - if @user.avatar?
+        %hr
+        = link_to 'Remove avatar', profile_avatar_path, data: { confirm: "Avatar will be removed. Are you sure?"}, method: :delete, class: "btn btn-gray"
+  %hr
+  .row
+    .col-lg-3.profile-settings-sidebar
+      %h4.prepend-top-0
+        Main settings
+      %p
+        This information will appear on your profile.
+        - if current_user.ldap_user?
+          Some options are unavailable for LDAP accounts
+    .col-lg-9
       .form-group
-        = f.label :name, class: "control-label"
-        .col-sm-10
-          = f.text_field :name, class: "form-control", required: true
-          %span.help-block Enter your name, so people you know can recognize you.
+        = f.label :name, class: "label-light"
+        = f.text_field :name, class: "form-control", required: true
+        %span.help-block Enter your name, so people you know can recognize you.
 
       .form-group
-        = f.label :email, class: "control-label"
-        .col-sm-10
-          - if @user.ldap_user? && @user.ldap_email?
-            = f.text_field :email, class: "form-control", required: true, readonly: true
-            %span.help-block.light
-              Your email address was automatically set based on the LDAP server.
+        = f.label :email, class: "label-light"
+        - if @user.ldap_user? && @user.ldap_email?
+          = f.text_field :email, class: "form-control", required: true, readonly: true
+          %span.help-block.light
+            Your email address was automatically set based on the LDAP server.
+        - else
+          - if @user.temp_oauth_email?
+            = f.text_field :email, class: "form-control", required: true, value: nil
           - else
-            - if @user.temp_oauth_email?
-              = f.text_field :email, class: "form-control", required: true, value: nil
-            - else
-              = f.text_field :email, class: "form-control", required: true
-            - if @user.unconfirmed_email.present?
-              %span.help-block
-                Please click the link in the confirmation email before continuing. It was sent to
-                = succeed "." do
-                  %strong #{@user.unconfirmed_email}
-                %p
-                = link_to "Resend confirmation e-mail", user_confirmation_path(user: { email: @user.unconfirmed_email }), method: :post
+            = f.text_field :email, class: "form-control", required: true
+          - if @user.unconfirmed_email.present?
+            %span.help-block
+              Please click the link in the confirmation email before continuing. It was sent to
+              = succeed "." do
+                %strong #{@user.unconfirmed_email}
+              %p
+              = link_to "Resend confirmation e-mail", user_confirmation_path(user: { email: @user.unconfirmed_email }), method: :post
 
-            - else
-              %span.help-block We also use email for avatar detection if no avatar is uploaded.
+          - else
+            %span.help-block We also use email for avatar detection if no avatar is uploaded.
       .form-group
-        = f.label :public_email, class: "control-label"
-        .col-sm-10
-          = f.select :public_email, options_for_select(@user.all_emails, selected: @user.public_email), {include_blank: 'Do not show on profile'}, class: "select2"
-          %span.help-block This email will be displayed on your public profile.
+        = f.label :public_email, class: "label-light"
+        = f.select :public_email, options_for_select(@user.all_emails, selected: @user.public_email), {include_blank: 'Do not show on profile'}, class: "select2"
+        %span.help-block This email will be displayed on your public profile.
       .form-group
-        = f.label :skype, class: "control-label"
-        .col-sm-10= f.text_field :skype, class: "form-control"
+        = f.label :skype, class: "label-light"
+        = f.text_field :skype, class: "form-control"
       .form-group
-        = f.label :linkedin, class: "control-label"
-        .col-sm-10= f.text_field :linkedin, class: "form-control"
+        = f.label :linkedin, class: "label-light"
+        = f.text_field :linkedin, class: "form-control"
       .form-group
-        = f.label :twitter, class: "control-label"
-        .col-sm-10= f.text_field :twitter, class: "form-control"
+        = f.label :twitter, class: "label-light"
+        = f.text_field :twitter, class: "form-control"
       .form-group
-        = f.label :website_url, 'Website', class: "control-label"
-        .col-sm-10= f.text_field :website_url, class: "form-control"
+        = f.label :website_url, 'Website', class: "label-light"
+        = f.text_field :website_url, class: "form-control"
       .form-group
-        = f.label :location, 'Location', class: "control-label"
-        .col-sm-10= f.text_field :location, class: "form-control"
+        = f.label :location, 'Location', class: "label-light"
+        = f.text_field :location, class: "form-control"
       .form-group
-        = f.label :bio, class: "control-label"
-        .col-sm-10
-          = f.text_area :bio, rows: 4, class: "form-control", maxlength: 250
-          %span.help-block Tell us about yourself in fewer than 250 characters.
-
-    .col-md-5
-      .light-well
-        = image_tag avatar_icon(@user, 160), alt: '', class: 'avatar s160'
-
-        .clearfix
-          .profile-avatar-form-option
-            %p.light
-              - if @user.avatar?
-                You can change your avatar here
-                - if Gitlab.config.gravatar.enabled
-                  %br
-                  or remove the current avatar to revert to #{link_to Gitlab.config.gravatar.host, "http://" + Gitlab.config.gravatar.host}
-              - else
-                You can upload an avatar here
-                - if Gitlab.config.gravatar.enabled
-                  %br
-                  or change it at #{link_to Gitlab.config.gravatar.host, "http://" + Gitlab.config.gravatar.host}
-            %hr
-            %a.choose-btn.btn.btn-sm.js-choose-user-avatar-button
-              %i.fa.fa-paperclip
-              %span Choose File ...
-             
-            %span.file_name.js-avatar-filename File name...
-            = f.file_field :avatar, class: "js-user-avatar-input hidden"
-            = f.hidden_field :avatar_crop_x
-            = f.hidden_field :avatar_crop_y
-            = f.hidden_field :avatar_crop_size
-            .light The maximum file size allowed is 200KB.
-            - if @user.avatar?
-              %hr
-              = link_to 'Remove avatar', profile_avatar_path, data: { confirm: "Avatar will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-sm remove-avatar"
-
-
-  .form-actions
-    = f.submit 'Save changes', class: "btn btn-success"
-    = link_to "Cancel", user_path(current_user), class: "btn btn-cancel"
+        = f.label :bio, class: "label-light"
+        = f.text_area :bio, rows: 4, class: "form-control", maxlength: 250
+        %span.help-block Tell us about yourself in fewer than 250 characters.
+      .prepend-top-default.append-bottom-default
+        = f.submit 'Update profile settings', class: "btn btn-success"
+        = link_to "Cancel", user_path(current_user), class: "btn btn-cancel"
 
 .modal.modal-profile-crop
   .modal-dialog

features/steps/profile/profile.rb

@@ -13,7 +13,7 @@ class Spinach::Features::Profile < Spinach::FeatureSteps
     fill_in 'user_website_url', with: 'testurl'
     fill_in 'user_location', with: 'Ukraine'
     fill_in 'user_bio', with: 'I <3 GitLab'
-    click_button 'Save changes'
+    click_button 'Update profile settings'
     @user.reload
   end
 
@@ -237,7 +237,7 @@ class Spinach::Features::Profile < Spinach::FeatureSteps
     page.find('#user_avatar_crop_y',    visible: false).set('0')
     page.find('#user_avatar_crop_size', visible: false).set('256')
 
-    click_button "Save changes"
+    click_button "Update profile settings"
 
     @user.reload
   end