Merge branch 'improve-groups-list' into 'master'

Improve UI consistency between projects and groups lists

* add group description to the list
* move new group button to top nav
* move projects/users count icons to the right

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

See merge request !2677

CHANGELOG

@@ -26,6 +26,7 @@ v 8.5.0 (unreleased)
   - Deprecate API "merge_request/:merge_request_id/...". Use "merge_requests/:merge_request_id/..." instead
   - Mark inline difference between old and new paths when a file is renamed
   - Support Akismet spam checking for creation of issues via API (Stan Hu)
+  - Improve UI consistency between projects and groups lists
 
 v 8.4.3
   - Increase lfs_objects size column to 8-byte integer to allow files larger

app/assets/stylesheets/framework/buttons.scss

@@ -82,8 +82,7 @@
   &.btn-success,
   &.btn-new,
   &.btn-create,
-  &.btn-save,
-  &.btn-green {
+  &.btn-save {
     @include btn-green;
   }
 
@@ -159,7 +158,6 @@
 
 .input-group-btn {
   .btn {
-    @include btn-gray;
     @include btn-middle;
 
     &:hover {
@@ -186,8 +184,4 @@
     border: 1px solid #c6cacf !important;
     background-color: #e4e7ed !important;
   }
-
-  .btn-green {
-    @include btn-green
-  }
 }

app/assets/stylesheets/framework/nav.scss

@@ -37,3 +37,89 @@
     }
   }
 }
+
+.top-area {
+  @include clearfix;
+
+  border-bottom: 1px solid #EEE;
+
+  .nav-text {
+    padding-top: 16px;
+    padding-bottom: 11px;
+    display: inline-block;
+    width: 50%;
+    line-height: 28px;
+
+    /* Small devices (phones, tablets, 768px and lower) */
+    @media (max-width: $screen-sm-min) {
+      width: 100%;
+    }
+  }
+
+  .nav-links {
+    display: inline-block;
+    width: 50%;
+    margin-bottom: 0px;
+    border-bottom: none;
+
+    /* Small devices (phones, tablets, 768px and lower) */
+    @media (max-width: $screen-sm-min) {
+      width: 100%;
+    }
+  }
+
+  .nav-controls {
+    width: 50%;
+    display: inline-block;
+    float: right;
+    text-align: right;
+    padding: 11px 0;
+    margin-bottom: 0px;
+
+    > .dropdown {
+      margin-right: 10px;
+      display: inline-block;
+    }
+
+    > .btn {
+      display: inline-block;
+    }
+
+    input {
+      height: 34px;
+      display: inline-block;
+      position: relative;
+      top: 1px;
+      margin-right: 10px;
+
+      /* Medium devices (desktops, 992px and up) */
+      @media (min-width: $screen-md-min) { width: 200px; }
+
+      /* Large devices (large desktops, 1200px and up) */
+      @media (min-width: $screen-lg-min) { width: 250px; }
+
+      &.input-short {
+        /* Medium devices (desktops, 992px and up) */
+        @media (min-width: $screen-md-min) { width: 170px; }
+
+        /* Large devices (large desktops, 1200px and up) */
+        @media (min-width: $screen-lg-min) { width: 210px; }
+      }
+    }
+
+    /* Hide on extra small devices (phones) */
+    @media (max-width: $screen-xs-max) {
+      display: none;
+    }
+
+    /* Small devices (tablets, 768px and lower) */
+    @media (max-width: $screen-sm-max) {
+      width: 100%;
+      text-align: left;
+
+      input {
+        width: 300px;
+      }
+    }
+  }
+}

app/assets/stylesheets/pages/groups.scss

@@ -4,7 +4,7 @@
   input[type='search'] {
     width: 225px;
     vertical-align: bottom;
-    
+
     @media (max-width: $screen-xs-max) {
       width: 100px;
       vertical-align: bottom;
@@ -21,3 +21,21 @@
     height: 42px;
   }
 }
+
+.group-row {
+  &.no-description {
+    .group-name {
+      line-height: 44px;
+    }
+  }
+
+  .stats {
+    float: right;
+    line-height: 44px;
+    color: $gl-gray;
+
+    span {
+      margin-right: 15px;
+    }
+  }
+}

app/assets/stylesheets/pages/projects.scss

@@ -281,36 +281,6 @@
   margin-top: -1px;
 }
 
