Restyled group -> edit area. Use select2 for transfer autocomplete

Dmitriy Zaporozhets
1 parent 2f6d289f
Showing 6 changed files with 123 additions and 60 deletions Show diff stats
app/assets/stylesheets/gitlab_bootstrap/blocks.scss
app/assets/stylesheets/gitlab_bootstrap/common.scss
app/assets/stylesheets/selects.scss
app/controllers/groups_controller.rb
app/views/groups/edit.html.haml
app/views/layouts/group.html.haml
@@ -20,6 +20,15 @@
     background: #FFF;
   }
+  &.ui-box-danger {
+    .title {
+      @include linear-gradient(#F26E5E, #bd362f);
+      color: #fff;
+      text-shadow: 0 1px 1px #900;
+      font-weight: bold;
+    }
+  }
+
   img { max-width: 100%; }
   pre {
@@ -141,4 +150,20 @@
       text-decoration: underline;
     }
   }
+
+  .form-holder {
+    padding-top: 20px;
+    form {
+      margin-bottom: 0;
+      .form-actions {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+.tab-pane {
+  .ui-box {
+    margin: 3px 3px 25px 3px;
+  }
 }
@@ -73,3 +73,7 @@ fieldset legend { font-size: 17px; }
     border-bottom: 2px solid $style_color;
   }
 }
+
+.tab-content {
+  overflow: visible;
+}
@@ -13,11 +13,6 @@
   }
 }
-.select2-no-results, .select2-searching {
-  padding: 7px;
-  color: #666;
-}
-
 /** Branch/tag selector **/
 .project-refs-form {
   margin: 0;
@@ -108,3 +103,26 @@
     }
   }
 }
