Commit f2caad24 authored by Jacob Schatz's avatar Jacob Schatz

Merge branch 'sidebar-expand-collapse' into 'master'

Fix right sidebar expand/collapse issue

Fixed branch name of the !4117


------------------

Fixes #15643 

- Fixed a typo in `toggleSidebar` method of `Sidebar` class.
- Fixed a minor styling issue to fix the sidebar to the top of the page.
- Added tests for Sidebar.


## Before
![before](/uploads/c4efe9a64e0ae35f423302753caa6dfd/sFBwnVEpQB.gif)

## After
![after](/uploads/23e6b80888dae475a385912c8c40bdbd/rerKiYC4dk.gif)


See merge request !4292
parents adc64e45 272d482f
......@@ -245,38 +245,6 @@ $ ->
if $navIcon.hasClass('fa-angle-left')
$navIconToggle.trigger('click')
$(document)
.off 'click', '.js-sidebar-toggle'
.on 'click', '.js-sidebar-toggle', (e, triggered) ->
e.preventDefault()
$this = $(this)
$thisIcon = $this.find 'i'
$allGutterToggleIcons = $('.js-sidebar-toggle i')
if $thisIcon.hasClass('fa-angle-double-right')
$allGutterToggleIcons
.removeClass('fa-angle-double-right')
.addClass('fa-angle-double-left')
$('aside.right-sidebar')
.removeClass('right-sidebar-expanded')
.addClass('right-sidebar-collapsed')
$('.page-with-sidebar')
.removeClass('right-sidebar-expanded')
.addClass('right-sidebar-collapsed')
else
$allGutterToggleIcons
.removeClass('fa-angle-double-left')
.addClass('fa-angle-double-right')
$('aside.right-sidebar')
.removeClass('right-sidebar-collapsed')
.addClass('right-sidebar-expanded')
$('.page-with-sidebar')
.removeClass('right-sidebar-collapsed')
.addClass('right-sidebar-expanded')
if not triggered
$.cookie("collapsed_gutter",
$('.right-sidebar')
.hasClass('right-sidebar-collapsed'), { path: '/' })
fitSidebarForSize = ->
oldBootstrapBreakpoint = bootstrapBreakpoint
bootstrapBreakpoint = bp.getBreakpointSize()
......
......@@ -10,6 +10,40 @@ class @Sidebar
$('.dropdown').on('loading.gl.dropdown', @sidebarDropdownLoading)
$('.dropdown').on('loaded.gl.dropdown', @sidebarDropdownLoaded)
$(document)
.off 'click', '.js-sidebar-toggle'
.on 'click', '.js-sidebar-toggle', (e, triggered) ->
e.preventDefault()
$this = $(this)
$thisIcon = $this.find 'i'
$allGutterToggleIcons = $('.js-sidebar-toggle i')
if $thisIcon.hasClass('fa-angle-double-right')
$allGutterToggleIcons
.removeClass('fa-angle-double-right')
.addClass('fa-angle-double-left')
$('aside.right-sidebar')
.removeClass('right-sidebar-expanded')
.addClass('right-sidebar-collapsed')
$('.page-with-sidebar')
.removeClass('right-sidebar-expanded')
.addClass('right-sidebar-collapsed')
else
$allGutterToggleIcons
.removeClass('fa-angle-double-left')
.addClass('fa-angle-double-right')
$('aside.right-sidebar')
.removeClass('right-sidebar-collapsed')
.addClass('right-sidebar-expanded')
$('.page-with-sidebar')
.removeClass('right-sidebar-collapsed')
.addClass('right-sidebar-expanded')
if not triggered
$.cookie("collapsed_gutter",
$('.right-sidebar')
.hasClass('right-sidebar-collapsed'), { path: '/' })
sidebarDropdownLoading: (e) ->
$sidebarCollapsedIcon = $(@).closest('.block').find('.sidebar-collapsed-icon')
img = $sidebarCollapsedIcon.find('img')
......@@ -76,7 +110,7 @@ class @Sidebar
@triggerOpenSidebar() if not @isOpen()
if action is 'hide'
@triggerOpenSidebar() is @isOpen()
@triggerOpenSidebar() if @isOpen()
isOpen: ->
@sidebar.is('.right-sidebar-expanded')
......
%div
%div.page-gutter.page-with-sidebar
%aside.right-sidebar
%div.block.issuable-sidebar-header
%a.gutter-toggle.pull-right.js-sidebar-toggle
%i.fa.fa-angle-double-left
%form.issuable-context-form
%div.block.labels
%div.sidebar-collapsed-icon
%i.fa.fa-tags
%span 1
#= require right_sidebar
#= require jquery
#= require jquery.cookie
@sidebar = null
$aside = null
$toggle = null
$icon = null
$page = null
$labelsIcon = null
assertSidebarState = (state) ->
shouldBeExpanded = state is 'expanded'
shouldBeCollapsed = state is 'collapsed'
expect($aside.hasClass('right-sidebar-expanded')).toBe shouldBeExpanded
expect($page.hasClass('right-sidebar-expanded')).toBe shouldBeExpanded
expect($icon.hasClass('fa-angle-double-right')).toBe shouldBeExpanded
expect($aside.hasClass('right-sidebar-collapsed')).toBe shouldBeCollapsed
expect($page.hasClass('right-sidebar-collapsed')).toBe shouldBeCollapsed
expect($icon.hasClass('fa-angle-double-left')).toBe shouldBeCollapsed
describe 'RightSidebar', ->
fixture.preload 'right_sidebar.html'
beforeEach ->
fixture.load 'right_sidebar.html'
@sidebar = new Sidebar
$aside = $ '.right-sidebar'
$page = $ '.page-with-sidebar'
$icon = $aside.find 'i'
$toggle = $aside.find '.js-sidebar-toggle'
$labelsIcon = $aside.find '.sidebar-collapsed-icon'
it 'should expand the sidebar when arrow is clicked', ->
$toggle.click()
assertSidebarState 'expanded'
it 'should collapse the sidebar when arrow is clicked', ->
$toggle.click()
assertSidebarState 'expanded'
$toggle.click()
assertSidebarState 'collapsed'
it 'should float over the page and when sidebar icons clicked', ->
$labelsIcon.click()
assertSidebarState 'expanded'
it 'should collapse when the icon arrow clicked while it is floating on page', ->
$labelsIcon.click()
assertSidebarState 'expanded'
$toggle.click()
assertSidebarState 'collapsed'
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment