mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-21 07:26:15 +08:00
Add dropdown to breadcrumbs [SCI-5431]
This commit is contained in:
parent
8202181095
commit
63744b6a04
|
@ -463,7 +463,6 @@ li.module-hover {
|
|||
width: calc(100% + 4em);
|
||||
|
||||
.projects-breadcrumbs {
|
||||
@include font-small;
|
||||
padding: .75em 0;
|
||||
}
|
||||
|
||||
|
|
41
app/assets/stylesheets/shared/breadcrumbs.scss
Normal file
41
app/assets/stylesheets/shared/breadcrumbs.scss
Normal file
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
|
@ -1,32 +1,35 @@
|
|||
<% target_folder ||= nil %>
|
||||
<% experiment ||= nil %>
|
||||
<% project ||= nil %>
|
||||
<% links = [] %>
|
||||
|
||||
<div class="projects-breadcrumbs">
|
||||
<%= link_to(t('projects.index.breadcrumbs_root'),
|
||||
projects_path(view_mode: projects_view_mode(project: project)),
|
||||
class: 'project-folder-link',
|
||||
data: { projects_cards_url: cards_projects_url,
|
||||
sidebar_url: sidebar_team_path(current_team) }) %>
|
||||
<span>/</span>
|
||||
<% tree_ordered_parent_folders(target_folder)&.each do |project_folder| %>
|
||||
<%= link_to(project_folder.name,
|
||||
project_folder_path(project_folder),
|
||||
class: 'project-folder-link',
|
||||
data: { projects_cards_url: project_folder_cards_url(project_folder),
|
||||
sidebar_url: sidebar_team_path(current_team, project_folder_id: project_folder.id),
|
||||
}
|
||||
) %>
|
||||
<span>/</span>
|
||||
<% end %>
|
||||
<div class="projects-breadcrumbs breadcrumbs-container">
|
||||
<%
|
||||
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, sidebar_url: sidebar_team_path(current_team) }
|
||||
})
|
||||
|
||||
<% if project %>
|
||||
<%= link_to(project.name, project_path(project), class: 'project-folder-link') %>
|
||||
<span>/</span>
|
||||
<% end %>
|
||||
tree_ordered_parent_folders(target_folder)&.each do |project_folder|
|
||||
links.push({
|
||||
label: project_folder.name,
|
||||
url: project_folder_path(project_folder),
|
||||
class: 'project-folder-link',
|
||||
data: { projects_cards_url: project_folder_cards_url(project_folder), sidebar_url: sidebar_team_path(current_team, project_folder_id: project_folder.id)}
|
||||
})
|
||||
end
|
||||
|
||||
<% if experiment %>
|
||||
<%= link_to(experiment.name, canvas_experiment_path(experiment), class: 'project-folder-link') %>
|
||||
<span>/</span>
|
||||
<% end %>
|
||||
links.push({
|
||||
label: project.name,
|
||||
url: project_path(project)
|
||||
}) if project
|
||||
|
||||
links.push({
|
||||
label: experiment.name,
|
||||
url: canvas_experiment_path(experiment)
|
||||
}) if experiment
|
||||
%>
|
||||
<%= render partial: 'shared/breadcrumbs', locals: {links: links} %>
|
||||
</div>
|
||||
|
|
41
app/views/shared/_breadcrumbs.html.erb
Normal file
41
app/views/shared/_breadcrumbs.html.erb
Normal file
|
@ -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 %>
|
Loading…
Reference in a new issue