Merge pull request #1050 from mlorb/ml-sci-2120-v2

Refactor project navigation [SCI-2120]
This commit is contained in:
mlorb 2018-03-26 12:56:19 +02:00 committed by GitHub
commit b7a14215bc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 184 additions and 118 deletions

View file

@ -169,7 +169,7 @@ function setupSidebarTree() {
// Get the session-stored elements
var collapsedIds = sessionGetCollapsedSidebarElements();
// Get the current project stered elements
// Get the current project stored elements
var currentProjectIds = _.findWhere(collapsedIds, { prid: project });
if ( currentProjectIds ){
currentProjectIds.ids = _.filter(currentProjectIds.ids,
@ -241,6 +241,15 @@ function setupSidebarTree() {
e.stopPropagation();
return false;
});
// Add bold style to all levels of selected element
$(".tree li.active ")
.parents('.parent_li[data-parent="candidate"]')
.find("> span a")
.css("font-weight", "bold");
// Add custom borders to tree links
$(".tree li span.tree-link ").after("<div class='border-custom'></div>");
}
/**
@ -260,7 +269,7 @@ function initializeSidebarToggle() {
$(".navbar-secondary").addClass("navbar-without-sidebar");
}
$("#toggle-sidebar-link").on("click", function() {
$(".toggle-sidebar-link").on("click", function() {
$("#wrapper").toggleClass("toggled");
sessionToggleSidebar();
$(".navbar-secondary").toggleClass("navbar-without-sidebar", sessionIsSidebarToggled());

View file

@ -22,7 +22,7 @@ $toggle-btn-size: 50px;
transition: all 0.5s ease;
#sidebar-wrapper {
background-color: $color-alto;
background-color: $color-white;
z-index: 1000;
position: fixed;
width: $wrapper-width;
@ -82,10 +82,10 @@ $toggle-btn-size: 50px;
}
.tree {
overflow-y: auto;
margin-bottom: 0;
padding-top: 15px;
opacity: 1;
overflow-y: auto;
padding: 20px 0;
// Animations
@include transition(opacity 0.5s ease);

View file

@ -1,65 +1,86 @@
@import 'constants';
@import "constants";
@import "mixins";
.tree {
height: 100%;
padding-bottom: 30px;
}
.tree > ul {
margin-bottom: 0;
}
.tree ul {
padding-left: 0;
}
.tree li {
list-style-type: none;
margin: 0;
padding: 5px 5px 5px 15px;
position: relative;
&.active > span {
ul {
padding-left: 0;
}
> ul {
margin-bottom: 0;
}
.no-indent {
background-color: $color-white;
border: 1px solid $color-white;
border-radius: 4px;
font-weight: bold;
}
&.active:not span.tree-link:hover {
text-decoration: underline;
.first-indent {
background-color: $color-wild-sand;
padding-left: 30px;
}
&.leaf {
padding-left: 10px;
.tree-link::before {
content: "\25B8";
.second-indent {
background-color: $color-gainsboro;
padding-left: 60px;
}
li {
list-style-type: none;
margin: 0;
position: relative;
span {
display: block;
padding: 15px;
&.my-module-group-element {
border: 0;
padding: 0;
}
&.glyphicon-map-marker {
border: 0;
display: inline-block;
padding: 0;
}
}
&.active > span {
background-color: $color-theme-primary;
color: $color-white;
font-weight: bold;
&.first-indent > span,
&.no-indent > span {
border: 0;
display: inline-block;
padding: 0;
}
}
i.glyphicon {
font-size: 9pt;
&.expanded {
@include rotate(90deg);
}
}
// Links are recolored
a {
color: $color-emperor;
&:hover {
color: $color-theme-primary;
}
}
.border-custom {
box-shadow: 0 -.25px 0 .25px $color-alto;
margin: 0 15px;
}
}
& i.glyphicon {
font-size: 9pt;
&.expanded {
@include rotate(45deg);
}
}
/* Links are recolored */
a {
color: $color-emperor;
&:hover {
color: $color-theme-primary;
}
}
span {
display:inline-block;
padding:3px 8px;
}
}
.tree li.parent_li>span {
display: block;
}
.tree li:last-child::before {
height:30px;
}

View file

@ -11,6 +11,7 @@ class ExperimentsController < ApplicationController
before_action :set_project,
only: [:new, :create, :samples_index, :samples, :module_archive,
:clone_modal, :move_modal, :delete_samples]
before_action :load_projects_by_teams, only: %i(canvas samples)
before_action :check_view_permissions,
only: [:canvas, :module_archive]
before_action :check_manage_permissions, only: :edit
@ -348,6 +349,10 @@ class ExperimentsController < ApplicationController
params.require(:experiment).permit(:name, :description, :archived)
end
def load_projects_by_teams
@projects_by_teams = current_user.projects_by_teams
end
def check_view_permissions
render_403 unless can_read_experiment?(@experiment)
end

View file

@ -17,6 +17,8 @@ class MyModulesController < ApplicationController
before_action :load_repository, only: %i(assign_repository_records
unassign_repository_records
repository_index)
before_action :load_projects_by_teams,
only: %i(protocols results activities samples repository)
before_action :check_manage_permissions,
only: %i(update destroy description due_date)
before_action :check_view_info_permissions, only: :show
@ -605,6 +607,10 @@ class MyModulesController < ApplicationController
render_403 unless can_read_team?(@repository.team)
end
def load_projects_by_teams
@projects_by_teams = current_user.projects_by_teams
end
def check_manage_permissions
render_403 unless can_manage_module?(@my_module)
end

View file

@ -8,6 +8,7 @@ class ProjectsController < ApplicationController
:notifications, :reports,
:samples, :experiment_archive,
:delete_samples, :samples_index]
before_action :load_projects_by_teams, only: %i(index show samples)
before_action :check_view_permissions, only: %i(show reports notifications
samples experiment_archive
samples_index)
@ -17,7 +18,7 @@ class ProjectsController < ApplicationController
@filter_by_archived = false
# except parameter could be used but it is not working.
layout :choose_layout
layout 'fluid'
# Action defined in SampleActions
DELETE_SAMPLES = 'Delete'.freeze
@ -27,18 +28,6 @@ class ProjectsController < ApplicationController
current_team_switch(Team.find_by_id(params[:team]))
end
if current_user.teams.any?
@current_team_id = current_team.id if current_team
@current_team_id ||= current_user.teams.first.id
@current_sort = params[:sort].to_s
@projects_by_teams = current_user.projects_by_teams(@current_team_id,
@current_sort,
@filter_by_archived)
else
@projects_by_teams = []
end
@teams = current_user.teams
# New project for create new project modal
@ -318,6 +307,20 @@ class ProjectsController < ApplicationController
end
end
def load_projects_by_teams
if current_user.teams.any?
@current_team_id = current_team.id if current_team
@current_team_id ||= current_user.teams.first.id
@current_sort = params[:sort].to_s
@projects_by_teams = current_user.projects_by_teams(@current_team_id,
@current_sort,
@filter_by_archived)
else
@projects_by_teams = []
end
end
def check_view_permissions
render_403 unless can_read_project?(@project)
end
@ -329,8 +332,4 @@ class ProjectsController < ApplicationController
def check_manage_permissions
render_403 unless can_manage_project?(@project)
end
def choose_layout
action_name.in?(['index', 'archive']) ? 'main' : 'fluid'
end
end

View file

@ -1,4 +1,5 @@
<% provide(:head_title, t("projects.archive.head_title")) %>
<%= render partial: "shared/sidebar" %>
<% if @projects_by_teams.length > 0 %>
<div id="projects-toolbar">

View file

