Move unread notification dots of the threads list to the expected position (#8700)
* Change dot size from 10px to 8px Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Set inset 8px to the dot Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use shorthand properties for inset Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move blocks from '.mx_EventTile:not([data-layout=bubble])' to '.mx_EventTile[data-shape=ThreadsList]' For a notification dot it does not matter whether the layout of the event tile is bubble or not. Instead what matters is that the dot is expected to be displayed on the threads list. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove an obsolete z-index declaration The declaration was added with ed34952 to fix a clickability issue. Now the event tile is clickable everywhere, it is no longer required. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
parent
0f26ddd285
commit
f3b762c1a8
1 changed files with 17 additions and 25 deletions
|
@ -79,25 +79,6 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
||||||
font-size: $font-14px;
|
font-size: $font-14px;
|
||||||
position: relative;
|
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_ThreadSummary,
|
||||||
.mx_ThreadSummaryIcon {
|
.mx_ThreadSummaryIcon {
|
||||||
margin-left: 64px;
|
margin-left: 64px;
|
||||||
|
@ -780,12 +761,23 @@ $threadInfoLineHeight: calc(2 * $font-12px); // See: _commons.scss
|
||||||
&::before {
|
&::before {
|
||||||
content: "";
|
content: "";
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
inset: 0;
|
||||||
bottom: 0;
|
}
|
||||||
left: 0;
|
|
||||||
right: 0;
|
// Display notification dot
|
||||||
/* enough to cover all sibling elements */
|
&[data-notification]::before {
|
||||||
z-index: 10;
|
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 {
|
&:last-child {
|
||||||
|
|
Loading…
Reference in a new issue