Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit bed4766

Browse files
turt2liveturt2live
authored
Merge pull request #4734 from matrix-org/travis/room-list/sublist-badges
Add/improve badge counts in new room list
2 parents d9bd3cf + 724f545 commit bed4766

File tree

7 files changed

+408
-186
lines changed

7 files changed

+408
-186
lines changed

‎res/css/_components.scss

+1
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,7 @@
172172
@import "./views/rooms/_MemberList.scss";
173173
@import "./views/rooms/_MessageComposer.scss";
174174
@import "./views/rooms/_MessageComposerFormatBar.scss";
175+
@import "./views/rooms/_NotificationBadge.scss";
175176
@import "./views/rooms/_PinnedEventTile.scss";
176177
@import "./views/rooms/_PinnedEventsPanel.scss";
177178
@import "./views/rooms/_PresenceLabel.scss";

‎res/css/views/rooms/_NotificationBadge.scss

+72
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
/*
2+
Copyright 2020 The Matrix.org Foundation C.I.C.
3+
4+
Licensed under the Apache License, Version 2.0 (the "License");
5+
you may not use this file except in compliance with the License.
6+
You may obtain a copy of the License at
7+
8+
http://www.apache.org/licenses/LICENSE-2.0
9+
10+
Unless required by applicable law or agreed to in writing, software
11+
distributed under the License is distributed on an "AS IS" BASIS,
12+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
13+
See the License for the specific language governing permissions and
14+
limitations under the License.
15+
*/
16+
17+
.mx_NotificationBadge {
18+
&:not(.mx_NotificationBadge_visible) {
19+
display: none;
20+
}
21+
22+
// Badges are structured a bit weirdly to work around issues with non-monospace
23+
// font styles. The badge pill is actually a background div and the count floats
24+
// within that. For example:
25+
//
26+
// ( 99+ ) <-- Rounded pill is a _bg class.
27+
// ^- The count is an element floating within that.
28+
29+
&.mx_NotificationBadge_visible {
30+
background-color: $roomtile2-badge-color;
31+
margin-right: 14px;
32+
33+
// Create a flexbox to order the count a bit easier
34+
display: flex;
35+
align-items: center;
36+
justify-content: center;
37+
38+
&.mx_NotificationBadge_highlighted {
39+
// TODO: Use a more specific variable
40+
background-color: $warning-color;
41+
}
42+
43+
// These are the 3 background types
44+
45+
&.mx_NotificationBadge_dot {
46+
width: 6px;
47+
height: 6px;
48+
border-radius: 6px;
49+
margin-right: 18px;
50+
}
51+
52+
&.mx_NotificationBadge_2char {
53+
width: 16px;
54+
height: 16px;
55+
border-radius: 16px;
56+
}
57+
58+
&.mx_NotificationBadge_3char {
59+
width: 26px;
60+
height: 16px;
61+
border-radius: 16px;
62+
}
63+
64+
// The following is the floating badge
65+
66+
.mx_NotificationBadge_count {
67+
font-size: $font-10px;
68+
line-height: $font-14px;
69+
color: #fff; // TODO: Variable
70+
}
71+
}
72+
}

‎res/css/views/rooms/_RoomSublist2.scss

+30-5
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,36 @@ limitations under the License.
3030
margin-bottom: 12px;
3131

3232
.mx_RoomSublist2_headerContainer {
33-
text-transform: uppercase;
34-
opacity: 0.5;
35-
line-height: $font-16px;
36-
font-size: $font-12px;
37-
padding-bottom: 8px;
33+
// Create a flexbox to make ordering easy
34+
display: flex;
35+
align-items: center;
36+
37+
.mx_RoomSublist2_badgeContainer {
38+
opacity: 0.8;
39+
padding-right: 7px;
40+
41+
// Create another flexbox row because it's super easy to position the badge at
42+
// the end this way.
43+
display: flex;
44+
align-items: center;
45+
justify-content: flex-end;
46+
}
47+
48+
.mx_RoomSublist2_headerText {
49+
text-transform: uppercase;
50+
opacity: 0.5;
51+
line-height: $font-16px;
52+
font-size: $font-12px;
53+
padding-bottom: 8px;
54+
55+
width: 100%;
56+
flex: 1;
57+
58+
// Ellipsize any text overflow
59+
text-overflow: ellipsis;
60+
overflow: hidden;
61+
white-space: nowrap;
62+
}
3863
}
3964

4065
.mx_RoomSublist2_resizeBox {

‎res/css/views/rooms/_RoomTile2.scss

+4-30
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,14 @@ limitations under the License.
5050
// TODO: Ellipsis on the name and preview
5151

5252
.mx_RoomTile2_name {
53-
font-weight: 600;
5453
font-size: $font-14px;
5554
line-height: $font-19px;
5655
}
5756

57+
.mx_RoomTile2_name.mx_RoomTile2_nameHasUnreadEvents {
58+
font-weight: 600;
59+
}
60+
5861
.mx_RoomTile2_messagePreview {
5962
font-size: $font-13px;
6063
line-height: $font-18px;
@@ -70,34 +73,5 @@ limitations under the License.
7073
display: flex;
7174
align-items: center;
7275
justify-content: flex-end;
73-
74-
.mx_RoomTile2_badge {
75-
background-color: $roomtile2-badge-color;
76-
77-
&:not(.mx_RoomTile2_badgeEmpty) {
78-
border-radius: 16px;
79-
font-size: $font-10px;
80-
line-height: $font-14px;
81-
text-align: center;
82-
font-weight: bold;
83-
margin-right: 14px;
84-
color: #fff; // TODO: Variable
85-
86-
// TODO: Confirm padding on counted badges
87-
padding: 2px 5px;
88-
}
89-
90-
&.mx_RoomTile2_badgeEmpty {
91-
width: 6px;
92-
height: 6px;
93-
border-radius: 6px;
94-
margin-right: 18px;
95-
}
96-
97-
&.mx_RoomTile2_badgeHighlight {
98-
// TODO: Use a more specific variable
99-
background-color: $warning-color;
100-
}
101-
}
10276
}
10377
}

0 commit comments

Comments
 (0)