Merge branch 'winh-tree-dropdown-caret' into 'master'

Add chevron to create dropdown on repository page

Closes #39458

See merge request gitlab-org/gitlab-ce!15648

Author: Tim Zallmann

app/assets/images/icons.json

@@ -1 +1 @@
-{"iconCount":179,"spriteSize":81882,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-right","assignee","bold","book","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","ellipsis_v","emoji_slightly_smiling_face","emoji_smile","emoji_smiley","epic","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","import","issue-block","issue-child","issue-close","issue-duplicate","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil-square","pencil","pipeline","play","plus-square-o","plus-square","plus","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","spam","spinner","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","user","users","volume-up","warning","work"]}
+{"iconCount":180,"spriteSize":82176,"icons":["abuse","account","admin","angle-double-left","angle-double-right","angle-down","angle-left","angle-right","angle-up","appearance","applications","approval","arrow-down","arrow-right","assignee","bold","book","branch","bullhorn","calendar","cancel","chart","chevron-down","chevron-left","chevron-right","chevron-up","clock","close","code","collapse","comment-dots","comment-next","comment","comments","commit","credit-card","cut","dashboard","disk","doc_code","doc_image","doc_text","double-headed-arrow","download","duplicate","earth","ellipsis_v","emoji_slightly_smiling_face","emoji_smile","emoji_smiley","epic","external-link","eye-slash","eye","file-addition","file-deletion","file-modified","filter","folder","fork","geo-nodes","git-merge","group","history","home","hook","hourglass","image-comment-dark","import","issue-block","issue-child","issue-close","issue-duplicate","issue-new","issue-open-m","issue-open","issue-parent","issues","italic","key-2","key","label","labels","leave","level-up","license","link","list-bulleted","list-numbered","location-dot","location","lock-open","lock","log","mail","menu","merge-request-close","messages","mobile-issue-close","monitor","more","notifications-off","notifications","overview","pencil-square","pencil","pipeline","play","plus-square-o","plus-square","plus","preferences","profile","project","push-rules","question-o","question","quote","redo","remove","repeat","retry","scale","screen-full","screen-normal","scroll_down","scroll_up","search","settings","shield","slight-frown","slight-smile","smile","smiley","snippet","spam","spinner","star-o","star","status_canceled_borderless","status_canceled","status_closed","status_created_borderless","status_created","status_failed_borderless","status_failed","status_manual_borderless","status_manual","status_notfound_borderless","status_open","status_pending_borderless","status_pending","status_running_borderless","status_running","status_skipped_borderless","status_skipped","status_success_borderless","status_success_solid","status_success","status_warning_borderless","status_warning","stop","task-done","template","terminal","thumb-down","thumb-up","thumbtack","timer","todo-add","todo-done","token","unapproval","unassignee","unlink","user","users","volume-up","warning","work"]}

app/assets/images/icons.svg

@@ -2,9 +2,11 @@
   import { mapState } from 'vuex';
   import newModal from './modal.vue';
   import upload from './upload.vue';
+  import icon from '../../../vue_shared/components/icon.vue';
 
   export default {
     components: {
+      icon,
       newModal,
       upload,
     },
@@ -41,11 +43,14 @@
           data-toggle="dropdown"
           aria-label="Create new file or directory"
         >
-          <i
-            class="fa fa-plus"
-            aria-hidden="true"
-          >
-          </i>
+          <icon
+            name="plus"
+            css-classes="pull-left"
+          />
+          <icon
+            name="arrow-down"
+            css-classes="pull-left"
+          />
         </button>
         <ul class="dropdown-menu">
           <li>

app/assets/images/illustrations/clusters_empty.svg

@@ -4,6 +4,11 @@
   .nav-block {
     margin: 10px 0;
 
+    .btn .fa,
+    .btn svg {
+      color: $gl-text-color-secondary;
+    }
+
     @media (min-width: $screen-sm-min) {
       display: flex;
 
@@ -91,8 +96,12 @@
   }
 
   .add-to-tree {
-    vertical-align: middle;
-    padding: 6px 10px;
+    vertical-align: top;
+    padding: 8px;
+
+    svg {
+      top: 0;
+    }
   }
 
   .tree-table {

app/assets/images/illustrations/merge_request_changes_empty.svg

@@ -1,3 +1,8 @@
+- if on_top_of_branch?
+  - addtotree_toggle_attributes = { href: '#', 'data-toggle': 'dropdown', 'data-target': '.add-to-tree-dropdown' }
+- else
+  - addtotree_toggle_attributes = { title: _("You can only add files when you are on a branch"), data: { container: 'body' }, class: 'disabled has-tooltip' }
+
 %ul.breadcrumb.repo-breadcrumb
   %li
     = link_to project_tree_path(@project, @ref) do
@@ -8,13 +13,10 @@
 
   - if current_user
     %li
-      - if !on_top_of_branch?
-        %span.btn.add-to-tree.disabled.has-tooltip{ title: _("You can only add files when you are on a branch"), data: { container: 'body' } }
-          = icon('plus')
-      - else
-        %span.dropdown
-          %a.dropdown-toggle.btn.add-to-tree{ href: '#', "data-toggle" => "dropdown", "data-target" => ".add-to-tree-dropdown" }
-            = icon('plus')
+      %a.btn.add-to-tree{ addtotree_toggle_attributes }
+        = sprite_icon('plus', size: 16, css_class: 'pull-left')
+        = sprite_icon('arrow-down', size: 16, css_class: 'pull-left')
+      - if on_top_of_branch?
         .add-to-tree-dropdown
           %ul.dropdown-menu
             - if can_edit_tree?

app/assets/javascripts/repo/components/new_dropdown/index.vue

@@ -55,8 +55,8 @@
     to-fast-properties "^2.0.0"
 
 "@gitlab-org/gitlab-svgs@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.1.%3Cspan%20class="x x-first x-last">1.tgz#6e07ea02c3b104fa8b5d860a5e2fa9dab4edab96"
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@gitlab-org/gitlab-svgs/-/gitlab-svgs-1.1.%3Cspan%20class="x x-first x-last">3.tgz#2beead1bcdd83e7400de29b01014bf17bf76318e"
 
 "@types/jquery@^2.0.40":
   version "2.0.48"