From d3d4ddcfc23f8988e94bbf33f2c4fd3aa73a60d8 Mon Sep 17 00:00:00 2001 From: Karl Stolley Date: Fri, 28 Jun 2024 13:00:44 -0400 Subject: [PATCH] left_sidebar: Rewrite topic filter in grid. --- web/styles/app_components.css | 5 ++++ web/styles/left_sidebar.css | 42 ++++++++++++++++----------------- web/templates/filter_topics.hbs | 2 +- 3 files changed, 27 insertions(+), 22 deletions(-) diff --git a/web/styles/app_components.css b/web/styles/app_components.css index a85f9fa985..05a0c1f591 100644 --- a/web/styles/app_components.css +++ b/web/styles/app_components.css @@ -385,6 +385,11 @@ div.overlay { margin: 0; } +/* TODO: Once all layouts using this button + are modernized, the Font Awesome icon + should be replaced with a Zulip icon, + and its formatting should have no extra + space around its viewbox in SVG. */ .clear_search_button { &:hover { color: hsl(0deg 0% 0%); diff --git a/web/styles/left_sidebar.css b/web/styles/left_sidebar.css index aa1fde4fc8..2d50e2349d 100644 --- a/web/styles/left_sidebar.css +++ b/web/styles/left_sidebar.css @@ -69,17 +69,15 @@ li.show-more-topics { padding: 0; font-weight: normal; - .input-append.topic_search_section { - padding: 2px 0 2px var(--left-sidebar-topic-indent); - margin-bottom: 3px; - margin-left: 3px; - - & input { - width: calc(100% - 30px); - } + .topic_search_section { + margin: 3px 0; .clear_search_button { - margin-left: -1px; + grid-area: row-content; + justify-self: self-end; + /* Override app-component positioning. */ + position: static; + padding-right: 4px; } } @@ -714,7 +712,8 @@ li.top_left_scheduled_messages { .dm-box, .subscription_block, .topic-box, -.searching-for-more-topics { +.searching-for-more-topics, +.topic_search_section { display: grid; align-items: center; /* This general pattern of elements applies to every single row in the left @@ -873,9 +872,14 @@ li.top_left_scheduled_messages { .topic-box, .searching-for-more-topics { grid-template-columns: - var(--left-sidebar-topic-indent) var( - --left-sidebar-topic-resolve-width - ) minmax(0, 1fr) minmax(0, max-content) + var(--left-sidebar-topic-indent) var(--left-sidebar-topic-resolve-width) + minmax(0, 1fr) minmax(0, max-content) + 30px 0; +} + +.topic_search_section { + grid-template-columns: + var(--left-sidebar-topic-indent) 0 minmax(0, 1fr) minmax(0, max-content) 30px 0; } @@ -906,6 +910,10 @@ li.top_left_scheduled_messages { } } +.topic-list-filter { + grid-area: row-content; +} + .searching-for-more-topics img { height: 16px; grid-area: row-content; @@ -1329,14 +1337,6 @@ li.topic-list-item { overflow: hidden; } -.topic-list-filter { - /* Input width = 100% - 30px right-margin - 6px right-padding */ - /* To keep the right edge of input along with its borders inline with other - topic items we consider to subtract the space given for right margin of - other items, and right padding of input element. */ - width: calc(100% - 36px); -} - .zero_count { visibility: hidden; } diff --git a/web/templates/filter_topics.hbs b/web/templates/filter_topics.hbs index 0010f05e33..6ba373a143 100644 --- a/web/templates/filter_topics.hbs +++ b/web/templates/filter_topics.hbs @@ -1,4 +1,4 @@ -
+