Merge branch 'ui-improvements' into 'master'

UI improvements

* use shared partials for repeating rendering of projects, groups, snippets etc
* more consistency in way how projects, snippets and groups lists are rendered
* fix 500 error when submit project snippet without body
* remove some old and unused css
* more compact search page

See merge request !1214

CHANGELOG

@@ -19,6 +19,9 @@ v 8.0.0 (unreleased)
   - Move dashboard activity to separate page
   - Improve performance of git blame
   - Limit content width to 1200px for most of pages to improve readability on big screens
+  - Fix 500 error when submit project snippet without body
+  - Improve search page usability
+  - Bring more UI consistency in way how projects, snippets and groups lists are rendered
 
 v 7.14.1
   - Improve abuse reports management from admin area

app/assets/javascripts/dispatcher.js.coffee

@@ -55,7 +55,6 @@ class Dispatcher
         new Activities()
       when 'dashboard:projects:starred'
         new Activities()
-        new ProjectsList()
       when 'projects:commit:show'
         new Commit()
         new Diff()
@@ -70,7 +69,6 @@ class Dispatcher
       when 'groups:show'
         new Activities()
         shortcut_handler = new ShortcutsNavigation()
-        new ProjectsList()
       when 'groups:group_members:index'
         new GroupMembers()
         new UsersSelect()
@@ -96,8 +94,6 @@ class Dispatcher
       when 'users:show'
         new User()
         new Activities()
-      when 'admin:users:show'
-        new ProjectsList()
 
     switch path.first()
       when 'admin'

app/assets/stylesheets/base/mixins.scss

@@ -157,3 +157,41 @@
   white-space: nowrap;
   max-width: $max_width;
 }
+
+/*
+ * Base mixin for lists in GitLab
+ */
+@mixin basic-list {
+  margin: 5px 0px;
+  padding: 0px;
+  list-style: none;
+
+  li {
+    padding: 10px 0;
+    border-bottom: 1px solid #EEE;
+    overflow: hidden;
+    display: block;
+    margin: 0px;
+
+    &:last-child {
+      border:none
+    }
+
+    &.active {
+      background: #f9f9f9;
+      a {
+        font-weight: bold;
+      }
+    }
+
+    &.hide {
+      display: none;
+    }
+
+    &.light {
+      a {
+        color: #777;
+      }
+    }
+  }
+}

app/assets/stylesheets/generic/common.scss

@@ -375,9 +375,9 @@ table {
 }
 
 .center-top-menu {
-  border-bottom: 1px solid #EEE;
   list-style: none;
   text-align: center;
+  margin-top: 5px;
   padding-bottom: 15px;
   margin-bottom: 15px;
 
@@ -385,7 +385,7 @@ table {
     display: inline-block;
 
     a {
-      padding: 10px;
+      padding: 15px;
     }
 
     &.active a {

app/assets/stylesheets/generic/lists.scss

@@ -93,28 +93,12 @@ ol, ul {
 
 /** light list with border-bottom between li **/
 ul.bordered-list {
-  margin: 5px 0px;
-  padding: 0px;
-  li {
-    padding: 5px 0;
-    border-bottom: 1px solid #EEE;
-    overflow: hidden;
-    display: block;
-    margin: 0px;
-    &:last-child { border:none }
-    &.active {
-      background: #f9f9f9;
-      a { font-weight: bold; }
-    }
-
-    &.light {
-      a { color: #777; }
-    }
-  }
+  @include basic-list;
 
   &.top-list {
     li:first-child {
       padding-top: 0;
+
       h4, h5 {
         margin-top: 0;
       }

app/assets/stylesheets/pages/projects.scss

@@ -162,78 +162,6 @@ ul.nav.nav-projects-tabs {
   margin: 0px;
 }
 
-.my-projects,
-.public-projects {
-  li {
-    .project-info {
-      margin-bottom: 10px;
-      overflow: hidden;
-    }
-
-    .access-icon {
-      color: #AAA;
-      margin-left: 10px;
-      i {
-        color: #AAA;
-      }
-    }
-  }
-}
-
-.public-clone {
-  background: #EEE;
-  color: #777;
-  padding: 6px 10px;
-  margin: 1px;
-  font-weight: normal;
-}
-
-.public-projects .repo-info {
-  color: #777;
-
-  a {
-    color: #777;
-  }
-}
-
-.project-side {
-  .project-fork-icon {
-    float: left;
-    font-size: 26px;
-    margin-right: 10px;
-    line-height: 1.5;
-  }
-
-  .panel {
-    @include border-radius(3px);
-
-    .panel-heading, .panel-footer {
-      font-weight: normal;
-      background-color: transparent;
-      color: #666;
-      border-color: #EEE;
-    }
-
-    .actions {
-      margin-top: 10px;
-    }
-
-    .nav-pills a {
-      padding: 10px;
-      font-weight: bold;
-      color: $gl-link-color;
-    }
-
-    .nav {
-      margin-bottom: 15px;
-    }
-  }
-
-  .ci-status-image {
-    max-height: 22px;
-  }
-}
-
 .transfer-project .select2-container {
   min-width: 200px;
 }
@@ -334,23 +262,32 @@ pre.light-well {
   }
 }
 
-.project-row {
-  .project-full-name {
-    font-weight: bold;
-    font-size: 15px;
-  }
+/*
+ * Projects list rendered on dashboard and user page
+ */
+.projects-list {
+  @include basic-list;
 
-  .project-description {
-    color: #888;
-    font-size: 13px;
+  .project-row {
+    .project-full-name {
+      @include str-truncated;
+      font-weight: bold;
+      font-size: 15px;
+    }
 
-    p {
-      margin-bottom: 0;
+    .project-description {
       color: #888;
+      font-size: 13px;
+
+      p {
+        @include str-truncated;
+        margin-bottom: 0;
+        color: #888;
+      }
     }
   }
 }
 
-.my-projects .project-row {
-  padding: 10px 0;
+.panel .projects-list li {
+  padding: 10px 15px;
 }

app/assets/stylesheets/pages/search.scss

 .search-results {
   .search-result-row {
-    border-bottom: 1px solid #EEE;
-    padding-bottom: 10px;
-    margin-bottom: 10px;
+    border-bottom: 1px solid #DDD;
+    padding-bottom: 15px;
+    margin-bottom: 15px;
   }
 }
+
+.search-holder {
+  max-width: 600px;
+  margin: 0 auto;
+  margin-bottom: 20px;
+
+  input {
+    border-color: #BBB;
+    font-weight: bold;
+  }
+}
+

app/assets/stylesheets/pages/snippets.scss

@@ -6,3 +6,27 @@
 .snippet-form-holder .file-holder .file-title {
   padding: 2px;
 }
+
+
+.snippet-row {
+  .snippet-title {
+    font-size: 15px;
+    font-weight: bold;
+    line-height: 20px;
+    margin-bottom: 2px;
+
+    .monospace {
+      font-weight: normal;
+    }
+  }
+
+  .snippet-info {
+    color: #888;
+    font-size: 13px;
+    line-height: 24px;
+
+    a {
+      color: #888;
+    }
+  }
+}

app/controllers/projects/snippets_controller.rb

@@ -30,9 +30,14 @@ class Projects::SnippetsController < Projects::ApplicationController
   def create
     @snippet = CreateSnippetService.new(@project, current_user,
                                         snippet_params).execute
-    respond_with(@snippet,
-                 location: namespace_project_snippet_path(@project.namespace,
-                                                          @project, @snippet))
+
+    if @snippet.valid?
+      respond_with(@snippet,
+                   location: namespace_project_snippet_path(@project.namespace,
+                                                            @project, @snippet))
+    else
+      render :new
+    end
   end
 
   def edit

app/finders/trending_projects_finder.rb

@@ -2,13 +2,21 @@ class TrendingProjectsFinder
   def execute(current_user, start_date = nil)
     start_date ||= Date.today - 1.month
 
-    projects = projects_for(current_user)
-
     # Determine trending projects based on comments count
     # for period of time - ex. month
-    projects.joins(:notes).where('notes.created_at > ?', start_date).
-      select("projects.*, count(notes.id) as ncount").
-      group("projects.id").reorder("ncount DESC")
+    trending_project_ids = Note.
+      select("notes.project_id, count(notes.project_id) as pcount").
+      where('notes.created_at > ?', start_date).
+      group("project_id").
+      reorder("pcount DESC").
+      map(&:project_id)
+
+    sql_order_ids = trending_project_ids.reverse.
+      map { |project_id| "id = #{project_id}" }.join(", ")
+
+    # Get list of projects that user allowed to see
+    projects = projects_for(current_user)
+    projects.where(id: trending_project_ids).reorder(sql_order_ids)
   end
 
   private

app/views/dashboard/_projects.html.haml

@@ -7,7 +7,4 @@
           = link_to new_project_path, class: 'btn btn-success' do
             New project
 
-  %ul.projects-list.bordered-list.my-projects
-    - @projects.each do |project|
-      %li.project-row
-        = render partial: 'shared/project', locals: { project: project, avatar: true, stars: true }
+  = render 'shared/projects/list', projects: @projects

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

@@ -8,32 +8,9 @@
       = link_to new_group_path, class: "btn btn-new btn-sm" do
         %i.fa.fa-plus
         New Group
-.panel.panel-default
-  .panel-heading
-    %strong Groups
-    (#{@group_members.count})
-  %ul.well-list
-    - @group_members.each do |group_member|
-      - group = group_member.group
-      %li
-        .pull-right.hidden-xs
-          - if can?(current_user, :admin_group, group)
-            = link_to edit_group_path(group), class: "btn-sm btn btn-grouped" do
-              %i.fa.fa-cogs
-              Settings
-
-          = 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
-            Leave
-
-        = image_tag group_icon(group), class: "avatar s40 avatar-tile hidden-xs"
-        = link_to group, class: 'group-name' do
-          %strong= group.name
-
-        as
-        %strong #{group_member.human_access}
-
-        %div.light
-          #{pluralize(group.projects.count, "project")}, #{pluralize(group.users.count, "user")}
+%ul.bordered-list
+  - @group_members.each do |group_member|
+    - group = group_member.group
+    = render 'shared/groups/group', group: group, group_member: group_member
 
 = paginate @group_members

app/views/dashboard/projects/starred.html.haml

@@ -17,8 +17,7 @@
                 = link_to new_project_path, class: 'btn btn-success' do
                   New project
 
-        = render 'shared/projects_list', projects: @projects,
-          projects_limit: 20, stars: true, avatar: false
+        = render 'shared/projects/list', projects: @projects, projects_limit: 20
 
 - else
   %h3 You don't have starred projects yet

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

@@ -32,17 +32,7 @@
 
 %ul.bordered-list
   - @groups.each do |group|
-    %li
-      .clearfix
-        %h4
-          = link_to group_path(id: group.path) do
-            = group.name
-      .clearfix
-        %p
-          = truncate group.description, length: 150
-      .clearfix
-        %p.light
-          #{pluralize(group.members.size, 'member')}, #{pluralize(group.projects.count, 'project')}
+    = render 'shared/groups/group', group: group
   - unless @groups.present?
     .nothing-here-block No public groups
 

app/views/explore/projects/_projects.html.haml

-%ul.projects-list.bordered-list.my-projects.public-projects
-  - projects.each do |project|
-    %li.project-row
-      = render partial: 'shared/project', locals: { project: project, avatar: true, stars: true }
-- unless projects.present?
-  .nothing-here-block No such projects
+- if projects.any?
+  .public-projects
+    = render 'shared/projects/list', projects: projects
+- else
+  .nothing-here-block
+    No such projects

app/views/groups/_projects.html.haml

@@ -7,4 +7,4 @@
           = link_to new_project_path(namespace_id: @group.id), class: 'btn btn-success' do
             New project
 
-  = render 'shared/projects_list', projects: @projects, projects_limit: 20
+  = render 'shared/projects/list', projects: @projects, projects_limit: 20

app/views/layouts/nav/_project.html.haml

@@ -100,7 +100,7 @@
   - if project_nav_tab? :snippets
     = nav_link(controller: :snippets) do
       = link_to namespace_project_snippets_path(@project.namespace, @project), title: 'Snippets', class: 'shortcuts-snippets', data: {placement: 'right'} do
-        = icon('file-text-o fw')
+        = icon('clipboard fw')
         %span
           Snippets
 

app/views/projects/snippets/_snippet.html.haml

-%li
-  %h4.snippet-title
-    = link_to reliable_snippet_path(snippet) do
-      = truncate(snippet.title, length: 60)
-    %span.cgray.monospace.tiny.pull-right
-      = snippet.file_name
-
-  .snippet-info
-    = "##{snippet.id}"
-    %span
-      by
-      = image_tag avatar_icon(snippet.author_email), class: "avatar avatar-inline s16"
-      = snippet.author_name
-      %span.light
-        #{time_ago_with_tooltip(snippet.created_at)}

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

@@ -8,9 +8,8 @@
 %p.light
   Share code pastes with others out of git repository
 
-%hr
 %ul.bordered-list
-  = render partial: "projects/snippets/snippet", collection: @snippets
+  = render partial: "shared/snippets/snippet", collection: @snippets
   - if @snippets.empty?
     %li
       .nothing-here-block Nothing here.

app/views/search/_category.html.haml

-%ul.nav.nav-pills.search-filter
+%ul.nav.nav-tabs.search-filter
   - if @project
     %li{class: ("active" if @scope == 'blobs')}
       = link_to search_filter_path(scope: 'blobs') do

app/views/search/_filter.html.haml

 .dropdown.inline
-  %button.dropdown-toggle.btn.btn{type: 'button', 'data-toggle' => 'dropdown'}
-    %i.fa.fa-tags
+  %button.dropdown-toggle.btn.btn-sm{type: 'button', 'data-toggle' => 'dropdown'}
     %span.light Group:
     - if @group.present?
       %strong= @group.name
@@ -17,8 +16,7 @@
           = group.name
 
 .dropdown.inline.prepend-left-10.project-filter
-  %button.dropdown-toggle.btn.btn{type: 'button', 'data-toggle' => 'dropdown'}
-    %i.fa.fa-tags
+  %button.dropdown-toggle.btn.btn-sm{type: 'button', 'data-toggle' => 'dropdown'}
     %span.light Project:
     - if @project.present?
       %strong= @project.name_with_namespace

app/views/search/_form.html.haml

-= form_tag search_path, method: :get, class: 'form-inline' do |f|
+= form_tag search_path, method: :get do |f|
   = hidden_field_tag :project_id, params[:project_id]
   = hidden_field_tag :group_id, params[:group_id]
   = hidden_field_tag :snippets, params[:snippets]
   = hidden_field_tag :scope, params[:scope]
+
   .search-holder.clearfix
-    .form-group
+    .input-group
       = search_field_tag :search, params[:search], placeholder: "Search for projects, issues etc", class: "form-control search-text-input", id: "dashboard_search", autofocus: true
-      = button_tag 'Search', class: "btn btn-primary"
+      %span.input-group-btn
+        = button_tag 'Search', class: "btn btn-primary"
     - unless params[:snippets].eql? 'true'
-      .pull-right
-        = render 'filter'
+      %br
+      = render 'filter'

app/views/search/_results.html.haml

 - if @search_results.empty?
   = render partial: "search/results/empty"
 - else
-  .light
+  %p.light
     Search results for
     %code
       = @search_term
@@ -11,10 +11,13 @@
       - elsif @group
         in group #{link_to @group.name, @group}
 
-  %br
   .results.prepend-top-10
     .search-results
-      = render partial: "search/results/#{@scope.singularize}", collection: @objects
+      - if @scope == 'projects'
+        .term
+          = render 'shared/projects/list', projects: @objects
+      - else
+        = render partial: "search/results/#{@scope.singularize}", collection: @objects
       = paginate @objects, theme: 'gitlab'
 
 :javascript

app/views/search/results/_project.html.haml

-.search-result-row
-  %h4
-    = link_to [project.namespace.becomes(Namespace), project] do
-      %span.term= project.name_with_namespace
-  - if project.description.present?
-    %span.light.term= project.description

app/views/search/show.html.haml

 - page_title @search_term
 = render 'search/form'
-%hr
 - if @search_term
   = render 'search/category'
-  %hr
   = render 'search/results'

app/views/shared/_project.html.haml

-= cache [project.namespace, project, controller.controller_name, controller.action_name] do
-  = link_to project_path(project), class: dom_class(project) do
-    - if avatar
-      .dash-project-avatar
-        = project_icon(project, alt: '', class: 'avatar project-avatar s40')
-    %span.str-truncated.project-full-name
-      %span.namespace-name
-        - if project.namespace
-          = project.namespace.human_name
-          \/
-      %span.project-name.filter-title
-        = project.name
-    - if stars
-      %span.pull-right.light
-        %i.fa.fa-star
-        = project.star_count
-  - if project.description.present?
-    .project-description
-      .str-truncated
-        = markdown(project.description, pipeline: :description)

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

+- group_member = local_assigns[:group_member]
+%li
+  - if group_member
+    .pull-right.hidden-xs
+      - if can?(current_user, :admin_group, group)
+        = link_to edit_group_path(group), class: "btn-sm btn btn-grouped" do
+          %i.fa.fa-cogs
+          Settings
+
+      = 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
+        Leave
+
+  = image_tag group_icon(group), class: "avatar s40 avatar-tile hidden-xs"
+  = link_to group, class: 'group-name' do
+    %strong= group.name
+
+  - if group_member
+    as
+    %strong #{group_member.human_access}
+
+  %div.light
+    #{pluralize(group.projects.count, "project")}, #{pluralize(group.users.count, "user")}
+

app/views/shared/_projects_list.html.haml → app/views/shared/projects/_list.html.haml

 - projects_limit = 20 unless local_assigns[:projects_limit]
 - avatar = true unless local_assigns[:avatar] == false
-- stars = false unless local_assigns[:stars] == true
-%ul.well-list.projects-list
+- stars = true unless local_assigns[:stars] == false
+
+%ul.projects-list
   - projects.each_with_index do |project, i|
-    %li{class: (i >= projects_limit) ? 'project-row hide' : 'project-row'}
-      = render "shared/project", project: project, avatar: avatar, stars: stars
-  - if projects.blank?
-    %li
-      .nothing-here-block There are no projects here.
+    - css_class = (i >= projects_limit) ? 'hide' : nil
+    = render "shared/projects/project", project: project,
+      avatar: avatar, stars: stars, css_class: css_class
+
   - if projects.count > projects_limit
-    %li.bottom
-      %span.light
+    %li.bottom.center
+      .light
         #{projects_limit} of #{pluralize(projects.count, 'project')} displayed.
-      %span
         = link_to '#', class: 'js-expand' do
           Show all
+
+:coffeescript
+  new ProjectsList()

app/views/shared/projects/_project.html.haml

+- avatar = true unless local_assigns[:avatar] == false
+- stars = true unless local_assigns[:stars] == false
+- css_class = nil unless local_assigns[:css_class]
+%li.project-row{ class: css_class }
+  = cache [project.namespace, project, controller.controller_name, controller.action_name, 'v2'] do
+    = link_to project_path(project), class: dom_class(project) do
+      - if avatar
+        .dash-project-avatar
+          = project_icon(project, alt: '', class: 'avatar project-avatar s40')
+      %span.project-full-name
+        %span.namespace-name
+          - if project.namespace
+            = project.namespace.human_name
+            \/
+        %span.project-name.filter-title
+          = project.name
+      - if stars
+        %span.pull-right.light
+          %i.fa.fa-star
+          = project.star_count
+    - if project.description.present?
+      .project-description
+        = markdown(project.description, pipeline: :description)

app/views/snippets/_snippet.html.haml → app/views/shared/snippets/_snippet.html.haml

-%li
-  %h4.snippet-title
+%li.snippet-row
+  .snippet-title
     = link_to reliable_snippet_path(snippet) do
       = truncate(snippet.title, length: 60)
       - if snippet.private?
         %span.label.label-gray
           %i.fa.fa-lock
           private
-    %span.cgray.monospace.tiny.pull-right
+    %span.monospace.pull-right
       = snippet.file_name
 
   %small.pull-right.cgray
@@ -14,10 +14,8 @@
       = link_to snippet.project.name_with_namespace, namespace_project_path(snippet.project.namespace, snippet.project)
 
   .snippet-info
-    = "##{snippet.id}"
-    %span
-      by
-      = link_to user_snippets_path(snippet.author) do
-        = image_tag avatar_icon(snippet.author_email), class: "avatar avatar-inline s16", alt: ''
-        = snippet.author_name
-      %span.light #{time_ago_with_tooltip(snippet.created_at)}
+    = link_to user_snippets_path(snippet.author) do
+      = image_tag avatar_icon(snippet.author_email), class: "avatar s24", alt: ''
+      = snippet.author_name
+    authored #{time_ago_with_tooltip(snippet.created_at)}
+

app/views/snippets/_snippets.html.haml

 %ul.bordered-list
-  = render partial: 'snippet', collection: @snippets
+  = render partial: 'shared/snippets/snippet', collection: @snippets
   - if @snippets.empty?
     %li
       .nothing-here-block Nothing here.

app/views/users/_projects.html.haml

 - if local_assigns.has_key?(:contributed_projects) && contributed_projects.present?
   .panel.panel-default.contributed-projects
     .panel-heading Projects contributed to
-    = render 'shared/projects_list',
+    = render 'shared/projects/list',
       projects: contributed_projects.sort_by(&:star_count).reverse,
       projects_limit: 5, stars: true, avatar: false
 
 - if local_assigns.has_key?(:projects) && projects.present?
   .panel.panel-default
     .panel-heading Personal projects
-    = render 'shared/projects_list',
+    = render 'shared/projects/list',
       projects: projects.sort_by(&:star_count).reverse,
       projects_limit: 10, stars: true, avatar: false