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

left_sidebar: Set new heading icon and effects.

This commit is contained in:
Karl Stolley 2024-08-22 15:55:41 -04:00 committed by Tim Abbott
parent 61221ddc74
commit 87965d61f2
7 changed files with 30 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/shared/icons/heading-triangle-right.svg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 156 B

8
web/src/left_sidebar_navigation_area.ts
View File

@ -146,15 +146,15 @@ function toggle_condensed_navigation_area(): void {
// Toggle into the condensed state
$views_label_container.addClass("showing-condensed-navigation");
$views_label_container.removeClass("showing-expanded-navigation");
$views_label_icon.addClass("fa-caret-right");
$views_label_icon.removeClass("fa-caret-down");
$views_label_icon.addClass("rotate-icon-right");
$views_label_icon.removeClass("rotate-icon-down");
save_state(STATES.CONDENSED);
} else {
// Toggle into the expanded state
$views_label_container.addClass("showing-expanded-navigation");
$views_label_container.removeClass("showing-condensed-navigation");
$views_label_icon.addClass("fa-caret-down");
$views_label_icon.removeClass("fa-caret-right");
$views_label_icon.addClass("rotate-icon-down");
$views_label_icon.removeClass("rotate-icon-right");
save_state(STATES.EXPANDED);
}
resize.resize_stream_filters_container();

8
web/src/pm_list.ts
View File

@ -36,8 +36,8 @@ export function set_count(count: number): void {
export function close(): void {
private_messages_collapsed = true;
$("#toggle-direct-messages-section-icon").removeClass("fa-caret-down");
$("#toggle-direct-messages-section-icon").addClass("fa-caret-right");
$("#toggle-direct-messages-section-icon").removeClass("rotate-icon-down");
$("#toggle-direct-messages-section-icon").addClass("rotate-icon-right");
update_private_messages();
}
@ -109,8 +109,8 @@ export function update_private_messages(): void {
export function expand(): void {
private_messages_collapsed = false;
$("#toggle-direct-messages-section-icon").addClass("fa-caret-down");
$("#toggle-direct-messages-section-icon").removeClass("fa-caret-right");
$("#toggle-direct-messages-section-icon").addClass("rotate-icon-down");
$("#toggle-direct-messages-section-icon").removeClass("rotate-icon-right");
update_private_messages();
}

8
web/src/stream_list.ts
View File

@ -912,11 +912,11 @@ export function set_event_handlers({
assert(scroll_position !== undefined);
assert(pm_list_height !== undefined);
if (scroll_position > pm_list_height) {
$("#toggle-direct-messages-section-icon").addClass("fa-caret-right");
$("#toggle-direct-messages-section-icon").removeClass("fa-caret-down");
$("#toggle-direct-messages-section-icon").addClass("rotate-icon-right");
$("#toggle-direct-messages-section-icon").removeClass("rotate-icon-down");
} else {
$("#toggle-direct-messages-section-icon").addClass("fa-caret-down");
$("#toggle-direct-messages-section-icon").removeClass("fa-caret-right");
$("#toggle-direct-messages-section-icon").addClass("rotate-icon-down");
$("#toggle-direct-messages-section-icon").removeClass("rotate-icon-right");
}
}

4
web/src/tippyjs.ts
View File

@ -534,7 +534,7 @@ export function initialize(): void {
tippy.delegate("body", {
target: ".views-tooltip-target",
onShow(instance) {
if ($("#toggle-top-left-navigation-area-icon").hasClass("fa-caret-down")) {
if ($("#toggle-top-left-navigation-area-icon").hasClass("rotate-icon-down")) {
instance.setContent(
$t({
defaultMessage: "Collapse views",
@ -555,7 +555,7 @@ export function initialize(): void {
return false;
}
if ($("#toggle-direct-messages-section-icon").hasClass("fa-caret-down")) {
if ($("#toggle-direct-messages-section-icon").hasClass("rotate-icon-down")) {
instance.setContent(
$t({
defaultMessage: "Collapse direct messages",

19
web/styles/left_sidebar.css
View File

@ -256,16 +256,25 @@
}
}
.zulip-icon-heading-triangle-right {
transition:
opacity 140ms linear,
rotate 140ms linear;
}
.zulip-icon-heading-triangle-right.rotate-icon-down {
rotate: 90deg;
}
.zulip-icon-heading-triangle-right.rotate-icon-right {
rotate: 0deg;
}
#toggle-direct-messages-section-icon,
#toggle-top-left-navigation-area-icon {
color: var(--color-text-sidebar-heading);
opacity: var(--opacity-sidebar-heading);
&.fa-caret-right {
position: relative;
left: 3px;
}
&:hover {
opacity: 1;
}

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="fa fa-sm fa-caret-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 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="fa fa-sm fa-caret-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 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">