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	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	32	img { max-width: 100%; }
24	33
25	34	pre {
...	...	@@ -141,4 +150,20 @@
141	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	73	border-bottom: 2px solid $style_color;
74	74	}
75	75	}
	76	+
	77	+.tab-content {
	78	+ overflow: visible;
	79	+}
...	...
...	...	@@ -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	16	/ Branch/tag selector /
22	17	.project-refs-form {
23	18	margin: 0;
...	...	@@ -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	94
95	95	if owner_id
96	96	@group.owner = User.find(owner_id)
	97	+ @group.save
97	98	end
98	99
99	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	25	- if can?(current_user, :manage_group, @group)
26	26	= nav_link(path: 'groups#edit') do
27	27	= link_to edit_group_path(@group), class: "tab " do
28		- %i.icon-edit
29		- Edit Group
	28	+ Settings
30	29
31	30	.content= yield
...	...