Improve Profile settings UI

Dmitriy Zaporozhets
1 parent 3fb1042d
Showing 3 changed files with 23 additions and 61 deletions Show diff stats
app/assets/stylesheets/gitlab_bootstrap/avatar.scss
app/views/profiles/show.html.haml
features/steps/profile/profile.rb
@@ -19,4 +19,5 @@
   &.s32 { width: 32px; height: 32px; margin-right: 10px; }
   &.s60 { width: 60px; height: 60px; margin-right: 12px; }
   &.s90 { width: 90px; height: 90px; margin-right: 15px; }
+  &.s160 { width: 160px; height: 160px; margin-right: 20px; }
 }
-= image_tag avatar_icon(@user.email, 60), alt: '', class: 'avatar s60'
 %h3.page-title
-  = @user.name
-  %br
-  %small
-    = @user.email
-
-  .pull-right
-    = link_to destroy_user_session_path, class: "logout", method: :delete do
-      %small
-        %i.icon-signout
-        Logout
+  Profile settings
+%p.light
+  This information appears on your profile.
+  - if current_user.ldap_user?
+    Some options are unavailable for LDAP accounts
 %hr
+
+
 = form_for @user, url: profile_path, method: :put, html: { multipart: true, class: "edit_user form-horizontal" }  do |f|
   -if @user.errors.any?
     %div.alert.alert-error
@@ -40,9 +36,22 @@
         = f.label :twitter, class: "control-label"
         .controls= f.text_field :twitter, class: "input-xlarge"
       .control-group
-        = f.label :avatar, class: "control-label"
+        = f.label :bio, class: "control-label"
         .controls
+          = f.text_area :bio, rows: 6, class: "input-xlarge", maxlength: 250
+          %span.help-block Tell us about yourself in fewer than 250 characters.
+
+    .span5.pull-right
+      .light-well
+        = image_tag avatar_icon(@user.email, 160), alt: '', class: 'avatar s160'
+
+        .clearfix
           .profile-avatar-form-option
+            %p.light
+              You can upload an avatar here
+              %br
+              or change it at #{link_to "gravatar.com", "http://gravatar.com"}
+            %hr
             %a.choose-btn.btn.btn-small.js-choose-user-avatar-button
               %i.icon-paper-clip
               %span Choose File ...
@@ -50,52 +59,6 @@
             %span.file_name.js-avatar-filename File name...
             = f.file_field :avatar, class: "js-user-avatar-input hide"
           %span.help-block The maximum file size allowed is 200KB.
-      .control-group
-        = f.label :bio, class: "control-label"
-        .controls
-          = f.text_area :bio, rows: 6, class: "input-xlarge", maxlength: 250
-          %span.help-block Tell us about yourself in fewer than 250 characters.
-
-    .span5.pull-right
-      %fieldset.tips
-        %legend Tips:
-        %ul
-          %li
-            %p You can change your password on the Account page
-          - if Gitlab.config.gravatar.enabled
-            %li
-              %p You can upload an avatar here or change it at #{link_to "gravatar.com", "http://gravatar.com"}
-
-          - if Gitlab.config.omniauth.enabled && @user.provider?
-            %li
-              %p
-                You can login through #{@user.provider.titleize}!
-                = link_to "click here to change", account_profile_path
-          - if current_user.can_create_group?
-            %li
-              %p
-                Need a group for several dependent projects?
-                = link_to new_group_path, class: "btn btn-tiny" do
-                  Create a group
-      - unless current_user.projects_limit_left > 100
-        %fieldset
-          %legend
-            Personal projects:
-            %small.pull-right
-              %span= current_user.personal_projects.count
-              of
-              %span= current_user.projects_limit
-          .padded
-            .progress
-              .bar{style: "width: #{current_user.projects_limit_percent}%;"}
-
-      %fieldset
-        %legend
-          SSH public keys:
-          %span.pull-right
-            = link_to pluralize(current_user.keys.count, 'key'), profile_keys_path
-        .padded
-          = link_to "Add Public Key", new_profile_key_path, class: "btn btn-small"
   .form-actions
     = f.submit 'Save changes', class: "btn btn-save"
@@ -3,9 +3,7 @@ class Profile &lt; Spinach::FeatureSteps
   include SharedPaths
   step 'I should see my profile info' do
-    page.should have_content "Profile"
-    page.should have_content @user.name
-    page.should have_content @user.email
+    page.should have_content "Profile settings"
   end
   step 'I change my contact info' do
	@@ -19,4 +19,5 @@		@@ -19,4 +19,5 @@
19	&.s32 { width: 32px; height: 32px; margin-right: 10px; }	19	&.s32 { width: 32px; height: 32px; margin-right: 10px; }
20	&.s60 { width: 60px; height: 60px; margin-right: 12px; }	20	&.s60 { width: 60px; height: 60px; margin-right: 12px; }
21	&.s90 { width: 90px; height: 90px; margin-right: 15px; }	21	&.s90 { width: 90px; height: 90px; margin-right: 15px; }
		22	+ &.s160 { width: 160px; height: 160px; margin-right: 20px; }
