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

recents: Match filters to filter-topic input.

Browse Source
This commit is contained in:
Karl Stolley
2025-08-28 14:27:21 -05:00
committed by Tim Abbott
parent 0980919876
commit d90a1d8a2e
2 changed files with 25 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
web/styles/app_variables.css
View File

@@ -570,9 +570,12 @@
--width-simplebar-scroll: 11px;
--width-simplebar-scroll-hover: 15px;
/* This is a rough estimate for height occupied by Recent Conversations filters.
We expect `resize.ts` to update this once UI is initialized. */
--recent-topics-filters-height: 50px;
/* This is the height occupied by Recent Conversations filters,
based on the height of the new filter elements in the sidebars
and for the topics filter. 31px at 16px/1em. */
--recent-topics-filters-height: 1.9375em;
/* Legacy margin/flex-gap value for filters. 10px at 14px/1em. */
--recent-topics-filters-gap: 0.7142em;
/* Pill dimensions. */
/* 1.5714em is 22px (border-inclusive) at 14px/1em */

29
web/styles/recent_view.css
View File

@@ -156,6 +156,7 @@
should match the height of the sidebar filters. */
padding: 10px 10px 0;
display: flex;
gap: var(--recent-topics-filters-gap);
/* Search box has no height without this in safari. */
flex: 0 0 auto;
flex-wrap: wrap;
@@ -163,9 +164,15 @@
background: var(--color-background);
}
#recent_filters_group {
display: flex;
flex-flow: row wrap;
gap: var(--recent-topics-filters-gap);
}
#recent-view-search-wrapper {
flex-grow: 1;
margin-bottom: 0.7142em; /* Legacy 10px at 14px/1em. */
margin-bottom: var(--recent-topics-filters-gap);
}
.button-recent-filters {
@@ -173,12 +180,14 @@
background-color: var(--color-background-zulip-button);
border: 1px solid var(--color-border-zulip-button);
border-radius: 40px;
/* Legacy 5px 10px at 14px/1em. */
margin: 0 0.3571em 0.7142em 0;
/* 5px at 16px/1em and legacy 12px at 14px/1em. */
padding: 0.3125em 0.8571em;
line-height: 100%;
display: inline-flex;
/* Matching to the height of the filter search box. */
height: var(--recent-topics-filters-height);
/* Legacy 12px at 14px/1em. */
padding: 0 0.8571em;
flex: 0 0 auto;
display: flex;
align-items: center;
&:hover {
background-color: var(--color-background-zulip-button-hover);
@@ -609,10 +618,10 @@
#recent-view-filter_widget {
display: inline-flex;
width: 10.7142em; /* 150px at 14px em */
/* Legacy 5px 10px at 14px/1em. */
margin: 0 0.3571em 0.7142em 0;
/* 1.5px 6px at 16px/1em */
padding: 0.0937em 0.375em;
padding: 0 0.375em;
/* Matching to the height of the filter search box. */
height: var(--recent-topics-filters-height);
&:hover {
background-color: var(--color-background-inbox-search-hover);