@ -1,4 +1,5 @@
<% provide(:head_title, t("projects.index.head_title")) %>
<%= render partial: "shared/sidebar" %>
<% if can_create_projects?(current_team) %>
<!-- New project modal -->

View file

@ -7,7 +7,7 @@
</div>
</div>
<div class="sidebar-header-toggle">
<a href="" id="toggle-sidebar-link">
<a href="" class="toggle-sidebar-link">
<span class="glyphicon glyphicon-play-circle"></span>
</a>
</div>

View file

@ -1,42 +1,42 @@
<div id="left-menu-bar" class="menu-bar">
<ul class="nav">
<li class="<%= "active" if projects_are_selected? %>">
<a id="projects-link" title="<%= t('left_menu_bar.projects') %>" href="<%= projects_path %>">
<%= link_to projects_path, id: "projects-link", class: "toggle-sidebar-link", title: t('left_menu_bar.projects') do %>
<span class="glyphicon glyphicon-home"></span>
<span><%= t('left_menu_bar.projects') %></span>
</a>
<% end %>
</li>
<li class="<%= "active" if repositories_are_selected? %>">
<a id="repositories-link" title="<%= t('left_menu_bar.repositories') %>" href="<%= team_repositories_path current_team %>">
<%= link_to team_repositories_path(current_team), id: "repositories-link", title: t('left_menu_bar.repositories') do %>
<span class="fa fa-cubes" aria-hidden="true"></span>
<span><%= t('left_menu_bar.repositories') %></span>
</a>
<% end %>
</li>
<li class="<%= "active" if templates_are_selected? %>">
<a id="templates-link" title="<%= t('left_menu_bar.templates') %>" href="<%= protocols_path %>">
<%= link_to protocols_path, id: "templates-link", title: t('left_menu_bar.templates') do %>
<span class="glyphicon glyphicon-list-alt"></span>
<span><%= t('left_menu_bar.templates') %></span>
</a>
<% end %>
</li>
<li class="<%= "active" if reports_are_selected? %>">
<a id="reports-link" title="<%= t('left_menu_bar.reports') %>" href="#">
<%= link_to "#", id: "reports-link", title: t('left_menu_bar.reports') do %>
<span class="glyphicon glyphicon-indent-left"></span>
<span><%= t('left_menu_bar.reports') %></span>
</a>
<% end %>
</li>
<li class="<%= "active" if settings_are_selected? %>">
<a id="settings-link" title="<%= t('left_menu_bar.settings') %>" href="<%= edit_user_registration_path %>">
<%= link_to edit_user_registration_path, id: "settings-link", title: t('left_menu_bar.settings') do %>
<span class="glyphicon glyphicon-cog"></span>
<span><%= t('left_menu_bar.settings') %></span>
</a>
<% end %>
</li>
</ul>
<ul class="nav nav-bottom">
<li class="<%= "active" if activities_are_selected? %>">
<a id="activities-link" title="<%= t('left_menu_bar.activities') %>" href="<%= activities_path %>">
<%= link_to activities_path, id: "activities-link", title: t('left_menu_bar.activities') do %>
<span class="glyphicon glyphicon-equalizer"></span>
<span><%= t('left_menu_bar.activities') %></span>
</a>
<% end %>
</li>
<!-- support -->
<li class="dropup">

View file

