scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-11-12 17:31:00 +08:00
Code Issues Projects Releases Packages Wiki Activity

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/assets/javascripts/sidebar.js.erb
View file

@ -169,7 +169,7 @@ function setupSidebarTree() {
// Get the session-stored elements // Get the session-stored elements
var collapsedIds = sessionGetCollapsedSidebarElements(); var collapsedIds = sessionGetCollapsedSidebarElements();
// Get the current project stered elements // Get the current project stored elements
var currentProjectIds = _.findWhere(collapsedIds, { prid: project }); var currentProjectIds = _.findWhere(collapsedIds, { prid: project });
if ( currentProjectIds ){ if ( currentProjectIds ){
currentProjectIds.ids = _.filter(currentProjectIds.ids, currentProjectIds.ids = _.filter(currentProjectIds.ids,
@ -241,6 +241,15 @@ function setupSidebarTree() {
e.stopPropagation(); e.stopPropagation();
return false; 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"); $(".navbar-secondary").addClass("navbar-without-sidebar");
} }
$("#toggle-sidebar-link").on("click", function() { $(".toggle-sidebar-link").on("click", function() {
$("#wrapper").toggleClass("toggled"); $("#wrapper").toggleClass("toggled");
sessionToggleSidebar(); sessionToggleSidebar();
$(".navbar-secondary").toggleClass("navbar-without-sidebar", sessionIsSidebarToggled()); $(".navbar-secondary").toggleClass("navbar-without-sidebar", sessionIsSidebarToggled());

6
app/assets/stylesheets/partials/_sidebar.scss
View file

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

123
app/assets/stylesheets/partials/_tree_view.scss
View file

@ -1,65 +1,86 @@
@import 'constants'; @import "constants";
@import "mixins"; @import "mixins";
.tree { .tree {
height: 100%; height: 100%;
padding-bottom: 30px; 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; background-color: $color-white;
border: 1px solid $color-white;
border-radius: 4px;
font-weight: bold;
} }
&.active:not span.tree-link:hover { .first-indent {
text-decoration: underline; background-color: $color-wild-sand;
padding-left: 30px;
} }
&.leaf { .second-indent {
padding-left: 10px; background-color: $color-gainsboro;
.tree-link::before { padding-left: 60px;
content: "\25B8"; }
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;
} }

5
app/controllers/experiments_controller.rb
View file

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

6
app/controllers/my_modules_controller.rb
View file

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

33
app/controllers/projects_controller.rb
View file

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

1
app/views/projects/archive.html.erb
View file

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

1
app/views/projects/index.html.erb
View file

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

2
app/views/reports/new/_report_sidebar.html.erb
View file

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

24
app/views/shared/_left_menu_bar.html.erb
View file

@ -1,42 +1,42 @@
<div id="left-menu-bar" class="menu-bar"> <div id="left-menu-bar" class="menu-bar">
<ul class="nav"> <ul class="nav">
<li class="<%= "active" if projects_are_selected? %>"> <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 class="glyphicon glyphicon-home"></span>
<span><%= t('left_menu_bar.projects') %></span> <span><%= t('left_menu_bar.projects') %></span>
</a> <% end %>
</li> </li>
<li class="<%= "active" if repositories_are_selected? %>"> <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 class="fa fa-cubes" aria-hidden="true"></span>
<span><%= t('left_menu_bar.repositories') %></span> <span><%= t('left_menu_bar.repositories') %></span>
</a> <% end %>
</li> </li>
<li class="<%= "active" if templates_are_selected? %>"> <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 class="glyphicon glyphicon-list-alt"></span>
<span><%= t('left_menu_bar.templates') %></span> <span><%= t('left_menu_bar.templates') %></span>
</a> <% end %>
</li> </li>
<li class="<%= "active" if reports_are_selected? %>"> <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 class="glyphicon glyphicon-indent-left"></span>
<span><%= t('left_menu_bar.reports') %></span> <span><%= t('left_menu_bar.reports') %></span>
</a> <% end %>
</li> </li>
<li class="<%= "active" if settings_are_selected? %>"> <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 class="glyphicon glyphicon-cog"></span>
<span><%= t('left_menu_bar.settings') %></span> <span><%= t('left_menu_bar.settings') %></span>
</a> <% end %>
</li> </li>
</ul> </ul>
<ul class="nav nav-bottom"> <ul class="nav nav-bottom">
<li class="<%= "active" if activities_are_selected? %>"> <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 class="glyphicon glyphicon-equalizer"></span>
<span><%= t('left_menu_bar.activities') %></span> <span><%= t('left_menu_bar.activities') %></span>
</a> <% end %>
</li> </li>
<!-- support --> <!-- support -->
<li class="dropup"> <li class="dropup">

35
app/views/shared/_sidebar.html.erb
View file

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

12
app/views/shared/sidebar/_experiments.html.erb
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| %> <% project.active_experiments.each do |experiment| %>
<% if (experiment_page? || <% if (experiment_page? ||
sample_groups_page_experiment? || sample_groups_page_experiment? ||
sample_types_page_expermient?) && experiment == @experiment %> sample_types_page_expermient?) && experiment == @experiment %>
<li class="active" data-parent="candidate"> <li class="active" data-parent="candidate">
<span class="tree-link line-wrap"> <span class="tree-link line-wrap first-indent">
<i></i> <i></i>
<span title="<%= @experiment.name %>"><%= @experiment.name %></span> <span title="<%= @experiment.name %>"><%= @experiment.name %></span>
</span> </span>
@ -13,7 +13,7 @@
</li> </li>
<% else %> <% else %>
<li data-parent="candidate"> <li data-parent="candidate">
<span class="tree-link line-wrap"> <span class="tree-link line-wrap first-indent">
<i></i> <i></i>
<% if can_read_experiment?(experiment) %> <% if can_read_experiment?(experiment) %>
<%= link_to experiment.name, <%= link_to experiment.name,
@ -29,5 +29,5 @@
</li> </li>
<% end %> <% end %>
<% end %> <% end %>
<% end %> </ul>
</ul> <% end %>

4
app/views/shared/sidebar/_my_modules.html.erb
View file

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

35
app/views/shared/sidebar/_projects.html.erb Normal file
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>

2
config/locales/en.yml
View file

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