From ee955d7a125f9d18ac7ae334542ae68dd8d5114c Mon Sep 17 00:00:00 2001 From: Jason Blanchard Date: Fri, 30 Jan 2015 14:23:35 -0500 Subject: Adds persistent collapse button for left side bar --- CHANGELOG | 1 + app/assets/javascripts/sidebar.js.coffee | 10 ++++++ app/assets/stylesheets/sections/nav_sidebar.scss | 39 +++++++++++++++++++++++- app/helpers/nav_helper.rb | 5 +++ app/views/layouts/_collapse_button.html.haml | 4 +++ app/views/layouts/_page.html.haml | 4 ++- spec/helpers/nav_helper_spec.rb | 25 +++++++++++++++ 7 files changed, 86 insertions(+), 2 deletions(-) create mode 100644 app/helpers/nav_helper.rb create mode 100644 app/views/layouts/_collapse_button.html.haml create mode 100644 spec/helpers/nav_helper_spec.rb diff --git a/CHANGELOG b/CHANGELOG index 2db5beb0022..427a2ee90e6 100644 --- a/CHANGELOG +++ b/CHANGELOG @@ -62,6 +62,7 @@ v 7.8.0 - - - Added support for firing system hooks on group create/destroy and adding/removing users to group (Boyan Tabakov) + - Added persistent collapse button for left side nav bar (Jason Blanchard) v 7.7.2 - Update GitLab Shell to version 2.4.2 that fixes a bug when developers can push to protected branch diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee index c084d730d62..d1b165a2311 100644 --- a/app/assets/javascripts/sidebar.js.coffee +++ b/app/assets/javascripts/sidebar.js.coffee @@ -24,3 +24,13 @@ $ -> $(window).resize -> responsive_resize() return + +$(document).on("click", '.toggle-nav-collapse', (e) -> + e.preventDefault() + if $('.page-with-sidebar').hasClass('collapsed') + $('.page-with-sidebar').removeClass('collapsed') + $.cookie("collapsed_nav", "false", { path: '/' }) + else + $('.page-with-sidebar').addClass('collapsed') + $.cookie("collapsed_nav", "true", { path: '/' }) +) diff --git a/app/assets/stylesheets/sections/nav_sidebar.scss b/app/assets/stylesheets/sections/nav_sidebar.scss index a61c053b8a9..0c278aec3f5 100644 --- a/app/assets/stylesheets/sections/nav_sidebar.scss +++ b/app/assets/stylesheets/sections/nav_sidebar.scss @@ -110,7 +110,7 @@ .nav-sidebar { margin-top: 20px; - position: fixed; + position: relative; top: 45px; width: $sidebar_width; } @@ -150,6 +150,37 @@ } } +.collapse-nav { + position: relative; + top: 50px; + width: 230px; + text-align: right; + padding-right: 21px; +} + +.page-with-sidebar.collapsed { + + .collapse-nav { + width: 53px; + } + + padding-left: 50px; + + .sidebar-wrapper { + width: 52px; + overflow-x: hidden; + + .nav-sidebar { + width: 52px; + } + + .nav-sidebar li a > span { + display: none; + } + } +} + + @media (max-width: $screen-md-max) { @include folded-sidebar; } @@ -157,3 +188,9 @@ @media(min-width: $screen-md-max) { @include expanded-sidebar; } + +@media (max-width: $screen-md-max) { + .collapse-nav { + display: none; + } +} diff --git a/app/helpers/nav_helper.rb b/app/helpers/nav_helper.rb new file mode 100644 index 00000000000..2b03269800e --- /dev/null +++ b/app/helpers/nav_helper.rb @@ -0,0 +1,5 @@ +module NavHelper + def nav_menu_collapsed? + cookies[:collapsed_nav] == 'true' + end +end diff --git a/app/views/layouts/_collapse_button.html.haml b/app/views/layouts/_collapse_button.html.haml new file mode 100644 index 00000000000..52c19f1d99d --- /dev/null +++ b/app/views/layouts/_collapse_button.html.haml @@ -0,0 +1,4 @@ +- if nav_menu_collapsed? + = link_to icon('plus-square'), '#', class: 'toggle-nav-collapse' +- else + = link_to icon('minus-square'), '#', class: 'toggle-nav-collapse' diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index 1263f44eca9..e20aec89110 100644 --- a/app/views/layouts/_page.html.haml +++ b/app/views/layouts/_page.html.haml @@ -1,8 +1,10 @@ - if defined?(sidebar) - .page-with-sidebar + .page-with-sidebar{:class => ("collapsed" if nav_menu_collapsed?)} = render "layouts/broadcast" .sidebar-wrapper = render(sidebar) + .collapse-nav + = render :partial => 'layouts/collapse_button' .content-wrapper .container-fluid .content diff --git a/spec/helpers/nav_helper_spec.rb b/spec/helpers/nav_helper_spec.rb new file mode 100644 index 00000000000..e4d18d8bfc6 --- /dev/null +++ b/spec/helpers/nav_helper_spec.rb @@ -0,0 +1,25 @@ +require 'spec_helper' + +# Specs in this file have access to a helper object that includes +# the NavHelper. For example: +# +# describe NavHelper do +# describe "string concat" do +# it "concats two strings with spaces" do +# expect(helper.concat_strings("this","that")).to eq("this that") +# end +# end +# end +describe NavHelper do + describe '#nav_menu_collapsed?' do + it 'returns true when the nav is collapsed in the cookie' do + helper.request.cookies[:collapsed_nav] = 'true' + expect(helper.nav_menu_collapsed?).to eq true + end + + it 'returns false when the nav is not collapsed in the cookie' do + helper.request.cookies[:collapsed_nav] = 'false' + expect(helper.nav_menu_collapsed?).to eq false + end + end +end -- cgit v1.2.1 From 254a63dcf7dcfe824eb0b7227e2cd63fac027f85 Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Tue, 3 Feb 2015 13:11:33 -0800 Subject: Improve collapsing sidebar --- app/assets/javascripts/sidebar.js.coffee | 11 +++-- app/assets/stylesheets/sections/nav_sidebar.scss | 62 ++++++++---------------- app/helpers/application_helper.rb | 8 +++ app/views/layouts/_collapse_button.html.haml | 4 +- app/views/layouts/_page.html.haml | 4 +- 5 files changed, 41 insertions(+), 48 deletions(-) diff --git a/app/assets/javascripts/sidebar.js.coffee b/app/assets/javascripts/sidebar.js.coffee index d1b165a2311..5013bcdacd0 100644 --- a/app/assets/javascripts/sidebar.js.coffee +++ b/app/assets/javascripts/sidebar.js.coffee @@ -27,10 +27,15 @@ $(window).resize -> $(document).on("click", '.toggle-nav-collapse', (e) -> e.preventDefault() - if $('.page-with-sidebar').hasClass('collapsed') - $('.page-with-sidebar').removeClass('collapsed') + collapsed = 'page-sidebar-collapsed' + expanded = 'page-sidebar-expanded' + + if $('.page-with-sidebar').hasClass(collapsed) + $('.page-with-sidebar').removeClass(collapsed).addClass(expanded) + $('.toggle-nav-collapse i').removeClass('fa-angle-right').addClass('fa-angle-left') $.cookie("collapsed_nav", "false", { path: '/' }) else - $('.page-with-sidebar').addClass('collapsed') + $('.page-with-sidebar').removeClass(expanded).addClass(collapsed) + $('.toggle-nav-collapse i').removeClass('fa-angle-left').addClass('fa-angle-right') $.cookie("collapsed_nav", "true", { path: '/' }) ) diff --git a/app/assets/stylesheets/sections/nav_sidebar.scss b/app/assets/stylesheets/sections/nav_sidebar.scss index 0c278aec3f5..b35043821da 100644 --- a/app/assets/stylesheets/sections/nav_sidebar.scss +++ b/app/assets/stylesheets/sections/nav_sidebar.scss @@ -1,5 +1,3 @@ - - .page-with-sidebar { background: #F5F5F5; @@ -101,16 +99,14 @@ } @mixin expanded-sidebar { - .page-with-sidebar { - padding-left: $sidebar_width; - } + padding-left: $sidebar_width; .sidebar-wrapper { width: $sidebar_width; .nav-sidebar { margin-top: 20px; - position: relative; + position: fixed; top: 45px; width: $sidebar_width; } @@ -122,9 +118,7 @@ } @mixin folded-sidebar { - .page-with-sidebar { - padding-left: 50px; - } + padding-left: 50px; .sidebar-wrapper { width: 52px; @@ -150,47 +144,33 @@ } } -.collapse-nav { - position: relative; - top: 50px; - width: 230px; - text-align: right; - padding-right: 21px; +.collapse-nav a { + position: fixed; + bottom: 15px; + padding: 10px; + background: #DDD; } -.page-with-sidebar.collapsed { - - .collapse-nav { - width: 53px; +@media (max-width: $screen-md-max) { + .page-sidebar-collapsed { + @include folded-sidebar; } - padding-left: 50px; - - .sidebar-wrapper { - width: 52px; - overflow-x: hidden; - - .nav-sidebar { - width: 52px; - } - - .nav-sidebar li a > span { - display: none; - } + .page-sidebar-expanded { + @include folded-sidebar; } -} - -@media (max-width: $screen-md-max) { - @include folded-sidebar; + .collapse-nav { + display: none; + } } @media(min-width: $screen-md-max) { - @include expanded-sidebar; -} + .page-sidebar-collapsed { + @include folded-sidebar; + } -@media (max-width: $screen-md-max) { - .collapse-nav { - display: none; + .page-sidebar-expanded { + @include expanded-sidebar; } } diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index 1fbb44ee442..e45f4650309 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -315,4 +315,12 @@ module ApplicationHelper profile_key_path(key) end end + + def nav_sidebar_class + if nav_menu_collapsed? + "page-sidebar-collapsed" + else + "page-sidebar-expanded" + end + end end diff --git a/app/views/layouts/_collapse_button.html.haml b/app/views/layouts/_collapse_button.html.haml index 52c19f1d99d..b3b338b55bb 100644 --- a/app/views/layouts/_collapse_button.html.haml +++ b/app/views/layouts/_collapse_button.html.haml @@ -1,4 +1,4 @@ - if nav_menu_collapsed? - = link_to icon('plus-square'), '#', class: 'toggle-nav-collapse' + = link_to icon('angle-right'), '#', class: 'toggle-nav-collapse' - else - = link_to icon('minus-square'), '#', class: 'toggle-nav-collapse' + = link_to icon('angle-left'), '#', class: 'toggle-nav-collapse' diff --git a/app/views/layouts/_page.html.haml b/app/views/layouts/_page.html.haml index e20aec89110..98a3d2278a3 100644 --- a/app/views/layouts/_page.html.haml +++ b/app/views/layouts/_page.html.haml @@ -1,10 +1,10 @@ - if defined?(sidebar) - .page-with-sidebar{:class => ("collapsed" if nav_menu_collapsed?)} + .page-with-sidebar{ class: nav_sidebar_class } = render "layouts/broadcast" .sidebar-wrapper = render(sidebar) .collapse-nav - = render :partial => 'layouts/collapse_button' + = render partial: 'layouts/collapse_button' .content-wrapper .container-fluid .content -- cgit v1.2.1