mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-21 15:36:22 +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);
|
width: calc(100% + 4em);
|
||||||
|
|
||||||
.projects-breadcrumbs {
|
.projects-breadcrumbs {
|
||||||
@include font-small;
|
|
||||||
padding: .75em 0;
|
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 %>
|
<% target_folder ||= nil %>
|
||||||
<% experiment ||= nil %>
|
<% experiment ||= nil %>
|
||||||
<% project ||= 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',
|
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',
|
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>
|
</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