paulmataruso/zulip
1
0
Fork 0
mirror of https://github.com/zulip/zulip.git synced 2025-10-23 04:52:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

left_sidebar: Place gridded heading hover icons.

Browse Source
This commit is contained in:
Karl Stolley
2024-10-03 16:56:13 -04:00
committed by Tim Abbott
parent e3860033a3
commit 84f3823b64
3 changed files with 55 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
web/styles/app_variables.css
View File

@@ -253,7 +253,10 @@
/* 40px (toggle icon) + 5px (gap) + 20px logo + 10px right margin */
--left-sidebar-width-with-realm-icon-logo: 75px;
--right-sidebar-width: 250px;
--left-sidebar-header-icon-width: 15px;
/* The width of the icon is reduced by 2px, to account for 2px
of top and bottom margin needed for hover backgrounds to
not touch the row outline. */
--left-sidebar-header-icon-width: calc(1.7142em - 2px); /* 24px / 14px em */
/* Space between section in the left sidebar. */
--left-sidebar-sections-vertical-gutter: 8px;
/* The legacy value here is 25px; that's the unitless legacy line-height
@@ -793,6 +796,11 @@
/* The gray on the filter icons is the same as
what's set on ul.filters, but with 70% opacity. */
--color-left-sidebar-navigation-icon: hsl(240deg 30% 40%);
--color-left-sidebar-heads-up-icon: hsl(240deg 30% 40%);
--color-left-sidebar-heads-up-icon-hover: hsl(240deg 100% 15%);
--background-color-left-sidebar-heads-up-icon-hover: hsl(
240deg 100% 50% / 7%
);
--color-vdots-hint: hsl(240deg 30% 20%);
--color-vdots-visible: hsl(240deg 30% 40%);
--color-vdots-hover: hsl(240deg 100% 15%);
@@ -1309,6 +1317,11 @@
--color-message-action-interactive: hsl(217deg 41% 90% / 100%);
--color-left-sidebar-follow-icon-hover: hsl(0deg 0% 100%);
--color-left-sidebar-navigation-icon: hsl(240deg 35% 68%);
--color-left-sidebar-heads-up-icon: hsl(240deg 35% 68%);
--color-left-sidebar-heads-up-icon-hover: hsl(240deg 100% 90%);
--background-color-left-sidebar-heads-up-icon-hover: hsl(
240deg 100% 75% / 20%
);
--color-vdots-hint: hsl(240deg 35% 48%);
--color-vdots-visible: hsl(240deg 35% 68%);
--color-vdots-hover: hsl(240deg 100% 90%);

43
web/styles/left_sidebar.css
View File

@@ -41,10 +41,14 @@
#streams_inline_icon,
.streams_filter_icon {
opacity: 0.5;
color: var(--color-left-sidebar-heads-up-icon);
border-radius: 3px;
&:hover {
opacity: 1;
color: var(--color-left-sidebar-heads-up-icon-hover);
background-color: var(
--background-color-left-sidebar-heads-up-icon-hover
);
cursor: pointer;
}
}
@@ -215,16 +219,19 @@
}
#show-all-direct-messages {
width: var(--left-sidebar-header-icon-width);
color: var(--color-left-sidebar-heads-up-icon);
display: flex;
align-items: center;
justify-content: center;
opacity: 0.7;
text-decoration: none;
color: inherit;
margin: 2px 0;
border-radius: 3px;
&:hover {
opacity: 1;
color: var(--color-left-sidebar-heads-up-icon-hover);
background-color: var(
--background-color-left-sidebar-heads-up-icon-hover
);
}
}
}
@@ -1140,6 +1147,18 @@ li.top_left_scheduled_messages {
z-index: 1;
}
.left-sidebar-controls {
grid-area: controls;
display: grid;
/* We won't know in advance how many controls a given
row has, but this allows grid to generate as many
as needed, sized to a shared icon width. */
grid-auto-columns: var(--left-sidebar-header-icon-width);
grid-template-rows: var(--line-height-sidebar-row-prominent);
place-content: stretch stretch;
margin-right: 1px;
}
.stream-markers-and-unreads,
.topic-markers-and-unreads {
grid-area: markers-and-unreads;
@@ -1494,14 +1513,22 @@ li.topic-list-item {
display: flex;
align-items: center;
justify-content: center;
width: var(--left-sidebar-header-icon-width);
grid-row: 1 / 1;
margin: 2px 0;
}
#add_streams_tooltip {
grid-row: 1 / 1;
margin: 2px 0;
}
#streams_inline_icon {
display: flex;
align-items: center;
justify-content: center;
width: var(--left-sidebar-header-icon-width);
/* Ensure the clickable area grows to
the height of the controls grid. */
height: 100%;
}
.stream_search_section {

8
web/templates/left_sidebar.hbs
View File

@@ -147,10 +147,12 @@
<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-unreads">
<div class="left-sidebar-controls">
<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>
</div>
<div class="heading-markers-and-unreads">
<span class="unread_count"></span>
</div>
<a class="zoom-out-hide" id="hide-more-direct-messages">
@@ -172,11 +174,13 @@
<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-unreads">
<div class="left-sidebar-controls">
<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>
</span>
</div>
<div class="heading-markers-and-unreads">
<span class="unread_count"></span>
<span class="masked_unread_count"></span>
</div>