mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-12-29 11:45:18 +08:00
Merge branch 'Ducz0r-lm-improve-sidebar-toggle' into ux-release-1
This commit is contained in:
Luka Murn
commit
e1294ea3f1
8 changed files with 140 additions and 228 deletions
|
|
@ -170,7 +170,7 @@ function initializeEdit() {
|
|||
|
||||
// Hide sidebar & also its toggle button
|
||||
$("#wrapper").addClass("hidden2");
|
||||
$("#wrapper").find(".sidebar-header-toggle").hide();
|
||||
$("#toggle-sidebar-btn").addClass("hidden2");
|
||||
$(".navbar-secondary").addClass("navbar-without-sidebar");
|
||||
|
||||
// Also, hide zoom levels button group
|
||||
|
|
|
|||
|
|
@ -4,7 +4,6 @@
|
|||
*/
|
||||
|
||||
var STORAGE_TREE_KEY = "scinote-sidebar-tree-collapsed-ids";
|
||||
var STORAGE_TOGGLE_KEY = "scinote-sidebar-toggled";
|
||||
|
||||
/**
|
||||
* Get all collapsed sidebar elements.
|
||||
|
|
@ -84,33 +83,6 @@ function recalculateElementsPositions(ids, item, elements) {
|
|||
sessionStorage.setItem(STORAGE_TREE_KEY, JSON.stringify(ids));
|
||||
}
|
||||
}
|
||||
/**
|
||||
* Get the session stored toggled boolean or null value if
|
||||
* sidebar toggle state was not changed by user. It allow for
|
||||
* automatic toggling for small devices.
|
||||
*
|
||||
* @return True if sidebar is toggled; false otherwise.
|
||||
*/
|
||||
function sessionIsSidebarToggled() {
|
||||
var val = sessionStorage.getItem(STORAGE_TOGGLE_KEY);
|
||||
|
||||
if (val === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return val === "toggled";
|
||||
}
|
||||
|
||||
/**
|
||||
* Store the sidebar toggled boolean to session storage.
|
||||
*/
|
||||
function sessionToggleSidebar() {
|
||||
if (sessionIsSidebarToggled()) {
|
||||
sessionStorage.setItem(STORAGE_TOGGLE_KEY, "not_toggled");
|
||||
} else {
|
||||
sessionStorage.setItem(STORAGE_TOGGLE_KEY, "toggled");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Setup the sidebar collapsing & expanding functionality.
|
||||
|
|
@ -253,60 +225,22 @@ function setupSidebarTree() {
|
|||
$(".tree li span.tree-link ").after("<div class='border-custom'></div>");
|
||||
}
|
||||
|
||||
/**
|
||||
* Initialize the show/hide toggling of sidebar.
|
||||
*/
|
||||
function initializeSidebarToggle() {
|
||||
var wrapper = $("#wrapper");
|
||||
var toggled = sessionIsSidebarToggled();
|
||||
|
||||
if (toggled || toggled === null && $(window).width() <
|
||||
<%= Constants::SCREEN_WIDTH_LARGE %>) {
|
||||
wrapper.addClass("no-animation");
|
||||
wrapper.addClass("toggled");
|
||||
// Cause reflow of the wrapper element
|
||||
wrapper[0].offsetHeight;
|
||||
wrapper.removeClass("no-animation");
|
||||
$(".navbar-secondary").addClass("navbar-without-sidebar");
|
||||
}
|
||||
|
||||
$(".toggle-sidebar-link").on("click", function() {
|
||||
$("#wrapper").toggleClass("toggled");
|
||||
sessionToggleSidebar();
|
||||
$(".navbar-secondary").toggleClass("navbar-without-sidebar", sessionIsSidebarToggled());
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
// Resize the sidebar to accomodate to the page size
|
||||
function resizeSidebarContents() {
|
||||
var wrapper = $("#wrapper");
|
||||
var tree = $("#sidebar-wrapper .tree");
|
||||
var toggled = sessionIsSidebarToggled();
|
||||
var navbar = $(".navbar-secondary");
|
||||
|
||||
// Set vertical scrollbar on navigation tree
|
||||
if (tree.length && tree.length == 1) {
|
||||
tree.css(
|
||||
"height",
|
||||
($(window).height() - tree.position().top - 50) + "px"
|
||||
);
|
||||
}
|
||||
// Automatic toggling of sidebar for smaller devices
|
||||
if (toggled === null) {
|
||||
if ($(window).width() < <%= Constants::SCREEN_WIDTH_LARGE %>) {
|
||||
wrapper.addClass("toggled");
|
||||
navbar.addClass("navbar-without-sidebar");
|
||||
} else {
|
||||
wrapper.removeClass("toggled");
|
||||
navbar.removeClass("navbar-without-sidebar");
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
(function () {
|
||||
// Initialize click listeners
|
||||
setupSidebarTree();
|
||||
initializeSidebarToggle();
|
||||
|
||||
// Actually display wrapper, which is, up to now,
|
||||
// hidden
|
||||
|
|
|
|||
|
|
@ -3,27 +3,49 @@
|
|||
global.SideBarToggle = (function() {
|
||||
|
||||
function show() {
|
||||
$('#sideBarLeft').show();
|
||||
$('#sideBarRight').hide();
|
||||
$('#wrapper').removeClass('hidden2');
|
||||
$('#sidebar-wrapper').show(
|
||||
'slide', { direction: 'right', easing: 'linear' }, 400
|
||||
);
|
||||
$('#wrapper').css('paddingLeft', '280px');
|
||||
$('.navbar-secondary').css(
|
||||
{ 'margin-left': '-280px', 'padding-left': '294px' }
|
||||
);
|
||||
$('#toggle-sidebar-btn').attr('data-shown', '');
|
||||
}
|
||||
|
||||
function hide() {
|
||||
$('#sideBarLeft').hide();
|
||||
$('#sideBarRight').show();
|
||||
$('#wrapper').addClass('hidden2');
|
||||
$('#sidebar-wrapper').hide(
|
||||
'slide', { direction: 'left', easing: 'linear'}, 400
|
||||
);
|
||||
$('#wrapper').css('paddingLeft', '0');
|
||||
$('.navbar-secondary').css({
|
||||
'margin-left': '0',
|
||||
'padding-left': '14px'
|
||||
});
|
||||
$('#toggle-sidebar-btn').removeAttr('data-shown');
|
||||
}
|
||||
|
||||
function toggle() {
|
||||
var btn = $('#toggle-sidebar-btn');
|
||||
if (btn.is('[data-shown]')) {
|
||||
hide();
|
||||
} else {
|
||||
show();
|
||||
}
|
||||
}
|
||||
|
||||
function isShown() {
|
||||
var btn = $('#toggle-sidebar-btn');
|
||||
return btn.is('[data-shown]');
|
||||
}
|
||||
|
||||
return Object.freeze({
|
||||
show: show,
|
||||
hide: hide
|
||||
hide: hide,
|
||||
toggle: toggle,
|
||||
isShown: isShown
|
||||
})
|
||||
})();
|
||||
})(window);
|
||||
|
|
|
|||
|
|
@ -37,51 +37,6 @@ $toggle-btn-size: 50px;
|
|||
#slide-panel {
|
||||
height: 100%;
|
||||
|
||||
.sidebar-header {
|
||||
height: $toggle-btn-size;
|
||||
background: $brand-primary;
|
||||
border-bottom: 2px solid darken($brand-primary, 10%);
|
||||
|
||||
.sidebar-header-title {
|
||||
width: inherit;
|
||||
color: $color-white;
|
||||
display: inline-block;
|
||||
margin-left: 15px;
|
||||
margin-top: 6px;
|
||||
text-transform: uppercase;
|
||||
max-width: ($wrapper-width - $toggle-btn-size);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
opacity: 1;
|
||||
|
||||
// Animations
|
||||
@include transition(opacity 0.5s ease);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-header-toggle {
|
||||
height: $toggle-btn-size;
|
||||
width: $toggle-btn-size;
|
||||
margin-left: ($wrapper-width - $toggle-btn-size);
|
||||
margin-top: -$toggle-btn-size;
|
||||
font-size: $font-size-h3;
|
||||
background: $brand-primary;
|
||||
border-left: 2px solid darken($brand-primary, 10%);
|
||||
border-bottom: 2px solid darken($brand-primary, 10%);
|
||||
|
||||
// Animations
|
||||
@include transition(margin-left 0.5s ease);
|
||||
|
||||
span {
|
||||
margin: 10px;
|
||||
color: $color-white;
|
||||
|
||||
// Animations
|
||||
@include rotate-animation(0.5s, 180deg);
|
||||
@include transition(color 0.5s ease);
|
||||
}
|
||||
}
|
||||
|
||||
.tree {
|
||||
margin-bottom: 0;
|
||||
opacity: 1;
|
||||
|
|
@ -103,29 +58,6 @@ $toggle-btn-size: 50px;
|
|||
width: 0;
|
||||
|
||||
#slide-panel {
|
||||
.sidebar-header .sidebar-header-title {
|
||||
width: 0;
|
||||
opacity: 0;
|
||||
|
||||
@include transition(width 0.5s ease);
|
||||
@include transition(opacity 0.5s ease);
|
||||
}
|
||||
|
||||
.sidebar-header-toggle {
|
||||
margin-left: 0;
|
||||
background: none;
|
||||
border: none;
|
||||
|
||||
@include transition(margin-left 0.5s ease);
|
||||
|
||||
span {
|
||||
color: darken($brand-primary, 10%);
|
||||
|
||||
@include rotate-animation(0.5s, 0deg);
|
||||
@include transition(color 0.5s ease);
|
||||
}
|
||||
}
|
||||
|
||||
.tree {
|
||||
opacity: 0;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,11 +7,17 @@
|
|||
height: 100%;
|
||||
left: 0;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 16px;
|
||||
padding-top: 16px;
|
||||
position: fixed;
|
||||
width: 83px;
|
||||
z-index: 1001;
|
||||
padding-bottom: 50px;
|
||||
|
||||
.scroll-wrapper {
|
||||
height: 100%;
|
||||
padding-top: 16px;
|
||||
width: 83px;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
ul.nav > li {
|
||||
|
||||
|
|
@ -58,10 +64,27 @@
|
|||
color: $color-emperor;
|
||||
}
|
||||
}
|
||||
|
||||
#toggle-sidebar-btn > span {
|
||||
@include rotate-animation(.5s, 0deg);
|
||||
}
|
||||
|
||||
#toggle-sidebar-btn[data-shown] > span {
|
||||
@include rotate-animation(.5s, 180deg);
|
||||
}
|
||||
|
||||
#toggle-sidebar-btn:hover {
|
||||
background-color: $color-concrete;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#toggle-sidebar-btn.hidden2 {
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
@media(max-height:480px) {
|
||||
.menu-bar > ul.nav-bottom {
|
||||
@media(max-height:510px) {
|
||||
.menu-bar .nav-bottom {
|
||||
position: relative;
|
||||
width: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,4 +24,10 @@ module LeftMenuBarHelper
|
|||
def activities_are_selected?
|
||||
controller_name == 'activities'
|
||||
end
|
||||
|
||||
def navigation_sidebar_shown?
|
||||
projects_are_selected? ||
|
||||
repositories_are_selected? ||
|
||||
settings_are_selected?
|
||||
end
|
||||
end
|
||||
|
|
|
|||
|
|
@ -1,83 +1,82 @@
|
|||
<div id="left-menu-bar" class="menu-bar">
|
||||
<ul class="nav">
|
||||
<li class="<%= "active" if projects_are_selected? %>">
|
||||
<%= link_to projects_path, id: "projects-link", title: t('left_menu_bar.projects') do %>
|
||||
<span class="fas fa-folder"></span>
|
||||
<span><%= t('left_menu_bar.projects') %></span>
|
||||
<% end %>
|
||||
</li>
|
||||
<li class="<%= "active" if repositories_are_selected? %>">
|
||||
<%= link_to repositories_path, data: { no_turbolink: false }, id: "repositories-link", title: t('left_menu_bar.repositories') do %>
|
||||
<span class="fas fa-list-alt" aria-hidden="true"></span>
|
||||
<span><%= t('left_menu_bar.repositories') %></span>
|
||||
<% end %>
|
||||
</li>
|
||||
<li class="<%= "active" if templates_are_selected? %>">
|
||||
<%= link_to protocols_path, id: "templates-link", title: t('left_menu_bar.templates') do %>
|
||||
<span class="fas fa-edit"></span>
|
||||
<span><%= t('left_menu_bar.templates') %></span>
|
||||
<% end %>
|
||||
</li>
|
||||
<li class="<%= "active" if reports_are_selected? %>">
|
||||
<%= link_to reports_path, data: { no_turbolink: false }, id: "reports-link", title: t('left_menu_bar.reports') do %>
|
||||
<span class="fas fa-clipboard-check"></span>
|
||||
<span><%= t('left_menu_bar.reports') %></span>
|
||||
<% end %>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav nav-bottom">
|
||||
<li class="<%= "active" if activities_are_selected? %>">
|
||||
<%= link_to activities_path, id: "activities-link", title: t('left_menu_bar.activities') do %>
|
||||
<span class="fas fa-list"></span>
|
||||
<span><%= t('left_menu_bar.activities') %></span>
|
||||
<% end %>
|
||||
</li>
|
||||
<!-- support -->
|
||||
<li class="dropup">
|
||||
<a href="#"
|
||||
id="support-link"
|
||||
class="dropdown-toggle"
|
||||
title="<%= t('left_menu_bar.support') %>"
|
||||
data-toggle="dropdown"
|
||||
role="button"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="fas fa-question-circle"></span>
|
||||
<span><%= t('left_menu_bar.support') %></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu" data-hook="support-dropdown">
|
||||
<li><%= link_to t('left_menu_bar.support_links.support'),
|
||||
Constants::SUPPORT_URL,
|
||||
target: "_blank" %></li>
|
||||
<li><%= link_to t('left_menu_bar.support_links.tutorials'),
|
||||
Constants::TUTORIALS_URL,
|
||||
target: "_blank" %></li>
|
||||
<li><%= link_to t('left_menu_bar.support_links.webinars'),
|
||||
Constants::WEBINARS_URL,
|
||||
target: "_blank" %></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="<%= "active" if settings_are_selected? %>">
|
||||
<%= link_to edit_user_registration_path, id: "settings-link", title: t('left_menu_bar.settings') do %>
|
||||
<span class="fas fa-cog"></span>
|
||||
<span><%= t('left_menu_bar.settings') %></span>
|
||||
<% end %>
|
||||
</li>
|
||||
<!-- arrow for opening/closing -->
|
||||
<li class="text-center" style="padding: 5px;">
|
||||
<span id="sideBarLeft"
|
||||
class="fas fa-chevron-left"
|
||||
aria-hidden="true"
|
||||
onclick="SideBarToggle.hide()"
|
||||
></span>
|
||||
<span id="sideBarRight"
|
||||
class="fas fa-chevron-right"
|
||||
aria-hidden="true"
|
||||
onclick="SideBarToggle.show()"
|
||||
style="display:none;"
|
||||
></span>
|
||||
</li>
|
||||
</ul>
|
||||
<div class="scroll-wrapper">
|
||||
<ul class="nav">
|
||||
<li class="<%= "active" if projects_are_selected? %>">
|
||||
<%= link_to projects_path, id: "projects-link", title: t('left_menu_bar.projects') do %>
|
||||
<span class="fas fa-folder"></span>
|
||||
<span><%= t('left_menu_bar.projects') %></span>
|
||||
<% end %>
|
||||
</li>
|
||||
<li class="<%= "active" if repositories_are_selected? %>">
|
||||
<%= link_to repositories_path, data: { no_turbolink: false }, id: "repositories-link", title: t('left_menu_bar.repositories') do %>
|
||||
<span class="fas fa-list-alt" aria-hidden="true"></span>
|
||||
<span><%= t('left_menu_bar.repositories') %></span>
|
||||
<% end %>
|
||||
</li>
|
||||
<li class="<%= "active" if templates_are_selected? %>">
|
||||
<%= link_to protocols_path, id: "templates-link", title: t('left_menu_bar.templates') do %>
|
||||
<span class="fas fa-edit"></span>
|
||||
<span><%= t('left_menu_bar.templates') %></span>
|
||||
<% end %>
|
||||
</li>
|
||||
<li class="<%= "active" if reports_are_selected? %>">
|
||||
<%= link_to reports_path, data: { no_turbolink: false }, id: "reports-link", title: t('left_menu_bar.reports') do %>
|
||||
<span class="fas fa-clipboard-check"></span>
|
||||
<span><%= t('left_menu_bar.reports') %></span>
|
||||
<% end %>
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav nav-bottom">
|
||||
<li class="<%= "active" if activities_are_selected? %>">
|
||||
<%= link_to activities_path, id: "activities-link", title: t('left_menu_bar.activities') do %>
|
||||
<span class="fas fa-list"></span>
|
||||
<span><%= t('left_menu_bar.activities') %></span>
|
||||
<% end %>
|
||||
</li>
|
||||
<!-- support -->
|
||||
<li class="dropup">
|
||||
<a href="#"
|
||||
id="support-link"
|
||||
class="dropdown-toggle"
|
||||
title="<%= t('left_menu_bar.support') %>"
|
||||
data-toggle="dropdown"
|
||||
role="button"
|
||||
aria-haspopup="true"
|
||||
aria-expanded="false">
|
||||
<span class="fas fa-question-circle"></span>
|
||||
<span><%= t('left_menu_bar.support') %></span>
|
||||
</a>
|
||||
<ul class="dropdown-menu" data-hook="support-dropdown">
|
||||
<li><%= link_to t('left_menu_bar.support_links.support'),
|
||||
Constants::SUPPORT_URL,
|
||||
target: "_blank" %></li>
|
||||
<li><%= link_to t('left_menu_bar.support_links.tutorials'),
|
||||
Constants::TUTORIALS_URL,
|
||||
target: "_blank" %></li>
|
||||
<li><%= link_to t('left_menu_bar.support_links.webinars'),
|
||||
Constants::WEBINARS_URL,
|
||||
target: "_blank" %></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="<%= "active" if settings_are_selected? %>">
|
||||
<%= link_to edit_user_registration_path, id: "settings-link", title: t('left_menu_bar.settings') do %>
|
||||
<span class="fas fa-cog"></span>
|
||||
<span><%= t('left_menu_bar.settings') %></span>
|
||||
<% end %>
|
||||
</li>
|
||||
<!-- arrow for opening/closing -->
|
||||
<li class="text-center <%= navigation_sidebar_shown? ? '' : 'hidden2' %>"
|
||||
style="padding: 5px;"
|
||||
id="toggle-sidebar-btn"
|
||||
data-shown=""
|
||||
onclick="SideBarToggle.toggle()"
|
||||
>
|
||||
<span class="fas fa-chevron-right"
|
||||
aria-hidden="false"
|
||||
></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<%= javascript_include_tag("sidebar_toggle") %>
|
||||
|
|
|
|||
|
|
@ -94,10 +94,6 @@ class Constants
|
|||
HANDSONTABLE_INIT_COLS_CNT = 5
|
||||
HANDSONTABLE_INIT_ROWS_CNT = 5
|
||||
|
||||
# Screen width which is still suitable for sidebar to be shown, otherwise
|
||||
# hidden
|
||||
SCREEN_WIDTH_LARGE = 928
|
||||
|
||||
#=============================================================================
|
||||
# Styling
|
||||
#=============================================================================
|
||||
|
|
|
|||
Loading…
Reference in a new issue