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

left_sidebar: Place redesigned styles for action headings.

This commit is contained in:
Karl Stolley 2024-08-28 13:20:24 -05:00 committed by Tim Abbott
parent 14695dd26a
commit 74fc257a05
5 changed files with 39 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
help/include/left-sidebar-conversations.md
View File

@ -12,7 +12,7 @@ and the channels you are subscribed to.
!!! tip ""
To see all conversations, click on **more conversations** (in direct messages) or **show all topics**
To see all conversations, click on **MORE CONVERSATIONS** (in direct messages) or **SHOW ALL TOPICS**
(in a channel).
{end_tabs}

6
help/left-sidebar.md
View File

@ -48,11 +48,11 @@ information you need in the moment.
1. If the **DIRECT MESSAGES** section in the left sidebar is collapsed, click the triangle to the
left of **DIRECT MESSAGES** to expand it.
1. Click **more conversations** at the bottom of the list of recent DM conversations.
1. Click **MORE CONVERSATIONS** at the bottom of the list of recent DM conversations.
!!! tip ""
To return to the channel list in the left sidebar, click **back to channels**.
To return to the channel list in the left sidebar, click **BACK TO CHANNELS**.
{end_tabs}
@ -63,7 +63,7 @@ information you need in the moment.
1. Click on a channel in the left sidebar.
1. Click **show all topics** at the bottom of the list of recent topics in the
1. Click **SHOW ALL TOPICS** at the bottom of the list of recent topics in the
selected channel.
!!! tip ""

9
web/styles/app_variables.css
View File

@ -330,7 +330,16 @@
/* Shared sidebar typography and effects values. */
--font-weight-sidebar-heading: 600;
--font-weight-sidebar-action-heading: 370;
--font-variant-sidebar-action-heading: all-small-caps;
--font-feature-settings-sidebar-action-heading: "c2sc", "smcp";
/* 17px at 16px/1em = 1.0625em */
--font-size-sidebar-action-heading: 1.0625em;
--text-transform-sidebar-action-heading: uppercase;
--letter-spacing-sidebar-heading: 0.0469em;
--opacity-sidebar-heading: 0.7;
--opacity-right-sidebar-subheading: 0.65;
--opacity-right-sidebar-subheading-hover: 0.9;
/*
Message box elements and values.

43
web/styles/left_sidebar.css
View File

@ -37,13 +37,6 @@
margin-right: var(--left-sidebar-right-margin);
}
li.show-more-topics {
& a {
/* 12px at 14px/1em */
font-size: 0.8571em;
}
}
#streams_inline_icon,
.streams_filter_icon {
opacity: 0.5;
@ -243,17 +236,17 @@ li.show-more-topics {
}
& li#show-more-direct-messages {
font-size: var(--font-size-sidebar-action-heading);
font-weight: var(--font-weight-sidebar-action-heading);
letter-spacing: var(--letter-spacing-sidebar-action-heading);
font-variant: var(--font-variant-sidebar-action-heading);
text-transform: var(--text-transform-sidebar-action-heading);
cursor: pointer;
/* The 'more conversations' line has no icons,
so vertically align the text with the unread
count, when one appears there. */
align-items: baseline;
& a {
/* 12px at 14px/1em */
font-size: 0.8571em;
}
.unread_count {
margin-top: 2px;
}
@ -996,6 +989,14 @@ li.top_left_scheduled_messages {
}
}
.sidebar-topic-action-heading {
font-size: var(--font-size-sidebar-action-heading);
font-weight: var(--font-weight-sidebar-action-heading);
font-variant: var(--font-variant-sidebar-action-heading);
font-feature-settings: var(--font-feature-settings-sidebar-action-heading);
text-transform: var(--text-transform-sidebar-action-heading);
}
.topic-list-filter {
grid-area: row-content;
}
@ -1209,14 +1210,15 @@ li.topic-list-item {
.dm-box {
grid-template-columns:
var(--left-sidebar-toggle-width-offset) var(
var(--left-sidebar-toggle-width-offset) [action-heading-start] var(
--left-sidebar-icon-column-width
)
var(--left-sidebar-icon-content-gap) minmax(0, 1fr) minmax(
var(--left-sidebar-icon-content-gap) minmax(0, 1fr) [action-heading-end] minmax(
0,
max-content
)
30px 0;
grid-template-rows: [action-heading-start] auto [action-heading-end];
.conversation-partners-icon {
grid-area: starting-anchor-element;
@ -1224,7 +1226,7 @@ li.topic-list-item {
}
.dm-name {
grid-area: row-content;
grid-area: action-heading;
}
.user_circle {
@ -1294,9 +1296,12 @@ li.topic-list-item {
.show-all-streams {
grid-area: row-content;
font-size: var(--font-size-sidebar-action-heading);
font-weight: var(--font-weight-sidebar-action-heading);
font-variant: var(--font-variant-sidebar-action-heading);
text-transform: var(--text-transform-sidebar-action-heading);
color: inherit;
text-decoration: none;
text-transform: uppercase;
}
.unread_count {
@ -1550,10 +1555,12 @@ li.topic-list-item {
line-height: var(--line-height-sidebar-row);
text-decoration: none;
color: inherit;
/* 12px at 14px/1em */
.hide-more-direct-messages-text {
font-size: 0.8571em;
font-size: var(--font-size-sidebar-action-heading);
font-weight: var(--font-weight-sidebar-action-heading);
font-variant: var(--font-variant-sidebar-action-heading);
text-transform: var(--text-transform-sidebar-action-heading);
grid-area: row-content;
}

2
web/templates/more_topics.hbs
View File

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