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

Align unread notification dot on threads list in compact modern=group layout #8911

Merged
merged 2 commits into from
Jun 29, 2022
Merged

Align unread notification dot on threads list in compact modern=group layout #8911

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
3623ca6
Align unread notification dot on threads list in compact modern=group…
luixxiul Jun 25, 2022
7521e58
Merge branch 'develop' into compactlayout-threadslist-notification
luixxiul Jun 29, 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
12 changes: 10 additions & 2 deletions res/css/views/rooms/_EventTile.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -782,10 +782,12 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss

// Display notification dot
&[data-notification]::before {
$notification-inset-block-start: 14px; // 14px: align the dot with the timestamp row

width: $notification-dot-size;
height: $notification-dot-size;
border-radius: 50%;
inset: 14px $spacing-8 auto auto; // 14px: align the dot with the timestamp row
inset: $notification-inset-block-start $spacing-8 auto auto;
}

&[data-notification=total]::before {
Expand Down Expand Up @@ -1076,7 +1078,9 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
.mx_EventTile {
// Override :not([data-layout="bubble"])
&[data-layout=group] {
padding-top: $spacing-4;
--MatrixChat_useCompactLayout_group-padding-top: $spacing-4;

padding-top: var(--MatrixChat_useCompactLayout_group-padding-top);

&.mx_EventTile_info {
padding-top: 0; // same as the padding for non-compact .mx_EventTile.mx_EventTile_info
Expand Down Expand Up @@ -1152,6 +1156,10 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
}
}
}

&[data-shape=ThreadsList][data-notification]::before {
inset-block-start: calc($notification-inset-block-start - var(--MatrixChat_useCompactLayout_group-padding-top));
}
}
}

Expand Down