+
+/** Select2 styling **/
+.select2-container .select2-choice {
+  background: #f1f1f1;
+  background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, whitesmoke), to(#e1e1e1));
+  background-image: -webkit-linear-gradient(whitesmoke 6.6%, #e1e1e1);
+  background-image: -moz-linear-gradient(whitesmoke 6.6%, #e1e1e1);
+  background-image: -o-linear-gradient(whitesmoke 6.6%, #e1e1e1);
+}
+
+.select2-container .select2-choice div {
+  border: none;
+  background: none;
+}
+
+.select2-drop {
+  padding-top: 8px;
+}
+
+.select2-no-results, .select2-searching {
+  padding: 7px;
+  color: #666;
+}
@@ -94,6 +94,7 @@ class GroupsController &lt; ApplicationController
     if owner_id
       @group.owner = User.find(owner_id)
+      @group.save
     end
     if @group.update_attributes(group_params)
-%h3.page_title Edit Group
-%hr
-= form_for @group do |f|
-  - if @group.errors.any?
-    .alert.alert-error
-      %span= @group.errors.full_messages.first
-  .clearfix
-    = f.label :name do
-      Group name is
-    .input
-      = f.text_field :name, placeholder: "Ex. OpenSource", class: "xxlarge left"
+.row
+  .span3
+    %ul.nav.nav-pills.nav-stacked
+      %li.active
+        = link_to 'Projects', '#tab-projects', 'data-toggle' => 'tab'
+      %li
+        = link_to 'Edit Group', '#tab-edit', 'data-toggle' => 'tab'
+      %li
+        = link_to 'Transfer', '#tab-transfer', 'data-toggle' => 'tab'
+      %li
+        = link_to 'Remove', '#tab-remove', 'data-toggle' => 'tab'
-  .clearfix.group-description-holder
-    = f.label :description, "Details"
-    .input
-      = f.text_area :description, maxlength: 250, class: "xxlarge js-gfm-input", rows: 4
+  .span9
+    .tab-content
+      .tab-pane.active#tab-projects
+        .ui-box
+          %h5.title Projects
+          %ul.well-list
+            - @group.projects.each do |project|
+              %li
+                - if project.public
+                  %i.icon-share
+                - else
+                  %i.icon-lock.cgreen
+                = link_to project.name_with_namespace, project
+                .pull-right
+                  = link_to 'Team', project_team_index_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
+                  = link_to 'Edit', edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
+                  = link_to 'Remove', project, confirm: "REMOVE #{project.name}? Are you sure?", method: :delete, class: "btn btn-small btn-remove"
+            - if @group.projects.blank?
+              %p.nothing_here_message This group has no projects yet
-  .form-actions
-    = f.submit 'Save group', class: "btn btn-save"
+      .tab-pane#tab-edit
+        .ui-box
+          %h5.title Edit Group
+          %div.form-holder
+            = form_for @group do |f|
+              - if @group.errors.any?
+                .alert.alert-error
+                  %span= @group.errors.full_messages.first
+              .clearfix
+                = f.label :name do
+                  Group name is
+                .input
+                  = f.text_field :name, placeholder: "Ex. OpenSource", class: "xxlarge left"
-%hr
+              .clearfix.group-description-holder
+                = f.label :description, "Details"
+                .input
+                  = f.text_area :description, maxlength: 250, class: "xxlarge js-gfm-input", rows: 4
+              .form-actions
+                = f.submit 'Save group', class: "btn btn-save"
-.row
-  .span7
-    .ui-box
-      %h5.title Projects
-      %ul.well-list
-        - @group.projects.each do |project|
-          %li
-            - if project.public
-              %i.icon-share
-            - else
-              %i.icon-lock.cgreen
-            = link_to project.name_with_namespace, project
-            .pull-right
-              = link_to 'Team', project_team_index_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
-              = link_to 'Edit', edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
-              = link_to 'Remove', project, confirm: "REMOVE #{project.name}? Are you sure?", method: :delete, class: "btn btn-small btn-remove"
-        - if @group.projects.blank?
-          %p.nothing_here_message This group has no projects yet
+      .tab-pane#tab-transfer
+        .ui-box.ui-box-danger
+          %h5.title Transfer group
+          .ui-box-body
+            %p
+              Transferring group will cause loss of admin control over group and all child projects
+            = form_for @group do |f|
+              = users_select_tag(:'group[owner_id]')
+              %hr
+              = f.submit 'Transfer group', class: "btn btn-small btn-remove"
+
+      .tab-pane#tab-remove
+        .ui-box.ui-box-danger
+          %h5.title Remove group
+          .ui-box-body
+            %p
+              Remove of group will cause removing all child projects and resources.
+            %p
+              %strong Removed group can not be restored!
-  .span5
-    .ui-box
-      %h5.title Transfer group
-      .padded
-        %p
-          Transferring group will cause loss of admin control over group and all child projects
-        = form_for @group do |f|
-          = f.select :owner_id, User.all.map { |user| [user.name, user.id] }, {}, {class: 'chosen'}
-          = f.submit 'Transfer group', class: "btn btn-small"
-    .ui-box
-      %h5.title Remove group
-      .padded.bgred
-        %p
-          Remove of group will cause removing all child projects and resources
-          %br
-          Removed group can not be restored!
-        = link_to 'Remove Group', @group, confirm: 'Removed group can not be restored! Are you sure?', method: :delete, class: "btn btn-remove btn-small"
+            = link_to 'Remove Group', @group, confirm: 'Removed group can not be restored! Are you sure?', method: :delete, class: "btn btn-remove btn-small"
@@ -25,7 +25,6 @@
         - if can?(current_user, :manage_group, @group)
           = nav_link(path: 'groups#edit') do
             = link_to edit_group_path(@group), class: "tab " do
-              %i.icon-edit
-              Edit Group
+              Settings
       .content= yield
	@@ -20,6 +20,15 @@		@@ -20,6 +20,15 @@
20	background: #FFF;	20	background: #FFF;
21	}	21	}
22		22
		23	+ &.ui-box-danger {
		24	+ .title {
		25	+ @include linear-gradient(#F26E5E, #bd362f);
		26	+ color: #fff;
		27	+ text-shadow: 0 1px 1px #900;
		28	+ font-weight: bold;
		29	+ }
		30	+ }
		31	+
23	img { max-width: 100%; }	32	img { max-width: 100%; }
24		33
25	pre {	34	pre {
	@@ -141,4 +150,20 @@		@@ -141,4 +150,20 @@
141	text-decoration: underline;	150	text-decoration: underline;
142	}	151	}
143	}	152	}
		153	+
		154	+ .form-holder {
		155	+ padding-top: 20px;
		156	+ form {
		157	+ margin-bottom: 0;
		158	+ .form-actions {
		159	+ margin-bottom: 0;
		160	+ }
		161	+ }
		162	+ }
		163	+}
		164	+
		165	+.tab-pane {
		166	+ .ui-box {
		167	+ margin: 3px 3px 25px 3px;
		168	+ }
144	}	169	}
	@@ -73,3 +73,7 @@ fieldset legend { font-size: 17px; }		@@ -73,3 +73,7 @@ fieldset legend { font-size: 17px; }