@ -1,42 +1,29 @@
<%= content_for :sidebar do %>
<div id="slide-panel" class="visible">
<div class="sidebar-header">
<div class="sidebar-header-title">
<h5><%=t "sidebar.title" %></h5>
</div>
</div>
<div class="sidebar-header-toggle">
<a href="" id="toggle-sidebar-link">
<span class="glyphicon glyphicon-play-circle"></span>
</a>
</div>
<div class="tree">
<ul>
<% if project_page? ||
<% if project_page? && action_name == 'index' ||
sample_types_page_project? ||
sample_groups_page_project? %>
<li class="active">
<span class="tree-link line-wrap">
<i></i>
<span data-project-id="<%= @project.id %>"
title="<%= @project.name %>"><%= @project.name %></span>
<span class="tree-link line-wrap no-indent">
<span title="<%= t('sidebar.projects.all') %>"><%= t('sidebar.projects.all') %></span>
</span>
</li>
<% else %>
<li>
<span class="tree-link line-wrap">
<i></i>
<%= link_to @project.name,
project_action_to_link_to(@project),
title: @project.name,
data: { project_id: @project.id } %>
<span class="tree-link line-wrap no-indent">
<strong>
<%= link_to t('sidebar.projects.all'),
projects_path,
title: t('sidebar.projects.all') %>
</strong>
</span>
</li>
<% end %>
<%= render partial: 'shared/sidebar/experiments',
locals: { project: @project } %>
<%= render partial: 'shared/sidebar/projects' %>
</ul>
</div>
</div>

View file

@ -1,11 +1,11 @@
<ul>
<% if project.active_experiments.present? then %>
<% if project.active_experiments.present? then %>
<ul>
<% project.active_experiments.each do |experiment| %>
<% if (experiment_page? ||
sample_groups_page_experiment? ||
sample_types_page_expermient?) && experiment == @experiment %>
<li class="active" data-parent="candidate">
<span class="tree-link line-wrap">
<span class="tree-link line-wrap first-indent">
<i></i>
<span title="<%= @experiment.name %>"><%= @experiment.name %></span>
</span>
@ -13,7 +13,7 @@
</li>
<% else %>
<li data-parent="candidate">
<span class="tree-link line-wrap">
<span class="tree-link line-wrap first-indent">
<i></i>
<% if can_read_experiment?(experiment) %>
<%= link_to experiment.name,
@ -29,5 +29,5 @@
</li>
<% end %>
<% end %>
<% end %>
</ul>
</ul>
<% end %>

View file

@ -7,7 +7,7 @@
<span class="my-module-group-element">
<% my_module_group.my_modules.sort_by{|m| m.workflow_order}.each do |my_module| %>
<li class="leaf <%= "active" if currently_active? my_module %>" data-module-id="<%= my_module.id %>">
<span class="tree-link">
<span class="tree-link second-indent">
<% if currently_active? my_module %>
<%= my_module.name %>
<% else %>
@ -35,7 +35,7 @@
<% modules_without_group.each do |my_module| %>
<li class="leaf <%= "active" if currently_active? my_module %>"
data-module-id="<%= my_module.id %>">
<span class="tree-link">
<span class="tree-link second-indent">
<% if currently_active? my_module %>
<%= my_module.name %>
<% else %>

View file

@ -0,0 +1,35 @@
<ul>
<% if @projects_by_teams.present? then %>
<% @projects_by_teams.each do |team, projects| %>
<% projects.each do |project| %>
<% if (project_page? && action_name == 'show' ||
sample_types_page_project? ||
sample_groups_page_project?) && project == @project %>
<li class="active" data-parent="candidate">
<span class="tree-link line-wrap no-indent">
<i></i>
<span data-project-id="<%= @project.id %>"
title="<%= @project.name %>"><%= @project.name %></span>
</span>
<%= render partial: 'shared/sidebar/experiments',
locals: { project: project } %>
</li>
<% else %>
<li data-parent="candidate">
<span class="tree-link line-wrap no-indent">
<i></i>
<%= link_to project.name,
project_action_to_link_to(project),
title: project.name,
data: { project_id: project.id } %>
</span>
<%= render partial: 'shared/sidebar/experiments',
locals: { project: project } %>
</li>
<% end %>
<% end %>
<% end %>
<% end %>
</ul>

View file

@ -112,6 +112,8 @@ en:
sidebar:
title: "Navigation"
no_module_group: "No workflow"
projects:
all: "All Projects"
nav2:
projects: