Merge branch 'no-sidebar-on-action-btn-click' into 'master'
dismiss sidebar on action button click Closes #27227 See merge request !8798
This commit is contained in:
commit
f00f3f0743
|
@ -1,9 +1,7 @@
|
|||
/* 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;
|
||||
})();
|
||||
|
|
|
@ -0,0 +1,4 @@
|
|||
---
|
||||
title: dismiss sidebar on repo buttons click
|
||||
merge_request: 8798
|
||||
author: Adam Pahlevi
|
|
@ -0,0 +1,28 @@
|
|||
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
|
|
@ -0,0 +1,86 @@
|
|||
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);
|
||||
});
|
||||
});
|
||||
})();
|
Loading…
Reference in New Issue