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

recipient_bar: Add box shadow at top.

Browse Source 
We add a box shadow at top of the recipient bar to hide message
text that are partially visible above the recipient bar. At 100%
zoom, this issue is not visible but it has been reported by a user
at 150% zoom.

Following this change we don't need to do change any of our JS
calculations since `y` position of header remains the same
and when determining if a header `is_sticky` that is the only
thing we verify.
This commit is contained in:
Aman Agrawal
2023-02-09 03:51:00 +00:00
committed by Tim Abbott
parent 201debc1ea
commit 7dacbc934f
3 changed files with 7 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
static/js/message_list_view.js
View File

@@ -1471,6 +1471,8 @@ export class MessageListView {
const partially_hidden_header_position = visible_top - 1; const partially_hidden_header_position = visible_top - 1;
function is_sticky(header) { function is_sticky(header) {
// header has a box-shodow of `1px` at top but since it doesn't impact
// `y` position of the header, we don't take it into account during calculations.
const header_props = header.getBoundingClientRect(); const header_props = header.getBoundingClientRect();
// This value is dependent upon margin-bottom applied to recipient row. // This value is dependent upon margin-bottom applied to recipient row.
const margin_between_recipient_rows = 10; const margin_between_recipient_rows = 10;

4
static/styles/dark_theme.css
View File

@@ -364,6 +364,10 @@
color: hsl(212, 28%, 18%); color: hsl(212, 28%, 18%);
} }
.message_header {
box-shadow: 0 -1px 0 0 hsl(212, 28%, 18%);
}
/* these are converting grey things to "new grey" */ /* these are converting grey things to "new grey" */
:disabled, :disabled,
input:not([type="radio"]):read-only, input:not([type="radio"]):read-only,

1
static/styles/zulip.css
View File

@@ -1087,6 +1087,7 @@ td.pointer {
position: sticky; position: sticky;
top: $sidebar_top; top: $sidebar_top;
z-index: 3; z-index: 3;
box-shadow: 0 -1px 0 0 hsl(0, 0%, 100%);
@media (width < $sm_min) { @media (width < $sm_min) {
top: $sidebar_top_sm; top: $sidebar_top_sm;