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

Commit cf2d05a

Browse files
robintownrobintown
committed
Implement room tile changes for voice rooms
Signed-off-by: Robin Townsend <[email protected]>
1 parent 4682786 commit cf2d05a

File tree

10 files changed

+319
-128
lines changed

10 files changed

+319
-128
lines changed

‎res/css/views/right_panel/_UserInfo.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -64,15 +64,15 @@ limitations under the License.
6464
margin-bottom: 8px;
6565
}
6666

67-
.mx_RoomTile_nameContainer {
67+
.mx_RoomTile_titleContainer {
6868
width: 154px;
6969
}
7070

7171
.mx_RoomTile_badge {
7272
display: none;
7373
}
7474

75-
.mx_RoomTile_name {
75+
.mx_RoomTile_title {
7676
width: 160px;
7777
}
7878

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -58,15 +58,15 @@ limitations under the License.
5858
margin: 0 16px 16px 16px;
5959
}
6060

61-
.mx_MemberInfo .mx_RoomTile_nameContainer {
61+
.mx_MemberInfo .mx_RoomTile_titleContainer {
6262
width: 154px;
6363
}
6464

6565
.mx_MemberInfo .mx_RoomTile_badge {
6666
display: none;
6767
}
6868

69-
.mx_MemberInfo .mx_RoomTile_name {
69+
.mx_MemberInfo .mx_RoomTile_title {
7070
width: 160px;
7171
}
7272

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

Lines changed: 147 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ limitations under the License.
2020
padding: 4px;
2121

2222
contain: content; // Not strict as it will break when resizing a sublist vertically
23-
height: 40px;
2423
box-sizing: border-box;
2524

2625
// The tile is also a flexbox row itself
@@ -35,106 +34,166 @@ limitations under the License.
3534
}
3635

3736
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
38-
margin-right: 8px;
37+
margin-right: 10px;
3938
}
4039

41-
.mx_RoomTile_nameContainer {
40+
.mx_RoomTile_details {
4241
flex-grow: 1;
4342
min-width: 0; // allow flex to shrink it
44-
margin-right: 8px; // spacing to buttons/badges
45-
46-
// Create a new column layout flexbox for the name parts
4743
display: flex;
4844
flex-direction: column;
49-
justify-content: center;
50-
51-
.mx_RoomTile_name,
52-
.mx_RoomTile_messagePreview {
53-
margin: 0 2px;
54-
width: 100%;
55-
56-
// Ellipsize any text overflow
57-
text-overflow: ellipsis;
58-
overflow: hidden;
59-
white-space: nowrap;
60-
}
61-
62-
.mx_RoomTile_name {
63-
font-size: $font-14px;
64-
line-height: $font-18px;
65-
}
66-
67-
.mx_RoomTile_name.mx_RoomTile_nameHasUnreadEvents {
68-
font-weight: 600;
69-
}
7045

71-
.mx_RoomTile_messagePreview {
72-
font-size: $font-13px;
73-
line-height: $font-18px;
74-
color: $secondary-content;
75-
}
46+
.mx_RoomTile_primaryDetails {
47+
height: 32px;
48+
display: flex;
49+
flex-wrap: wrap;
50+
51+
.mx_RoomTile_titleContainer {
52+
min-width: 0;
53+
flex-basis: 0;
54+
flex-grow: 1;
55+
margin-right: 8px; // spacing to buttons/badges
56+
57+
// Create a new column layout flexbox for the title parts
58+
display: flex;
59+
flex-direction: column;
60+
justify-content: center;
61+
62+
.mx_RoomTile_title, .mx_RoomTile_subtitle {
63+
width: 100%;
64+
65+
// Ellipsize any text overflow
66+
text-overflow: ellipsis;
67+
overflow: hidden;
68+
white-space: nowrap;
69+
}
70+
71+
.mx_RoomTile_title {
72+
font-size: $font-14px;
73+
line-height: $font-18px;
74+
}
75+
76+
.mx_RoomTile_title.mx_RoomTile_titleHasUnreadEvents {
77+
font-weight: 600;
78+
}
79+
80+
.mx_RoomTile_subtitle {
81+
font-size: $font-13px;
82+
line-height: $font-18px;
83+
color: $secondary-content;
84+
}
85+
86+
.mx_RoomTile_subtitle.mx_RoomTile_voiceIndicator {
87+
&::before {
88+
display: inline-block;
89+
vertical-align: text-bottom;
90+
content: '';
91+
background-color: $secondary-content;
92+
mask-image: url('$(res)/img/voip/voice-room.svg');
93+
mask-size: 16px;
94+
width: 16px;
95+
height: 16px;
96+
margin-right: 4px;
97+
}
98+
99+
&.mx_RoomTile_voiceIndicator_active {
100+
color: $accent;
101+
102+
&::before {
103+
background-color: $accent;
104+
}
105+
}
106+
}
107+
108+
.mx_RoomTile_titleWithSubtitle {
109+
margin-top: -3px; // shift the title up a bit more
110+
}
111+
}
76112

77-
.mx_RoomTile_nameWithPreview {
78-
margin-top: -4px; // shift the name up a bit more
79-
}
80-
}
113+
.mx_RoomTile_notificationsButton {
114+
margin-left: 4px; // spacing between buttons
115+
}
81116

82-
.mx_RoomTile_notificationsButton {
83-
margin-left: 4px; // spacing between buttons
84-
}
117+
.mx_RoomTile_badgeContainer {
118+
height: 16px;
119+
// don't set width so that it takes no space when there is no badge to show
120+
margin: auto 0; // vertically align
121+
122+
// Create a flexbox to make aligning dot badges easier
123+
display: flex;
124+
align-items: center;
125+
126+
.mx_NotificationBadge {
127+
margin-right: 2px; // centering
128+
}
129+
130+
.mx_NotificationBadge_dot {
131+
// make the smaller dot occupy the same width for centering
132+
margin-left: 5px;
133+
margin-right: 7px;
134+
}
135+
}
85136

86-
.mx_RoomTile_badgeContainer {
87-
height: 16px;
88-
// don't set width so that it takes no space when there is no badge to show
89-
margin: auto 0; // vertically align
137+
// The context menu buttons are hidden by default
138+
.mx_RoomTile_menuButton,
139+
.mx_RoomTile_notificationsButton {
140+
width: 20px;
141+
min-width: 20px; // yay flex
142+
height: 20px;
143+
margin-top: auto;
144+
margin-bottom: auto;
145+
position: relative;
146+
display: none;
90147

91-
// Create a flexbox to make aligning dot badges easier
92-
display: flex;
93-
align-items: center;
148+
&::before {
149+
top: 2px;
150+
left: 2px;
151+
content: '';
152+
width: 16px;
153+
height: 16px;
154+
position: absolute;
155+
mask-position: center;
156+
mask-size: contain;
157+
mask-repeat: no-repeat;
158+
background: $primary-content;
159+
}
160+
}
94161

95-
.mx_NotificationBadge {
96-
margin-right: 2px; // centering
97-
}
162+
// If the room has an overriden notification setting then we always show the notifications menu button
163+
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
164+
display: block;
165+
}
98166

99-
.mx_NotificationBadge_dot {
100-
// make the smaller dot occupy the same width for centering
101-
margin-left: 5px;
102-
margin-right: 7px;
167+
.mx_RoomTile_menuButton::before {
168+
mask-image: url('$(res)/img/element-icons/context-menu.svg');
169+
}
103170
}
104-
}
105171

106-
// The context menu buttons are hidden by default
107-
.mx_RoomTile_menuButton,
108-
.mx_RoomTile_notificationsButton {
109-
width: 20px;
110-
min-width: 20px; // yay flex
111-
height: 20px;
112-
margin-top: auto;
113-
margin-bottom: auto;
114-
position: relative;
115-
display: none;
116-
117-
&::before {
118-
top: 2px;
119-
left: 2px;
120-
content: '';
121-
width: 16px;
122-
height: 16px;
123-
position: absolute;
124-
mask-position: center;
125-
mask-size: contain;
126-
mask-repeat: no-repeat;
127-
background: $primary-content;
128-
}
129-
}
172+
.mx_RoomTile_voiceChannel {
173+
width: 100%;
174+
display: flex;
175+
align-items: center;
130176

131-
// If the room has an overriden notification setting then we always show the notifications menu button
132-
.mx_RoomTile_notificationsButton.mx_RoomTile_notificationsButton_show {
133-
display: block;
134-
}
177+
.mx_FacePile {
178+
margin: 6px 0 4px;
179+
}
135180

136-
.mx_RoomTile_menuButton::before {
137-
mask-image: url('$(res)/img/element-icons/context-menu.svg');
181+
.mx_RoomTile_connectVoiceButton {
182+
font-weight: 600;
183+
padding-left: 10px;
184+
padding-right: 10px;
185+
186+
&::before {
187+
content: '';
188+
background-color: $accent;
189+
mask-image: url('$(res)/img/voip/voice-room.svg');
190+
mask-size: 16px;
191+
width: 16px;
192+
height: 16px;
193+
margin-right: 4px;
194+
}
195+
}
196+
}
138197
}
139198

140199
&:not(.mx_RoomTile_minimized) {
@@ -163,6 +222,10 @@ limitations under the License.
163222
.mx_DecoratedRoomAvatar, .mx_RoomTile_avatarContainer {
164223
margin-right: 0;
165224
}
225+
226+
.mx_RoomTile_details {
227+
display: none;
228+
}
166229
}
167230
}
168231

‎res/img/voip/voice-room.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/components/views/groups/GroupInviteTile.js‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@ export default class GroupInviteTile extends React.Component {
126126
const av = <BaseAvatar name={groupName} width={24} height={24} url={httpAvatarUrl} />;
127127

128128
const isMenuDisplayed = Boolean(this.state.contextMenuPosition);
129-
const nameClasses = classNames('mx_RoomTile_name mx_RoomTile_invite mx_RoomTile_badgeShown', {
129+
const nameClasses = classNames('mx_RoomTile_title mx_RoomTile_invite mx_RoomTile_badgeShown', {
130130
'mx_RoomTile_badgeShown': this.state.badgeHover || isMenuDisplayed,
131131
});
132132

@@ -180,17 +180,21 @@ export default class GroupInviteTile extends React.Component {
180180
<div className="mx_RoomTile_avatar">
181181
{ av }
182182
</div>
183-
<div className="mx_RoomTile_nameContainer">
184-
{ label }
185-
<ContextMenuButton
186-
className={badgeClasses}
187-
onClick={this.onContextMenuButtonClick}
188-
label={_t("Options")}
189-
isExpanded={isMenuDisplayed}
190-
tabIndex={isActive ? 0 : -1}
191-
>
192-
{ badgeContent }
193-
</ContextMenuButton>
183+
<div className="mx_RoomTile_details">
184+
<div className="mx_RoomTile_primaryDetails">
185+
<div className="mx_RoomTile_titleContainer">
186+
{ label }
187+
<ContextMenuButton
188+
className={badgeClasses}
189+
onClick={this.onContextMenuButtonClick}
190+
label={_t("Options")}
191+
isExpanded={isMenuDisplayed}
192+
tabIndex={isActive ? 0 : -1}
193+
>
194+
{ badgeContent }
195+
</ContextMenuButton>
196+
</div>
197+
</div>
194198
</div>
195199
{ tooltip }
196200
</AccessibleButton>

‎src/components/views/rooms/ExtraTile.tsx‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -79,12 +79,12 @@ export default class ExtraTile extends React.Component<IProps, IState> {
7979
name = name.replace(":", ":\u200b"); // add a zero-width space to allow linewrapping after the colon
8080

8181
const nameClasses = classNames({
82-
"mx_RoomTile_name": true,
83-
"mx_RoomTile_nameHasUnreadEvents": this.props.notificationState?.isUnread,
82+
"mx_RoomTile_title": true,
83+
"mx_RoomTile_titleHasUnreadEvents": this.props.notificationState?.isUnread,
8484
});
8585

8686
let nameContainer = (
87-
<div className="mx_RoomTile_nameContainer">
87+
<div className="mx_RoomTile_titleContainer">
8888
<div title={name} className={nameClasses} tabIndex={-1} dir="auto">
8989
{ name }
9090
</div>
@@ -110,9 +110,13 @@ export default class ExtraTile extends React.Component<IProps, IState> {
110110
<div className="mx_RoomTile_avatarContainer">
111111
{ this.props.avatar }
112112
</div>
113-
{ nameContainer }
114-
<div className="mx_RoomTile_badgeContainer">
115-
{ badge }
113+
<div className="mx_RoomTile_details">
114+
<div className="mx_RoomTile_primaryDetails">
115+
{ nameContainer }
116+
<div className="mx_RoomTile_badgeContainer">
117+
{ badge }
118+
</div>
119+
</div>
116120
</div>
117121
</Button>
118122
</React.Fragment>

0 commit comments

Comments
 (0)