Improve usability of project edit page

Dmitriy Zaporozhets
1 parent 0c884498
Showing 2 changed files with 131 additions and 102 deletions Show diff stats
app/assets/stylesheets/gitlab_bootstrap/blocks.scss
app/views/projects/_form.html.haml
@@ -155,6 +155,9 @@
     padding-top: 20px;
     form {
       margin-bottom: 0;
+      legend {
+        text-indent: 10px;
+      }
       .form-actions {
         margin-bottom: 0;
       }
-= form_for(@project, remote: true) do |f|
-  - if @project.errors.any?
-    .alert.alert-error
-      %ul
-        - @project.errors.full_messages.each do |msg|
-          %li= msg
-  .clearfix.project_name_holder
-    = f.label :name do
-      Project name is
-    .input
-      = f.text_field :name, placeholder: "Example Project", class: "xxlarge"
-
-
-  - unless @repository.heads.empty?
-    .clearfix
-      = f.label :default_branch, "Default Branch"
-      .input= f.select(:default_branch, @repository.heads.map(&:name), {}, style: "width:210px;")
-
-  .clearfix
-    = f.label :description do
-      Project description
-      %span.light (optional)
-    .input
-      = f.text_area :description, placeholder: "awesome project", class: "xxlarge", rows: 3, maxlength: 250
-
-  %fieldset.features
-    %legend Features:
-
-    .control-group
-      = f.label :issues_enabled, "Issues", class: 'control-label'
-      .controls
-        = f.check_box :issues_enabled
-        %span.descr Lightweight issue tracking system for this project
-
-    - if Project.issues_tracker.values.count > 1
-      .control-group
-        = f.label :issues_tracker, "Issues tracker", class: 'control-label'
-        .input= f.select(:issues_tracker, Project.issues_tracker.values, {}, { disabled: !@project.issues_enabled })
-
-      .clearfix
-        = f.label :issues_tracker_id, "Project name or id in issues tracker", class: 'control-label'
-        .input= f.text_field :issues_tracker_id, class: "xxlarge", disabled: !@project.can_have_issues_tracker_id?
-
-    .control-group
-      = f.label :merge_requests_enabled, "Merge Requests", class: 'control-label'
-      .controls
-        = f.check_box :merge_requests_enabled
-        %span.descr Submit changes to be merged upstream.
-
-    .control-group
-      = f.label :wall_enabled, "Wall", class: 'control-label'
-      .controls
-        = f.check_box :wall_enabled
-        %span.descr Simple chat system for broadcasting inside project
-
-    .control-group
-      = f.label :wiki_enabled, "Wiki", class: 'control-label'
-      .controls
-        = f.check_box :wiki_enabled
-        %span.descr Pages for project documentation
-
-  - if can?(current_user, :change_public_mode, @project)
-    %fieldset.features
-      %legend
-        %i.icon-share
-        Public mode:
-      .control-group
-        = f.label :public, class: 'control-label' do
-          %span Public clone access
-        .controls
-          = f.check_box :public
-          %span.descr
-            If checked, this project can be cloned
-            %em without any
-            authentification.
-            It will also be listed on the #{link_to "public access directory", public_root_path}.
-
-
-  - if can? current_user, :change_namespace, @project
-    %fieldset.features
-      %legend Transfer:
-      .control-group
-        = f.label :namespace_id do
-          %span Namespace
-        .controls
-          = f.select :namespace_id, namespaces_options(@project.namespace_id || Namespace::global_id), {prompt: 'Choose a project namespace'}, {class: 'chosen'}
-          %br
-          %ul.prepend-top-10.cred
-            %li Be careful. Changing project namespace can have unintended side effects
-            %li You can transfer project only to namespaces you can manage
-            %li You will need to update your local repositories to point to the new location.
-
-
-  %br
-
-  .actions
-    = f.submit 'Save', class: "btn btn-save"
-    = link_to 'Cancel', @project, class: "btn"
-    - unless @project.new_record?
-      - if can?(current_user, :remove_project, @project)
-        .pull-right
-          = link_to 'Remove Project', @project, confirm: 'Removed project can not be restored! Are you sure?', method: :delete, class: "btn btn-remove"
+.row
+  .span3
+    %ul.nav.nav-pills.nav-stacked
+      %li.active
+        = link_to 'Settings', '#tab-settings', 'data-toggle' => 'tab'
+      %li
+        = link_to 'Transfer', '#tab-transfer', 'data-toggle' => 'tab'
+      %li
+        = link_to 'Remove', '#tab-remove', 'data-toggle' => 'tab'
+
+  .span9
+    .tab-content
+      .tab-pane.active#tab-settings
+        .ui-box.white
+          %h5.title Settings:
+          .form-holder
+            = form_for(@project, remote: true) do |f|
+              - if @project.errors.any?
+                .alert.alert-error
+                  %ul
+                    - @project.errors.full_messages.each do |msg|
+                      %li= msg
+
+              %fieldset
+                .clearfix.project_name_holder
+                  = f.label :name do
+                    Project name is
+                  .input
+                    = f.text_field :name, placeholder: "Example Project", class: "xxlarge"
+
+
+                - unless @repository.heads.empty?
+                  .clearfix
+                    = f.label :default_branch, "Default Branch"
+                    .input= f.select(:default_branch, @repository.heads.map(&:name), {}, style: "width:210px;")
+
+                .clearfix
+                  = f.label :description do
+                    Project description
+                    %span.light (optional)
+                  .input
+                    = f.text_area :description, placeholder: "awesome project", class: "xxlarge", rows: 3, maxlength: 250
+
+
+              - if can?(current_user, :change_public_mode, @project)
+                %fieldset.public-mode
+                  %legend
+                    Public mode:
+                  .control-group
+                    = f.label :public, class: 'control-label' do
+                      %span Public clone access
+                    .controls
+                      = f.check_box :public
+                      %span.descr
+                        If checked, this project can be cloned
+                        %em without any
+                        authentification.
+                        It will also be listed on the #{link_to "public access directory", public_root_path}.
+
+              %fieldset.features
+                %legend
+                  Features:
+                .control-group
+                  = f.label :issues_enabled, "Issues", class: 'control-label'
+                  .controls
+                    = f.check_box :issues_enabled
+                    %span.descr Lightweight issue tracking system for this project
+
+                - if Project.issues_tracker.values.count > 1
+                  .control-group
+                    = f.label :issues_tracker, "Issues tracker", class: 'control-label'
+                    .input= f.select(:issues_tracker, Project.issues_tracker.values, {}, { disabled: !@project.issues_enabled })
+
+                  .clearfix
+                    = f.label :issues_tracker_id, "Project name or id in issues tracker", class: 'control-label'
+                    .input= f.text_field :issues_tracker_id, disabled: !@project.can_have_issues_tracker_id?
+
+                .control-group
+                  = f.label :merge_requests_enabled, "Merge Requests", class: 'control-label'
+                  .controls
+                    = f.check_box :merge_requests_enabled
+                    %span.descr Submit changes to be merged upstream.
+
+                .control-group
+                  = f.label :wall_enabled, "Wall", class: 'control-label'
+                  .controls
+                    = f.check_box :wall_enabled
+                    %span.descr Simple chat system for broadcasting inside project
+
+                .control-group
+                  = f.label :wiki_enabled, "Wiki", class: 'control-label'
+                  .controls
+                    = f.check_box :wiki_enabled
+                    %span.descr Pages for project documentation
+
+              .form-actions
+                = f.submit 'Save', class: "btn btn-save"
+
+      .tab-pane#tab-transfer
+        - if can? current_user, :change_namespace, @project
+          .ui-box.ui-box-danger
+            %h5.title Transfer project
+            .form-holder
+              = form_for(@project, remote: true, html: { class: 'transfer-project' }) do |f|
+                .control-group
+                  = f.label :namespace_id do
+                    %span Namespace
+                  .controls
+                    .clearfix
+                      = f.select :namespace_id, namespaces_options(@project.namespace_id || Namespace::global_id), {prompt: 'Choose a project namespace'}, {class: 'chosen'}
+                    %ul
+                      %li Be careful. Changing project namespace can have unintended side effects
+                      %li You can transfer project only to namespaces you can manage
+                      %li You will need to update your local repositories to point to the new location.
+                .form-actions
+                  = f.submit 'Transfer', class: "btn btn-remove"
+
+      .tab-pane#tab-remove
+        - if can?(current_user, :remove_project, @project)
+          .ui-box.ui-box-danger
+            %h5.title Remove project
+            .ui-box-body
+              %p
+                Remove of project will cause removing repository and all related resources like issues, merge requests etc.
+              %p
+                %strong Removed project can not be restored!
+
+              = link_to 'Remove project', @project, confirm: 'Removed project can not be restored! Are you sure?', method: :delete, class: "btn btn-remove btn-small"
1	-= form_for(@project, remote: true) do \|f\|
2	- - if @project.errors.any?
3	- .alert.alert-error
4	- %ul
5	- - @project.errors.full_messages.each do \|msg\|
6	- %li= msg
7	- .clearfix.project_name_holder
8	- = f.label :name do
9	- Project name is
10	- .input
11	- = f.text_field :name, placeholder: "Example Project", class: "xxlarge"
12	-
13	-
14	- - unless @repository.heads.empty?
15	- .clearfix
16	- = f.label :default_branch, "Default Branch"
17	- .input= f.select(:default_branch, @repository.heads.map(&:name), {}, style: "width:210px;")
18	-
19	- .clearfix
20	- = f.label :description do
21	- Project description
22	- %span.light (optional)
23	- .input
24	- = f.text_area :description, placeholder: "awesome project", class: "xxlarge", rows: 3, maxlength: 250
25	-
26	- %fieldset.features
27	- %legend Features:
28	-
29	- .control-group
30	- = f.label :issues_enabled, "Issues", class: 'control-label'
31	- .controls
32	- = f.check_box :issues_enabled
33	- %span.descr Lightweight issue tracking system for this project
34	-
35	- - if Project.issues_tracker.values.count > 1
36	- .control-group
37	- = f.label :issues_tracker, "Issues tracker", class: 'control-label'
38	- .input= f.select(:issues_tracker, Project.issues_tracker.values, {}, { disabled: !@project.issues_enabled })
39	-
40	- .clearfix
41	- = f.label :issues_tracker_id, "Project name or id in issues tracker", class: 'control-label'
42	- .input= f.text_field :issues_tracker_id, class: "xxlarge", disabled: !@project.can_have_issues_tracker_id?
43	-
44	- .control-group
45	- = f.label :merge_requests_enabled, "Merge Requests", class: 'control-label'
46	- .controls
47	- = f.check_box :merge_requests_enabled
48	- %span.descr Submit changes to be merged upstream.
49	-
50	- .control-group
51	- = f.label :wall_enabled, "Wall", class: 'control-label'
52	- .controls
53	- = f.check_box :wall_enabled
54	- %span.descr Simple chat system for broadcasting inside project
55	-
56	- .control-group
57	- = f.label :wiki_enabled, "Wiki", class: 'control-label'
58	- .controls
59	- = f.check_box :wiki_enabled
60	- %span.descr Pages for project documentation
61	-
62	- - if can?(current_user, :change_public_mode, @project)
63	- %fieldset.features
64	- %legend
65	- %i.icon-share
66	- Public mode:
67	- .control-group
68	- = f.label :public, class: 'control-label' do
69	- %span Public clone access
70	- .controls
71	- = f.check_box :public
72	- %span.descr
73	- If checked, this project can be cloned
74	- %em without any
75	- authentification.
76	- It will also be listed on the #{link_to "public access directory", public_root_path}.
77	-
78	-
79	- - if can? current_user, :change_namespace, @project
80	- %fieldset.features
81	- %legend Transfer:
82	- .control-group
83	- = f.label :namespace_id do
84	- %span Namespace
85	- .controls
86	- = f.select :namespace_id, namespaces_options(@project.namespace_id \|\| Namespace::global_id), {prompt: 'Choose a project namespace'}, {class: 'chosen'}
87	- %br
88	- %ul.prepend-top-10.cred
89	- %li Be careful. Changing project namespace can have unintended side effects
90	- %li You can transfer project only to namespaces you can manage
91	- %li You will need to update your local repositories to point to the new location.
92	-
93	-
94	- %br
95	-
96	- .actions
97	- = f.submit 'Save', class: "btn btn-save"
98	- = link_to 'Cancel', @project, class: "btn"
99	- - unless @project.new_record?
100	- - if can?(current_user, :remove_project, @project)
101	- .pull-right
102	- = link_to 'Remove Project', @project, confirm: 'Removed project can not be restored! Are you sure?', method: :delete, class: "btn btn-remove"	1	+.row
		2	+ .span3
		3	+ %ul.nav.nav-pills.nav-stacked
		4	+ %li.active
		5	+ = link_to 'Settings', '#tab-settings', 'data-toggle' => 'tab'
		6	+ %li
		7	+ = link_to 'Transfer', '#tab-transfer', 'data-toggle' => 'tab'
		8	+ %li
		9	+ = link_to 'Remove', '#tab-remove', 'data-toggle' => 'tab'
		10	+
		11	+ .span9
		12	+ .tab-content
		13	+ .tab-pane.active#tab-settings
		14	+ .ui-box.white
		15	+ %h5.title Settings:
		16	+ .form-holder
		17	+ = form_for(@project, remote: true) do \|f\|
		18	+ - if @project.errors.any?
		19	+ .alert.alert-error
		20	+ %ul
		21	+ - @project.errors.full_messages.each do \|msg\|
		22	+ %li= msg
		23	+
		24	+ %fieldset
		25	+ .clearfix.project_name_holder
		26	+ = f.label :name do
		27	+ Project name is
		28	+ .input
		29	+ = f.text_field :name, placeholder: "Example Project", class: "xxlarge"
		30	+
		31	+
		32	+ - unless @repository.heads.empty?
		33	+ .clearfix
		34	+ = f.label :default_branch, "Default Branch"
		35	+ .input= f.select(:default_branch, @repository.heads.map(&:name), {}, style: "width:210px;")
		36	+
		37	+ .clearfix
		38	+ = f.label :description do
		39	+ Project description
		40	+ %span.light (optional)
		41	+ .input
		42	+ = f.text_area :description, placeholder: "awesome project", class: "xxlarge", rows: 3, maxlength: 250
		43	+
		44	+
		45	+ - if can?(current_user, :change_public_mode, @project)
		46	+ %fieldset.public-mode
		47	+ %legend
		48	+ Public mode:
		49	+ .control-group
		50	+ = f.label :public, class: 'control-label' do
		51	+ %span Public clone access
		52	+ .controls
		53	+ = f.check_box :public
		54	+ %span.descr
		55	+ If checked, this project can be cloned
		56	+ %em without any
		57	+ authentification.
		58	+ It will also be listed on the #{link_to "public access directory", public_root_path}.
		59	+
		60	+ %fieldset.features
		61	+ %legend
		62	+ Features:
		63	+ .control-group
		64	+ = f.label :issues_enabled, "Issues", class: 'control-label'
		65	+ .controls
		66	+ = f.check_box :issues_enabled
		67	+ %span.descr Lightweight issue tracking system for this project
		68	+
		69	+ - if Project.issues_tracker.values.count > 1
		70	+ .control-group
		71	+ = f.label :issues_tracker, "Issues tracker", class: 'control-label'
		72	+ .input= f.select(:issues_tracker, Project.issues_tracker.values, {}, { disabled: !@project.issues_enabled })
		73	+
		74	+ .clearfix
		75	+ = f.label :issues_tracker_id, "Project name or id in issues tracker", class: 'control-label'
		76	+ .input= f.text_field :issues_tracker_id, disabled: !@project.can_have_issues_tracker_id?
		77	+
		78	+ .control-group
		79	+ = f.label :merge_requests_enabled, "Merge Requests", class: 'control-label'
		80	+ .controls
		81	+ = f.check_box :merge_requests_enabled
		82	+ %span.descr Submit changes to be merged upstream.
		83	+
		84	+ .control-group
		85	+ = f.label :wall_enabled, "Wall", class: 'control-label'
		86	+ .controls
		87	+ = f.check_box :wall_enabled
		88	+ %span.descr Simple chat system for broadcasting inside project
		89	+
		90	+ .control-group
		91	+ = f.label :wiki_enabled, "Wiki", class: 'control-label'
		92	+ .controls
		93	+ = f.check_box :wiki_enabled
		94	+ %span.descr Pages for project documentation
		95	+
		96	+ .form-actions
		97	+ = f.submit 'Save', class: "btn btn-save"
		98	+
		99	+ .tab-pane#tab-transfer
		100	+ - if can? current_user, :change_namespace, @project
		101	+ .ui-box.ui-box-danger
		102	+ %h5.title Transfer project
		103	+ .form-holder
		104	+ = form_for(@project, remote: true, html: { class: 'transfer-project' }) do \|f\|
		105	+ .control-group
		106	+ = f.label :namespace_id do
		107	+ %span Namespace
		108	+ .controls
		109	+ .clearfix
		110	+ = f.select :namespace_id, namespaces_options(@project.namespace_id \|\| Namespace::global_id), {prompt: 'Choose a project namespace'}, {class: 'chosen'}
		111	+ %ul
		112	+ %li Be careful. Changing project namespace can have unintended side effects
		113	+ %li You can transfer project only to namespaces you can manage
		114	+ %li You will need to update your local repositories to point to the new location.
		115	+ .form-actions
		116	+ = f.submit 'Transfer', class: "btn btn-remove"
		117	+
		118	+ .tab-pane#tab-remove
		119	+ - if can?(current_user, :remove_project, @project)
		120	+ .ui-box.ui-box-danger
		121	+ %h5.title Remove project
		122	+ .ui-box-body
		123	+ %p
		124	+ Remove of project will cause removing repository and all related resources like issues, merge requests etc.
		125	+ %p
		126	+ %strong Removed project can not be restored!
		127	+
		128	+ = link_to 'Remove project', @project, confirm: 'Removed project can not be restored! Are you sure?', method: :delete, class: "btn btn-remove btn-small"