imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add notification dots to thread summary icons (#12146)

Browse source 
* Add notification dots to thread summary icons

Adopts new IndicatorIcon from compound to have threads icons with
indicator dot (that aren't also buttons). Adds green & red dots on
the threads icon in the thread summary to indicate notifications.
Changes the notification level dots colours in the threads panel to
be green to match.

* Update test for new CSS class

* Update snapshots with new class name

* Another snapshot update for new class name

* Replace more uses of old class name in tests

* More snapshot updates for new class name

* Unsure how this ever worked in chronological mode

* More snapshot updates

* Fix dot colours

* Upgrade to compound-web 3

* Fix computed notification levels

* Add test for notificationLevelToIndicator
This commit is contained in:
David Baker 2024-01-25 16:53:41 +00:00 • committed by GitHub
parent f684ad51cd
commit 95430cecbc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
19 changed files with 130 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

23
res/css/views/rooms/_NotificationBadge.pcss
View file

@ -33,21 +33,34 @@ limitations under the License.
align-items: center;
justify-content: center;
&.mx_NotificationBadge_highlighted {
/* TODO: Use a more specific variable */
background-color: $alert;
}
/* These are the 3 background types */
&.mx_NotificationBadge_dot {
width: 8px;
height: 8px;
border-radius: 8px;
background-color: var(--cpd-color-text-primary);
.mx_NotificationBadge_count {
display: none;
}
/* Redundant sounding name, but a notification badge that indicates there is a regular,
* non-highlight notification
* The green colour only applies for notification dot: badges indicating the same notification
* level are the standard grey.
*/
&.mx_NotificationBadge_level_notification {
background-color: var(--cpd-color-icon-success-primary);
}
}
/* Badges for highlight notifications. Style for notification level
* badges is in _EventTile.scss because it applies only to notification
* dots, not badges.
*/
&.mx_NotificationBadge_level_highlight {
background-color: var(--cpd-color-icon-critical-primary);
}
&.mx_NotificationBadge_knocked {