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

left_sidebar: Add hover effects for section headings.

This commit is contained in:
Karl Stolley 2024-09-25 14:02:16 -05:00 committed by Tim Abbott
parent 8c54c1df3e
commit 872a1e64a6
3 changed files with 61 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/styles/app_variables.css
View File

@ -338,6 +338,8 @@
--text-transform-sidebar-action-heading: uppercase;
--letter-spacing-sidebar-heading: 0.0469em;
--opacity-sidebar-heading: 0.7;
--opacity-sidebar-heading-icon: 0.5;
--opacity-sidebar-heading-hover: 0.9;
--opacity-right-sidebar-subheading: 0.65;
--opacity-right-sidebar-subheading-hover: 0.9;

67
web/styles/left_sidebar.css
View File

@ -12,6 +12,7 @@
.left-sidebar-title {
color: var(--color-text-sidebar-heading);
opacity: var(--opacity-sidebar-heading);
transition: opacity 140ms linear;
font-size: inherit;
font-weight: var(--font-weight-sidebar-heading);
letter-spacing: var(--letter-spacing-sidebar-heading);
@ -180,6 +181,18 @@
grid-template-rows: var(--line-height-sidebar-row-prominent);
cursor: pointer;
white-space: nowrap;
border-radius: 4px;
/* Prevent hover styles set on other rows when zoomed in. */
&:not(.zoom-in):hover {
background-color: var(--color-background-hover-narrow-filter);
box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
.left-sidebar-title,
.sidebar-heading-icon {
opacity: var(--opacity-sidebar-heading-hover);
}
}
#toggle-direct-messages-section-icon {
grid-area: starting-anchor-element;
@ -273,11 +286,7 @@
#toggle-direct-messages-section-icon,
#toggle-top-left-navigation-area-icon {
color: var(--color-text-sidebar-heading);
opacity: var(--opacity-sidebar-heading);
&:hover {
opacity: 1;
}
opacity: var(--opacity-sidebar-heading-icon);
&:focus {
outline: 0;
@ -847,14 +856,26 @@ li.top_left_scheduled_messages {
}
#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,
1fr
)
30px var(--left-sidebar-right-margin);
grid-template-rows: var(--line-height-sidebar-row-prominent);
30px 0;
grid-template-rows: 28px;
cursor: pointer;
border-radius: 4px;
&:not(.remove-pointer-for-spectator):hover {
background-color: var(--color-background-hover-narrow-filter);
box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
.left-sidebar-title,
.sidebar-heading-icon {
opacity: var(--opacity-sidebar-heading-hover);
}
}
&.showing-expanded-navigation {
/* When the expanded navigation is visible,
@ -1371,22 +1392,41 @@ li.topic-list-item {
#streams_header {
grid-template-columns:
var(--left-sidebar-toggle-width-offset) 0 0 minmax(0, 1fr)
minmax(17px, max-content) 30px var(--left-sidebar-right-margin);
minmax(17px, max-content) 30px 0;
/* Keep the stream-search area rows collapsed. */
grid-template-rows: var(--line-height-sidebar-row-prominent) 0 0;
cursor: pointer;
padding: var(--left-sidebar-sections-vertical-gutter) 0 3px 0;
margin: var(--left-sidebar-sections-vertical-gutter)
var(--left-sidebar-right-margin) 3px 0;
position: sticky;
/* Keep sticky within SimpleBar context. */
top: 0;
z-index: 2;
background-color: var(--color-background);
border-radius: 4px;
&:hover {
background-color: var(--color-background-opaque-hover-narrow-filter);
box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
.left-sidebar-title,
.sidebar-heading-icon {
opacity: var(--opacity-sidebar-heading-hover);
}
}
&.showing-stream-search-section {
/* Open up the stream-search rows. The 10px
row maintains space with the streams list
below. */
grid-template-rows: var(--line-height-sidebar-row-prominent) 28px 10px;
/* When the search section is showing, switch
off the hover effects on the row. */
&:hover {
background-color: var(--color-background);
box-shadow: unset;
}
}
.left-sidebar-title {
@ -1520,7 +1560,8 @@ li.topic-list-item {
.spectator-view #streams_header {
grid-template-columns:
var(--left-sidebar-toggle-width-offset) 0 0 minmax(0, 1fr)
minmax(30px, max-content) 0 var(--left-sidebar-right-margin);
minmax(30px, max-content) 0 0;
margin-right: var(--left-sidebar-right-margin);
/* With markers and controls now sized the same
as the ordinary vdots area (but allowed to grow,
@ -1600,6 +1641,12 @@ li.topic-list-item {
z-index: 2;
padding-bottom: 1px;
background-color: var(--color-background);
&:hover {
/* Prevent hover styles set on other rows. */
box-shadow: none;
background-color: var(--color-background);
}
}
#streams_header,

4
web/templates/left_sidebar.hbs
View File

@ -1,7 +1,7 @@
<div class="left-sidebar" id="left-sidebar" role="navigation">
<div id="left-sidebar-navigation-area" class="left-sidebar-navigation-area">
<div id="views-label-container" class="showing-expanded-navigation {{#if is_spectator}}remove-pointer-for-spectator{{/if}}">
<i id="toggle-top-left-navigation-area-icon" class="zulip-icon zulip-icon-heading-triangle-right rotate-icon-down views-tooltip-target hidden-for-spectators" aria-hidden="true"></i>
<i id="toggle-top-left-navigation-area-icon" class="zulip-icon zulip-icon-heading-triangle-right sidebar-heading-icon rotate-icon-down views-tooltip-target hidden-for-spectators" aria-hidden="true"></i>
{{~!-- squash whitespace --~}}
<h4 class="left-sidebar-title"><span class="views-tooltip-target">{{t 'VIEWS' }}</span></h4>
<ul id="left-sidebar-navigation-list-condensed" class="filters">
@ -145,7 +145,7 @@
</div>
<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 rotate-icon-down dm-tooltip-target zoom-in-hide" aria-hidden="true" tabindex="0" role="button"></i>
<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">
<a id="show-all-direct-messages" href="#narrow/is/dm" data-tooltip-template-id="show-all-direct-messages-template">