Commit 1fe9b933 authored by Jacob Schatz's avatar Jacob Schatz

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
parents 84f158eb a03b0e1b
...@@ -48,7 +48,7 @@ class @Profile ...@@ -48,7 +48,7 @@ class @Profile
$filename.text($filename.data('label')) $filename.text($filename.data('label'))
$('.js-upload-user-avatar').on 'click', -> $('.js-upload-user-avatar').on 'click', ->
$('.edit_user').submit() $('.edit-user').submit()
$avatarInput.on "change", -> $avatarInput.on "change", ->
form = $(this).closest("form") form = $(this).closest("form")
...@@ -62,4 +62,3 @@ class @Profile ...@@ -62,4 +62,3 @@ class @Profile
$modalCropImg.attr('src', event.target.result) $modalCropImg.attr('src', event.target.result)
fileData = reader.readAsDataURL(this.files[0]) fileData = reader.readAsDataURL(this.files[0])
...@@ -6,10 +6,13 @@ ...@@ -6,10 +6,13 @@
.cdark { color: #444 } .cdark { color: #444 }
/** COMMON CLASSES **/ /** COMMON CLASSES **/
.prepend-top-0 { margin-top: 0; }
.prepend-top-5 { margin-top: 5px; }
.prepend-top-10 { margin-top:10px } .prepend-top-10 { margin-top:10px }
.prepend-top-default { margin-top: $gl-padding !important; } .prepend-top-default { margin-top: $gl-padding !important; }
.prepend-top-20 { margin-top:20px } .prepend-top-20 { margin-top:20px }
.prepend-left-10 { margin-left:10px } .prepend-left-10 { margin-left:10px }
.prepend-left-default { margin-left:$gl-padding }
.prepend-left-20 { margin-left:20px } .prepend-left-20 { margin-left:20px }
.append-right-10 { margin-right:10px } .append-right-10 { margin-right:10px }
.append-right-20 { margin-right:20px } .append-right-20 { margin-right:20px }
......
...@@ -28,15 +28,15 @@ input[type='search'].search-input { ...@@ -28,15 +28,15 @@ input[type='search'].search-input {
} }
&.search-input:-moz-placeholder { /* Firefox 18- */ &.search-input:-moz-placeholder { /* Firefox 18- */
text-align: center; text-align: center;
} }
&.search-input::-moz-placeholder { /* Firefox 19+ */ &.search-input::-moz-placeholder { /* Firefox 19+ */
text-align: center; text-align: center;
} }
&.search-input:-ms-input-placeholder { &.search-input:-ms-input-placeholder {
text-align: center; text-align: center;
} }
} }
...@@ -69,6 +69,10 @@ label { ...@@ -69,6 +69,10 @@ label {
&.inline-label { &.inline-label {
margin: 0; margin: 0;
} }
&.label-light {
font-weight: 600;
}
} }
.inline-input-group { .inline-input-group {
......
...@@ -167,12 +167,6 @@ ...@@ -167,12 +167,6 @@
} }
} }
.alert-help {
background-color: $background-color;
border: 1px solid $border-color;
color: $gl-gray;
}
// Typography ================================================================= // Typography =================================================================
.text-primary, .text-primary,
......
...@@ -196,7 +196,7 @@ body { ...@@ -196,7 +196,7 @@ body {
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
color: $gl-header-color; color: $gl-header-color;
font-weight: 500; font-weight: 600;
} }
/** CODE **/ /** CODE **/
......
...@@ -34,6 +34,7 @@ $error-exclamation-point: #E62958; ...@@ -34,6 +34,7 @@ $error-exclamation-point: #E62958;
$border-radius-default: 3px; $border-radius-default: 3px;
$list-title-color: #333333; $list-title-color: #333333;
$list-text-color: #555555; $list-text-color: #555555;
$profile-settings-link-color: $md-link-color;
/* /*
* Color schema * Color schema
......
...@@ -5,12 +5,25 @@ ...@@ -5,12 +5,25 @@
} }
} }
.profile-avatar-form-option { .profile-settings-sidebar {
hr { a {
margin: 10px 0; 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 { .oauth-buttons {
.btn-group { .btn-group {
margin-right: 10px; margin-right: 10px;
...@@ -79,6 +92,13 @@ ...@@ -79,6 +92,13 @@
margin: auto; margin: auto;
} }
.user-avatar-button {
.file-name {
display: inline-block;
padding-left: 10px;
}
}
.modal-profile-crop { .modal-profile-crop {
.modal-dialog { .modal-dialog {
width: 500px; width: 500px;
......
.alert.alert-help.prepend-top-default = form_for @user, url: profile_path, method: :put, html: { multipart: true, class: "edit-user prepend-top-default" }, authenticity_token: true do |f|
This information will appear on your profile. = f.hidden_field :avatar_crop_x
- if current_user.ldap_user? = f.hidden_field :avatar_crop_y
Some options are unavailable for LDAP accounts = f.hidden_field :avatar_crop_size
.prepend-top-default
= form_for @user, url: profile_path, method: :put, html: { multipart: true, class: "edit_user form-horizontal" }, authenticity_token: true do |f|
-if @user.errors.any? -if @user.errors.any?
%div.alert.alert-danger %div.alert.alert-danger
%ul %ul
- @user.errors.full_messages.each do |msg| - @user.errors.full_messages.each do |msg|
%li= msg %li= msg
.row .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 .form-group
= f.label :name, class: "control-label" = f.label :name, class: "label-light"
.col-sm-10 = f.text_field :name, class: "form-control", required: true
= f.text_field :name, class: "form-control", required: true %span.help-block Enter your name, so people you know can recognize you.
%span.help-block Enter your name, so people you know can recognize you.
.form-group .form-group
= f.label :email, class: "control-label" = f.label :email, class: "label-light"
.col-sm-10 - if @user.ldap_user? && @user.ldap_email?
- if @user.ldap_user? && @user.ldap_email? = f.text_field :email, class: "form-control", required: true, readonly: true
= f.text_field :email, class: "form-control", required: true, readonly: true %span.help-block.light
%span.help-block.light Your email address was automatically set based on the LDAP server.
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 - else
- if @user.temp_oauth_email? = f.text_field :email, class: "form-control", required: true
= f.text_field :email, class: "form-control", required: true, value: nil - if @user.unconfirmed_email.present?
- else %span.help-block
= f.text_field :email, class: "form-control", required: true Please click the link in the confirmation email before continuing. It was sent to
- if @user.unconfirmed_email.present? = succeed "." do
%span.help-block %strong #{@user.unconfirmed_email}
Please click the link in the confirmation email before continuing. It was sent to %p
= succeed "." do = link_to "Resend confirmation e-mail", user_confirmation_path(user: { email: @user.unconfirmed_email }), method: :post
%strong #{@user.unconfirmed_email}
%p
= link_to "Resend confirmation e-mail", user_confirmation_path(user: { email: @user.unconfirmed_email }), method: :post
- else - else
%span.help-block We also use email for avatar detection if no avatar is uploaded. %span.help-block We also use email for avatar detection if no avatar is uploaded.
.form-group .form-group
= f.label :public_email, class: "control-label" = f.label :public_email, class: "label-light"
.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"
= 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.
%span.help-block This email will be displayed on your public profile.
.form-group .form-group
= f.label :skype, class: "control-label" = f.label :skype, class: "label-light"
.col-sm-10= f.text_field :skype, class: "form-control" = f.text_field :skype, class: "form-control"
.form-group .form-group
= f.label :linkedin, class: "control-label" = f.label :linkedin, class: "label-light"
.col-sm-10= f.text_field :linkedin, class: "form-control" = f.text_field :linkedin, class: "form-control"
.form-group .form-group
= f.label :twitter, class: "control-label" = f.label :twitter, class: "label-light"
.col-sm-10= f.text_field :twitter, class: "form-control" = f.text_field :twitter, class: "form-control"
.form-group .form-group
= f.label :website_url, 'Website', class: "control-label" = f.label :website_url, 'Website', class: "label-light"
.col-sm-10= f.text_field :website_url, class: "form-control" = f.text_field :website_url, class: "form-control"
.form-group .form-group
= f.label :location, 'Location', class: "control-label" = f.label :location, 'Location', class: "label-light"
.col-sm-10= f.text_field :location, class: "form-control" = f.text_field :location, class: "form-control"
.form-group .form-group
= f.label :bio, class: "control-label" = f.label :bio, class: "label-light"
.col-sm-10 = f.text_area :bio, rows: 4, class: "form-control", maxlength: 250
= f.text_area :bio, rows: 4, class: "form-control", maxlength: 250 %span.help-block Tell us about yourself in fewer than 250 characters.
%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"
.col-md-5 = link_to "Cancel", user_path(current_user), class: "btn btn-cancel"
.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"
.modal.modal-profile-crop .modal.modal-profile-crop
.modal-dialog .modal-dialog
......
...@@ -13,7 +13,7 @@ class Spinach::Features::Profile < Spinach::FeatureSteps ...@@ -13,7 +13,7 @@ class Spinach::Features::Profile < Spinach::FeatureSteps
fill_in 'user_website_url', with: 'testurl' fill_in 'user_website_url', with: 'testurl'
fill_in 'user_location', with: 'Ukraine' fill_in 'user_location', with: 'Ukraine'
fill_in 'user_bio', with: 'I <3 GitLab' fill_in 'user_bio', with: 'I <3 GitLab'
click_button 'Save changes' click_button 'Update profile settings'
@user.reload @user.reload
end end
...@@ -237,7 +237,7 @@ class Spinach::Features::Profile < Spinach::FeatureSteps ...@@ -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_y', visible: false).set('0')
page.find('#user_avatar_crop_size', visible: false).set('256') page.find('#user_avatar_crop_size', visible: false).set('256')
click_button "Save changes" click_button "Update profile settings"
@user.reload @user.reload
end end
......
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