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

Refactor experiment sidebar

Browse source
This commit is contained in:
aignatov-bio 2020-02-27 16:04:44 +01:00
parent bf1fac0b10
commit 9e15d1ea42
8 changed files with 116 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
app/assets/javascripts/sidebar.js
View file

@ -272,4 +272,60 @@
});
scrollToSelectedItem();
}(window));
});
var Sidebar = (function() {
const SIDEBAR_ID = '#slide-panel';
const STORAGE_TREE_KEY = 'scinote-sidebar-tree-state';
const STORAGE_SCROLL_TREE_KEY = 'scinote-sidebar-tree-scroll-state';
function toggleTree($tree_childs) {
$tree_childs.toggleClass('hidden')
$.each($tree_childs, (i, tree_child) => {
$(tree_child).closest('.branch').find('.tree-toggle').first().toggleClass('fa-caret-down').toggleClass('fa-caret-right')
})
}
function saveCurrentState() {
var config = []
$.each($(SIDEBAR_ID).find('.tree-child:not(:hidden)'), (i, branch) => {
config.push(`[data-branch-id=${branch.dataset.branchId}]`)
})
sessionStorage.setItem(STORAGE_TREE_KEY, config.join(','));
}
function initSideBar() {
$(SIDEBAR_ID).on('click', '.tree-toggle', function() {
var $tree_child = $(this).closest('.branch').find('.tree-child').first()
toggleTree($tree_child)
saveCurrentState();
PerfectSb().update_all();
})
$(SIDEBAR_ID).find('.tree').scroll(function() {
sessionStorage.setItem(STORAGE_SCROLL_TREE_KEY, $(this).scrollTop());
})
toggleTree($(SIDEBAR_ID).find('.tree-child[data-active="true"]'))
toggleTree($(SIDEBAR_ID).find('.tree-child.hidden').filter(sessionStorage.getItem(STORAGE_TREE_KEY)))
$('#wrapper').show();
PerfectSb().update_all();
$(SIDEBAR_ID).find('.tree').scrollTo(sessionStorage.getItem(STORAGE_SCROLL_TREE_KEY));
}
return {
init: (mode) => {
if ($(SIDEBAR_ID).length) {
initSideBar()
}
}
};
}());
$(document).on('turbolinks:load', function() {
Sidebar.init();
});

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

@ -66,10 +66,6 @@
opacity: 1;
}
.fa-caret-right {
padding: 3px 5px;
}
.tree {
margin-bottom: 0;
opacity: 1;

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

@ -85,7 +85,24 @@
}
.tree-link {
align-items: center;
display: flex;
padding-left: 0;
position: relative;
.tree-toggle {
display: inline-block;
line-height: 30px;
position: absolute;
text-align: center;
top: 10px;
width: 30px;
z-index: 2;
}
.line-wrap {
padding-left: 30px;
}
a:not(.canvas-center-on) {
width: 100%;

9
app/controllers/projects_controller.rb
View file

@ -69,11 +69,20 @@ class ProjectsController < ApplicationController
end
def sidebar
current_task ||= current_task || nil
current_experiment ||= current_experiment || current_task&.experiment || nil
current_project ||= current_experiment&.project || current_task&.experiment&.project || nil
respond_to do |format|
format.json do
render json: {
html: render_to_string(
partial: 'shared/sidebar/projects.html.erb',
locals: {
current_project: current_project,
current_experiment: current_experiment,
current_task: current_task
},
formats: :html
)
}

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

@ -12,7 +12,11 @@
<div class="tree perfect-scrollbar" data-scroll="<%= params[:scroll] %>">
<ul>
<% cache [action_name, current_user, current_team] do %>
<%= render partial: 'shared/sidebar/projects' %>
<%= render partial: 'shared/sidebar/projects', locals: {
current_project: current_project,
current_experiment: current_experiment,
current_task: current_task
} %>
<% end %>
</ul>
</div>

18
app/views/shared/sidebar/_experiments.html.erb
View file

@ -1,17 +1,27 @@
<% if project.active_experiments.present? %>
<ul>
<ul class="tree-child hidden" data-active="<%= project.id == current_project&.id %>" data-branch-id="pro<%= project.id %>">
<% project.active_experiments.each do |experiment| %>
<% cache [action_name, current_user, experiment] do %>
<li data-parent="candidate">
<li data-parent="candidate" class="branch <%= 'active' if experiment_page? && current_experiment == experiment %>">
<span class="tree-link line-wrap first-indent" title="<%= experiment.name %>">
<i class="no-arrow"></i>
<% if experiment.active_my_modules.any? %>
<i class="fas fa-caret-right tree-toggle"></i>
<% end %>
<%= link_to experiment.name,
experiment_action_to_link_to(experiment),
class: 'overview_exp_label line-wrap',
style: (current_experiment == experiment ? 'font-weight: bold' : ''),
data: { type: 'experiment', id: experiment.id }
%>
<% if experiment_page? && current_experiment == experiment && action_name =='canvas' %>
<a href="" class="canvas-center-on"><span class="fas fa-map-marker-alt"></span></a>
<% end %>
</span>
<%= render partial: 'shared/sidebar/my_modules', locals: { experiment: experiment } %>
<%= render partial: 'shared/sidebar/my_modules', locals: {
experiment: experiment,
current_experiment: current_experiment,
current_task: current_task
} %>
</li>
<% end %>
<% end %>

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

@ -1,7 +1,7 @@
<% if experiment.active_my_modules.present? %>
<ul>
<ul class="tree-child hidden" data-active="<%= current_experiment&.id == experiment.id %>" data-branch-id="exp<%= experiment.id %>">
<% experiment.active_my_modules.each do |my_module| %>
<li class="leaf" data-module-id="<%= my_module.id %>">
<li class="leaf <%= 'active' if module_page? && current_task == my_module %>" data-module-id="<%= my_module.id %>">
<span class="tree-link task-tree-link second-indent" title="<%= my_module.name %>">
<%= link_to my_module.name,
module_action_to_link_to(my_module),

15
app/views/shared/sidebar/_projects.html.erb
View file

@ -1,16 +1,25 @@
<ul>
<% @projects_tree.each do |project| %>
<% cache [action_name, current_user, project] do %>
<li data-parent="candidate">
<li data-parent="candidate"
class="branch <%= 'active' if project_page? && current_project == project %>" >
<span class="tree-link no-indent" title="<%= project.name %>">
<i class="no-arrow"></i>
<% if project.active_experiments.any? %>
<i class="fas fa-caret-right tree-toggle"></i>
<% end %>
<%= link_to project.name,
project_action_to_link_to(project),
title: project.name,
class: 'line-wrap',
style: (current_project == project ? 'font-weight: bold' : ''),
data: { type: 'project', id: project.id } %>
</span>
<%= render partial: 'shared/sidebar/experiments', locals: { project: project } %>
<%= render partial: 'shared/sidebar/experiments', locals: {
project: project,
current_project: current_project,
current_experiment: current_experiment,
current_task: current_task
} %>
</li>
<% end %>
<% end %>