Add dropdown to breadcrumbs [SCI-5431]

app/assets/stylesheets/projects.scss

@@ -463,7 +463,6 @@ li.module-hover {
   width: calc(100% + 4em);
 
   .projects-breadcrumbs {
-    @include font-small;
     padding: .75em 0;
   }
 

app/assets/stylesheets/shared/breadcrumbs.scss

@@ -0,0 +1,41 @@
+.breadcrumbs-container {
+  @include font-small;
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+
+  .delimiter {
+    @include font-button;
+    font-weight: bold;
+    padding: 0 .5em;
+  }
+
+  .breadcrumbs-link {
+    display: inline-block;
+    max-width: 150px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+
+  .breadcrumbs-collapsed-container {
+    color: $brand-primary;
+    position: relative;
+
+    .show-breadcrumbs {
+      align-items: center;
+      cursor: pointer;
+      display: flex;
+      position: relative;
+    }
+
+    a {
+      @include font-button;
+      color: $brand-primary;
+    }
+  }
+}

app/views/projects/index/_breadcrumbs.html.erb

@@ -1,32 +1,35 @@
 <% target_folder ||= nil %>
 <% experiment ||= nil %>
 <% project ||= nil %>
+<% links = [] %>
 
-<div class="projects-breadcrumbs">
+<div class="projects-breadcrumbs breadcrumbs-container">
-  <%= link_to(t('projects.index.breadcrumbs_root'),
+  <%
-              projects_path(view_mode: projects_view_mode(project: project)),
+    links.push({
+      label: t('projects.index.breadcrumbs_root'),
+      url: projects_path(view_mode: projects_view_mode(project: project)),
       class: 'project-folder-link',
-              data: { projects_cards_url: cards_projects_url,
+      data: { projects_cards_url: cards_projects_url, sidebar_url: sidebar_team_path(current_team) }
-                      sidebar_url: sidebar_team_path(current_team) }) %>
+    })
-  <span>/</span>
+
-  <% tree_ordered_parent_folders(target_folder)&.each do |project_folder| %>
+    tree_ordered_parent_folders(target_folder)&.each do |project_folder|
-    <%= link_to(project_folder.name,
+      links.push({
-                project_folder_path(project_folder),
+        label: project_folder.name,
+        url: project_folder_path(project_folder),
         class: 'project-folder-link',
-                data: { projects_cards_url: project_folder_cards_url(project_folder),
+        data: { projects_cards_url: project_folder_cards_url(project_folder), sidebar_url: sidebar_team_path(current_team, project_folder_id: project_folder.id)}
-                        sidebar_url: sidebar_team_path(current_team, project_folder_id: project_folder.id),
+      })
-                      }
+    end
-                ) %>
-    <span>/</span>
-  <% end %>
 
-  <% if project %>
+    links.push({
-    <%= link_to(project.name, project_path(project), class: 'project-folder-link') %>
+      label: project.name,
-    <span>/</span>
+      url: project_path(project)
-  <% end %>
+    }) if project
 
-  <% if experiment %>
+    links.push({
-    <%= link_to(experiment.name, canvas_experiment_path(experiment), class: 'project-folder-link') %>
+      label: experiment.name,
-    <span>/</span>
+      url: canvas_experiment_path(experiment)
-  <% end %>
+    }) if experiment
+  %>
+  <%= render partial: 'shared/breadcrumbs', locals: {links: links} %>
 </div>

app/views/shared/_breadcrumbs.html.erb

@@ -0,0 +1,41 @@
+<% collapsed = links.length > 4 %>
+
+<% if collapsed %>
+  <% first_link = links.shift
+     last_links = links.pop(2) %>
+  <%= link_to(first_link[:label], first_link[:url],
+                class: "breadcrumbs-link #{first_link[:class]}",
+                title: first_link[:label],
+                data: first_link[:data]) %>
+  <span class="delimiter">/</span>
+  <span class="breadcrumbs-collapsed-container">
+      <span class="show-breadcrumbs" data-toggle="dropdown">
+        •••
+        <span class="caret pull-right"></span>
+      </span>
+      <ul class="dropdown-menu breadcrumbs-dropdown" role="menu">
+        <% links.each do |link| %>
+          <li>
+            <%= link_to(link[:label] + ' /', link[:url],
+                        data: link[:data]) %>
+          </li>
+        <% end %>
+      </ul>
+  </span>
+  <span class="delimiter">/</span>
+   <% last_links.each do |link| %>
+    <%= link_to(link[:label], link[:url],
+                class: "breadcrumbs-link #{link[:class]}",
+                title: link[:label],
+                data: link[:data]) %>
+    <span class="delimiter">/</span>
+  <% end %>
+<% else %>
+  <% links.each do |link| %>
+    <%= link_to(link[:label], link[:url],
+                class: "breadcrumbs-link #{link[:class]}",
+                title: link[:label],
+                data: link[:data]) %>
+    <span class="delimiter">/</span>
+  <% end %>
+<% end %>