From c9f3de9f27eabf25b4004d90a724ef19385dd4e2 Mon Sep 17 00:00:00 2001 From: Luka Murn Date: Thu, 24 May 2018 13:39:04 +0200 Subject: [PATCH 1/8] Improve toggle --- app/assets/javascripts/sidebar_toggle.js.erb | 14 +++++++++++++- app/views/shared/_left_menu_bar.html.erb | 13 ++++++++----- 2 files changed, 21 insertions(+), 6 deletions(-) diff --git a/app/assets/javascripts/sidebar_toggle.js.erb b/app/assets/javascripts/sidebar_toggle.js.erb index a265f3d2a..522ccd1e9 100644 --- a/app/assets/javascripts/sidebar_toggle.js.erb +++ b/app/assets/javascripts/sidebar_toggle.js.erb @@ -27,9 +27,21 @@ }); } + function toggle() { + var btn = $('#sideBarButton'); + if (btn.attr('data-shown')) { + btn.attr('data-shown', false); + hide(); + } else { + btn.attr('data-shown', true); + show(); + } + } + return Object.freeze({ show: show, - hide: hide + hide: hide, + toggle: toggle }) })(); })(window); diff --git a/app/views/shared/_left_menu_bar.html.erb b/app/views/shared/_left_menu_bar.html.erb index 520149308..fa373f706 100644 --- a/app/views/shared/_left_menu_bar.html.erb +++ b/app/views/shared/_left_menu_bar.html.erb @@ -64,19 +64,22 @@ <% end %> -
  • +
  • -
    • + From fe3ddb7c6585940cdd3862ba1ccc5ed8711a3188 Mon Sep 17 00:00:00 2001 From: Luka Murn Date: Fri, 25 May 2018 08:50:27 +0200 Subject: [PATCH 2/8] Update code so it works --- app/assets/javascripts/sidebar_toggle.js.erb | 6 +++--- app/assets/stylesheets/themes/menu_bar.scss | 4 ++++ app/views/shared/_left_menu_bar.html.erb | 2 +- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/app/assets/javascripts/sidebar_toggle.js.erb b/app/assets/javascripts/sidebar_toggle.js.erb index 522ccd1e9..523485a36 100644 --- a/app/assets/javascripts/sidebar_toggle.js.erb +++ b/app/assets/javascripts/sidebar_toggle.js.erb @@ -29,11 +29,11 @@ function toggle() { var btn = $('#sideBarButton'); - if (btn.attr('data-shown')) { - btn.attr('data-shown', false); + if (btn.is('[data-shown]')) { + btn.removeAttr('data-shown'); hide(); } else { - btn.attr('data-shown', true); + btn.attr('data-shown', ''); show(); } } diff --git a/app/assets/stylesheets/themes/menu_bar.scss b/app/assets/stylesheets/themes/menu_bar.scss index 5269bc2d5..148526e9c 100644 --- a/app/assets/stylesheets/themes/menu_bar.scss +++ b/app/assets/stylesheets/themes/menu_bar.scss @@ -58,6 +58,10 @@ color: $color-emperor; } } + #sideBarButton:hover { + background-color: $color-concrete; + cursor: pointer; + } } @media(max-height:480px) { diff --git a/app/views/shared/_left_menu_bar.html.erb b/app/views/shared/_left_menu_bar.html.erb index fa373f706..52655bb64 100644 --- a/app/views/shared/_left_menu_bar.html.erb +++ b/app/views/shared/_left_menu_bar.html.erb @@ -67,7 +67,7 @@
  • Date: Sun, 27 May 2018 15:24:11 +0200 Subject: [PATCH 3/8] Remove session-stored toggle state of navigation bar --- app/assets/javascripts/sidebar.js.erb | 56 +-------------------------- 1 file changed, 1 insertion(+), 55 deletions(-) diff --git a/app/assets/javascripts/sidebar.js.erb b/app/assets/javascripts/sidebar.js.erb index 1f8e2d93c..511590708 100644 --- a/app/assets/javascripts/sidebar.js.erb +++ b/app/assets/javascripts/sidebar.js.erb @@ -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,36 +225,11 @@ function setupSidebarTree() { $(".tree li span.tree-link ").after("
    "); } -/** - * 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 toggled = true; var navbar = $(".navbar-secondary"); if (tree.length && tree.length == 1) { @@ -306,7 +253,6 @@ function resizeSidebarContents() { (function () { // Initialize click listeners setupSidebarTree(); - initializeSidebarToggle(); // Actually display wrapper, which is, up to now, // hidden From 8b527d8a5b4a51b1d1f50380c564fb8c63b2e220 Mon Sep 17 00:00:00 2001 From: Luka Murn Date: Sun, 27 May 2018 15:24:49 +0200 Subject: [PATCH 4/8] Restyle left side menu bar so it also works with lower heights --- app/assets/stylesheets/themes/menu_bar.scss | 15 +- app/views/shared/_left_menu_bar.html.erb | 166 ++++++++++---------- 2 files changed, 95 insertions(+), 86 deletions(-) diff --git a/app/assets/stylesheets/themes/menu_bar.scss b/app/assets/stylesheets/themes/menu_bar.scss index 148526e9c..0440ad3bb 100644 --- a/app/assets/stylesheets/themes/menu_bar.scss +++ b/app/assets/stylesheets/themes/menu_bar.scss @@ -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,14 +64,15 @@ color: $color-emperor; } } + #sideBarButton:hover { background-color: $color-concrete; cursor: pointer; } } -@media(max-height:480px) { - .menu-bar > ul.nav-bottom { +@media(max-height:510px) { + .menu-bar ul.nav-bottom { position: relative; width: auto; } diff --git a/app/views/shared/_left_menu_bar.html.erb b/app/views/shared/_left_menu_bar.html.erb index 52655bb64..dfe7f04ad 100644 --- a/app/views/shared/_left_menu_bar.html.erb +++ b/app/views/shared/_left_menu_bar.html.erb @@ -1,86 +1,88 @@ <%= javascript_include_tag("sidebar_toggle") %> From b86edf20a5c8c35a02727c855382158daa426779 Mon Sep 17 00:00:00 2001 From: Luka Murn Date: Sun, 27 May 2018 15:44:15 +0200 Subject: [PATCH 5/8] Remove auto-toggling of navigation sidebar depending on width --- app/assets/javascripts/sidebar.js.erb | 14 +------------- app/assets/javascripts/sidebar_toggle.js.erb | 12 +++++++++--- config/initializers/constants.rb | 2 +- 3 files changed, 11 insertions(+), 17 deletions(-) diff --git a/app/assets/javascripts/sidebar.js.erb b/app/assets/javascripts/sidebar.js.erb index 511590708..1845e7989 100644 --- a/app/assets/javascripts/sidebar.js.erb +++ b/app/assets/javascripts/sidebar.js.erb @@ -227,27 +227,15 @@ function setupSidebarTree() { // Resize the sidebar to accomodate to the page size function resizeSidebarContents() { - var wrapper = $("#wrapper"); var tree = $("#sidebar-wrapper .tree"); - var toggled = true; - 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 () { diff --git a/app/assets/javascripts/sidebar_toggle.js.erb b/app/assets/javascripts/sidebar_toggle.js.erb index 523485a36..757c5978b 100644 --- a/app/assets/javascripts/sidebar_toggle.js.erb +++ b/app/assets/javascripts/sidebar_toggle.js.erb @@ -12,6 +12,7 @@ $('.navbar-secondary').css( { 'margin-left': '-280px', 'padding-left': '294px' } ); + $('#sideBarButton').attr('data-shown', ''); } function hide() { @@ -25,23 +26,28 @@ 'margin-left': '0', 'padding-left': '14px' }); + $('#sideBarButton').removeAttr('data-shown'); } function toggle() { var btn = $('#sideBarButton'); if (btn.is('[data-shown]')) { - btn.removeAttr('data-shown'); hide(); } else { - btn.attr('data-shown', ''); show(); } } + function isShown() { + var btn = $('#sideBarButton'); + return btn.is('[data-shown]'); + } + return Object.freeze({ show: show, hide: hide, - toggle: toggle + toggle: toggle, + isShown: isShown }) })(); })(window); diff --git a/config/initializers/constants.rb b/config/initializers/constants.rb index e964b90bb..97fe865e4 100644 --- a/config/initializers/constants.rb +++ b/config/initializers/constants.rb @@ -96,7 +96,7 @@ class Constants # Screen width which is still suitable for sidebar to be shown, otherwise # hidden - SCREEN_WIDTH_LARGE = 928 + SCREEN_WIDTH_LARGE = 768 #============================================================================= # Styling From b3ae1d8fa6000925389b6ad0b65191dea2e12e2c Mon Sep 17 00:00:00 2001 From: Luka Murn Date: Sun, 27 May 2018 16:24:47 +0200 Subject: [PATCH 6/8] Remove some dead code, make sidebar toggle animated --- app/assets/javascripts/projects/canvas.js.erb | 2 +- app/assets/javascripts/sidebar_toggle.js.erb | 4 -- app/assets/stylesheets/partials/_sidebar.scss | 68 ------------------- app/assets/stylesheets/themes/menu_bar.scss | 12 ++++ app/helpers/left_menu_bar_helper.rb | 6 ++ app/views/shared/_left_menu_bar.html.erb | 10 +-- 6 files changed, 21 insertions(+), 81 deletions(-) diff --git a/app/assets/javascripts/projects/canvas.js.erb b/app/assets/javascripts/projects/canvas.js.erb index fe8110869..4409f48cc 100644 --- a/app/assets/javascripts/projects/canvas.js.erb +++ b/app/assets/javascripts/projects/canvas.js.erb @@ -170,7 +170,7 @@ function initializeEdit() { // Hide sidebar & also its toggle button $("#wrapper").addClass("hidden2"); - $("#wrapper").find(".sidebar-header-toggle").hide(); + $("#sideBarButton").addClass("hidden2"); $(".navbar-secondary").addClass("navbar-without-sidebar"); // Also, hide zoom levels button group diff --git a/app/assets/javascripts/sidebar_toggle.js.erb b/app/assets/javascripts/sidebar_toggle.js.erb index 757c5978b..076520c12 100644 --- a/app/assets/javascripts/sidebar_toggle.js.erb +++ b/app/assets/javascripts/sidebar_toggle.js.erb @@ -3,8 +3,6 @@ global.SideBarToggle = (function() { function show() { - $('#sideBarLeft').show(); - $('#sideBarRight').hide(); $('#sidebar-wrapper').show( 'slide', { direction: 'right', easing: 'linear' }, 400 ); @@ -16,8 +14,6 @@ } function hide() { - $('#sideBarLeft').hide(); - $('#sideBarRight').show(); $('#sidebar-wrapper').hide( 'slide', { direction: 'left', easing: 'linear'}, 400 ); diff --git a/app/assets/stylesheets/partials/_sidebar.scss b/app/assets/stylesheets/partials/_sidebar.scss index 581d257aa..08eefdd3c 100644 --- a/app/assets/stylesheets/partials/_sidebar.scss +++ b/app/assets/stylesheets/partials/_sidebar.scss @@ -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; diff --git a/app/assets/stylesheets/themes/menu_bar.scss b/app/assets/stylesheets/themes/menu_bar.scss index 0440ad3bb..8b140a341 100644 --- a/app/assets/stylesheets/themes/menu_bar.scss +++ b/app/assets/stylesheets/themes/menu_bar.scss @@ -65,10 +65,22 @@ } } + #sideBarButton > span { + @include rotate-animation(0.5s, 0deg); + } + + #sideBarButton[data-shown] > span { + @include rotate-animation(0.5s, 180deg); + } + #sideBarButton:hover { background-color: $color-concrete; cursor: pointer; } + + #sideBarButton.hidden2 { + visibility: hidden; + } } @media(max-height:510px) { diff --git a/app/helpers/left_menu_bar_helper.rb b/app/helpers/left_menu_bar_helper.rb index e5a599bed..91f49c429 100644 --- a/app/helpers/left_menu_bar_helper.rb +++ b/app/helpers/left_menu_bar_helper.rb @@ -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 diff --git a/app/views/shared/_left_menu_bar.html.erb b/app/views/shared/_left_menu_bar.html.erb index dfe7f04ad..73fd84de2 100644 --- a/app/views/shared/_left_menu_bar.html.erb +++ b/app/views/shared/_left_menu_bar.html.erb @@ -65,21 +65,15 @@ <% end %>
    • -
  • - -
    • From f8c8887d7285fbc52451d8baa5498c4efcb3eae7 Mon Sep 17 00:00:00 2001 From: Luka Murn Date: Sun, 27 May 2018 17:23:50 +0200 Subject: [PATCH 7/8] Forgot to remove the constant --- config/initializers/constants.rb | 4 ---- 1 file changed, 4 deletions(-) diff --git a/config/initializers/constants.rb b/config/initializers/constants.rb index 97fe865e4..2f8ee2518 100644 --- a/config/initializers/constants.rb +++ b/config/initializers/constants.rb @@ -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 = 768 - #============================================================================= # Styling #============================================================================= From e611e76fae9f54be4e59769f3f02ff16f0fa194a Mon Sep 17 00:00:00 2001 From: Luka Murn Date: Mon, 28 May 2018 11:53:49 +0200 Subject: [PATCH 8/8] Fix Hound errors --- app/assets/javascripts/projects/canvas.js.erb | 2 +- app/assets/javascripts/sidebar_toggle.js.erb | 8 ++++---- app/assets/stylesheets/themes/menu_bar.scss | 14 +++++++------- app/views/shared/_left_menu_bar.html.erb | 2 +- 4 files changed, 13 insertions(+), 13 deletions(-) diff --git a/app/assets/javascripts/projects/canvas.js.erb b/app/assets/javascripts/projects/canvas.js.erb index 4409f48cc..56ee5b33a 100644 --- a/app/assets/javascripts/projects/canvas.js.erb +++ b/app/assets/javascripts/projects/canvas.js.erb @@ -170,7 +170,7 @@ function initializeEdit() { // Hide sidebar & also its toggle button $("#wrapper").addClass("hidden2"); - $("#sideBarButton").addClass("hidden2"); + $("#toggle-sidebar-btn").addClass("hidden2"); $(".navbar-secondary").addClass("navbar-without-sidebar"); // Also, hide zoom levels button group diff --git a/app/assets/javascripts/sidebar_toggle.js.erb b/app/assets/javascripts/sidebar_toggle.js.erb index 076520c12..2b98ada1a 100644 --- a/app/assets/javascripts/sidebar_toggle.js.erb +++ b/app/assets/javascripts/sidebar_toggle.js.erb @@ -10,7 +10,7 @@ $('.navbar-secondary').css( { 'margin-left': '-280px', 'padding-left': '294px' } ); - $('#sideBarButton').attr('data-shown', ''); + $('#toggle-sidebar-btn').attr('data-shown', ''); } function hide() { @@ -22,11 +22,11 @@ 'margin-left': '0', 'padding-left': '14px' }); - $('#sideBarButton').removeAttr('data-shown'); + $('#toggle-sidebar-btn').removeAttr('data-shown'); } function toggle() { - var btn = $('#sideBarButton'); + var btn = $('#toggle-sidebar-btn'); if (btn.is('[data-shown]')) { hide(); } else { @@ -35,7 +35,7 @@ } function isShown() { - var btn = $('#sideBarButton'); + var btn = $('#toggle-sidebar-btn'); return btn.is('[data-shown]'); } diff --git a/app/assets/stylesheets/themes/menu_bar.scss b/app/assets/stylesheets/themes/menu_bar.scss index 8b140a341..c6930ce09 100644 --- a/app/assets/stylesheets/themes/menu_bar.scss +++ b/app/assets/stylesheets/themes/menu_bar.scss @@ -65,26 +65,26 @@ } } - #sideBarButton > span { - @include rotate-animation(0.5s, 0deg); + #toggle-sidebar-btn > span { + @include rotate-animation(.5s, 0deg); } - #sideBarButton[data-shown] > span { - @include rotate-animation(0.5s, 180deg); + #toggle-sidebar-btn[data-shown] > span { + @include rotate-animation(.5s, 180deg); } - #sideBarButton:hover { + #toggle-sidebar-btn:hover { background-color: $color-concrete; cursor: pointer; } - #sideBarButton.hidden2 { + #toggle-sidebar-btn.hidden2 { visibility: hidden; } } @media(max-height:510px) { - .menu-bar ul.nav-bottom { + .menu-bar .nav-bottom { position: relative; width: auto; } diff --git a/app/views/shared/_left_menu_bar.html.erb b/app/views/shared/_left_menu_bar.html.erb index 73fd84de2..6df1c1fe4 100644 --- a/app/views/shared/_left_menu_bar.html.erb +++ b/app/views/shared/_left_menu_bar.html.erb @@ -67,7 +67,7 @@