right-sidebar: Enable up and down arrow keys.

This users the new generic functions in stream_list.js to implement a
similar behaviour for the right sidebar (user list).

Fixes #5920.
This commit is contained in:
Florian Jüngermann
2018-02-12 23:31:17 +01:00
committed by Tim Abbott
parent b489ccc126
commit ec3e0caece
5 changed files with 203 additions and 40 deletions

View File

@@ -437,6 +437,57 @@ casper.waitWhileVisible('#stream_filters [data-stream-name="Denmark"]', function
un_narrow();
// User search at the right sidebar
casper.then(function () {
casper.test.info('Search users using right sidebar');
casper.test.assertExists('#user_presences li [data-name="Cordelia Lear"]',
'User Cordelia Lear exists');
casper.test.assertExists('#user_presences li [data-name="King Hamlet"]',
'User King Hamlet exists');
casper.test.assertExists('#user_presences li [data-name="aaron"]',
'User aaron exists');
});
// Enter the search box and test selected suggestion navigation
// Click on search icon
casper.then(function () {
casper.evaluate(function () {
$('#user_filter_icon').expectOne()
.focus()
.trigger($.Event('click'));
});
});
casper.waitForSelector('#user_presences .highlighted_user', function () {
casper.test.info('Suggestion highlighting - initial situation');
casper.test.assertExist('#user_presences li.highlighted_user [data-name="Cordelia Lear"]',
'User Cordelia Lear is selected');
casper.test.assertDoesntExist('#user_presences li.highlighted_user [data-name="King Hamlet"]',
'User King Hamlet is not selected');
casper.test.assertDoesntExist('#user_presences li.highlighted_user [data-name="aaron"]',
'User aaron is not selected');
});
// Use arrow keys to navigate through suggestions
casper.then(function () {
// Down: Cordelia -> Hamlet
casper.sendKeys('.user-list-filter', casper.page.event.key.Down, {keepFocus: true});
// Up: Hamlet -> Cordelia
casper.sendKeys('.user-list-filter', casper.page.event.key.Up, {keepFocus: true});
// Up: Cordelia -> aaron
casper.sendKeys('.user-list-filter', casper.page.event.key.Up, {keepFocus: true});
});
casper.waitForSelector('#user_presences li.highlighted_user [data-name="aaron"]', function () {
casper.test.info('Suggestion highlighting - after arrow key navigation');
casper.test.assertDoesntExist('#user_presences li.highlighted_user [data-name="Cordelia Lear"]',
'User Cordelia Lear not is selected');
casper.test.assertDoesntExist('#user_presences li.highlighted_user [data-name="King Hamlet"]',
'User King Hamlet is not selected');
casper.test.assertExist('#user_presences li.highlighted_user [data-name="aaron"]',
'User aaron is selected');
});
common.then_log_out();
// Run the above queued actions.

View File

@@ -37,6 +37,7 @@ zrequire('util');
zrequire('presence');
zrequire('people');
zrequire('activity');
zrequire('stream_list');
set_global('blueslip', {
log: function () {},
@@ -271,7 +272,31 @@ presence.presence_info[me.user_id] = { status: activity.ACTIVE };
activity.set_user_list_filter();
var user_order = [fred.user_id, jill.user_id, norbert.user_id,
zoe.user_id, alice.user_id, mark.user_id];
var user_count = 6;
// Mock the jquery is func
$('.user-list-filter').is = function (sel) {
if (sel === ':focus') {
return $('.user-list-filter').is_focused();
}
};
// Mock the jquery first func
$('#user_presences li.user_sidebar_entry.narrow-filter').first = function () {
return $('li.user_sidebar_entry[data-user-id="' + user_order[0] + '"]');
};
$('#user_presences li.user_sidebar_entry.narrow-filter').last = function () {
return $('li.user_sidebar_entry[data-user-id="' + user_order[user_count - 1] + '"]');
};
(function test_presence_list_full_update() {
// No element is selected
$('#user_presences li.user_sidebar_entry.narrow-filter.highlighted_user').length = 0;
$('.user-list-filter').focus();
$('#user_presences li.user_sidebar_entry.narrow-filter');
var users = activity.build_user_sidebar();
assert.deepEqual(users, [{
name: 'Fred Flintstone',
@@ -373,35 +398,90 @@ activity.set_user_list_filter();
assert.equal(value.text(), '');
}());
// Mock the jquery is func
$('.user-list-filter').is = function (sel) {
if (sel === ':focus') {
return $('.user-list-filter').is_focused();
}
};
(function test_key_input() {
var sel_index = 0;
// Returns which element is selected
$('#user_presences li.user_sidebar_entry.narrow-filter.highlighted_user')
.expectOne().attr = function () {
return user_order[sel_index];
};
(function test_maybe_select_person() {
// Returns element before selected one
$('#user_presences li.user_sidebar_entry.narrow-filter.highlighted_user')
.expectOne().prev = function () {
if (sel_index === 0) {
// Top, no prev element
return $('div.no_user');
}
return $('li.user_sidebar_entry[data-user-id="' + user_order[sel_index-1] + '"]');
};
// Returns element after selected one
$('#user_presences li.user_sidebar_entry.narrow-filter.highlighted_user')
.expectOne().next = function () {
if (sel_index === user_count - 1) {
// Bottom, no next element
return $('div.no_user');
}
return $('li.user_sidebar_entry[data-user-id="' + user_order[sel_index + 1] + '"]');
};
$('li.user_sidebar_entry[data-user-id="' + fred.user_id + '"]').is = function () {
return true;
};
$('li.user_sidebar_entry[data-user-id="' + mark.user_id + '"]').is = function () {
return true;
};
$('li.user_sidebar_entry[data-user-id="' + alice.user_id + '"]').is = function () {
return true;
};
$('div.no_user').is = function () {
return false;
};
$('#user_presences li.user_sidebar_entry.narrow-filter').length = user_count;
activity.set_user_list_filter_handlers();
// Disable scrolling into place
stream_list.scroll_element_into_container = function () {};
// up
var e = {
keyCode: 38,
stopPropagation: function () {},
preventDefault: function () {},
};
var keydown_handler = $('.user-list-filter').get_on_handler('keydown');
keydown_handler(e);
// Now the last element is selected
sel_index = user_count - 1;
keydown_handler(e);
sel_index = sel_index - 1;
// down
e = {
keyCode: 40,
stopPropagation: function () {},
preventDefault: function () {},
};
keydown_handler(e);
sel_index = sel_index + 1;
keydown_handler(e);
e = {
keyCode: 13,
stopPropagation: function () {},
preventDefault: function () {},
};
$('#user_presences li.user_sidebar_entry').first = function () {
return {
attr: function (attr) {
assert.equal(attr, 'data-user-id');
return 1;
},
};
};
// Enter text and narrow users
$(".user-list-filter").expectOne().val('ali');
narrow.by = function (method, email) {
assert.equal(email, 'alice@zulip.com');
};
compose_actions.start = function () {};
sel_index = 4;
activity.set_user_list_filter_handlers();
var keydown_handler = $('.user-list-filter').get_on_handler('keydown');
keydown_handler(e);
}());
@@ -413,6 +493,12 @@ $('.user-list-filter').is = function (sel) {
click_handler(e);
}());
(function test_focusout_user_filter() {
var e = { };
var click_handler = $('.user-list-filter').get_on_handler('blur');
click_handler(e);
}());
presence.presence_info = {};
presence.presence_info[alice.user_id] = { status: activity.ACTIVE };
presence.presence_info[fred.user_id] = { status: activity.ACTIVE };

View File

@@ -352,6 +352,12 @@ exports.build_user_sidebar = function () {
resize.resize_page_components();
// Highlight top user when searching
$('#user_presences li.user_sidebar_entry.highlighted_user').removeClass('highlighted_user');
if (exports.searching()) {
var all_streams = $('#user_presences li.user_sidebar_entry.narrow-filter');
stream_list.highlight_first(all_streams, 'highlighted_user');
}
return user_info; // for testing
};
@@ -543,8 +549,18 @@ exports.clear_and_hide_search = function () {
}
filter.blur();
$('#user-list .input-append').addClass('notdisplayed');
// Undo highlighting
$('#user_presences li.user_sidebar_entry.highlighted_user').removeClass('highlighted_user');
};
function highlight_first_user() {
if ($('#user_presences li.user_sidebar_entry.narrow-filter.highlighted_user').length === 0) {
// Highlight
var all_streams = $('#user_presences li.user_sidebar_entry.narrow-filter');
stream_list.highlight_first(all_streams, 'highlighted_user');
}
}
exports.initiate_search = function () {
var filter = $('.user-list-filter').expectOne();
var column = $('.user-list-filter').closest(".app-main [class^='column-']");
@@ -558,6 +574,7 @@ exports.initiate_search = function () {
}
}
filter.focus();
highlight_first_user();
};
exports.toggle_filter_displayed = function () {
@@ -568,30 +585,38 @@ exports.toggle_filter_displayed = function () {
}
};
function maybe_select_person(e) {
if (e.keyCode === 13) {
// Enter key was pressed
function keydown_enter_key() {
// Is there at least one user?
if ($('#user_presences li.user_sidebar_entry.narrow-filter').length > 0) {
// There must be a 'highlighted_user' user
var select_user = $('#user_presences li.user_sidebar_entry.narrow-filter.highlighted_user')
.expectOne().attr('data-user-id');
// Prevent a newline from being entered into the soon-to-be-opened composebox
e.preventDefault();
e.stopPropagation();
var email = people.get_person_from_user_id(select_user).email;
narrow.by('pm-with', email, {select_first_unread: true, trigger: 'user sidebar'});
compose_actions.start('private', { trigger: 'sidebar enter key',
private_message_recipient: email});
var topPerson = $('#user_presences li.user_sidebar_entry').first().attr('data-user-id');
var user_list = meta.$user_list_filter;
var search_term = user_list.expectOne().val().trim();
if ((topPerson !== undefined) && (search_term !== '')) {
// undefined if there are no results
var email = people.get_person_from_user_id(topPerson).email;
narrow.by('pm-with', email, {select_first_unread: true, trigger: 'user sidebar'});
compose_actions.start('private', {
trigger: 'sidebar enter key',
private_message_recipient: email});
}
// Clear the user filter
exports.clear_and_hide_search();
}
}
function keydown_user_filter(e) {
stream_list.keydown_filter(e, '#user_presences li.user_sidebar_entry.narrow-filter',
$('#user_presences'), 'highlighted_user', keydown_enter_key);
}
function focus_user_filter(e) {
highlight_first_user();
e.stopPropagation();
}
function focusout_user_filter() {
// Undo highlighting
$('#user_presences li.user_sidebar_entry.highlighted_user').removeClass('highlighted_user');
}
exports.get_filtered_and_sorted_user_ids = function () {
var user_ids;
@@ -615,11 +640,10 @@ exports.set_user_list_filter = function () {
exports.set_user_list_filter_handlers = function () {
meta.$user_list_filter.expectOne()
.on('click', function (e) {
e.stopPropagation();
})
.on('click', focus_user_filter)
.on('input', update_users_for_search)
.on('keydown', maybe_select_person);
.on('keydown', keydown_user_filter)
.on('blur', focusout_user_filter);
};
exports.get_filter_text = function () {

View File

@@ -201,7 +201,8 @@ body.dark-mode #global_filters li:hover,
body.dark-mode #stream_filters li:hover,
body.dark-mode #stream_filters li.highlighted_stream,
body.dark-mode #group-pms li:hover,
body.dark-mode #user_presences li:hover {
body.dark-mode #user_presences li:hover,
body.dark-mode #user_presences li.highlighted_user {
background-color: hsla(136, 25%, 73%, 0.2);
}

View File

@@ -8,7 +8,8 @@
}
#group-pms li:hover,
#user_presences li:hover {
#user_presences li:hover,
#user_presences li.highlighted_user {
background-color: hsl(93, 19%, 88%);
}