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

recent_view: Place new sort arrows.

Browse Source
This commit is contained in:
Karl Stolley
2025-04-01 16:01:35 -04:00
committed by Tim Abbott
parent ede630a6dd
commit 492541f1e2
2 changed files with 29 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
web/styles/recent_view.css
View File

@@ -402,22 +402,30 @@
border-bottom: 1px solid hsl(0deg 0% 0% / 20%) !important;
z-index: 1;
&.active::after,
&[data-sort]:hover::after {
content: " \f0d8";
white-space: pre;
padding-top: 3px;
font: normal normal normal 12px/1 FontAwesome;
font-size: inherit;
.table-sortable-arrow {
/* Sub alignment works perfectly in this context,
where the table header is a text node. */
vertical-align: sub;
transform: rotate(180deg);
opacity: 0;
transition: opacity 100ms ease-out;
}
&.descend .table-sortable-arrow {
transform: rotate(0deg);
}
&:not(.active)[data-sort]:hover .table-sortable-arrow {
opacity: 0.3;
}
&.active .table-sortable-arrow {
opacity: 1;
}
&.active {
opacity: 1;
transition: opacity 100ms ease-out;
&.descend::after {
content: " \f0d7";
}
}
&[data-sort]:hover {
@@ -426,10 +434,6 @@
--color-background-recent-view-table-thead-sort-header
);
transition: background-color 100ms ease-in-out;
&:not(.active)::after {
opacity: 0.3;
}
}
}

13
web/templates/recent_view_table.hbs
View File

@@ -14,13 +14,20 @@
<table class="table table-responsive">
<thead id="recent-view-table-headers">
<tr>
<th class="recent-view-stream-header" data-sort="stream_sort">{{t 'Channel' }}</th>
<th class="recent-view-topic-header" data-sort="topic_sort">{{t 'Topic' }}</th>
<th class="recent-view-stream-header" data-sort="stream_sort">{{t 'Channel' }}
<i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
</th>
<th class="recent-view-topic-header" data-sort="topic_sort">{{t 'Topic' }}
<i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
</th>
<th data-sort="unread_sort" data-tippy-content="{{t 'Sort by unread message count' }}" class="recent-view-unread-header unread_sort tippy-zulip-delayed-tooltip hidden-for-spectators">
<i class="zulip-icon zulip-icon-unread"></i>
<i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
</th>
<th class='recent-view-participants-header participants_header'>{{t 'Participants' }}</th>
<th data-sort="numeric" data-sort-prop="last_msg_id" class="recent-view-last-msg-time-header last_msg_time_header active descend">{{t 'Time' }}</th>
<th data-sort="numeric" data-sort-prop="last_msg_id" class="recent-view-last-msg-time-header last_msg_time_header active descend">{{t 'Time' }}
<i class="table-sortable-arrow zulip-icon zulip-icon-sort-arrow-down"></i>
</th>
</tr>
</thead>
</table>