Mirror
/
zulip
mirror of https://github.com/zulip/zulip.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

left_sidebar: Refactor left_sidebar.hbs structures for readability. 

This commit renames the classes and IDs in the views area
(formerly global filters) to a set of flexible values all
prefixed in some way with `left-sidebar-navigation`.

This is meant to make the styles and structures in the area
more readable, while also keeping things flexible into the
future as this area's elements change.

Co-Authored-By: Hardik Dharmani <Ddharmani99@gmail.com>
This commit is contained in:
Karl Stolley 2023-10-10 14:00:28 -05:00 committed by Tim Abbott
parent 7e776b9c76
commit fd0dd3acd8
7 changed files with 35 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/e2e-tests/stars.test.ts
View File

@ -28,7 +28,7 @@ async function toggle_test_star_message(page: Page): Promise<void> {
}
async function test_narrow_to_starred_messages(page: Page): Promise<void> {
await page.click('#global_filters a[href^="#narrow/is/starred"]');
await page.click('#left-sidebar-navigation-list a[href^="#narrow/is/starred"]');
await common.check_messages_sent(page, "zfilt", [["Verona > stars", [message]]]);
// Go back to all messages narrow.

6
web/src/click_handlers.js
View File

@ -627,7 +627,9 @@ export function initialize() {
// MISC
{
const sel = ["#stream_filters", "#global_filters", "#user_presences"].join(", ");
const sel = ["#stream_filters", "#left-sidebar-navigation-list", "#user_presences"].join(
", ",
);
$(sel).on("click", "a", function () {
this.blur();
@ -801,7 +803,7 @@ export function initialize() {
// End Webathena code
// disable the draggability for left-sidebar components
$("#stream_filters, #global_filters").on("dragstart", (e) => {
$("#stream_filters, #left-sidebar-navigation-list").on("dragstart", (e) => {
e.target.blur();
return false;
});

2
web/src/list_util.ts
View File

@ -2,7 +2,7 @@ import $ from "jquery";
const list_selectors = [
"#stream_filters",
"#global_filters",
"#left-sidebar-navigation-list",
"#user_presences",
"#send_later_options",
];

6
web/src/resize.js
View File

@ -18,9 +18,9 @@ function get_new_heights() {
res.stream_filters_max_height =
viewport_height -
Number.parseInt($("#left-sidebar").css("paddingTop"), 10) -
Number.parseInt($(".narrows_panel").css("marginTop"), 10) -
Number.parseInt($(".narrows_panel").css("marginBottom"), 10) -
($("#global_filters").outerHeight(true) ?? 0) -
Number.parseInt($("#left-sidebar-navigation-area").css("marginTop"), 10) -
Number.parseInt($("#left-sidebar-navigation-area").css("marginBottom"), 10) -
($("#left-sidebar-navigation-list").outerHeight(true) ?? 0) -
($("#private_messages_sticky_header").outerHeight(true) ?? 0);
// Don't let us crush the stream sidebar completely out of view

14
web/styles/left_sidebar.css
View File

@ -54,13 +54,13 @@ $before_unread_count_padding: 3px;
cursor: pointer;
}
#global_filters .filter-icon i {
#left-sidebar-navigation-list .filter-icon i {
padding-right: 3px;
color: var(--color-global-filter-icon);
color: var(--color-left-sidebar-navigation-icon);
}
#stream_filters,
#global_filters {
#left-sidebar-navigation-list {
margin-right: 12px;
}
@ -203,7 +203,7 @@ li.show-more-topics {
}
}
.narrows_panel {
.left-sidebar-navigation-area {
& li a {
margin-top: 1px;
@ -485,14 +485,14 @@ li.active-sub-filter {
}
}
#global_filters {
#left-sidebar-navigation-list {
margin-bottom: $sections_vertical_gutter;
.global-filter-container {
.left-sidebar-navigation-label-container {
display: flex;
padding-right: 20px;
.global-filter-name {
.left-sidebar-navigation-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;

6
web/styles/zulip.css
View File

@ -212,7 +212,7 @@ body {
--color-message-star-action: hsl(41deg 100% 47% / 100%);
/* The gray on the filter icons is the same as
what's set on ul.filters, but with 70% opacity. */
--color-global-filter-icon: hsl(0deg 0% 20% / 70%);
--color-left-sidebar-navigation-icon: hsl(0deg 0% 20% / 70%);
--color-vdots-hint: hsl(0deg 0% 0% / 30%);
--color-vdots-visible: hsl(0deg 0% 0% / 53%);
--color-vdots-hover: hsl(0deg 0% 0%);
@ -311,7 +311,7 @@ body {
--color-icon-bot: hsl(180deg 5% 50% / 100%);
--color-message-action-visible: hsl(217deg 41% 90% / 50%);
--color-message-action-interactive: hsl(217deg 41% 90% / 100%);
--color-global-filter-icon: hsl(0deg 0% 100% / 56%);
--color-left-sidebar-navigation-icon: hsl(0deg 0% 100% / 56%);
--color-vdots-hint: hsl(0deg 0% 100% / 30%);
--color-vdots-visible: hsl(236deg 33% 80%);
--color-vdots-hover: hsl(0deg 0% 100%);
@ -3112,7 +3112,7 @@ select.invite-as {
}
}
.narrows_panel {
.left-sidebar-navigation-area {
margin-top: 10px;
}
}

32
web/templates/left_sidebar.hbs
View File

@ -1,74 +1,74 @@
<div class="left-sidebar" id="left-sidebar" role="navigation">
<div class="narrows_panel">
<ul id="global_filters" class="filters">
<div id="left-sidebar-navigation-area" class="left-sidebar-navigation-area">
<ul id="left-sidebar-navigation-list" class="left-sidebar-navigation-list filters">
<li class="top_left_inbox top_left_row hidden-for-spectators">
<a href="#inbox" class="tippy-left-sidebar-tooltip global-filter-container" data-tooltip-template-id="inbox-tooltip-template">
<a href="#inbox" class="tippy-left-sidebar-tooltip left-sidebar-navigation-label-container" data-tooltip-template-id="inbox-tooltip-template">
<span class="filter-icon">
<i class="zulip-icon zulip-icon-inbox" aria-hidden="true"></i>
</span>
{{~!-- squash whitespace --~}}
<span class="global-filter-name">{{t 'Inbox' }}</span>
<span class="left-sidebar-navigation-label">{{t 'Inbox' }}</span>
<span class="unread_count"></span>
</a>
<span class="arrow sidebar-menu-icon inbox-sidebar-menu-icon hidden-for-spectators"><i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i></span>
</li>
<li class="top_left_recent_view top_left_row">
<a href="#recent" class="tippy-left-sidebar-tooltip global-filter-container" data-tooltip-template-id="recent-conversations-tooltip-template">
<a href="#recent" class="tippy-left-sidebar-tooltip left-sidebar-navigation-label-container" data-tooltip-template-id="recent-conversations-tooltip-template">
<span class="filter-icon">
<i class="fa fa-clock-o" aria-hidden="true"></i>
</span>
{{~!-- squash whitespace --~}}
<span class="global-filter-name">{{t 'Recent conversations' }}</span>
<span class="left-sidebar-navigation-label">{{t 'Recent conversations' }}</span>
</a>
</li>
<li class="top_left_all_messages top_left_row">
<a href="#all_messages" class="home-link tippy-left-sidebar-tooltip global-filter-container" data-tooltip-template-id="all-message-tooltip-template">
<a href="#all_messages" class="home-link tippy-left-sidebar-tooltip left-sidebar-navigation-label-container" data-tooltip-template-id="all-message-tooltip-template">
<span class="filter-icon">
<i class="fa fa-align-left" aria-hidden="true"></i>
</span>
{{~!-- squash whitespace --~}}
<span class="global-filter-name">{{t 'All messages' }}</span>
<span class="left-sidebar-navigation-label">{{t 'All messages' }}</span>
</a>
</li>
<li class="top_left_mentions top_left_row hidden-for-spectators">
<a class="global-filter-container" href="#narrow/is/mentioned">
<a class="left-sidebar-navigation-label-container" href="#narrow/is/mentioned">
<span class="filter-icon">
<i class="fa fa-at" aria-hidden="true"></i>
</span>
{{~!-- squash whitespace --~}}
<span class="global-filter-name">{{t 'Mentions' }}</span>
<span class="left-sidebar-navigation-label">{{t 'Mentions' }}</span>
<span class="unread_count"></span>
</a>
</li>
<li class="top_left_starred_messages top_left_row hidden-for-spectators">
<a class="global-filter-container" href="#narrow/is/starred">
<a class="left-sidebar-navigation-label-container" href="#narrow/is/starred">
<span class="filter-icon">
<i class="fa fa-star" aria-hidden="true"></i>
</span>
{{~!-- squash whitespace --~}}
<span class="global-filter-name">{{t 'Starred messages' }}</span>
<span class="left-sidebar-navigation-label">{{t 'Starred messages' }}</span>
<span class="unread_count"></span>
</a>
<span class="arrow sidebar-menu-icon starred-messages-sidebar-menu-icon"><i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i></span>
</li>
<li class="top_left_drafts top_left_row hidden-for-spectators">
<a href="#drafts" class="tippy-left-sidebar-tooltip global-filter-container" data-tooltip-template-id="drafts-tooltip-template">
<a href="#drafts" class="tippy-left-sidebar-tooltip left-sidebar-navigation-label-container" data-tooltip-template-id="drafts-tooltip-template">
<span class="filter-icon">
<i class="fa fa-pencil" aria-hidden="true"></i>
</span>
{{~!-- squash whitespace --~}}
<span class="global-filter-name">{{t 'Drafts' }}</span>
<span class="left-sidebar-navigation-label">{{t 'Drafts' }}</span>
<span class="unread_count"></span>
</a>
<span class="arrow sidebar-menu-icon drafts-sidebar-menu-icon"><i class="zulip-icon zulip-icon-more-vertical" aria-hidden="true"></i></span>
</li>
<li class="top_left_scheduled_messages top_left_row hidden-for-spectators">
<a class="global-filter-container" href="#scheduled">
<a class="left-sidebar-navigation-label-container" href="#scheduled">
<span class="filter-icon">
<i class="fa fa-calendar" aria-hidden="true"></i>
</span>
{{~!-- squash whitespace --~}}
<span class="global-filter-name">{{t 'Scheduled messages' }}</span>
<span class="left-sidebar-navigation-label">{{t 'Scheduled messages' }}</span>
<span class="unread_count"></span>
</a>
</li>