Improve UI/UX for create/edit group in admin area

Signed-off-by: Dmitriy Zaporozhets <dmitriy.zaporozhets@gmail.com>

app/views/admin/groups/_form.html.haml

+= form_for [:admin, @group], html: { class: "form-horizontal" } do |f|
+  - if @group.errors.any?
+    .alert.alert-danger
+      %span= @group.errors.full_messages.first
+  .form-group.group_name_holder
+    = f.label :name, class: 'control-label' do
+      Group name
+    .col-sm-10
+      = f.text_field :name, placeholder: "Example Group", class: "form-control"
+
+  .form-group.group-description-holder
+    = f.label :description, "Details", class: 'control-label'
+    .col-sm-10
+      = f.text_area :description, maxlength: 250, class: "form-control js-gfm-input", rows: 4
+
+  .form-group.group-description-holder
+    = f.label :avatar, "Group avatar", class: 'control-label'
+    .col-sm-10
+      %a.choose-btn.btn.btn-small.js-choose-group-avatar-button
+        %i.icon-paper-clip
+        %span Choose File ...
+       
+      %span.file_name.js-avatar-filename File name...
+      = f.file_field :avatar, class: "js-group-avatar-input hidden"
+      .light The maximum file size allowed is 100KB.
+
+  - if @group.new_record?
+    .form-group
+      .col-sm-2
+      .col-sm-10
+        .bs-callout.bs-callout-info
+          %ul
+            %li A group is a collection of several projects
+            %li Groups are private by default
+            %li Members of a group may only view projects they have permission to access
+            %li Group project URLs are prefixed with the group namespace
+            %li Existing projects may be moved into a group
+    .form-actions
+      = f.submit 'Create group', class: "btn btn-create"
+      = link_to  'Cancel', admin_groups_path, class: "btn btn-cancel"
+
+  - else
+    .form-group.group_name_holder
+      = f.label :path, class: 'control-label' do
+        %span Group path
+      .col-sm-10
+        = f.text_field :path, placeholder: "example-group", class: "form-control danger"
+        .bs-callout.bs-callout-danger
+          %ul
+            %li Changing group path can have unintended side effects.
+            %li Renaming group path will rename directory for all related projects
+            %li It will change web url for access group and group projects.
+            %li It will change the git path to repositories under this group.
+    .form-actions
+      = f.submit 'Save changes', class: "btn btn-primary"
+      = link_to  'Cancel', admin_group_path(@group), class: "btn btn-cancel"
+

app/views/admin/groups/edit.html.haml

-%h3.page-title Edit Group
+%h3.page-title Edit group: #{@group.name}
 %hr
-= form_for [:admin, @group], html: { class: "form-horizontal" } do |f|
-  - if @group.errors.any?
-    .alert.alert-danger
-      %span= @group.errors.full_messages.first
-  .form-group.group_name_holder
-    = f.label :name, class: 'control-label' do
-      Group name
-    .col-sm-10
-      = f.text_field :name, placeholder: "Example Group", class: "form-control"
-
-  .form-group.group-description-holder
-    = f.label :description, "Details", class: 'control-label'
-    .col-sm-10
-      = f.text_area :description, maxlength: 250, class: "form-control js-gfm-input", rows: 4
-
-  .form-group.group_name_holder
-    = f.label :path, class: 'control-label' do
-      %span.cred Group path
-    .col-sm-10
-      = f.text_field :path, placeholder: "example-group", class: "form-control danger"
-      %ul.cred
-        %li Changing group path can have unintended side effects.
-        %li Renaming group path will rename directory for all related projects
-        %li It will change web url for access group and group projects.
-        %li It will change the git path to repositories under this group.
-
-  .form-actions
-    = f.submit 'Save changes', class: "btn btn-primary"
-    = link_to  'Cancel', admin_groups_path, class: "btn btn-cancel"
+= render 'form'

app/views/admin/groups/new.html.haml

-%h3.page-title New Group
+%h3.page-title New group
 %hr
-= form_for [:admin, @group], html: { class: 'group-form form-horizontal' } do |f|
-  - if @group.errors.any?
-    .alert.alert-danger
-      %span= @group.errors.full_messages.first
-  .form-group
-    = f.label :name, class: 'control-label' do
-      Group name
-    .col-sm-10
-      = f.text_field :name, placeholder: "Ex. OpenSource", class: "form-control"
-
-  .form-group.group-description-holder
-    = f.label :description, "Details", class: 'control-label'
-    .col-sm-10
-      = f.text_area :description, maxlength: 250, class: "form-control js-gfm-input", rows: 4
-
-  .form-group
-    .col-sm-2
-    .col-sm-10
-      %ul
-        %li A group is a collection of several projects
-        %li Groups are private by default
-        %li Members of a group may only view projects they have permission to access
-        %li Group project URLs are prefixed with the group namespace
-        %li Existing projects may be moved into a group
-
-  .form-actions
-    = f.submit 'Create group', class: "btn btn-create"
-
-
+= render 'form'

app/views/admin/groups/show.html.haml

 %h3.page-title
   Group: #{@group.name}
 
-  = link_to edit_admin_group_path(@group), class: "btn btn-small pull-right" do
+  = link_to edit_admin_group_path(@group), class: "btn pull-right" do
     %i.icon-edit
     Edit
 %hr
@@ -11,6 +11,8 @@
       .panel-heading
         Group info:
       %ul.well-list
+        %li
+          = image_tag group_icon(@group.path), class: "avatar s60"
         %li
           %span.light Name:
           %strong= @group.name