paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-11-03 13:33:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

user_circles: Introduce status-based hyphenated classes.

Browse Source
This commit is contained in:
Karl Stolley
2024-12-06 14:03:42 -05:00
committed by Tim Abbott
parent b641fe2912
commit 67a67897f9
22 changed files with 60 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/activity_ui.ts
View File

@@ -65,7 +65,7 @@ export let update_presence_indicators = (): void => {
assert(!Number.isNaN(user_id));
const user_circle_class = buddy_data.get_user_circle_class(user_id);
$(this)
.removeClass("user_circle_empty user_circle_green user_circle_idle")
.removeClass("user-circle-active user-circle-idle user-circle-offline")
.addClass(user_circle_class);
});
};

6
web/src/buddy_data.ts
View File

@@ -56,11 +56,11 @@ export function get_user_circle_class(user_id: number): string {
switch (status) {
case "active":
return "user_circle_green";
return "user-circle-active";
case "idle":
return "user_circle_idle";
return "user-circle-idle";
default:
return "user_circle_empty";
return "user-circle-offline";
}
}

4
web/styles/inbox.css
View File

@@ -256,7 +256,7 @@
}
}
.user_circle {
.user-circle {
/* size of the user activity circle */
/* 6px at 15px/1em */
min-width: 0.4em;
@@ -295,7 +295,7 @@
}
.fake-collapse-button,
.inbox-topic-container .user_circle {
.inbox-topic-container .user-circle {
grid-area: match_topic_and_dm_start;
}

2
web/styles/left_sidebar.css
View File

@@ -1491,7 +1491,7 @@ li.topic-list-item {
grid-area: action-heading;
}
.user_circle {
.user-circle {
width: var(--length-user-status-circle);
height: var(--length-user-status-circle);

4
web/styles/popovers.css
View File

@@ -1094,7 +1094,7 @@ ul.popover-group-menu-member-list {
white-space: nowrap;
}
.user_circle_empty {
.user-circle-offline {
background-color: var(--color-background-popover-menu);
border-color: hsl(0deg 0% 50%);
}
@@ -1155,7 +1155,7 @@ ul.popover-group-menu-member-list {
border-radius: 50%;
}
.user_circle_empty {
.user-circle-offline {
background-color: var(--color-background-popover-menu);
border-color: hsl(0deg 0% 50%);
}

2
web/styles/recent_view.css
View File

@@ -517,7 +517,7 @@
opacity: 0.6;
}
.user_circle {
.user-circle {
min-width: var(
--length-user-status-circle-recent-conversations
);

10
web/styles/right_sidebar.css
View File

@@ -143,13 +143,13 @@ $user_status_emoji_width: 24px;
background-color: var(--color-buddy-list-highlighted-user);
box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
.user_circle {
.user-circle {
outline: 1px solid var(--color-buddy-list-highlighted-user);
}
}
}
.user_circle {
.user-circle {
width: var(--length-user-status-circle);
height: var(--length-user-status-circle);
grid-area: starting-anchor-element;
@@ -164,7 +164,7 @@ $user_status_emoji_width: 24px;
}
}
.user_sidebar_entry.with_avatar .user_circle {
.user_sidebar_entry.with_avatar .user-circle {
display: inline-block;
position: absolute;
width: 0.5em;
@@ -172,7 +172,7 @@ $user_status_emoji_width: 24px;
top: 1.7em;
left: 1.7em;
&.user_circle_idle {
&.user-circle-idle {
background: linear-gradient(
to bottom,
var(--color-background) 50%,
@@ -180,7 +180,7 @@ $user_status_emoji_width: 24px;
);
}
&.user_circle_empty {
&.user-circle-offline {
display: none;
}
}

4
web/styles/typeahead.css
View File

@@ -51,11 +51,11 @@
outline: 0;
}
/* styles defined for user_circle here only deal with positioning of user_presence_circle
/* styles defined for user-circle here only deal with positioning of user presence circles
in typeahead list in order to ensure they are rendered 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 {
.user-circle {
width: var(--length-user-status-circle);
height: var(--length-user-status-circle);
position: relative;

14
web/styles/user_circles.css
View File

@@ -1,20 +1,20 @@
.user_circle_green,
.user_circle_idle,
.user_circle_empty {
.user-circle-active,
.user-circle-idle,
.user-circle-offline {
border-radius: 50%;
border: 1px solid;
}
.user_sidebar_entry.with_avatar .user_circle {
.user_sidebar_entry.with_avatar .user-circle {
outline: 1px solid var(--color-background);
}
.user_circle_green {
.user-circle-active {
background-color: var(--color-user-circle-active);
border-color: var(--color-user-circle-active);
}
.user_circle_idle {
.user-circle-idle {
border-color: var(--color-user-circle-idle);
background: linear-gradient(
to bottom,
@@ -23,7 +23,7 @@
);
}
.user_circle_empty {
.user-circle-offline {
background-color: transparent;
border-color: hsl(0deg 0% 50%);
}

4
web/templates/inbox_view/inbox_row.hbs
View File

@@ -14,7 +14,7 @@
{{else if is_group}}
<span class="zulip-icon zulip-icon-triple-users" aria-hidden="true"></span>
{{else}}
<span class="{{user_circle_class}} user_circle" data-presence-indicator-user-id="{{user_ids_string}}"></span>
<span class="{{user_circle_class}} user-circle" data-presence-indicator-user-id="{{user_ids_string}}"></span>
{{/if}}
<span class="recipients_name">{{{rendered_dm_with}}}</span>
</span>
@@ -26,7 +26,7 @@
</div>
{{else if is_topic}}
{{!-- Invisible user circle element for alignment of topic text with DM user name --}}
<span class="user_circle_green user_circle invisible"></span>
<span class="user-circle-active user-circle invisible"></span>
<div class="inbox-topic-name">
<a tabindex="-1" href="{{topic_url}}">{{topic_name}}</a>
</div>

2
web/templates/pm_list_item.hbs
View File

@@ -6,7 +6,7 @@
{{else if is_bot}}
<span class="conversation-partners-icon zulip-icon zulip-icon-bot" aria-hidden="true"></span>
{{else}}
<span class="conversation-partners-icon {{user_circle_class}} user_circle"></span>
<span class="conversation-partners-icon {{user_circle_class}} user-circle"></span>
{{/if}}
<a href="{{url}}" class="conversation-partners">

2
web/templates/popovers/navbar/navbar_personal_menu_popover.hbs
View File

@@ -5,7 +5,7 @@
<img class="avatar-image{{#if user_is_guest}} guest-avatar{{/if}}" src="{{user_avatar}}"/>
{{#if is_active }}
<span class="status-circle {{user_circle_class}} user_circle hidden-for-spectators" data-tippy-placement="bottom" data-tippy-content="{{user_last_seen_time_status}}"></span>
<span class="status-circle {{user_circle_class}} user-circle hidden-for-spectators" data-tippy-placement="bottom" data-tippy-content="{{user_last_seen_time_status}}"></span>
{{/if}}
</div>

2
web/templates/popovers/user_card/user_card_popover.hbs
View File

@@ -3,7 +3,7 @@
<div class="popover-menu-user-avatar-container">
<img class="popover-menu-user-avatar{{#if user_is_guest}} guest-avatar{{/if}}" src="{{user_avatar}}" />
{{#if (and is_active (not is_bot))}}
<div class="popover-menu-user-presence user_circle {{user_circle_class}} hidden-for-spectators" data-presence-indicator-user-id="{{user_id}}"></div>
<div class="popover-menu-user-presence user-circle {{user_circle_class}} hidden-for-spectators" data-presence-indicator-user-id="{{user_id}}"></div>
{{/if}}
</div>
<div class="popover-menu-user-info">

2
web/templates/popovers/user_group_info_popover.hbs
View File

@@ -36,7 +36,7 @@
{{#if is_bot}}
<i class="zulip-icon zulip-icon-bot" aria-hidden="true"></i>
{{else}}
<span class="user_circle {{user_circle_class}} popover_user_presence hidden-for-spectators" data-tippy-content="{{user_last_seen_time_status}}"></span>
<span class="user-circle {{user_circle_class}} popover_user_presence hidden-for-spectators" data-tippy-content="{{user_last_seen_time_status}}"></span>
{{/if}}
<span class="popover-group-menu-member-name">{{full_name}}</span>
</li>

6
web/templates/presence_row.hbs
View File

@@ -1,7 +1,7 @@
<li data-user-id="{{user_id}}" data-name="{{name}}" class="user_sidebar_entry {{#if user_list_style.WITH_AVATAR}}with_avatar{{/if}} {{#if has_status_text}}with_status{{/if}} {{#if is_current_user}}user_sidebar_entry_me {{/if}} narrow-filter {{#if faded}} user-fade {{/if}}">
<div class="selectable_sidebar_block">
{{#if user_list_style.WITH_STATUS}}
<span class="{{user_circle_class}} user_circle"></span>
<span class="{{user_circle_class}} user-circle"></span>
<a class="user-presence-link" href="{{href}}">
<div class="user-name-and-status-wrapper">
<div class="user-name-and-status-emoji">
@@ -14,7 +14,7 @@
{{else if user_list_style.WITH_AVATAR}}
<div class="user-profile-picture avatar-preload-background">
<img loading="lazy" src="{{profile_picture}}"/>
<span class="{{user_circle_class}} user_circle"></span>
<span class="{{user_circle_class}} user-circle"></span>
</div>
<a class="user-presence-link" href="{{href}}">
<div class="user-name-and-status-wrapper">
@@ -26,7 +26,7 @@
</div>
</a>
{{else}}
<span class="{{user_circle_class}} user_circle"></span>
<span class="{{user_circle_class}} user-circle"></span>
<a class="user-presence-link" href="{{href}}">
<div class="user-name-and-status-emoji">
{{> user_full_name .}}

2
web/templates/recent_view_row.hbs
View File

@@ -21,7 +21,7 @@
{{else if is_bot}}
<span class="zulip-icon zulip-icon-bot" aria-hidden="true"></span>
{{else}}
<span class="{{user_circle_class}} user_circle" data-presence-indicator-user-id="{{user_ids_string}}"></span>
<span class="{{user_circle_class}} user-circle" data-presence-indicator-user-id="{{user_ids_string}}"></span>
{{/if}}
</span>
</div>

2
web/templates/typeahead_list_item.hbs
View File

@@ -6,7 +6,7 @@
{{/if}}
{{else if is_person}}
{{#if user_circle_class}}
<span class="{{user_circle_class}} user_circle"></span>
<span class="{{user_circle_class}} user-circle"></span>
{{/if}}
{{#if has_image}}
<img class="typeahead-image" src="{{ img_src }}" />

2
web/templates/user_profile_modal.hbs
View File

@@ -6,7 +6,7 @@
{{#unless is_bot}}
{{#if is_active}}
<div class="tippy-zulip-tooltip" data-tippy-content="{{last_seen}}">
<span class="{{user_circle_class}} user_circle user_profile_presence" data-presence-indicator-user-id="{{user_id}}"></span>
<span class="{{user_circle_class}} user-circle user_profile_presence" data-presence-indicator-user-id="{{user_id}}"></span>
</div>
{{else}}
<div>

18
web/tests/activity.test.cjs
View File

@@ -502,7 +502,7 @@ test("insert_one_user_into_empty_list", ({override, mock_template}) => {
is_current_user: false,
num_unread: 0,
profile_picture: "/avatar/1",
user_circle_class: "user_circle_green",
user_circle_class: "user-circle-active",
status_emoji_info: undefined,
status_text: undefined,
has_status_text: false,
@@ -548,14 +548,14 @@ test("insert_one_user_into_empty_list", ({override, mock_template}) => {
peer_data.set_subscribers(rome_sub.stream_id, [alice.user_id]);
activity_ui.redraw_user(alice.user_id);
assert.ok($users_matching_view_appended.selector.includes('data-user-id="1"'));
assert.ok($users_matching_view_appended.selector.includes("user_circle_green"));
assert.ok($users_matching_view_appended.selector.includes("user-circle-active"));
clear_buddy_list(buddy_list);
buddy_list_add_other_user(alice.user_id, $alice_stub);
peer_data.set_subscribers(rome_sub.stream_id, []);
activity_ui.redraw_user(alice.user_id);
assert.ok($other_users_appended.selector.includes('data-user-id="1"'));
assert.ok($other_users_appended.selector.includes("user_circle_green"));
assert.ok($other_users_appended.selector.includes("user-circle-active"));
});
test("insert_alice_then_fred", ({override, override_rewire, mock_template}) => {
@@ -570,11 +570,11 @@ test("insert_alice_then_fred", ({override, override_rewire, mock_template}) => {
activity_ui.redraw_user(alice.user_id);
assert.ok($other_users_appended.selector.includes('data-user-id="1"'));
assert.ok($other_users_appended.selector.includes("user_circle_green"));
assert.ok($other_users_appended.selector.includes("user-circle-active"));
activity_ui.redraw_user(fred.user_id);
assert.ok($other_users_appended.selector.includes('data-user-id="2"'));
assert.ok($other_users_appended.selector.includes("user_circle_green"));
assert.ok($other_users_appended.selector.includes("user-circle-active"));
});
test("insert_fred_then_alice_then_rename, both as users matching view", ({
@@ -598,7 +598,7 @@ test("insert_fred_then_alice_then_rename, both as users matching view", ({
activity_ui.redraw_user(fred.user_id);
assert.ok($users_matching_view_appended.selector.includes('data-user-id="2"'));
assert.ok($users_matching_view_appended.selector.includes("user_circle_green"));
assert.ok($users_matching_view_appended.selector.includes("user-circle-active"));
let $inserted;
$fred_stub.before = ($element) => {
@@ -612,7 +612,7 @@ test("insert_fred_then_alice_then_rename, both as users matching view", ({
activity_ui.redraw_user(alice.user_id);
assert.ok($inserted.selector.includes('data-user-id="1"'));
assert.ok($inserted.selector.includes("user_circle_green"));
assert.ok($inserted.selector.includes("user-circle-active"));
// Next rename fred to Aaron.
const fred_with_new_name = {
@@ -656,7 +656,7 @@ test("insert_fred_then_alice_then_rename, both as other users", ({
activity_ui.redraw_user(fred.user_id);
assert.ok($other_users_appended.selector.includes('data-user-id="2"'));
assert.ok($other_users_appended.selector.includes("user_circle_green"));
assert.ok($other_users_appended.selector.includes("user-circle-active"));
let $inserted;
$fred_stub.before = ($element) => {
@@ -670,7 +670,7 @@ test("insert_fred_then_alice_then_rename, both as other users", ({
activity_ui.redraw_user(alice.user_id);
assert.ok($inserted.selector.includes('data-user-id="1"'));
assert.ok($inserted.selector.includes("user_circle_green"));
assert.ok($inserted.selector.includes("user-circle-active"));
// Next rename fred to Aaron.
const fred_with_new_name = {

22
web/tests/buddy_data.test.cjs
View File

@@ -139,35 +139,35 @@ test("user_circle, level", ({override}) => {
add_canned_users();
set_presence(selma.user_id, "active");
assert.equal(buddy_data.get_user_circle_class(selma.user_id), "user_circle_green");
assert.equal(buddy_data.get_user_circle_class(selma.user_id), "user-circle-active");
assert.equal(buddy_data.level(selma.user_id), 1);
set_presence(selma.user_id, "idle");
assert.equal(buddy_data.get_user_circle_class(selma.user_id), "user_circle_idle");
assert.equal(buddy_data.get_user_circle_class(selma.user_id), "user-circle-idle");
assert.equal(buddy_data.level(selma.user_id), 2);
set_presence(selma.user_id, "offline");
assert.equal(buddy_data.get_user_circle_class(selma.user_id), "user_circle_empty");
assert.equal(buddy_data.get_user_circle_class(selma.user_id), "user-circle-offline");
assert.equal(buddy_data.level(selma.user_id), 3);
set_presence(me.user_id, "active");
assert.equal(buddy_data.get_user_circle_class(me.user_id), "user_circle_green");
assert.equal(buddy_data.get_user_circle_class(me.user_id), "user-circle-active");
assert.equal(buddy_data.level(me.user_id), 0);
override(user_settings, "presence_enabled", false);
assert.equal(buddy_data.get_user_circle_class(me.user_id), "user_circle_empty");
assert.equal(buddy_data.get_user_circle_class(me.user_id), "user-circle-offline");
assert.equal(buddy_data.level(me.user_id), 0);
override(user_settings, "presence_enabled", true);
assert.equal(buddy_data.get_user_circle_class(me.user_id), "user_circle_green");
assert.equal(buddy_data.get_user_circle_class(me.user_id), "user-circle-active");
assert.equal(buddy_data.level(me.user_id), 0);
set_presence(fred.user_id, "idle");
assert.equal(buddy_data.get_user_circle_class(fred.user_id), "user_circle_idle");
assert.equal(buddy_data.get_user_circle_class(fred.user_id), "user-circle-idle");
assert.equal(buddy_data.level(fred.user_id), 2);
set_presence(fred.user_id, undefined);
assert.equal(buddy_data.get_user_circle_class(fred.user_id), "user_circle_empty");
assert.equal(buddy_data.get_user_circle_class(fred.user_id), "user-circle-offline");
assert.equal(buddy_data.level(fred.user_id), 3);
});
@@ -633,7 +633,7 @@ test("get_items_for_users", ({override}) => {
status_emoji_info,
status_text: undefined,
has_status_text: false,
user_circle_class: "user_circle_green",
user_circle_class: "user-circle-active",
user_id: 1001,
user_list_style,
should_add_guest_user_indicator: false,
@@ -647,7 +647,7 @@ test("get_items_for_users", ({override}) => {
status_emoji_info,
status_text: undefined,
has_status_text: false,
user_circle_class: "user_circle_empty",
user_circle_class: "user-circle-offline",
user_id: 1002,
user_list_style,
should_add_guest_user_indicator: false,
@@ -661,7 +661,7 @@ test("get_items_for_users", ({override}) => {
status_emoji_info,
status_text: undefined,
has_status_text: false,
user_circle_class: "user_circle_empty",
user_circle_class: "user-circle-offline",
user_id: 1003,
user_list_style,
should_add_guest_user_indicator: false,

2
web/tests/composebox_typeahead.test.cjs
View File

@@ -1190,7 +1190,7 @@ test("initialize", ({override, override_rewire, mock_template}) => {
ct.get_or_set_token_for_testing("othello");
actual_value = options.highlighter_html(othello_item);
expected_value =
` <span class="user_circle_empty user_circle"></span>\n` +
` <span class="user-circle-offline user-circle"></span>\n` +
` <img class="typeahead-image" src="/avatar/${othello.user_id}" />\n` +
'<div class="typeahead-text-container">\n' +
' <strong class="typeahead-strong-section">Othello, the Moor of Venice</strong> <span class="autocomplete_secondary">othello@zulip.com</span>' +

6
web/tests/pm_list_data.test.cjs
View File

@@ -118,7 +118,7 @@ test("get_conversations", ({override}) => {
recipients: "Me Myself",
unread: 1,
url: "#narrow/dm/103-Me-Myself",
user_circle_class: "user_circle_empty",
user_circle_class: "user-circle-offline",
user_ids_string: "103",
status_emoji_info: {
emoji_code: "20",
@@ -161,7 +161,7 @@ test("get_conversations", ({override}) => {
is_active: true,
url: "#narrow/dm/106-Iago",
status_emoji_info: {emoji_code: "20"},
user_circle_class: "user_circle_empty",
user_circle_class: "user-circle-offline",
is_group: false,
is_bot: false,
});
@@ -200,7 +200,7 @@ test("get_conversations bot", ({override}) => {
is_active: false,
url: "#narrow/dm/314-Outgoing-webhook",
status_emoji_info: undefined,
user_circle_class: "user_circle_empty",
user_circle_class: "user-circle-offline",
is_group: false,
is_bot: true,
},