73	border-bottom: 2px solid $style_color;	73	border-bottom: 2px solid $style_color;
74	}	74	}
75	}	75	}
		76	+
		77	+.tab-content {
		78	+ overflow: visible;
		79	+}
	@@ -13,11 +13,6 @@		@@ -13,11 +13,6 @@
13	}	13	}
14	}	14	}
15		15
16	-.select2-no-results, .select2-searching {
17	- padding: 7px;
18	- color: #666;
19	-}
20	-
21	/ Branch/tag selector /	16	/ Branch/tag selector /
22	.project-refs-form {	17	.project-refs-form {
23	margin: 0;	18	margin: 0;
	@@ -108,3 +103,26 @@		@@ -108,3 +103,26 @@
108	}	103	}
109	}	104	}
110	}	105	}
		106	+
		107	+/ Select2 styling /
		108	+.select2-container .select2-choice {
		109	+ background: #f1f1f1;
		110	+ background-image: -webkit-gradient(linear, 0 0, 0 30, color-stop(0.066, whitesmoke), to(#e1e1e1));
		111	+ background-image: -webkit-linear-gradient(whitesmoke 6.6%, #e1e1e1);
		112	+ background-image: -moz-linear-gradient(whitesmoke 6.6%, #e1e1e1);
		113	+ background-image: -o-linear-gradient(whitesmoke 6.6%, #e1e1e1);
		114	+}
		115	+
		116	+.select2-container .select2-choice div {
		117	+ border: none;
		118	+ background: none;
		119	+}
		120	+
		121	+.select2-drop {
		122	+ padding-top: 8px;
		123	+}
		124	+
		125	+.select2-no-results, .select2-searching {
		126	+ padding: 7px;
		127	+ color: #666;
		128	+}
	@@ -94,6 +94,7 @@ class GroupsController < ApplicationController		@@ -94,6 +94,7 @@ class GroupsController < ApplicationController
94		94
95	if owner_id	95	if owner_id
96	@group.owner = User.find(owner_id)	96	@group.owner = User.find(owner_id)
		97	+ @group.save
97	end	98	end
98		99
99	if @group.update_attributes(group_params)	100	if @group.update_attributes(group_params)
1	-%h3.page_title Edit Group
2	-%hr
3	-= form_for @group do \|f\|
4	- - if @group.errors.any?
5	- .alert.alert-error
6	- %span= @group.errors.full_messages.first
7	- .clearfix
8	- = f.label :name do
9	- Group name is
10	- .input
11	- = f.text_field :name, placeholder: "Ex. OpenSource", class: "xxlarge left"	1	+.row
		2	+ .span3
		3	+ %ul.nav.nav-pills.nav-stacked
		4	+ %li.active
		5	+ = link_to 'Projects', '#tab-projects', 'data-toggle' => 'tab'
		6	+ %li
		7	+ = link_to 'Edit Group', '#tab-edit', 'data-toggle' => 'tab'
		8	+ %li
		9	+ = link_to 'Transfer', '#tab-transfer', 'data-toggle' => 'tab'
		10	+ %li
		11	+ = link_to 'Remove', '#tab-remove', 'data-toggle' => 'tab'
12		12
13	- .clearfix.group-description-holder
14	- = f.label :description, "Details"
15	- .input
16	- = f.text_area :description, maxlength: 250, class: "xxlarge js-gfm-input", rows: 4	13	+ .span9
		14	+ .tab-content
		15	+ .tab-pane.active#tab-projects
		16	+ .ui-box
		17	+ %h5.title Projects
		18	+ %ul.well-list
		19	+ - @group.projects.each do \|project\|
		20	+ %li
		21	+ - if project.public
		22	+ %i.icon-share
		23	+ - else
		24	+ %i.icon-lock.cgreen
		25	+ = link_to project.name_with_namespace, project
		26	+ .pull-right
		27	+ = link_to 'Team', project_team_index_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
		28	+ = link_to 'Edit', edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
		29	+ = link_to 'Remove', project, confirm: "REMOVE #{project.name}? Are you sure?", method: :delete, class: "btn btn-small btn-remove"
		30	+ - if @group.projects.blank?
		31	+ %p.nothing_here_message This group has no projects yet
17		32
18	- .form-actions
19	- = f.submit 'Save group', class: "btn btn-save"	33	+ .tab-pane#tab-edit
		34	+ .ui-box
		35	+ %h5.title Edit Group
		36	+ %div.form-holder
		37	+ = form_for @group do \|f\|
		38	+ - if @group.errors.any?
		39	+ .alert.alert-error
		40	+ %span= @group.errors.full_messages.first
		41	+ .clearfix
		42	+ = f.label :name do
		43	+ Group name is
		44	+ .input
		45	+ = f.text_field :name, placeholder: "Ex. OpenSource", class: "xxlarge left"
20		46
21	-%hr	47	+ .clearfix.group-description-holder
		48	+ = f.label :description, "Details"
		49	+ .input
		50	+ = f.text_area :description, maxlength: 250, class: "xxlarge js-gfm-input", rows: 4
22		51
		52	+ .form-actions
		53	+ = f.submit 'Save group', class: "btn btn-save"
23		54
24	-.row
25	- .span7
26	- .ui-box
27	- %h5.title Projects
28	- %ul.well-list
29	- - @group.projects.each do \|project\|
30	- %li
31	- - if project.public
32	- %i.icon-share
33	- - else
34	- %i.icon-lock.cgreen
35	- = link_to project.name_with_namespace, project
36	- .pull-right
37	- = link_to 'Team', project_team_index_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
38	- = link_to 'Edit', edit_project_path(project), id: "edit_#{dom_id(project)}", class: "btn btn-small"
39	- = link_to 'Remove', project, confirm: "REMOVE #{project.name}? Are you sure?", method: :delete, class: "btn btn-small btn-remove"
40	- - if @group.projects.blank?
41	- %p.nothing_here_message This group has no projects yet	55	+ .tab-pane#tab-transfer
		56	+ .ui-box.ui-box-danger
		57	+ %h5.title Transfer group
		58	+ .ui-box-body
		59	+ %p
		60	+ Transferring group will cause loss of admin control over group and all child projects
		61	+ = form_for @group do \|f\|
		62	+ = users_select_tag(:'group[owner_id]')
		63	+ %hr
		64	+ = f.submit 'Transfer group', class: "btn btn-small btn-remove"
		65	+
		66	+ .tab-pane#tab-remove
		67	+ .ui-box.ui-box-danger
		68	+ %h5.title Remove group
		69	+ .ui-box-body
		70	+ %p
		71	+ Remove of group will cause removing all child projects and resources.
		72	+ %p
		73	+ %strong Removed group can not be restored!
42		74
43	- .span5
44	- .ui-box
45	- %h5.title Transfer group
46	- .padded
47	- %p
48	- Transferring group will cause loss of admin control over group and all child projects
49	- = form_for @group do \|f\|
50	- = f.select :owner_id, User.all.map { \|user\| [user.name, user.id] }, {}, {class: 'chosen'}
51	- = f.submit 'Transfer group', class: "btn btn-small"
52	- .ui-box
53	- %h5.title Remove group
54	- .padded.bgred
55	- %p
56	- Remove of group will cause removing all child projects and resources
57	- %br
58	- Removed group can not be restored!
59	- = link_to 'Remove Group', @group, confirm: 'Removed group can not be restored! Are you sure?', method: :delete, class: "btn btn-remove btn-small"	75	+ = link_to 'Remove Group', @group, confirm: 'Removed group can not be restored! Are you sure?', method: :delete, class: "btn btn-remove btn-small"
	@@ -25,7 +25,6 @@		@@ -25,7 +25,6 @@
25	- if can?(current_user, :manage_group, @group)	25	- if can?(current_user, :manage_group, @group)
26	= nav_link(path: 'groups#edit') do	26	= nav_link(path: 'groups#edit') do
27	= link_to edit_group_path(@group), class: "tab " do	27	= link_to edit_group_path(@group), class: "tab " do
28	- %i.icon-edit
29	- Edit Group	28	+ Settings
30		29
31	.content= yield	30	.content= yield