-.top-area {
-  border-bottom: 1px solid #EEE;
-
-  ul.nav-links {
-    display: inline-block;
-    width: 50%;
-    margin-bottom: 0px;
-    border-bottom: none;
-  }
-
-  .projects-search-form {
-    width: 50%;
-    display: inline-block;
-    float: right;
-    padding-top: 11px;
-    text-align: right;
-
-    .btn-green {
-      margin-left: 10px;
-      float: right;
-    }
-  }
-
-  @media (max-width: $screen-xs-max) {
-    .projects-search-form {
-      padding-top: 15px;
-    }
-  }
-}
-
 .fork-namespaces {
   .fork-thumbnail {
     text-align: center;
@@ -386,22 +356,6 @@ pre.light-well {
   border-color: #f1f1f1;
 }
 
-.projects-search-form {
-  padding: $gl-padding 0;
-  padding-bottom: 0;
-  margin-bottom: 0px;
-
-  input {
-    display: inline-block;
-    width: calc(100% - 151px);
-  }
-
-  .btn {
-    display: inline-block;
-    width: 135px;
-  }
-}
-
 .git-empty {
   margin: 0 7px 0 7px;
 
@@ -559,52 +513,12 @@ pre.light-well {
   }
 }
 
-.cannot-be-merged, 
+.cannot-be-merged,
 .cannot-be-merged:hover {
   color: #E62958;
   margin-top: 2px;
 }
 
-/*
- * Forks list rendered on Project's forks page
- */
-
-.forks-top-block {
-  padding: 16px 0;
-}
-
-.projects-search-form {
-  .dropdown-toggle.btn {
-    margin-top: -3px;
-  }
-
-  &.fork-search-form {
-    margin: 0;
-    margin-top: -$gl-padding;
-    padding-bottom: 0;
-
-    input {
-      /* Small devices (tablets, 768px and up) */
-      @media (min-width: $screen-sm-min) { width: 180px; }
-
-      /* Medium devices (desktops, 992px and up) */
-      @media (min-width: $screen-md-min) { width: 350px; }
-
-      /* Large devices (large desktops, 1200px and up) */
-      @media (min-width: $screen-lg-min) { width: 400px; }
-    }
-
-    .sort-forks {
-      width: 160px;
-    }
-
-    .fork-link {
-      float: right;
-      margin-left: $gl-padding;
-    }
-  }
-}
-
 .private-forks-notice .private-fork-icon {
   i:nth-child(1) {
     color: #2AA056;

app/views/dashboard/_groups_head.html.haml

-%ul.nav-links
-  = nav_link(page: dashboard_groups_path) do
-    = link_to dashboard_groups_path, title: 'Your groups', data: {placement: 'right'} do
-      Your Groups
-  = nav_link(page: explore_groups_path) do
-    = link_to explore_groups_path, title: 'Explore groups', data: {placement: 'bottom'} do
-      Explore Groups
+.top-area
+  %ul.nav-links
+    = nav_link(page: dashboard_groups_path) do
+      = link_to dashboard_groups_path, title: 'Your groups' do
+        Your Groups
+    = nav_link(page: explore_groups_path) do
+      = link_to explore_groups_path, title: 'Explore groups' do
+        Explore Groups
+  - if current_user.can_create_group?
+    .nav-controls
+      = link_to new_group_path, class: "btn btn-new" do
+        = icon('plus')
+        New Group

app/views/dashboard/_projects_head.html.haml

@@ -8,13 +8,13 @@
     = nav_link(page: starred_dashboard_projects_path) do
       = link_to starred_dashboard_projects_path, title: 'Starred Projects', data: {placement: 'right'} do
         Starred Projects
-    = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path], html_options: { class: 'hidden-xs' }) do
+    = nav_link(page: [explore_root_path, trending_explore_projects_path, starred_explore_projects_path, explore_projects_path]) do
       = link_to explore_root_path, title: 'Explore', data: {placement: 'right'} do
         Explore Projects
 
-  .projects-search-form  
+  .nav-controls
     = search_field_tag :filter_projects, nil, placeholder: 'Filter by name...', class: 'projects-list-filter form-control hidden-xs', spellcheck: false
     - if current_user.can_create_project?
-      = link_to new_project_path, class: 'btn btn-green' do
-        %i.fa.fa-plus
+      = link_to new_project_path, class: 'btn btn-new' do
+        = icon('plus')
         New Project

app/views/dashboard/groups/index.html.haml

@@ -2,15 +2,6 @@
 - header_title  "Groups", dashboard_groups_path
 = render 'dashboard/groups_head'
 
-.gray-content-block
-  - if current_user.can_create_group?
-    %span.pull-right.hidden-xs
-      = link_to new_group_path, class: "btn btn-new" do
-        %i.fa.fa-plus
-        New Group
-  .oneline
-    Group members have access to all group projects.
-
 %ul.content-list
   - @group_members.each do |group_member|
     - group = group_member.group

app/views/groups/_projects.html.haml

-.projects-list-holder
-  .projects-search-form
-    .input-group
-      = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control', spellcheck: false
-      - if can? current_user, :create_projects, @group
-        %span.input-group-btn
-          = link_to new_project_path(namespace_id: @group.id), class: 'btn btn-green' do
-            %i.fa.fa-plus
-            New Project
+.projects-list-holder.prepend-top-default
+  .input-group
+    = search_field_tag :filter_projects, nil, placeholder: 'Filter by name', class: 'projects-list-filter form-control', spellcheck: false
+    - if can? current_user, :create_projects, @group
+      %span.input-group-btn
+        = link_to new_project_path(namespace_id: @group.id), class: 'btn btn-new' do
+          = icon('plus')
+          New Project
 
   = render 'shared/projects/list', projects: @projects, projects_limit: 20, stars: false, skip_namespace: true

app/views/projects/forks/index.html.haml

-.gray-content-block.top-block.clearfix.white.forks-top-block
-  .pull-left
+.top-area
+  .nav-text
     - public_count = @public_forks.size
     - protected_count = @protected_forks.size
     - full_count_title = "#{public_count} public and #{protected_count} private"
     == #{pluralize(@all_forks.size, 'fork')}: #{full_count_title}
 
-  .pull-right
-    .projects-search-form.fork-search-form
-      = search_field_tag :filter_projects, nil, placeholder: 'Search forks', class: 'projects-list-filter form-control',
-        spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' }
+  .nav-controls
+    = search_field_tag :filter_projects, nil, placeholder: 'Search forks', class: 'projects-list-filter form-control input-short',
+      spellcheck: false, data: { 'filter-selector' => 'span.namespace-name' }
 
-      .dropdown.inline.prepend-left-10
-        %button.dropdown-toggle.btn.sort-forks{type: 'button', 'data-toggle' => 'dropdown'}
-          %span.light sort:
-          - if @sort.present?
-            = sort_options_hash[@sort]
-          - else
+    .dropdown
+      %button.dropdown-toggle.btn.sort-forks{type: 'button', 'data-toggle' => 'dropdown'}
+        %span.light sort:
+        - if @sort.present?
+          = sort_options_hash[@sort]
+        - else
+          = sort_title_recently_created
+        %b.caret
+      %ul.dropdown-menu.dropdown-menu-align-right
+        %li
+          - excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id]
+          = link_to page_filter_path(sort: sort_value_recently_created, without: excluded_filters) do
             = sort_title_recently_created
-          %b.caret
-        %ul.dropdown-menu.dropdown-menu-align-right
-          %li
-            - excluded_filters = [:state, :scope, :label_name, :milestone_id, :assignee_id, :author_id]
-            = link_to page_filter_path(sort: sort_value_recently_created, without: excluded_filters) do
-              = sort_title_recently_created
-            = link_to page_filter_path(sort: sort_value_oldest_created, without: excluded_filters) do
-              = sort_title_oldest_created
-            = link_to page_filter_path(sort: sort_value_recently_updated, without: excluded_filters) do
-              = sort_title_recently_updated
-            = link_to page_filter_path(sort: sort_value_oldest_updated, without: excluded_filters) do
-              = sort_title_oldest_updated
+          = link_to page_filter_path(sort: sort_value_oldest_created, without: excluded_filters) do
+            = sort_title_oldest_created
+          = link_to page_filter_path(sort: sort_value_recently_updated, without: excluded_filters) do
+            = sort_title_recently_updated
+          = link_to page_filter_path(sort: sort_value_oldest_updated, without: excluded_filters) do
+            = sort_title_oldest_updated
 
-      .fork-link.inline
-        - if current_user.already_forked?(@project) && current_user.manageable_namespaces.size < 2
-          = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: 'Go to your fork', class: 'pull-right btn btn-new' do
-            = icon('code-fork fw')
-            Fork
-        - else
-          = link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'pull-right btn btn-new' do
-            = icon('code-fork fw')
-            Fork
+    - if current_user.already_forked?(@project) && current_user.manageable_namespaces.size < 2
+      = link_to namespace_project_path(current_user, current_user.fork_of(@project)), title: 'Go to your fork', class: 'btn btn-new' do
+        = icon('code-fork fw')
+        Fork
+    - else
+      = link_to new_namespace_project_fork_path(@project.namespace, @project), title: "Fork project", class: 'btn btn-new' do
+        = icon('code-fork fw')
+        Fork
 
 
 .projects-list-holder

app/views/shared/groups/_group.html.haml

 - group_member = local_assigns[:group_member]
-%li
+- css_class = '' unless local_assigns[:css_class]
+- css_class += " no-description" if group.description.blank?
+
+%li.group-row{ class: css_class }
   - if group_member
     .controls.hidden-xs
       - if can?(current_user, :admin_group, group)
@@ -9,6 +12,15 @@
       = link_to leave_group_group_members_path(group), data: { confirm: leave_group_message(group.name) }, method: :delete, class: "btn-sm btn btn-grouped", title: 'Leave this group' do
         %i.fa.fa-sign-out
 
+  .stats
+    %span
+      = icon('home')
+      = number_with_delimiter(group.projects.count)
+
+    %span
+      = icon('users')
+      = number_with_delimiter(group.users.count)
+
   = image_tag group_icon(group), class: "avatar s46 hidden-xs"
   = link_to group, class: 'group-name' do
     %span.item-title= group.name
@@ -17,5 +29,6 @@
     as
     %span #{group_member.human_access}
 
-  %div.light
-    #{pluralize(group.projects.count, "project")}, #{pluralize(group.users.count, "user")}
+  - if group.description.present?
+    .light
+      = markdown(group.description, pipeline: :description)