22	}	23	}
1	-= image_tag avatar_icon(@user.email, 60), alt: '', class: 'avatar s60'
2	%h3.page-title	1	%h3.page-title
3	- = @user.name
4	- %br
5	- %small
6	- = @user.email
7	-
8	- .pull-right
9	- = link_to destroy_user_session_path, class: "logout", method: :delete do
10	- %small
11	- %i.icon-signout
12	- Logout	2	+ Profile settings
		3	+%p.light
		4	+ This information appears on your profile.
		5	+ - if current_user.ldap_user?
		6	+ Some options are unavailable for LDAP accounts
13	%hr	7	%hr
14		8
		9	+
		10	+
15	= form_for @user, url: profile_path, method: :put, html: { multipart: true, class: "edit_user form-horizontal" } do \|f\|	11	= form_for @user, url: profile_path, method: :put, html: { multipart: true, class: "edit_user form-horizontal" } do \|f\|
16	-if @user.errors.any?	12	-if @user.errors.any?
17	%div.alert.alert-error	13	%div.alert.alert-error
	@@ -40,9 +36,22 @@		@@ -40,9 +36,22 @@
40	= f.label :twitter, class: "control-label"	36	= f.label :twitter, class: "control-label"
41	.controls= f.text_field :twitter, class: "input-xlarge"	37	.controls= f.text_field :twitter, class: "input-xlarge"
42	.control-group	38	.control-group
43	- = f.label :avatar, class: "control-label"	39	+ = f.label :bio, class: "control-label"
44	.controls	40	.controls
		41	+ = f.text_area :bio, rows: 6, class: "input-xlarge", maxlength: 250
		42	+ %span.help-block Tell us about yourself in fewer than 250 characters.
		43	+
		44	+ .span5.pull-right
		45	+ .light-well
		46	+ = image_tag avatar_icon(@user.email, 160), alt: '', class: 'avatar s160'
		47	+
		48	+ .clearfix
45	.profile-avatar-form-option	49	.profile-avatar-form-option
		50	+ %p.light
		51	+ You can upload an avatar here
		52	+ %br
		53	+ or change it at #{link_to "gravatar.com", "http://gravatar.com"}
		54	+ %hr
46	%a.choose-btn.btn.btn-small.js-choose-user-avatar-button	55	%a.choose-btn.btn.btn-small.js-choose-user-avatar-button
47	%i.icon-paper-clip	56	%i.icon-paper-clip
48	%span Choose File ...	57	%span Choose File ...
	@@ -50,52 +59,6 @@		@@ -50,52 +59,6 @@
50	%span.file_name.js-avatar-filename File name...	59	%span.file_name.js-avatar-filename File name...
51	= f.file_field :avatar, class: "js-user-avatar-input hide"	60	= f.file_field :avatar, class: "js-user-avatar-input hide"
52	%span.help-block The maximum file size allowed is 200KB.	61	%span.help-block The maximum file size allowed is 200KB.
53	- .control-group
54	- = f.label :bio, class: "control-label"
55	- .controls
56	- = f.text_area :bio, rows: 6, class: "input-xlarge", maxlength: 250
57	- %span.help-block Tell us about yourself in fewer than 250 characters.
58	-
59	- .span5.pull-right
60	- %fieldset.tips
61	- %legend Tips:
62	- %ul
63	- %li
64	- %p You can change your password on the Account page
65	- - if Gitlab.config.gravatar.enabled
66	- %li
67	- %p You can upload an avatar here or change it at #{link_to "gravatar.com", "http://gravatar.com"}
68	-
69	- - if Gitlab.config.omniauth.enabled && @user.provider?
70	- %li
71	- %p
72	- You can login through #{@user.provider.titleize}!
73	- = link_to "click here to change", account_profile_path
74	- - if current_user.can_create_group?
75	- %li
76	- %p
77	- Need a group for several dependent projects?
78	- = link_to new_group_path, class: "btn btn-tiny" do
79	- Create a group
80	- - unless current_user.projects_limit_left > 100
81	- %fieldset
82	- %legend
83	- Personal projects:
84	- %small.pull-right
85	- %span= current_user.personal_projects.count
86	- of
87	- %span= current_user.projects_limit
88	- .padded
89	- .progress
90	- .bar{style: "width: #{current_user.projects_limit_percent}%;"}
91	-
92	- %fieldset
93	- %legend
94	- SSH public keys:
95	- %span.pull-right
96	- = link_to pluralize(current_user.keys.count, 'key'), profile_keys_path
97	- .padded
98	- = link_to "Add Public Key", new_profile_key_path, class: "btn btn-small"
99		62
100	.form-actions	63	.form-actions
101	= f.submit 'Save changes', class: "btn btn-save"	64	= f.submit 'Save changes', class: "btn btn-save"