diff --git a/src/domain/session/roomlist/RoomTileViewModel.js b/src/domain/session/roomlist/RoomTileViewModel.js index a12218a1..9fa7df0f 100644 --- a/src/domain/session/roomlist/RoomTileViewModel.js +++ b/src/domain/session/roomlist/RoomTileViewModel.js @@ -110,4 +110,12 @@ export class RoomTileViewModel extends ViewModel { get avatarTitle() { return this.name; } + + get badgeCount() { + return this._room.notificationCount; + } + + get isHighlighted() { + return this._room.highlightCount !== 0; + } } diff --git a/src/ui/web/css/left-panel.css b/src/ui/web/css/left-panel.css index 320bb899..cde12111 100644 --- a/src/ui/web/css/left-panel.css +++ b/src/ui/web/css/left-panel.css @@ -31,18 +31,16 @@ limitations under the License. align-items: center; } -.LeftPanel .name.unread { - font-weight: 600; -} - .LeftPanel div.description { margin: 0; flex: 1 1 0; min-width: 0; + display: flex; } -.LeftPanel .description > * { +.LeftPanel .description > .name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + flex: 1; } diff --git a/src/ui/web/css/themes/element/theme.css b/src/ui/web/css/themes/element/theme.css index 21a020dc..bf81bcd0 100644 --- a/src/ui/web/css/themes/element/theme.css +++ b/src/ui/web/css/themes/element/theme.css @@ -164,8 +164,30 @@ button.styled { margin-right: 10px; } -.LeftPanel .description .last-message { - font-size: 0.8em; +.LeftPanel .description { + align-items: baseline; +} + +.LeftPanel .name.unread { + font-weight: 600; +} + +.LeftPanel .badge { + min-width: 1.6rem; + height: 1.6rem; + border-radius: 1.6rem; + box-sizing: border-box; + padding: 0.1rem 0.3rem; + background-color: #61708b; + color: white; + font-weight: bold; + font-size: 1rem; + line-height: 1.4rem; + text-align: center; +} + +.LeftPanel .badge.highlighted { + background-color: #ff4b55; } a { diff --git a/src/ui/web/session/RoomTile.js b/src/ui/web/session/RoomTile.js index 798e7f91..0486bfe2 100644 --- a/src/ui/web/session/RoomTile.js +++ b/src/ui/web/session/RoomTile.js @@ -21,7 +21,10 @@ export class RoomTile extends TemplateView { render(t, vm) { return t.li({"className": {"active": vm => vm.isOpen}}, [ renderAvatar(t, vm, 32), - t.div({className: "description"}, t.div({className: {"name": true, unread: vm => vm.isUnread}}, vm => vm.name)) + t.div({className: "description"}, [ + t.div({className: {"name": true, unread: vm => vm.isUnread}}, vm => vm.name), + t.div({className: {"badge": true, highlighted: vm => vm.isHighlighted, hidden: vm => !vm.badgeCount}}, vm => vm.badgeCount), + ]) ]); }