Commit 209d7575 authored by Tim Zallmann's avatar Tim Zallmann

Merge branch '34366-issue-sidebar-don-t-render-participants-in-collapsed-state' into 'master'

Resolve "Issue Sidebar : Don't render participants in collapsed state"

Closes #34366

See merge request gitlab-org/gitlab-ce!14270
parents 147c46cc feae8b2e
...@@ -67,10 +67,13 @@ const PARTICIPANTS_ROW_COUNT = 7; ...@@ -67,10 +67,13 @@ const PARTICIPANTS_ROW_COUNT = 7;
originalText = $(this).data("original-text"); originalText = $(this).data("original-text");
if (currentText === originalText) { if (currentText === originalText) {
$(this).text(lessText); $(this).text(lessText);
if (gl.lazyLoader) gl.lazyLoader.loadCheck();
} else { } else {
$(this).text(originalText); $(this).text(originalText);
} }
return $(".js-participants-hidden").toggle();
$(".js-participants-hidden").toggle();
}; };
return IssuableContext; return IssuableContext;
......
...@@ -29,30 +29,32 @@ import Cookies from 'js-cookie'; ...@@ -29,30 +29,32 @@ import Cookies from 'js-cookie';
$('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading); $('.dropdown').on('loading.gl.dropdown', this.sidebarDropdownLoading);
$('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded); $('.dropdown').on('loaded.gl.dropdown', this.sidebarDropdownLoaded);
$document.on('click', '.js-sidebar-toggle', function(e, triggered) { $document.on('click', '.js-sidebar-toggle', this.sidebarToggleClicked);
var $allGutterToggleIcons, $this, $thisIcon;
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 (gl.lazyLoader) gl.lazyLoader.loadCheck();
}
if (!triggered) {
return Cookies.set("collapsed_gutter", $('.right-sidebar').hasClass('right-sidebar-collapsed'));
}
});
return $(document).off('click', '.js-issuable-todo').on('click', '.js-issuable-todo', this.toggleTodo); return $(document).off('click', '.js-issuable-todo').on('click', '.js-issuable-todo', this.toggleTodo);
}; };
Sidebar.prototype.sidebarToggleClicked = function (e, triggered) {
var $allGutterToggleIcons, $this, $thisIcon;
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 (gl.lazyLoader) gl.lazyLoader.loadCheck();
}
if (!triggered) {
Cookies.set("collapsed_gutter", $('.right-sidebar').hasClass('right-sidebar-collapsed'));
}
};
Sidebar.prototype.toggleTodo = function(e) { Sidebar.prototype.toggleTodo = function(e) {
var $btnText, $this, $todoLoading, ajaxType, url; var $btnText, $this, $todoLoading, ajaxType, url;
$this = $(e.currentTarget); $this = $(e.currentTarget);
......
...@@ -21,11 +21,14 @@ module ProjectsHelper ...@@ -21,11 +21,14 @@ module ProjectsHelper
classes = %W[avatar avatar-inline s#{opts[:size]}] classes = %W[avatar avatar-inline s#{opts[:size]}]
classes << opts[:avatar_class] if opts[:avatar_class] classes << opts[:avatar_class] if opts[:avatar_class]
image_tag(avatar_icon(author, opts[:size]), width: opts[:size], class: classes, alt: '') avatar = avatar_icon(author, opts[:size])
src = opts[:lazy_load] ? nil : avatar
image_tag(src, width: opts[:size], class: classes, alt: '', "data-src" => avatar)
end end
def link_to_member(project, author, opts = {}, &block) def link_to_member(project, author, opts = {}, &block)
default_opts = { avatar: true, name: true, size: 16, author_class: 'author', title: ":name", tooltip: false } default_opts = { avatar: true, name: true, size: 16, author_class: 'author', title: ":name", tooltip: false, lazy_load: false }
opts = default_opts.merge(opts) opts = default_opts.merge(opts)
return "(deleted)" unless author return "(deleted)" unless author
......
...@@ -11,7 +11,7 @@ ...@@ -11,7 +11,7 @@
.hide-collapsed.participants-list .hide-collapsed.participants-list
- participants.each do |participant| - participants.each do |participant|
.participants-author.js-participants-author .participants-author.js-participants-author
= link_to_member(@project, participant, name: false, size: 24) = link_to_member(@project, participant, name: false, size: 24, lazy_load: true)
- if participants_extra > 0 - if participants_extra > 0
.hide-collapsed.participants-more .hide-collapsed.participants-more
%a.js-participants-more{ href: "#", data: { original_text: "+ #{participants_size - 7} more", less_text: "- show less" } } %a.js-participants-more{ href: "#", data: { original_text: "+ #{participants_size - 7} more", less_text: "- show less" } }
......
---
title: Load sidebar participants avatars only when visible
merge_request: 14270
author:
type: other
...@@ -200,13 +200,13 @@ describe ProjectsHelper do ...@@ -200,13 +200,13 @@ describe ProjectsHelper do
end end
it 'returns image tag for member avatar' do it 'returns image tag for member avatar' do
expect(helper).to receive(:image_tag).with(expected, { width: 16, class: ["avatar", "avatar-inline", "s16"], alt: "" }) expect(helper).to receive(:image_tag).with(expected, { width: 16, class: ["avatar", "avatar-inline", "s16"], alt: "", "data-src" => anything })
helper.link_to_member_avatar(user) helper.link_to_member_avatar(user)
end end
it 'returns image tag with avatar class' do it 'returns image tag with avatar class' do
expect(helper).to receive(:image_tag).with(expected, { width: 16, class: ["avatar", "avatar-inline", "s16", "any-avatar-class"], alt: "" }) expect(helper).to receive(:image_tag).with(expected, { width: 16, class: ["avatar", "avatar-inline", "s16", "any-avatar-class"], alt: "", "data-src" => anything })
helper.link_to_member_avatar(user, avatar_class: "any-avatar-class") helper.link_to_member_avatar(user, avatar_class: "any-avatar-class")
end end
......
/* global IssuableContext */
import '~/issuable_context';
import $ from 'jquery';
describe('IssuableContext', () => {
describe('toggleHiddenParticipants', () => {
const event = jasmine.createSpyObj('event', ['preventDefault']);
beforeEach(() => {
spyOn($.fn, 'data').and.returnValue('data');
spyOn($.fn, 'text').and.returnValue('data');
});
afterEach(() => {
gl.lazyLoader = undefined;
});
it('calls loadCheck if lazyLoader is set', () => {
gl.lazyLoader = jasmine.createSpyObj('lazyLoader', ['loadCheck']);
IssuableContext.prototype.toggleHiddenParticipants(event);
expect(gl.lazyLoader.loadCheck).toHaveBeenCalled();
});
it('does not throw if lazyLoader is not defined', () => {
gl.lazyLoader = undefined;
const toggle = IssuableContext.prototype.toggleHiddenParticipants.bind(null, event);
expect(toggle).not.toThrow();
});
});
});
...@@ -32,56 +32,86 @@ import '~/right_sidebar'; ...@@ -32,56 +32,86 @@ import '~/right_sidebar';
}; };
describe('RightSidebar', function() { describe('RightSidebar', function() {
var fixtureName = 'issues/open-issue.html.raw'; describe('fixture tests', () => {
preloadFixtures(fixtureName); var fixtureName = 'issues/open-issue.html.raw';
loadJSONFixtures('todos/todos.json'); preloadFixtures(fixtureName);
loadJSONFixtures('todos/todos.json');
beforeEach(function() {
loadFixtures(fixtureName); beforeEach(function() {
this.sidebar = new Sidebar; loadFixtures(fixtureName);
$aside = $('.right-sidebar'); this.sidebar = new Sidebar;
$page = $('.page-with-sidebar'); $aside = $('.right-sidebar');
$icon = $aside.find('i'); $page = $('.page-with-sidebar');
$toggle = $aside.find('.js-sidebar-toggle'); $icon = $aside.find('i');
return $labelsIcon = $aside.find('.sidebar-collapsed-icon'); $toggle = $aside.find('.js-sidebar-toggle');
}); return $labelsIcon = $aside.find('.sidebar-collapsed-icon');
it('should expand/collapse the sidebar when arrow is clicked', function() { });
assertSidebarState('expanded'); it('should expand/collapse the sidebar when arrow is clicked', function() {
$toggle.click(); assertSidebarState('expanded');
assertSidebarState('collapsed'); $toggle.click();
$toggle.click(); assertSidebarState('collapsed');
assertSidebarState('expanded'); $toggle.click();
}); assertSidebarState('expanded');
it('should float over the page and when sidebar icons clicked', function() { });
$labelsIcon.click(); it('should float over the page and when sidebar icons clicked', function() {
return assertSidebarState('expanded'); $labelsIcon.click();
}); return assertSidebarState('expanded');
it('should collapse when the icon arrow clicked while it is floating on page', function() { });
$labelsIcon.click(); it('should collapse when the icon arrow clicked while it is floating on page', function() {
assertSidebarState('expanded'); $labelsIcon.click();
$toggle.click(); assertSidebarState('expanded');
return assertSidebarState('collapsed'); $toggle.click();
return assertSidebarState('collapsed');
});
it('should broadcast todo:toggle event when add todo clicked', function() {
var todos = getJSONFixture('todos/todos.json');
spyOn(jQuery, 'ajax').and.callFake(function() {
var d = $.Deferred();
var response = todos;
d.resolve(response);
return d.promise();
});
var todoToggleSpy = spyOnEvent(document, 'todo:toggle');
$('.issuable-sidebar-header .js-issuable-todo').click();
expect(todoToggleSpy.calls.count()).toEqual(1);
});
it('should not hide collapsed icons', () => {
[].forEach.call(document.querySelectorAll('.sidebar-collapsed-icon'), (el) => {
expect(el.querySelector('.fa, svg').classList.contains('hidden')).toBeFalsy();
});
});
}); });
it('should broadcast todo:toggle event when add todo clicked', function() { describe('sidebarToggleClicked', () => {
var todos = getJSONFixture('todos/todos.json'); const event = jasmine.createSpyObj('event', ['preventDefault']);
spyOn(jQuery, 'ajax').and.callFake(function() {
var d = $.Deferred(); beforeEach(() => {
var response = todos; spyOn($.fn, 'hasClass').and.returnValue(false);
d.resolve(response); });
return d.promise();
afterEach(() => {
gl.lazyLoader = undefined;
}); });
var todoToggleSpy = spyOnEvent(document, 'todo:toggle'); it('calls loadCheck if lazyLoader is set', () => {
gl.lazyLoader = jasmine.createSpyObj('lazyLoader', ['loadCheck']);
$('.issuable-sidebar-header .js-issuable-todo').click(); Sidebar.prototype.sidebarToggleClicked(event);
expect(todoToggleSpy.calls.count()).toEqual(1); expect(gl.lazyLoader.loadCheck).toHaveBeenCalled();
}); });
it('does not throw if lazyLoader is not defined', () => {
gl.lazyLoader = undefined;
const toggle = Sidebar.prototype.sidebarToggleClicked.bind(null, event);
it('should not hide collapsed icons', () => { expect(toggle).not.toThrow();
[].forEach.call(document.querySelectorAll('.sidebar-collapsed-icon'), (el) => {
expect(el.querySelector('.fa, svg').classList.contains('hidden')).toBeFalsy();
}); });
}); });
}); });
......
require 'spec_helper'
require 'nokogiri'
describe 'shared/issuable/_participants.html.haml' do
let(:project) { create(:project) }
let(:participants) { create_list(:user, 100) }
before do
allow(view).to receive_messages(project: project,
participants: participants)
end
it 'renders lazy loaded avatars' do
render 'shared/issuable/participants'
html = Nokogiri::HTML(rendered)
avatars = html.css('.participants-author img')
avatars.each do |avatar|
expect(avatar[:class]).to include('lazy')
expect(avatar[:src]).to eql(LazyImageTagHelper.placeholder_image)
expect(avatar[:"data-src"]).to match('http://www.gravatar.com/avatar/')
end
end
end
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