sidebars: Structurally separate left- and right-sidebar headings.

2025-11-03 13:33:24 +00:00 · 2023-11-08 13:33:55 -06:00
parent ee32654723
commit 3f36c52f41
9 changed files with 26 additions and 19 deletions
--- a/web/e2e-tests/message-basics.test.ts
+++ b/web/e2e-tests/message-basics.test.ts
@@ -315,7 +315,7 @@ async function test_search_venice(page: Page): Promise<void> {
    await page.waitForSelector(await get_stream_li(page, "Venice"), {visible: true});
    await page.waitForSelector(await get_stream_li(page, "Verona"), {visible: true});

-    await page.click("#streams_header .sidebar-title");
+    await page.click("#streams_header .left-sidebar-title");
    await page.waitForSelector(".input-append.notdisplayed");
 }

@@ -323,7 +323,7 @@ async function test_stream_search_filters_stream_list(page: Page): Promise<void>
    console.log("Filter streams using left side bar");

    await page.waitForSelector(".input-append.notdisplayed"); // Stream filter box invisible initially
-    await page.click("#streams_header .sidebar-title");
+    await page.click("#streams_header .left-sidebar-title");

    await page.waitForSelector("#streams_list .input-append.notdisplayed", {hidden: true});

@@ -377,7 +377,7 @@ async function test_stream_search_filters_stream_list(page: Page): Promise<void>
    await test_search_venice(page);

    // Search for beginning of "Verona".
-    await page.click("#streams_header .sidebar-title");
+    await page.click("#streams_header .left-sidebar-title");
    await page.type(".stream-list-filter", "ver");
    await page.waitForSelector(await get_stream_li(page, "core team"), {hidden: true});
    await page.waitForSelector(await get_stream_li(page, "Denmark"), {hidden: true});
