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

left_sidebar: Prepare grid with controls area, squared vdots.

This commit is contained in:
Karl Stolley 2024-10-03 15:39:28 -04:00 committed by Tim Abbott
parent f6a0ebacd9
commit e3860033a3
7 changed files with 57 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/topic_list.ts
View File

@ -338,7 +338,7 @@ export function initialize({
}): void {
$("#stream_filters").on(
"click",
".sidebar-topic-check, .sidebar-topic-name, .topic-markers-and-controls",
".sidebar-topic-check, .sidebar-topic-name, .topic-markers-and-unreads",
(e) => {
if (e.metaKey || e.ctrlKey || e.shiftKey) {
return;

1
web/styles/app_variables.css
View File

@ -227,6 +227,7 @@
--left-sidebar-icon-content-gap: 0.4375em;
/* The space allotted in gridded rows for the toggle icon. */
--left-sidebar-header-icon-toggle-width: 20px;
--left-sidebar-vdots-width: 26px;
/* Other rows need an offset to preserve a column the
entire height of the left sidebar for where toggles sit. */
--left-sidebar-toggle-width-offset: var(

87
web/styles/left_sidebar.css
View File

@ -26,7 +26,7 @@
}
.sidebar-topic-check,
.topic-markers-and-controls {
.topic-markers-and-unreads {
cursor: pointer;
}
@ -177,7 +177,10 @@
#direct-messages-section-header {
grid-template-columns:
0 var(--left-sidebar-header-icon-toggle-width) 0 minmax(0, 1fr)
max-content 30px 0;
minmax(0, max-content) minmax(0, max-content) var(
--left-sidebar-vdots-width
)
0;
grid-template-rows: var(--line-height-sidebar-row-prominent);
cursor: pointer;
white-space: nowrap;
@ -204,8 +207,8 @@
grid-area: row-content;
}
.heading-markers-and-controls {
grid-area: markers-and-controls;
.heading-markers-and-unreads {
grid-area: markers-and-unreads;
display: flex;
gap: 5px;
align-items: center;
@ -401,8 +404,7 @@
ul.filters {
list-style-type: none;
margin-left: 0;
/* Streams take a standard row height. */
line-height: var(--line-height-sidebar-row);
line-height: var(--line-height-sidebar-row-prominent);
.sidebar-topic-name,
.left-sidebar-navigation-label-container {
@ -714,7 +716,11 @@ li.top_left_scheduled_messages {
var(--left-sidebar-toggle-width-offset) var(
--left-sidebar-icon-column-width
)
var(--left-sidebar-icon-content-gap) minmax(0, 1fr) max-content 0 0;
var(--left-sidebar-icon-content-gap) minmax(0, 1fr) minmax(
0,
max-content
)
minmax(0, max-content) 0 0;
.filter-icon {
grid-area: starting-anchor-element;
@ -730,7 +736,7 @@ li.top_left_scheduled_messages {
}
.unread_count {
grid-area: markers-and-controls;
grid-area: markers-and-unreads;
}
}
@ -738,7 +744,7 @@ li.top_left_scheduled_messages {
&.hide_starred_message_count {
.masked_unread_count {
display: block;
grid-area: markers-and-controls;
grid-area: markers-and-unreads;
/* Adding margin-right aligns the .masked_unread_count with the rest of the masked unread counts in the channel list. */
margin-right: var(--masked-unread-count-margin-right);
}
@ -833,7 +839,7 @@ li.top_left_scheduled_messages {
modified or reassigned as needed, without running up against `padding`
(which alters the box size) or `margin` (which notoriously bleeds outside
of the element it's defined on). */
grid-template-areas: "starting-offset starting-anchor-element icon-content-gap row-content markers-and-controls ending-anchor-element ending-offset";
grid-template-areas: "starting-offset starting-anchor-element icon-content-gap row-content controls markers-and-unreads ending-anchor-element ending-offset";
}
.top_left_row {
@ -844,7 +850,9 @@ li.top_left_scheduled_messages {
/* The row grid for the outer .top_left_row
is chiefly for lefthand spacing and placing
the inner row content and vdots. */
grid-template-columns: 0 0 0 minmax(0, 1fr) 0 30px 0;
grid-template-columns:
0 0 0 minmax(0, 1fr) 0 0 var(--left-sidebar-vdots-width)
0;
.sidebar-menu-icon {
grid-area: ending-anchor-element;
@ -865,18 +873,18 @@ li.top_left_scheduled_messages {
that now by having it share this grid template. Its row and column
definitions have the final say about dimensions and placement. */
grid-template-areas:
"starting-offset starting-anchor-element icon-content-gap row-content markers-and-controls ending-anchor-element ending-offset"
". . filter-box filter-box filter-box filter-box . ";
"starting-offset starting-anchor-element icon-content-gap row-content controls markers-and-unreads ending-anchor-element ending-offset"
". . filter-box filter-box filter-box filter-box filter-box . ";
}
#views-label-container {
margin-right: var(--left-sidebar-right-margin);
grid-template-columns:
0 var(--left-sidebar-header-icon-toggle-width) 0 minmax(0, 0.5fr) minmax(
0 var(--left-sidebar-header-icon-toggle-width) 0 minmax(0, 0.5fr) 0 minmax(
0,
1fr
)
30px 0;
var(--left-sidebar-vdots-width) 0;
grid-template-rows: 28px;
cursor: pointer;
border-radius: 4px;
@ -901,7 +909,7 @@ li.top_left_scheduled_messages {
/* Give the sidebar title through the end of the markers
area, if needed. */
.left-sidebar-title {
grid-column: row-content-start / markers-and-controls-end;
grid-column: row-content-start / markers-and-unreads-end;
}
}
@ -946,7 +954,7 @@ li.top_left_scheduled_messages {
#left-sidebar-navigation-list-condensed {
margin: 0;
grid-area: markers-and-controls;
grid-area: markers-and-unreads;
}
.left-sidebar-navigation-menu-icon {
@ -991,7 +999,8 @@ li.top_left_scheduled_messages {
0,
max-content
)
30px 0;
minmax(0, max-content)
var(--left-sidebar-vdots-width) 0;
white-space: nowrap;
.stream-privacy {
@ -1031,8 +1040,8 @@ li.top_left_scheduled_messages {
0 var(--left-sidebar-icon-column-width) var(
--left-sidebar-icon-content-gap
)
minmax(0, 1fr) minmax(0, max-content)
30px 0;
minmax(0, 1fr) minmax(0, max-content) minmax(0, max-content)
var(--left-sidebar-vdots-width) 0;
}
.searching-for-more-topics {
@ -1131,9 +1140,9 @@ li.top_left_scheduled_messages {
z-index: 1;
}
.stream-markers-and-controls,
.topic-markers-and-controls {
grid-area: markers-and-controls;
.stream-markers-and-unreads,
.topic-markers-and-unreads {
grid-area: markers-and-unreads;
display: flex;
/* Present a uniform space between icons */
gap: 5px;
@ -1317,11 +1326,11 @@ li.topic-list-item {
var(--left-sidebar-toggle-width-offset) [action-heading-start] var(
--left-sidebar-icon-column-width
)
var(--left-sidebar-icon-content-gap) minmax(0, 1fr) [action-heading-end] minmax(
var(--left-sidebar-icon-content-gap) minmax(0, 1fr) [action-heading-end] 0 minmax(
0,
max-content
)
30px 0;
var(--left-sidebar-vdots-width) 0;
grid-template-rows: [action-heading-start] auto [action-heading-end];
.conversation-partners-icon {
@ -1349,7 +1358,7 @@ li.topic-list-item {
}
.unread_count {
grid-area: markers-and-controls;
grid-area: markers-and-unreads;
/* TODO: This is an alternative method
for presenting a 16px-tall unread
counter, regardless of context. This
@ -1392,8 +1401,9 @@ li.topic-list-item {
z-index: 2;
grid-template-columns:
[topics-content-area-start] var(--left-sidebar-toggle-width-offset)
0 0 minmax(0, 1fr)
max-content 0 42px [topics-content-area-end];
0 0 minmax(0, 1fr) 0
max-content 0 var(--left-sidebar-vdots-width)
[topics-content-area-end] var(--left-sidebar-right-margin);
grid-template-rows:
[topics-content-area-start] var(--line-height-sidebar-row-prominent)
[topics-content-area-end];
@ -1421,14 +1431,17 @@ li.topic-list-item {
}
.unread_count {
grid-area: markers-and-controls;
grid-area: markers-and-unreads;
}
}
#streams_header {
grid-template-columns:
var(--left-sidebar-toggle-width-offset) 0 0 minmax(0, 1fr)
minmax(17px, max-content) 30px 0;
var(--left-sidebar-toggle-width-offset) 0 0 minmax(0, 1fr) minmax(
0,
max-content
)
minmax(17px, max-content) var(--left-sidebar-vdots-width) 0;
/* Keep the stream-search area rows collapsed. */
grid-template-rows: var(--line-height-sidebar-row-prominent) 0 0;
cursor: pointer;
@ -1469,8 +1482,8 @@ li.topic-list-item {
grid-area: row-content;
}
.heading-markers-and-controls {
grid-area: markers-and-controls;
.heading-markers-and-unreads {
grid-area: markers-and-unreads;
height: 100%;
display: flex;
align-items: center;
@ -1595,8 +1608,8 @@ li.topic-list-item {
controls. */
.spectator-view #streams_header {
grid-template-columns:
var(--left-sidebar-toggle-width-offset) 0 0 minmax(0, 1fr)
minmax(30px, max-content) 0 0;
var(--left-sidebar-toggle-width-offset) 0 0 minmax(0, 1fr) 0
minmax(var(--left-sidebar-vdots-width), max-content) 0 0;
margin-right: var(--left-sidebar-right-margin);
/* With markers and controls now sized the same
@ -1605,7 +1618,7 @@ li.topic-list-item {
additional logged-out icons be added in the
future), let's center the icon in that area,
just like vdots would be. */
.heading-markers-and-controls {
.heading-markers-and-unreads {
justify-content: center;
}
}
@ -1722,7 +1735,7 @@ li.topic-list-item {
.direct-messages-search-section {
display: flex;
grid-column: row-content / markers-and-controls;
grid-column: row-content / markers-and-unreads;
margin-top: 5px;
margin-bottom: 5px;
}

4
web/templates/left_sidebar.hbs
View File

@ -147,7 +147,7 @@
<div id="direct-messages-section-header" class="direct-messages-container hidden-for-spectators zoom-out zoom-in-sticky">
<i id="toggle-direct-messages-section-icon" class="zulip-icon zulip-icon-heading-triangle-right sidebar-heading-icon rotate-icon-down dm-tooltip-target zoom-in-hide" aria-hidden="true" tabindex="0" role="button"></i>
<h4 class="left-sidebar-title"><span class="dm-tooltip-target">{{t 'DIRECT MESSAGES' }}</span></h4>
<div class="heading-markers-and-controls">
<div class="heading-markers-and-unreads">
<a id="show-all-direct-messages" href="#narrow/is/dm" data-tooltip-template-id="show-all-direct-messages-template">
<i class="zulip-icon zulip-icon-all-messages" aria-label="{{t 'Direct message feed' }}"></i>
</a>
@ -172,7 +172,7 @@
<div id="streams_list" class="zoom-out">
<div id="streams_header" class="zoom-in-hide {{#if hide_unread_counts}}hide_unread_counts{{/if}}">
<h4 class="left-sidebar-title"><span class="streams-tooltip-target" data-tooltip-template-id="filter-streams-tooltip-template">{{t 'CHANNELS' }}</span></h4>
<div class="heading-markers-and-controls">
<div class="heading-markers-and-unreads">
<i id="filter_streams_tooltip" class="streams_filter_icon zulip-icon zulip-icon-search" aria-hidden="true" data-tooltip-template-id="filter-streams-tooltip-template"></i>
<span id="add_streams_tooltip" class="hidden-for-spectators" data-tippy-content="{{t 'Add channels' }}">
<i id="streams_inline_icon" class="zulip-icon zulip-icon-square-plus" aria-hidden="true" ></i>

2
web/templates/more_topics.hbs
View File

@ -3,7 +3,7 @@
{{#if more_topics_unread_count_muted}}more_topic_unreads_muted_only{{/if}}">
<div class="topic-box">
<a class="sidebar-topic-action-heading" tabindex="0">{{t "Show all topics" }}</a>
<div class="topic-markers-and-controls">
<div class="topic-markers-and-unreads">
{{#if more_topics_have_unread_mention_messages}}
<span class="unread_mention_info">
@

2
web/templates/stream_sidebar_row.hbs
View File

@ -10,7 +10,7 @@
<a href="{{url}}" title="{{name}}" class="stream-name">{{name}}</a>
<div class="stream-markers-and-controls">
<div class="stream-markers-and-unreads">
<span class="unread_mention_info"></span>
<span class="unread_count"></span>
<span class="masked_unread_count"></span>

2
web/templates/topic_list_item.hbs
View File

@ -6,7 +6,7 @@
<a href="{{url}}" class="sidebar-topic-name" title="{{topic_name}}">
<span class="sidebar-topic-name-inner">{{topic_display_name}}</span>
</a>
<div class="topic-markers-and-controls change_visibility_policy" data-stream-id="{{stream_id}}" data-topic-name="{{topic_name}}">
<div class="topic-markers-and-unreads change_visibility_policy" data-stream-id="{{stream_id}}" data-topic-name="{{topic_name}}">
{{#if contains_unread_mention}}
<span class="unread_mention_info">
@