From 834eea08565397d58e043ea61f945171c70018e2 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Mon, 29 Feb 2016 11:37:27 +0000 Subject: Profile settings Closes #13853 --- app/assets/javascripts/profile.js.coffee | 3 +- app/assets/stylesheets/framework/common.scss | 3 + app/assets/stylesheets/framework/forms.scss | 12 +- app/assets/stylesheets/framework/tw_bootstrap.scss | 6 - app/assets/stylesheets/pages/profile.scss | 32 +++- app/views/profiles/show.html.haml | 167 ++++++++++----------- 6 files changed, 122 insertions(+), 101 deletions(-) (limited to 'app') diff --git a/app/assets/javascripts/profile.js.coffee b/app/assets/javascripts/profile.js.coffee index 69d590a7533..15fd9e99ce9 100644 --- a/app/assets/javascripts/profile.js.coffee +++ b/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]) - diff --git a/app/assets/stylesheets/framework/common.scss b/app/assets/stylesheets/framework/common.scss index 9e8506b2a81..1f58be4bdf2 100644 --- a/app/assets/stylesheets/framework/common.scss +++ b/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 } diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index d097e4d32f7..85ec5f1e5f3 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/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: normal; + } } .inline-input-group { diff --git a/app/assets/stylesheets/framework/tw_bootstrap.scss b/app/assets/stylesheets/framework/tw_bootstrap.scss index 3e709244879..1e9959429cd 100644 --- a/app/assets/stylesheets/framework/tw_bootstrap.scss +++ b/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, diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index de4d9fd80fa..07ed2490d7f 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -5,9 +5,28 @@ } } -.profile-avatar-form-option { - hr { - margin: 10px 0; +.profile-settings-sidebar { + a { + color: $gl-primary; + } +} + +.avatar-image { + @media (min-width: $screen-sm-min) { + float: left; + margin-bottom: 0; + } +} + +.avatar-file-name { + position: relative; + top: 2px; + display: inline-block; +} + +.profile-settings-sidebar { + a { + color: $gl-primary; } } @@ -79,6 +98,13 @@ margin: auto; } +.user-avatar-button { + .file-name { + display: inline-block; + padding-left: 10px; + } +} + .modal-profile-crop { .modal-dialog { width: 500px; diff --git a/app/views/profiles/show.html.haml b/app/views/profiles/show.html.haml index 64c4bdceff9..3d1ba49491c 100644 --- a/app/views/profiles/show.html.haml +++ b/app/views/profiles/show.html.haml @@ -1,107 +1,102 @@ -.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 -- cgit v1.2.1 From 7db585db110b0bbab196dc8b98fa4fe5b1ae3b2a Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 2 Mar 2016 10:28:17 +0000 Subject: Fixed heading weight --- app/assets/stylesheets/framework/typography.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/typography.scss b/app/assets/stylesheets/framework/typography.scss index 8d8f41287da..48570abff49 100644 --- a/app/assets/stylesheets/framework/typography.scss +++ b/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 **/ -- cgit v1.2.1 From d767e7a1816fc7a831f39044816b38e99fd09770 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 2 Mar 2016 15:05:49 +0000 Subject: Changed weight of labels --- app/assets/stylesheets/framework/forms.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/forms.scss b/app/assets/stylesheets/framework/forms.scss index 85ec5f1e5f3..6c08005812e 100644 --- a/app/assets/stylesheets/framework/forms.scss +++ b/app/assets/stylesheets/framework/forms.scss @@ -71,7 +71,7 @@ label { } &.label-light { - font-weight: normal; + font-weight: 600; } } -- cgit v1.2.1 From a03b0e1bda217305e05c8894e3440b7aaa1cc178 Mon Sep 17 00:00:00 2001 From: Phil Hughes Date: Wed, 2 Mar 2016 15:54:08 +0000 Subject: Changed link colour to match --- app/assets/stylesheets/framework/variables.scss | 1 + app/assets/stylesheets/pages/profile.scss | 8 +------- 2 files changed, 2 insertions(+), 7 deletions(-) (limited to 'app') diff --git a/app/assets/stylesheets/framework/variables.scss b/app/assets/stylesheets/framework/variables.scss index 7834cb0bfa5..ab9ddbc81a5 100644 --- a/app/assets/stylesheets/framework/variables.scss +++ b/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 diff --git a/app/assets/stylesheets/pages/profile.scss b/app/assets/stylesheets/pages/profile.scss index 07ed2490d7f..08b14b4cac5 100644 --- a/app/assets/stylesheets/pages/profile.scss +++ b/app/assets/stylesheets/pages/profile.scss @@ -7,7 +7,7 @@ .profile-settings-sidebar { a { - color: $gl-primary; + color: $profile-settings-link-color; } } @@ -24,12 +24,6 @@ display: inline-block; } -.profile-settings-sidebar { - a { - color: $gl-primary; - } -} - .oauth-buttons { .btn-group { margin-right: 10px; -- cgit v1.2.1