mirror of
https://github.com/zulip/zulip.git
synced 2025-10-23 04:52:12 +00:00
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:
committed by
Tim Abbott
parent
b489ccc126
commit
ec3e0caece
@@ -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.
|
||||
|
@@ -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 };
|
||||
|
@@ -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 () {
|
||||
|
@@ -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);
|
||||
}
|
||||
|
||||
|
@@ -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%);
|
||||
}
|
||||
|
||||
|
Reference in New Issue
Block a user