Commit e0a90063 authored by Adam Pahlevi Baihaqi's avatar Adam Pahlevi Baihaqi

dismiss sidebar on repo buttons click

make the selector more inclusive

spec for dashboard’s sidebar visibility

fix linting errors for project dashboard page

remove unused var: shouldBeCollapsed

use project with repo, so download button became available

use es6 style for testing project dashboard

un-aliased global reference at sidebar.js.es6

fix spec from linting errors

code improvement

add singleton to `this`

assign `singleton` to class

add space in between

remove `no-underscore-dangle`

add complete changelog

sidebar internal state test

remove on page change, not exist in master. rebase.

only nicescroll if the element is there

new require style

reference to sidebar content outside of timeout
parent f54917f1
/* eslint-disable arrow-parens, class-methods-use-this, no-param-reassign */
/* global Cookies */
((global) => {
let singleton;
(() => {
const pinnedStateCookie = 'pin_nav';
const sidebarBreakpoint = 1024;
......@@ -23,11 +21,12 @@
class Sidebar {
constructor() {
if (!singleton) {
singleton = this;
singleton.init();
if (!Sidebar.singleton) {
Sidebar.singleton = this;
Sidebar.singleton.init();
}
return singleton;
return Sidebar.singleton;
}
init() {
......@@ -39,7 +38,7 @@
$(document)
.on('click', sidebarToggleSelector, () => this.toggleSidebar())
.on('click', pinnedToggleSelector, () => this.togglePinnedState())
.on('click', 'html, body', (e) => this.handleClickEvent(e))
.on('click', 'html, body, a, button', (e) => this.handleClickEvent(e))
.on('DOMContentLoaded', () => this.renderState())
.on('todo:toggle', (e, count) => this.updateTodoCount(count));
this.renderState();
......@@ -88,10 +87,12 @@
$pinnedToggle.attr('title', tooltipText).tooltip('fixTitle').tooltip(tooltipState);
if (this.isExpanded) {
setTimeout(() => $(sidebarContentSelector).niceScroll().updateScrollBar(), 200);
const sidebarContent = $(sidebarContentSelector);
setTimeout(() => { sidebarContent.niceScroll().updateScrollBar(); }, 200);
}
}
}
global.Sidebar = Sidebar;
})(window.gl || (window.gl = {}));
window.gl = window.gl || {};
gl.Sidebar = Sidebar;
})();
---
title: dismiss sidebar on repo buttons click
merge_request: 8798
author: Adam Pahlevi
require 'spec_helper'
describe ProjectsController, '(JavaScript fixtures)', type: :controller do
include JavaScriptFixturesHelpers
let(:admin) { create(:admin) }
let(:namespace) { create(:namespace, name: 'frontend-fixtures' )}
let(:project) { create(:project, namespace: namespace, path: 'builds-project') }
render_views
before(:all) do
clean_frontend_fixtures('projects/')
end
before(:each) do
sign_in(admin)
end
it 'projects/dashboard.html.raw' do |example|
get :show,
namespace_id: project.namespace.to_param,
id: project.to_param
expect(response).to be_success
store_frontend_fixture(response, example.description)
end
end
require('~/sidebar');
(() => {
describe('Project dashboard page', () => {
let $pageWithSidebar = null;
let $sidebarToggle = null;
let sidebar = null;
const fixtureTemplate = 'projects/dashboard.html.raw';
const assertSidebarStateExpanded = (shouldBeExpanded) => {
expect(sidebar.isExpanded).toBe(shouldBeExpanded);
expect($pageWithSidebar.hasClass('page-sidebar-expanded')).toBe(shouldBeExpanded);
};
preloadFixtures(fixtureTemplate);
beforeEach(() => {
loadFixtures(fixtureTemplate);
$pageWithSidebar = $('.page-with-sidebar');
$sidebarToggle = $('.toggle-nav-collapse');
// otherwise instantiating the Sidebar for the second time
// won't do anything, as the Sidebar is a singleton class
gl.Sidebar.singleton = null;
sidebar = new gl.Sidebar();
});
it('can show the sidebar when the toggler is clicked', () => {
assertSidebarStateExpanded(false);
$sidebarToggle.click();
assertSidebarStateExpanded(true);
});
it('should dismiss the sidebar when clone button clicked', () => {
$sidebarToggle.click();
assertSidebarStateExpanded(true);
const cloneButton = $('.project-clone-holder a.clone-dropdown-btn');
cloneButton.click();
assertSidebarStateExpanded(false);
});
it('should dismiss the sidebar when download button clicked', () => {
$sidebarToggle.click();
assertSidebarStateExpanded(true);
const downloadButton = $('.project-action-button .btn:has(i.fa-download)');
downloadButton.click();
assertSidebarStateExpanded(false);
});
it('should dismiss the sidebar when add button clicked', () => {
$sidebarToggle.click();
assertSidebarStateExpanded(true);
const addButton = $('.project-action-button .btn:has(i.fa-plus)');
addButton.click();
assertSidebarStateExpanded(false);
});
it('should dismiss the sidebar when notification button clicked', () => {
$sidebarToggle.click();
assertSidebarStateExpanded(true);
const notifButton = $('.js-notification-toggle-btns .notifications-btn');
notifButton.click();
assertSidebarStateExpanded(false);
});
it('should dismiss the sidebar when clicking on the body', () => {
$sidebarToggle.click();
assertSidebarStateExpanded(true);
$('body').click();
assertSidebarStateExpanded(false);
});
it('should dismiss the sidebar when clicking on the project description header', () => {
$sidebarToggle.click();
assertSidebarStateExpanded(true);
$('.project-home-panel').click();
assertSidebarStateExpanded(false);
});
});
})();
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