Merge branch 'dz-improve-ui-consistency-2' into 'master'

Improve ui consistency. Part 2

* Use responsive top-area on project branches and tags pages
* Use default button size in the content list controls
* Improve button margin for btn-grouped css class

For https://gitlab.com/gitlab-org/gitlab-ce/issues/18324

See merge request !4536

app/assets/stylesheets/framework/buttons.scss

@@ -79,6 +79,23 @@
   @include btn-color($white-light, $border-color, $white-normal, $border-white-normal, $white-dark, $border-white-dark, $btn-white-active);
 }
 
+@mixin btn-with-margin {
+  margin-left: $btn-side-margin;
+  float: left;
+
+  &.inline {
+    float: none;
+  }
+
+  &.btn-sm {
+    margin-left: $btn-sm-side-margin;
+  }
+
+  &.btn-xs {
+    margin-left: $btn-xs-side-margin;
+  }
+}
+
 .btn {
   @include btn-default;
   @include btn-white;
@@ -142,24 +159,7 @@
   }
 
   &.btn-grouped {
-    margin-right: $btn-side-margin;
-    float: left;
-
-    &.inline {
-      float: none;
-    }
-
-    &:last-child {
-      margin-right: 0;
-    }
-
-    &.btn-sm {
-      margin-right: $btn-sm-side-margin;
-    }
-
-    &.btn-xs {
-      margin-right: $btn-xs-side-margin;
-    }
+    @include btn-with-margin;
   }
 
   &.disabled {
@@ -203,11 +203,7 @@
 
 .btn-group {
   &.btn-grouped {
-    margin-right: 7px;
-    float: left;
-    &:last-child {
-      margin-right: 0;
-    }
+    @include btn-with-margin;
   }
 }
 

app/assets/stylesheets/framework/lists.scss

@@ -137,8 +137,16 @@ ul.content-list {
       padding-top: 1px;
       float: right;
 
-      .btn {
-        padding: 10px 14px;
+      > .btn,
+      > .btn-group {
+        margin-right: $gl-padding-top;
+        display: inline-block;
+        margin-top: 4px;
+        margin-bottom: 4px;
+
+        &:last-child {
+          margin-right: 0;
+        }
       }
     }
 

app/assets/stylesheets/framework/variables.scss

@@ -80,8 +80,8 @@ $provider-btn-not-active-color: #4688f1;
 $link-underline-blue: #4a8bee;
 $layout-link-gray: #7e7c7c;
 $todo-alert-blue: #428bca;
-$btn-side-margin: 7px;
-$btn-sm-side-margin: 5px;
+$btn-side-margin: 10px;
+$btn-sm-side-margin: 7px;
 $btn-xs-side-margin: 5px;
 
 /*

app/views/groups/group_members/_group_member.html.haml

@@ -34,7 +34,7 @@
       %strong.member-access-level= member.human_access
       - if show_controls
         - if can?(current_user, :update_group_member, member)
-          = button_tag class: "btn-xs btn js-toggle-button",
+          = button_tag class: "btn-xs btn btn-grouped inline js-toggle-button",
                        title: 'Edit access level', type: 'button' do
             = icon('pencil')
 

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

@@ -3,31 +3,30 @@
 = render "projects/commits/head"
 
 %div{ class: (container_class) }
-  .row-content-block.second-block.content-component-block
-    .pull-right
-      - if can? current_user, :push_code, @project
+  .top-area
+    .nav-text
+      Protected branches can be managed in project settings
+
+    - if can? current_user, :push_code, @project
+      .nav-controls
         = link_to new_namespace_project_branch_path(@project.namespace, @project), class: 'btn btn-create' do
-          = icon('plus')
           New branch
-         
-      .dropdown.inline
-        %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
-          %span.light
-          - if @sort.present?
-            = @sort.humanize
-          - else
-            Name
-          %b.caret
-        %ul.dropdown-menu.dropdown-menu-align-right
-          %li
-            = link_to namespace_project_branches_path(sort: nil) do
+        .dropdown.inline
+          %button.dropdown-toggle.btn{type: 'button', 'data-toggle' => 'dropdown'}
+            %span.light
+            - if @sort.present?
+              = @sort.humanize
+            - else
               Name
-            = link_to namespace_project_branches_path(sort: 'recently_updated') do
-              = sort_title_recently_updated
-            = link_to namespace_project_branches_path(sort: 'last_updated') do
-              = sort_title_oldest_updated
-    .oneline
-      Protected branches can be managed in project settings
+            %b.caret
+          %ul.dropdown-menu.dropdown-menu-align-right
+            %li
+              = link_to namespace_project_branches_path(sort: nil) do
+                Name
+              = link_to namespace_project_branches_path(sort: 'recently_updated') do
+                = sort_title_recently_updated
+              = link_to namespace_project_branches_path(sort: 'last_updated') do
+                = sort_title_oldest_updated
   - unless @branches.empty?
     %ul.content-list.all-branches
       - @branches.each do |branch|

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

@@ -34,7 +34,6 @@
           = link_to 'Get started with Builds', help_page_path('ci/quick_start', 'README'), class: 'btn btn-info'
 
         = link_to ci_lint_path, class: 'btn btn-default' do
-          = icon('wrench')
           %span CI Lint
 
   %ul.content-list

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

@@ -6,7 +6,6 @@
   .nav-controls
     - if can?(current_user, :admin_milestone, @project)
       = link_to new_namespace_project_milestone_path(@project.namespace, @project), class: "btn btn-new", title: "New Milestone" do
-        = icon('plus')
         New Milestone
 
 .milestones

app/views/projects/milestones/show.html.haml

@@ -23,11 +23,9 @@
         = link_to 'Reopen Milestone', namespace_project_milestone_path(@project.namespace, @project, @milestone, milestone: {state_event: :activate }), method: :put, class: "btn btn-reopen btn-nr btn-grouped"
 
       = link_to edit_namespace_project_milestone_path(@project.namespace, @project, @milestone), class: "btn btn-grouped btn-nr" do
-        = icon('pencil-square-o')
         Edit
 
       = link_to namespace_project_milestone_path(@project.namespace, @project, @milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-grouped btn-danger" do
-        = icon('trash-o')
         Delete
 
 .detail-page-description.milestone-detail

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

@@ -28,14 +28,12 @@
     .nav-controls
       - if can? current_user, :create_pipeline, @project
         = link_to new_namespace_project_pipeline_path(@project.namespace, @project), class: 'btn btn-create' do
-          = icon('plus')
           New pipeline
 
         - unless @repository.gitlab_ci_yml
           = link_to 'Get started with Pipelines', help_page_path('ci/quick_start', 'README'), class: 'btn btn-info'
 
         = link_to ci_lint_path, class: 'btn btn-default' do
-          = icon('wrench')
           %span CI Lint
 
   %ul.content-list.pipelines

app/views/projects/project_members/_project_member.html.haml

@@ -32,7 +32,7 @@
     .pull-right
       %strong= member.human_access
       - if can?(current_user, :update_project_member, member)
-        = button_tag class: "btn-xs btn js-toggle-button",
+        = button_tag class: "btn-xs btn-grouped inline btn js-toggle-button",
                      title: 'Edit access level', type: 'button' do
           = icon('pencil')
 

app/views/projects/tags/_download.html.haml

-%span.btn-group.btn-grouped
+%span.btn-group
   = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'zip'), class: 'btn btn-default', rel: 'nofollow' do
-    %i.fa.fa-download
-    %span source code
+    %span Source code
   %a.btn.btn-default.dropdown-toggle{ 'data-toggle' => 'dropdown' }
     %span.caret
     %span.sr-only
@@ -9,9 +8,7 @@
   %ul.dropdown-menu.dropdown-menu-align-right{ role: 'menu' }
     %li
       = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'zip'), rel: 'nofollow' do
-        %i.fa.fa-download
         %span Download zip
     %li
       = link_to archive_namespace_project_repository_path(project.namespace, project, ref: ref, format: 'tar.gz'), rel: 'nofollow' do
-        %i.fa.fa-download
         %span Download tar.gz

app/views/projects/tags/_tag.html.haml

@@ -15,11 +15,11 @@
         = render 'projects/tags/download', ref: tag.name, project: @project
 
       - if can?(current_user, :push_code, @project)
-        = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, tag.name), class: 'btn-grouped btn has-tooltip', title: "Edit release notes" do
+        = link_to edit_namespace_project_tag_release_path(@project.namespace, @project, tag.name), class: 'btn has-tooltip', title: "Edit release notes" do
           = icon("pencil")
 
       - if can?(current_user, :admin_project, @project)
-        = link_to namespace_project_tag_path(@project.namespace, @project, tag.name), class: 'btn btn-grouped btn-xs btn-remove remove-row has-tooltip', title: "Delete tag", method: :delete, data: { confirm: "Deleting the '#{tag.name}' tag cannot be undone. Are you sure?", container: 'body' }, remote: true do
+        = link_to namespace_project_tag_path(@project.namespace, @project, tag.name), class: 'btn btn-remove remove-row has-tooltip', title: "Delete tag", method: :delete, data: { confirm: "Deleting the '#{tag.name}' tag cannot be undone. Are you sure?", container: 'body' }, remote: true do
           = icon("trash-o")
 
   - if commit

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

@@ -3,14 +3,14 @@
 = render "projects/commits/head"
 
 %div{ class: (container_class) }
-  .row-content-block.second-block.content-component-block
+  .top-area
+    .nav-text
+      Tags give the ability to mark specific points in history as being important
+
     - if can? current_user, :push_code, @project
-      .pull-right
+      .nav-controls
         = link_to new_namespace_project_tag_path(@project.namespace, @project), class: 'btn btn-create new-tag-btn' do
-          = icon('plus')
           New tag
-    .oneline
-      Tags give the ability to mark specific points in history as being important
 
   .tags
     - unless @tags.empty?

app/views/projects/wikis/_main_links.html.haml

 - if (@page && @page.persisted?)
-  = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn btn-grouped" do
+  = link_to namespace_project_wiki_history_path(@project.namespace, @project, @page), class: "btn" do
     Page History
   - if can?(current_user, :create_wiki, @project)
-    = link_to namespace_project_wiki_edit_path(@project.namespace, @project, @page), class: "btn btn-grouped" do
-      %i.fa.fa-pencil-square-o
+    = link_to namespace_project_wiki_edit_path(@project.namespace, @project, @page), class: "btn" do
       Edit
   - if can?(current_user, :admin_wiki, @project)
     = link_to namespace_project_wiki_path(@project.namespace, @project, @page), data: { confirm: "Are you sure you want to delete this page?"}, method: :delete, class: "btn btn-remove" do
-      = icon('trash')
       Delete

app/views/projects/wikis/_nav.html.haml

@@ -13,7 +13,6 @@
   .nav-controls
     - if can?(current_user, :create_wiki, @project)
       = link_to '#modal-new-wiki', class: "add-new-wiki btn btn-new", "data-toggle" => "modal" do
-        = icon('plus')
         New Page
 
 = render 'projects/wikis/new'

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

@@ -6,10 +6,10 @@
   - if group_member
     .controls.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
+        = link_to edit_group_path(group), class: "btn" do
+          = icon('cogs')
 
-      = 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
+      = link_to leave_group_group_members_path(group), data: { confirm: leave_group_message(group.name) }, method: :delete, class: "btn", title: 'Leave this group' do
         = icon('sign-out')
 
   .stats

app/views/shared/milestones/_milestone.html.haml

@@ -35,11 +35,9 @@
       .col-sm-6= render('shared/milestone_expired', milestone: milestone)
       .col-sm-6
         - if can?(current_user, :admin_milestone, milestone.project) and milestone.active?
-          = link_to edit_namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), class: "btn btn-xs" do
-            = icon('pencil-square-o')
+          = link_to edit_namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), class: "btn btn-xs btn-grouped" do
             Edit
           \
-          = link_to 'Close Milestone', namespace_project_milestone_path(@project.namespace, @project, milestone, milestone: {state_event: :close }), method: :put, remote: true, class: "btn btn-xs btn-close"
-          = link_to namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-xs btn-remove" do
-            = icon('trash-o')
+          = link_to 'Close Milestone', namespace_project_milestone_path(@project.namespace, @project, milestone, milestone: {state_event: :close }), method: :put, remote: true, class: "btn btn-xs btn-close btn-grouped"
+          = link_to namespace_project_milestone_path(milestone.project.namespace, milestone.project, milestone), data: { confirm: 'Are you sure?' }, method: :delete, class: "btn btn-xs btn-remove btn-grouped" do
             Delete