OpenCloud
/
element-web
mirror of https://github.com/vector-im/element-web
1
0
Fork 0
Code Issues Releases Wiki Activity

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>
pull/28217/head
Suguru Hirahara 2022-05-25 22:33:35 +00:00 committed by GitHub
parent 0f26ddd285
commit f3b762c1a8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
res/css/views/rooms/_EventTile.scss
View File

@ -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;
@ -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 {