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

top_left_corner: Directly use span.unread_count to display unreads.

Browse Source 
In an effort to use a common class to display unread counts across
the app, we simplify the elements used to show unreads and use a
single `span` with `unread_count` class to do so.
This commit is contained in:
Aman Agrawal
2021-04-09 07:20:15 +00:00
committed by Tim Abbott
parent 79bf740dcb
commit 84afc67369
9 changed files with 50 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend_tests/node_tests/pm_list.js
View File

@@ -160,18 +160,16 @@ test("update_dom_with_unread_counts", (override) => {
override(narrow_state, "active", () => true);
const total_value = $.create("total-value-stub");
const total_count = $.create("total-count-stub");
const private_li = $(".top_left_private_messages");
private_li.set_find_results(".count", total_count);
total_count.set_find_results(".value", total_value);
private_li.set_find_results(".unread_count", total_count);
counts = {
private_message_count: 10,
};
pm_list.update_dom_with_unread_counts(counts);
assert.equal(total_value.text(), "10");
assert.equal(total_count.text(), "10");
assert(total_count.visible());
counts = {
@@ -179,7 +177,7 @@ test("update_dom_with_unread_counts", (override) => {
};
pm_list.update_dom_with_unread_counts(counts);
assert.equal(total_value.text(), "");
assert.equal(total_count.text(), "");
assert(!total_count.visible());
});

22
frontend_tests/node_tests/stream_list.js
View File

@@ -49,13 +49,11 @@ const social = {
let num_unread_for_stream;
function create_devel_sidebar_row() {
const devel_value = $.create("devel-value");
const devel_count = $.create("devel-count");
const sidebar_row = $("<devel sidebar row>");
sidebar_row.set_find_results(".count", devel_count);
devel_count.set_find_results(".value", devel_value);
sidebar_row.set_find_results(".unread_count", devel_count);
devel_count.set_parent(sidebar_row);
stub_templates((template_name, data) => {
@@ -66,16 +64,14 @@ function create_devel_sidebar_row() {
num_unread_for_stream = 42;
stream_list.create_sidebar_row(devel);
assert.equal(devel_value.text(), "42");
assert.equal(devel_count.text(), "42");
}
function create_social_sidebar_row() {
const social_value = $.create("social-value");
const social_count = $.create("social-count");
const sidebar_row = $("<social sidebar row>");
sidebar_row.set_find_results(".count", social_count);
social_count.set_find_results(".value", social_value);
sidebar_row.set_find_results(".unread_count", social_count);
social_count.set_parent(sidebar_row);
stub_templates((template_name, data) => {
@@ -86,7 +82,7 @@ function create_social_sidebar_row() {
num_unread_for_stream = 99;
stream_list.create_sidebar_row(social);
assert.equal(social_value.text(), "99");
assert.equal(social_count.text(), "99");
}
function test_ui(label, f) {
@@ -587,17 +583,15 @@ test_ui("separators_only_pinned", () => {
});
test_ui("update_count_in_dom", () => {
function make_elem(elem, count_selector, value_selector) {
function make_elem(elem, count_selector) {
const count = $(count_selector);
const value = $(value_selector);
elem.set_find_results(".count", count);
count.set_find_results(".value", value);
elem.set_find_results(".unread_count", count);
count.set_parent(elem);
return elem;
}
const stream_li = make_elem($("<stream li>"), "<stream-count>", "<stream-value>");
const stream_li = make_elem($("<stream li>"), "<stream-count>");
$("<stream li>").length = 0;
stream_li.addClass("subscription_block");
@@ -628,7 +622,7 @@ test_ui("update_count_in_dom", () => {
stream_count.set(stream_id, 99);
stream_list.update_dom_with_unread_counts(counts);
assert.equal($("<stream-value>").text(), "99");
assert.equal($("<stream-count>").text(), "99");
assert(stream_li.hasClass("stream-with-count"));
});

22
frontend_tests/node_tests/top_left_corner.js
View File

@@ -99,11 +99,9 @@ run_test("narrowing", (override) => {
});
run_test("update_count_in_dom", () => {
function make_elem(elem, count_selector, value_selector) {
function make_elem(elem, count_selector) {
const count = $(count_selector);
const value = $(value_selector);
elem.set_find_results(".count", count);
count.set_find_results(".value", value);
elem.set_find_results(".unread_count", count);
count.set_parent(elem);
return elem;
@@ -114,24 +112,24 @@ run_test("update_count_in_dom", () => {
home_unread_messages: 333,
};
make_elem($(".top_left_mentions"), "<mentioned-count>", "<mentioned-value>");
make_elem($(".top_left_mentions"), "<mentioned-count>");
make_elem($(".top_left_all_messages"), "<home-count>", "<home-value>");
make_elem($(".top_left_all_messages"), "<home-count>");
make_elem($(".top_left_starred_messages"), "<starred-count>", "<starred-value>");
make_elem($(".top_left_starred_messages"), "<starred-count>");
top_left_corner.update_dom_with_unread_counts(counts);
top_left_corner.update_starred_count(444);
assert.equal($("<mentioned-value>").text(), "222");
assert.equal($("<home-value>").text(), "333");
assert.equal($("<starred-value>").text(), "444");
assert.equal($("<mentioned-count>").text(), "222");
assert.equal($("<home-count>").text(), "333");
assert.equal($("<starred-count>").text(), "444");
counts.mentioned_message_count = 0;
top_left_corner.update_dom_with_unread_counts(counts);
top_left_corner.update_starred_count(0);
assert(!$("<mentioned-count>").visible());
assert.equal($("<mentioned-value>").text(), "");
assert.equal($("<starred-value>").text(), "");
assert.equal($("<mentioned-count>").text(), "");
assert.equal($("<starred-count>").text(), "");
});

2
static/js/pm_list.js
View File

@@ -8,9 +8,9 @@ import * as pm_conversations from "./pm_conversations";
import * as pm_list_dom from "./pm_list_dom";
import * as stream_popover from "./stream_popover";
import * as ui from "./ui";
import * as ui_util from "./ui_util";
import * as unread from "./unread";
import * as vdom from "./vdom";
import * as ui_util from "./ui_util";
let prior_dom;
let private_messages_open = false;

2
static/js/top_left_corner.js
View File

@@ -3,8 +3,8 @@ import $ from "jquery";
import * as people from "./people";
import * as pm_list from "./pm_list";
import * as resize from "./resize";
import * as unread_ui from "./unread_ui";
import * as ui_util from "./ui_util";
import * as unread_ui from "./unread_ui";
export function update_starred_count(count) {
const starred_li = $(".top_left_starred_messages");

11
static/js/ui_util.js
View File

@@ -42,15 +42,14 @@ export function convert_enter_to_click(e) {
export function update_unread_count_in_dom(unread_count_elem, count) {
// This function is used to update unread count in top left corner
// elements.
const count_span = unread_count_elem.find(".count");
const value_span = count_span.find(".value");
const unread_count_span = unread_count_elem.find(".unread_count");
if (count === 0) {
count_span.hide();
value_span.text("");
unread_count_span.hide();
unread_count_span.text("");
return;
}
count_span.show();
value_span.text(count);
unread_count_span.show();
unread_count_span.text(count);
}

17
static/styles/app_components.css
View File

@@ -477,3 +477,20 @@ div.overlay {
.tip::before {
content: "\f0a2";
}
/* We are mostly consistent in how we style
unread counts, except for starred messages.
This is the common section.
*/
.unread_count {
float: right;
padding: 0 4px;
height: 16px;
line-height: 16px;
font-size: 12px;
font-weight: normal;
letter-spacing: 0.6px;
border-radius: 4px;
background-color: hsl(105, 2%, 50%);
color: hsl(0, 0%, 100%);
}

13
static/styles/left_sidebar.css
View File

@@ -233,7 +233,7 @@ li.active-sub-filter {
text-align: center;
}
.count {
.top_left_row .unread_count {
margin-right: 20px;
margin-top: 2px;
display: none;
@@ -289,14 +289,6 @@ li.top_left_recent_topics {
font-size: 13px;
}
/* We are mostly consistent in how we style
unread counts, except for starred messages.
This is the common section.
*/
.top_left_all_messages .count,
.top_left_private_messages .count,
.top_left_starred_messages .count,
.top_left_mentions .count,
#stream_filters .count,
.topic-unread-count,
.private_message_count {
@@ -321,9 +313,6 @@ li.top_left_recent_topics {
}
/* These are true "unread" counts. */
.top_left_all_messages .count,
.top_left_private_messages .count,
.top_left_mentions .count,
#stream_filters .count,
.topic-unread-count,
.private_message_count {

16
templates/zerver/app/left_sidebar.html
View File

@@ -9,9 +9,7 @@
</span>
{#- squash whitespace -#}
<span>{{ _('All messages') }}</span>
<span class="count">
<span class="value"></span>
</span>
<span class="unread_count"></span>
</a>
<span class="arrow all-messages-sidebar-menu-icon"><i class="zulip-icon ellipsis-v-solid" aria-hidden="true"></i></span>
</li>
@@ -23,9 +21,7 @@
</span>
{#- squash whitespace -#}
<span>{{ _('Private messages') }}</span>
<span class="count">
<span class="value"></span>
</span>
<span class="unread_count"></span>
</a>
</div>
<div id="private-container" class="scrolling_list" data-simplebar>
@@ -38,9 +34,7 @@
</span>
{#- squash whitespace -#}
<span>{{ _('Mentions') }}</span>
<span class="count">
<span class="value"></span>
</span>
<span class="unread_count"></span>
</a>
</li>
<li class="top_left_starred_messages top_left_row">
@@ -50,9 +44,7 @@
</span>
{#- squash whitespace -#}
<span>{{ _('Starred messages') }}</span>
<span class="count">
<span class="value"></span>
</span>
<span class="unread_count"></span>
</a>
<span class="arrow starred-messages-sidebar-menu-icon"><i class="zulip-icon ellipsis-v-solid" aria-hidden="true"></i></span>
</li>