Improve group settings UI

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

app/assets/stylesheets/gl_bootstrap.scss

@@ -237,4 +237,15 @@ ul.breadcrumb {
       float: right;
     }
   }
+
+  .panel-body {
+    form {
+      margin: 0;
+    }
+
+    .form-actions {
+      margin-bottom: 0;
+      background: #FFF;
+    }
+  }
 }

app/controllers/groups_controller.rb

@@ -9,7 +9,7 @@ class GroupsController < ApplicationController
   before_filter :authorize_create_group!, only: [:new, :create]
 
   # Load group projects
-  before_filter :projects, except: [:new, :create]
+  before_filter :load_projects, except: [:new, :create, :projects, :edit, :update]
 
   before_filter :default_filter, only: [:issues, :merge_requests]
 
@@ -79,9 +79,13 @@ class GroupsController < ApplicationController
   def edit
   end
 
+  def projects
+    @projects = @group.projects.page(params[:page])
+  end
+
   def update
     if @group.update_attributes(params[:group])
-      redirect_to @group, notice: 'Group was successfully updated.'
+      redirect_to edit_group_path(@group), notice: 'Group was successfully updated.'
     else
       render action: "edit"
     end
@@ -99,7 +103,7 @@ class GroupsController < ApplicationController
     @group ||= Group.find_by(path: params[:id])
   end
 
-  def projects
+  def load_projects
     @projects ||= ProjectsFinder.new.execute(current_user, group: group).sorted_by_activity.non_archived
   end
 

app/views/groups/_settings_nav.html.haml

+%ul.nav.nav-pills.nav-stacked.nav-stacked-menu
+  = nav_link(path: 'groups#edit') do
+    = link_to edit_group_path(@group) do
+      %i.icon-edit
+      Group
+  = nav_link(path: 'groups#projects') do
+    = link_to projects_group_path(@group) do
+      %i.icon-folder-close
+      Projects
+

app/views/groups/edit.html.haml

 .row
   .col-md-2
-    %ul.nav.nav-pills.nav-stacked.nav-stacked-menu
-      %li.active
-        = link_to '#tab-edit', 'data-toggle' => 'tab' do
-          %i.icon-edit
-          Group
-      %li
-        = link_to '#tab-projects', 'data-toggle' => 'tab' do
-          %i.icon-folder-close
-          Projects
-      %li
-        = link_to '#tab-remove', 'data-toggle' => 'tab' do
-          %i.icon-remove-sign
-          Remove
-
+    = render 'settings_nav'
   .col-md-10
-    .tab-content
-      .tab-pane.active#tab-edit
-        .panel.panel-default
-          .panel-heading
-            %strong= @group.name
-            group settings:
-          %div.form-holder
-            = form_for @group, html: { multipart: true, class: "form-horizontal" }, authenticity_token: true 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 left"
-
-              .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
+    .panel.panel-default
+      .panel-heading
+        %strong= @group.name
+        group settings:
+      .panel-body
+        = form_for @group, html: { multipart: true, class: "form-horizontal" }, authenticity_token: true 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 left"
 
-              .form-group
-                .col-sm-2
-                .col-sm-10
-                  = image_tag group_icon(@group.to_param), alt: '', class: 'avatar s160'
-                  %p.light
-                    - if @group.avatar?
-                      You can change your group avatar here
-                    - else
-                      You can upload a group avatar here
-                  %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.avatar?
-                    %hr
-                    = link_to 'Remove avatar', group_avatar_path(@group.to_param), data: { confirm: "Group avatar will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-small remove-avatar"
+          .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-actions
-                = f.submit 'Save group', class: "btn btn-save"
+          .form-group
+            .col-sm-2
+            .col-sm-10
+              = image_tag group_icon(@group.to_param), alt: '', class: 'avatar s160'
+              %p.light
+                - if @group.avatar?
+                  You can change your group avatar here
+                - else
+                  You can upload a group avatar here
+              %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.avatar?
+                %hr
+                = link_to 'Remove avatar', group_avatar_path(@group.to_param), data: { confirm: "Group avatar will be removed. Are you sure?"}, method: :delete, class: "btn btn-remove btn-small remove-avatar"
 
-      .tab-pane#tab-projects
-        .panel.panel-default
-          .panel-heading
-            %strong= @group.name
-            projects:
-            - if can? current_user, :manage_group, @group
-              %span.pull-right
-                = link_to new_project_path(namespace_id: @group.id), class: "btn btn-tiny" do
-                  %i.icon-plus
-                  New Project
-          %ul.well-list
-            - @group.projects.each do |project|
-              %li
-                .list-item-name
-                  = visibility_level_icon(project.visibility_level)
-                  = link_to project.name_with_namespace, project
-                .pull-right
-                  = link_to 'Members', 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, data: { confirm: remove_project_message(project)}, method: :delete, class: "btn btn-small btn-remove"
-            - if @group.projects.blank?
-              .nothing-here-block This group has no projects yet
+          .form-actions
+            = f.submit 'Save group', class: "btn btn-save"
 
-      .tab-pane#tab-remove
-        .panel.panel-default.panel.panel-danger
-          .panel-heading Remove group
-          .panel-body
-            %p
-              Removing group will cause all child projects and resources to be removed.
-            %p
-              %strong Removed group can not be restored!
+    .panel.panel-danger
+      .panel-heading Remove group
+      .panel-body
+        %p
+          Removing group will cause all child projects and resources to be removed.
+          %br
+          %strong Removed group can not be restored!
 
-            = link_to 'Remove Group', @group, data: {confirm: 'Removed group can not be restored! Are you sure?'}, method: :delete, class: "btn btn-remove"
+        = link_to 'Remove Group', @group, data: {confirm: 'Removed group can not be restored! Are you sure?'}, method: :delete, class: "btn btn-remove"

app/views/groups/projects.html.haml

+.row
+  .col-md-2
+    = render 'settings_nav'
+  .col-md-10
+    .panel.panel-default
+      .panel-heading
+        %strong= @group.name
+        projects:
+        - if can? current_user, :manage_group, @group
+          .panel-head-actions
+            = link_to new_project_path(namespace_id: @group.id), class: "btn btn-new" do
+              %i.icon-plus
+              New Project
+      %ul.well-list
+        - @projects.each do |project|
+          %li
+            .list-item-name
+              = visibility_level_icon(project.visibility_level)
+              %strong= link_to project.name_with_namespace, project
+              %span.label.label-gray
+                = repository_size(project)
+            .pull-right
+              = link_to 'Members', 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, data: { confirm: remove_project_message(project)}, method: :delete, class: "btn btn-small btn-remove"
+        - if @projects.blank?
+          .nothing-here-block This group has no projects yet
+
+    = paginate @projects, theme: "gitlab"

config/routes.rb

@@ -146,6 +146,7 @@ Gitlab::Application.routes.draw do
       get :issues
       get :merge_requests
       get :members
+      get :projects
     end
 
     resources :users_groups, only: [:create, :update, :destroy]