mirror of
https://github.com/vector-im/hydrogen-web.git
synced 2024-12-23 03:25:12 +01:00
render badge on room
This commit is contained in:
parent
831f4188f7
commit
f551010968
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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 {
|
||||
|
@ -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),
|
||||
])
|
||||
]);
|
||||
}
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user