From f4a111e31451c50a40cbb039b3119bb5c675b1e4 Mon Sep 17 00:00:00 2001 From: m-e-l-u-h-a-n Date: Fri, 26 Feb 2021 13:54:04 +0530 Subject: [PATCH] compose: Add user presence circles in mention and pm typeahead. This commit addresses the problem of user's status visibility to some extent. It adds presence circles, like we have in buddy_list to the typeahead suggestions that are given for mentioning users in messages. Tweaked by tabbott to adjust vertical alignment of group mentions as well. Testing for the changes is done manually in the developement server, and also by updating frontend tests to address these changes. Fixes: #17138 --- .../node_tests/composebox_typeahead.js | 12 ++++++---- frontend_tests/node_tests/typeahead_helper.js | 5 +++++ static/js/typeahead_helper.js | 4 ++++ static/styles/zulip.css | 22 +++++++++++++++++++ static/templates/typeahead_list_item.hbs | 3 +++ 5 files changed, 42 insertions(+), 4 deletions(-) diff --git a/frontend_tests/node_tests/composebox_typeahead.js b/frontend_tests/node_tests/composebox_typeahead.js index 017a3e3908..592c42c577 100644 --- a/frontend_tests/node_tests/composebox_typeahead.js +++ b/frontend_tests/node_tests/composebox_typeahead.js @@ -50,6 +50,10 @@ rewiremock.enable(); const emoji = zrequire("emoji", "shared/js/emoji"); const typeahead = zrequire("typeahead", "shared/js/typeahead"); const compose_state = zrequire("compose_state"); +zrequire("user_status"); +zrequire("presence"); +zrequire("buddy_data"); +zrequire("pm_conversations"); zrequire("templates"); const typeahead_helper = zrequire("typeahead_helper"); const people = zrequire("people"); @@ -695,17 +699,17 @@ run_test("initialize", () => { // corresponding parts in bold. options.query = "oth"; actual_value = options.highlighter(othello); - expected_value = ` \nOthello, the Moor of Venice`; + expected_value = ` \n \nOthello, the Moor of Venice`; assert.equal(actual_value, expected_value); options.query = "Lear"; actual_value = options.highlighter(cordelia); - expected_value = ` \nCordelia Lear`; + expected_value = ` \n \nCordelia Lear`; assert.equal(actual_value, expected_value); options.query = "othello@zulip.com, co"; actual_value = options.highlighter(cordelia); - expected_value = ` \nCordelia Lear`; + expected_value = ` \n \nCordelia Lear`; assert.equal(actual_value, expected_value); function matcher(query, person) { @@ -871,7 +875,7 @@ run_test("initialize", () => { // content_highlighter. fake_this = {completing: "mention", token: "othello"}; actual_value = options.highlighter.call(fake_this, othello); - expected_value = ` \nOthello, the Moor of Venice`; + expected_value = ` \n \nOthello, the Moor of Venice`; assert.equal(actual_value, expected_value); fake_this = {completing: "mention", token: "hamletcharacters"}; diff --git a/frontend_tests/node_tests/typeahead_helper.js b/frontend_tests/node_tests/typeahead_helper.js index 5545ece633..573e25e529 100644 --- a/frontend_tests/node_tests/typeahead_helper.js +++ b/frontend_tests/node_tests/typeahead_helper.js @@ -18,6 +18,11 @@ const recent_senders = zrequire("recent_senders"); const peer_data = zrequire("peer_data"); const people = zrequire("people"); const stream_data = zrequire("stream_data"); +zrequire("narrow"); +zrequire("user_status"); +zrequire("presence"); +zrequire("buddy_data"); +zrequire("hash_util"); const emoji = zrequire("emoji", "shared/js/emoji"); const pygments_data = zrequire("pygments_data", "generated/pygments_data.json"); diff --git a/static/js/typeahead_helper.js b/static/js/typeahead_helper.js index b215c4fdc4..ba7b075291 100644 --- a/static/js/typeahead_helper.js +++ b/static/js/typeahead_helper.js @@ -6,6 +6,7 @@ import * as emoji from "../shared/js/emoji"; import * as typeahead from "../shared/js/typeahead"; import render_typeahead_list_item from "../templates/typeahead_list_item.hbs"; +import * as buddy_data from "./buddy_data"; import * as people from "./people"; import * as pm_conversations from "./pm_conversations"; import * as recent_senders from "./recent_senders"; @@ -75,9 +76,11 @@ export function render_typeahead_item(args) { const rendered = {persons: new Map(), streams: new Map(), user_groups: new Map()}; export function render_person(person) { + const user_circle_class = buddy_data.get_user_circle_class(person.user_id); if (person.special_item_text) { return render_typeahead_item({ primary: person.special_item_text, + user_circle_class, is_person: true, }); } @@ -89,6 +92,7 @@ export function render_person(person) { const typeahead_arguments = { primary: person.full_name, img_src: avatar_url, + user_circle_class, is_person: true, }; typeahead_arguments.secondary = settings_data.email_for_user_settings(person); diff --git a/static/styles/zulip.css b/static/styles/zulip.css index 8c36d9e80f..e9debbcc5d 100644 --- a/static/styles/zulip.css +++ b/static/styles/zulip.css @@ -620,6 +620,19 @@ strong { background-repeat: repeat-x; filter: progid:dximagetransform.microsoft.gradient(startcolorstr='hsla(328, 100%, 50%, 0.8)', endcolorstr='hsla(332, 100%, 50%, 0.7)', gradienttype=0); } + /* styles defined for user_circle here only deal with positioning of user_presence_circle + in typeahead list in order to ensure they are renderred correctly in in all screen sizes. + Most of the style rules related to color, gradient etc. which are generally common throughout + the app are defined in user_circles.css and are not overridden here. */ + .user_circle { + width: 8px; + height: 8px; + margin: 0 5px 0 -6px; + position: relative; + top: 6px; + right: 7px; + display: inline-block; + } } } @@ -635,6 +648,10 @@ strong { background-repeat: repeat-x; outline: 0; filter: progid:dximagetransform.microsoft.gradient(startcolorstr='hsla(328, 100%, 50%, 0.8)', endcolorstr='hsla(332, 100%, 50%, 0.7)', gradienttype=0); + + .user_circle_empty { + border-color: hsl(0, 0%, 25%); + } } .active > a:hover { @@ -2035,6 +2052,11 @@ div.focused_table { /* For FontAwesome icons used in place of images for some users. */ font-size: 19px; text-align: center; + + &.fa-group { + margin-left: 9px; + top: 3px; + } } nav { diff --git a/static/templates/typeahead_list_item.hbs b/static/templates/typeahead_list_item.hbs index d66d22f21e..f2d43eb88e 100644 --- a/static/templates/typeahead_list_item.hbs +++ b/static/templates/typeahead_list_item.hbs @@ -7,6 +7,9 @@    {{else}} {{#if is_person}} + {{#if user_circle_class}} + + {{/if}} {{#if has_image}} {{else}}