Skip to content
This repository has been archived by the owner on Sep 11, 2024. It is now read-only.

Move unread notification dots of the threads list to the expected position #8700

Merged
merged 7 commits into from
May 25, 2022
Merged

Move unread notification dots of the threads list to the expected position #8700

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
eeffac8
Change dot size from 10px to 8px
luixxiul May 25, 2022
31a649e
Set inset 8px to the dot
luixxiul May 25, 2022
5e60ebb
Use shorthand properties for inset
luixxiul May 25, 2022
1fbe95c
Move blocks from '.mx_EventTile:not([data-layout=bubble])' to '.mx_Ev…
luixxiul May 25, 2022
d39f693
Remove redundant declarations
luixxiul May 25, 2022
ea38f84
Remove an obsolete z-index declaration
luixxiul May 25, 2022
5102687
Merge branch 'develop' into ThreadsList-notification
luixxiul May 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 17 additions & 25 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,25 +79,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
font-size: $font-14px;
position: relative;

&[data-shape=ThreadsList][data-notification]::before {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
right: -25px; // center it in the gutter (16px margin + 4px padding + half 10px width)
top: 4px;
left: auto;
}

&[data-shape=ThreadsList][data-notification=total]::before {
background-color: $room-icon-unread-color;
}

&[data-shape=ThreadsList][data-notification=highlight]::before {
background-color: $alert;
}

.mx_ThreadSummary,
.mx_ThreadSummaryIcon {
margin-left: 64px;
Expand Down Expand Up @@ -780,12 +761,23 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
&::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
/* enough to cover all sibling elements */
z-index: 10;
inset: 0;
}

// Display notification dot
&[data-notification]::before {
width: 8px;
height: 8px;
border-radius: 50%;
inset: 14px 8px auto auto; // 14px: align the dot with the timestamp row
}

&[data-notification=total]::before {
background-color: $room-icon-unread-color;
}

&[data-notification=highlight]::before {
background-color: $alert;
}

&:last-child {
Expand Down