--- a/web/src/hotspots.js
+++ b/web/src/hotspots.js
@@ -25,7 +25,7 @@ const HOTSPOT_LOCATIONS = new Map([
    [
        "intro_streams",
        {
-            element: "#streams_header .sidebar-title",
+            element: "#streams_header .left-sidebar-title",
            offset_x: 1.35,
            offset_y: 0.39,
        },
--- a/web/src/left_sidebar_navigation_area.js
+++ b/web/src/left_sidebar_navigation_area.js
@@ -194,7 +194,7 @@ export function initialize() {
    $("body").on("click", "#views-label-container", (e) => {
        if (
            $(e.currentTarget).hasClass("showing-condensed-navigation") &&
-            !($(e.target).hasClass("sidebar-title") || $(e.target).hasClass("fa-caret-right"))
+            !($(e.target).hasClass("left-sidebar-title") || $(e.target).hasClass("fa-caret-right"))
        ) {
            // Ignore clicks on condensed nav items
            return;
--- a/web/src/tippyjs.js
+++ b/web/src/tippyjs.js
@@ -215,7 +215,7 @@ export function initialize() {

    delegate("body", {
        target: [
-            "#streams_header .sidebar-title",
+            "#streams_header .left-sidebar-title",
            "#userlist-title",
            "#user_filter_icon",
            "#scroll-to-bottom-button-clickable-area",
--- a/web/styles/left_sidebar.css
+++ b/web/styles/left_sidebar.css
@@ -48,6 +48,13 @@ $before_unread_count_padding: 3px;
    }
 }

+.left-sidebar-title {
+    color: var(--color-text-sidebar-heading);
+    font-size: inherit;
+    font-weight: normal;
+    display: inline;
+}
+
 .sidebar-topic-check,
 .topic-name,
 .topic-markers-and-controls {
@@ -769,7 +776,7 @@ li.top_left_scheduled_messages {
        }
        /* Give the sidebar title through the end of the markers
           area, if needed. */
-        .sidebar-title {
+        .left-sidebar-title {
            grid-column: row-content-start / markers-and-controls-end;
        }
    }
@@ -799,7 +806,7 @@ li.top_left_scheduled_messages {
        margin-left: 0;
    }

-    .sidebar-title {
+    .left-sidebar-title {
        grid-area: row-content;
        /* Override heading margin from Bootstrap. */
        margin: 0;
--- a/web/styles/right_sidebar.css
+++ b/web/styles/right_sidebar.css
@@ -7,6 +7,13 @@ $user_status_emoji_width: 24px;
    }
 }

+.right-sidebar-title {
+    color: var(--color-text-sidebar-heading);
+    font-size: inherit;
+    font-weight: normal;
+    display: inline;
+}
+
 #buddy_list_wrapper {
    position: relative;
    margin-left: 0;
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -1171,13 +1171,6 @@ strong {
    white-space: nowrap;
 }

-.sidebar-title {
-    color: var(--color-text-sidebar-heading);
-    font-size: inherit;
-    font-weight: normal;
-    display: inline;
-}
-
 .tooltip {
    &.in {
        font-size: 12px;
--- a/web/templates/left_sidebar.hbs
+++ b/web/templates/left_sidebar.hbs
@@ -3,7 +3,7 @@
        <div id="views-label-container" class="showing-expanded-navigation hidden-for-spectators">
            <i id="toggle-top-left-navigation-area-icon" class="fa fa-sm fa-caret-down" aria-hidden="true"></i>
            {{~!-- squash whitespace --~}}
-            <h4 class="sidebar-title">{{t 'VIEWS' }}</h4>
+            <h4 class="left-sidebar-title">{{t 'VIEWS' }}</h4>
            <ul id="left-sidebar-navigation-list-condensed" class="filters">
                <li class="top_left_inbox left-sidebar-navigation-condensed-item {{#if is_inbox_home_view}}selected-home-view{{/if}}">
                    <a href="#inbox" {{#if is_inbox_home_view}}tabindex="0"{{/if}} class="tippy-views-tooltip left-sidebar-navigation-icon-container" data-tooltip-template-id="inbox-tooltip-template">
@@ -138,7 +138,7 @@
            <div id="private_messages_section_header" class="zoom-out zoom-in-sticky">
                <span id="pm_tooltip_container">
                    <i id="toggle_private_messages_section_icon" class="fa fa-sm fa-caret-down toggle_private_messages_section zoom-in-hide" aria-hidden="true" tabindex="0" role="button"></i>
-                    <h4 class="sidebar-title toggle_private_messages_section">{{t 'DIRECT MESSAGES' }}</h4>
+                    <h4 class="left-sidebar-title toggle_private_messages_section">{{t 'DIRECT MESSAGES' }}</h4>
                </span>
                <span class="unread_count"></span>
                <a id="show_all_private_messages" href="#narrow/is/dm" data-tooltip-template-id="show-all-pms-template">
@@ -157,7 +157,7 @@
        </div>

        <div id="streams_list" class="zoom-out">
-            <div id="streams_header" class="zoom-in-hide"><h4 class="sidebar-title" data-tooltip-template-id="filter-streams-tooltip-template">{{t 'STREAMS' }}</h4>
+            <div id="streams_header" class="zoom-in-hide"><h4 class="left-sidebar-title" data-tooltip-template-id="filter-streams-tooltip-template">{{t 'STREAMS' }}</h4>
                <span id="add_streams_tooltip" class="streams_inline_icon_wrapper hidden-for-spectators" data-tippy-content="{{t 'Add streams' }}">
                    <i id="streams_inline_icon" class='fa fa-plus' aria-hidden="true" ></i>
                </span>
--- a/web/templates/right_sidebar.hbs
+++ b/web/templates/right_sidebar.hbs
@@ -2,7 +2,7 @@
    <div class="right-sidebar-items">
        <div id="user-list">
            <div id="userlist-header">
-                <h4 class='sidebar-title' data-tooltip-template-id="search-people-tooltip-template"
+                <h4 class='right-sidebar-title' data-tooltip-template-id="search-people-tooltip-template"
                  id='userlist-title'>
                    {{t 'USERS' }}
                </h4>