Skip to content

Commit 658ff4d

Browse files
robintownrobintown
authored
Iterate video room designs in labs (matrix-org#8499)
* Remove blank header from video room view frame * Add video room option to space context menu * Remove duplicate tooltips from face piles * Factor RoomInfoLine out of SpaceRoomView * Factor RoomPreviewCard out of SpaceRoomView * Adapt RoomPreviewCard for video rooms * "New video room" → "Video room" * Add comment about unused cases in RoomPreviewCard * Make widgets in video rooms mutable again to de-risk future upgrades * Ensure that the video channel exists when mounting VideoRoomView
1 parent cda3113 commit 658ff4d

20 files changed

+617
-434
lines changed

‎res/css/_components.scss

+2
Original file line numberDiff line numberDiff line change
@@ -256,9 +256,11 @@
256256
@import "./views/rooms/_ReplyTile.scss";
257257
@import "./views/rooms/_RoomBreadcrumbs.scss";
258258
@import "./views/rooms/_RoomHeader.scss";
259+
@import "./views/rooms/_RoomInfoLine.scss";
259260
@import "./views/rooms/_RoomList.scss";
260261
@import "./views/rooms/_RoomListHeader.scss";
261262
@import "./views/rooms/_RoomPreviewBar.scss";
263+
@import "./views/rooms/_RoomPreviewCard.scss";
262264
@import "./views/rooms/_RoomSublist.scss";
263265
@import "./views/rooms/_RoomTile.scss";
264266
@import "./views/rooms/_RoomUpgradeWarningBar.scss";

‎res/css/structures/_SpaceRoomView.scss

-152
Original file line numberDiff line numberDiff line change
@@ -137,124 +137,6 @@ $SpaceRoomViewInnerWidth: 428px;
137137
}
138138
}
139139

140-
.mx_SpaceRoomView_preview,
141-
.mx_SpaceRoomView_landing {
142-
.mx_SpaceRoomView_info_memberCount {
143-
color: inherit;
144-
position: relative;
145-
padding: 0 0 0 16px;
146-
font-size: $font-15px;
147-
display: inline; // cancel inline-flex
148-
149-
&::before {
150-
content: "·"; // visual separator
151-
position: absolute;
152-
left: 6px;
153-
}
154-
}
155-
}
156-
157-
.mx_SpaceRoomView_preview {
158-
padding: 32px 24px !important; // override default padding from above
159-
margin: auto;
160-
max-width: 480px;
161-
box-sizing: border-box;
162-
box-shadow: 2px 15px 30px $dialog-shadow-color;
163-
border-radius: 8px;
164-
position: relative;
165-
166-
// XXX remove this when spaces leaves Beta
167-
.mx_BetaCard_betaPill {
168-
position: absolute;
169-
right: 24px;
170-
top: 32px;
171-
}
172-
173-
// XXX remove this when spaces leaves Beta
174-
.mx_SpaceRoomView_preview_spaceBetaPrompt {
175-
font-weight: $font-semi-bold;
176-
font-size: $font-14px;
177-
line-height: $font-24px;
178-
color: $primary-content;
179-
margin-top: 24px;
180-
position: relative;
181-
padding-left: 24px;
182-
183-
.mx_AccessibleButton_kind_link {
184-
display: inline;
185-
padding: 0;
186-
font-size: inherit;
187-
line-height: inherit;
188-
}
189-
190-
&::before {
191-
content: "";
192-
position: absolute;
193-
height: $font-24px;
194-
width: 20px;
195-
left: 0;
196-
mask-repeat: no-repeat;
197-
mask-position: center;
198-
mask-size: contain;
199-
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
200-
background-color: $secondary-content;
201-
}
202-
}
203-
204-
.mx_SpaceRoomView_preview_inviter {
205-
display: flex;
206-
align-items: center;
207-
margin-bottom: 20px;
208-
font-size: $font-15px;
209-
210-
> div {
211-
margin-left: 8px;
212-
213-
.mx_SpaceRoomView_preview_inviter_name {
214-
line-height: $font-18px;
215-
}
216-
217-
.mx_SpaceRoomView_preview_inviter_mxid {
218-
line-height: $font-24px;
219-
color: $secondary-content;
220-
}
221-
}
222-
}
223-
224-
> .mx_RoomAvatar_isSpaceRoom {
225-
&.mx_BaseAvatar_image, .mx_BaseAvatar_image {
226-
border-radius: 12px;
227-
}
228-
}
229-
230-
h1.mx_SpaceRoomView_preview_name {
231-
margin: 20px 0 !important; // override default margin from above
232-
}
233-
234-
.mx_SpaceRoomView_preview_topic {
235-
font-size: $font-14px;
236-
line-height: $font-22px;
237-
color: $secondary-content;
238-
margin: 20px 0;
239-
max-height: 160px;
240-
overflow-y: auto;
241-
}
242-
243-
.mx_SpaceRoomView_preview_joinButtons {
244-
margin-top: 20px;
245-
246-
.mx_AccessibleButton {
247-
width: 200px;
248-
box-sizing: border-box;
249-
padding: 14px 0;
250-
251-
& + .mx_AccessibleButton {
252-
margin-left: 20px;
253-
}
254-
}
255-
}
256-
}
257-
258140
.mx_SpaceRoomView_landing {
259141
display: flex;
260142
flex-direction: column;
@@ -314,40 +196,6 @@ $SpaceRoomViewInnerWidth: 428px;
314196
flex-wrap: wrap;
315197
line-height: $font-24px;
316198

317-
.mx_SpaceRoomView_info {
318-
color: $secondary-content;
319-
font-size: $font-15px;
320-
display: inline-block;
321-
322-
.mx_SpaceRoomView_info_public,
323-
.mx_SpaceRoomView_info_private {
324-
padding-left: 20px;
325-
position: relative;
326-
327-
&::before {
328-
position: absolute;
329-
content: "";
330-
width: 20px;
331-
height: 20px;
332-
top: 0;
333-
left: -2px;
334-
mask-position: center;
335-
mask-repeat: no-repeat;
336-
background-color: $tertiary-content;
337-
}
338-
}
339-
340-
.mx_SpaceRoomView_info_public::before {
341-
mask-size: 12px;
342-
mask-image: url("$(res)/img/globe.svg");
343-
}
344-
345-
.mx_SpaceRoomView_info_private::before {
346-
mask-size: 14px;
347-
mask-image: url("$(res)/img/element-icons/lock.svg");
348-
}
349-
}
350-
351199
.mx_SpaceRoomView_landing_infoBar_interactive {
352200
display: flex;
353201
flex-wrap: wrap;

‎res/css/structures/_VideoRoomView.scss

+1-2
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,7 @@ limitations under the License.
2424
margin-right: calc($container-gap-width / 2);
2525

2626
background-color: $header-panel-bg-color;
27-
padding-top: 33px; // to match the right panel chat heading
28-
border: 8px solid $header-panel-bg-color;
27+
padding: 8px;
2928
border-radius: 8px;
3029

3130
.mx_AppTile {

‎res/css/views/elements/_FacePile.scss

+3
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ limitations under the License.
1515
*/
1616

1717
.mx_FacePile {
18+
display: flex;
19+
align-items: center;
20+
1821
.mx_FacePile_faces {
1922
display: inline-flex;
2023
flex-direction: row-reverse;

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

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/*
2+
Copyright 2022 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_RoomInfoLine {
18+
color: $secondary-content;
19+
display: inline-block;
20+
21+
&::before {
22+
content: "";
23+
display: inline-block;
24+
height: 1.2em;
25+
mask-position-y: center;
26+
mask-repeat: no-repeat;
27+
background-color: $tertiary-content;
28+
vertical-align: text-bottom;
29+
margin-right: 6px;
30+
}
31+
32+
&.mx_RoomInfoLine_public::before {
33+
width: 12px;
34+
mask-size: 12px;
35+
mask-image: url("$(res)/img/globe.svg");
36+
}
37+
38+
&.mx_RoomInfoLine_private::before {
39+
width: 14px;
40+
mask-size: 14px;
41+
mask-image: url("$(res)/img/element-icons/lock.svg");
42+
}
43+
44+
&.mx_RoomInfoLine_video::before {
45+
width: 16px;
46+
mask-size: 16px;
47+
mask-image: url("$(res)/img/element-icons/call/video-call.svg");
48+
}
49+
50+
.mx_RoomInfoLine_members {
51+
color: inherit;
52+
53+
&::before {
54+
content: "·"; // visual separator
55+
margin: 0 6px;
56+
}
57+
}
58+
}

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

+136
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,136 @@
1+
/*
2+
Copyright 2022 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_RoomPreviewCard {
18+
padding: $spacing-32 $spacing-24 !important; // Override SpaceRoomView's default padding
19+
margin: auto;
20+
flex-grow: 1;
21+
max-width: 480px;
22+
box-sizing: border-box;
23+
background-color: $system;
24+
border-radius: 8px;
25+
position: relative;
26+
font-size: $font-14px;
27+
28+
.mx_RoomPreviewCard_notice {
29+
font-weight: $font-semi-bold;
30+
line-height: $font-24px;
31+
color: $primary-content;
32+
margin-top: $spacing-24;
33+
position: relative;
34+
padding-left: calc(20px + $spacing-8);
35+
36+
.mx_AccessibleButton_kind_link {
37+
display: inline;
38+
padding: 0;
39+
font-size: inherit;
40+
line-height: inherit;
41+
}
42+
43+
&::before {
44+
content: "";
45+
position: absolute;
46+
height: $font-24px;
47+
width: 20px;
48+
left: 0;
49+
mask-repeat: no-repeat;
50+
mask-position: center;
51+
mask-size: contain;
52+
mask-image: url('$(res)/img/element-icons/room/room-summary.svg');
53+
background-color: $secondary-content;
54+
}
55+
}
56+
57+
.mx_RoomPreviewCard_inviter {
58+
display: flex;
59+
align-items: center;
60+
margin-bottom: $spacing-20;
61+
font-size: $font-15px;
62+
63+
> div {
64+
margin-left: $spacing-8;
65+
66+
.mx_RoomPreviewCard_inviter_name {
67+
line-height: $font-18px;
68+
}
69+
70+
.mx_RoomPreviewCard_inviter_mxid {
71+
color: $secondary-content;
72+
}
73+
}
74+
}
75+
76+
.mx_RoomPreviewCard_avatar {
77+
display: flex;
78+
align-items: center;
79+
80+
.mx_RoomAvatar_isSpaceRoom {
81+
&.mx_BaseAvatar_image, .mx_BaseAvatar_image {
82+
border-radius: 12px;
83+
}
84+
}
85+
86+
.mx_RoomPreviewCard_video {
87+
width: 50px;
88+
height: 50px;
89+
border-radius: calc((50px + 2 * 3px) / 2);
90+
background-color: $accent;
91+
border: 3px solid $system;
92+
93+
position: relative;
94+
left: calc(-50px / 4 - 3px);
95+
96+
&::before {
97+
content: "";
98+
background-color: $button-primary-fg-color;
99+
position: absolute;
100+
width: 50px;
101+
height: 50px;
102+
mask-size: 22px;
103+
mask-position: center;
104+
mask-repeat: no-repeat;
105+
mask-image: url('$(res)/img/element-icons/call/video-call.svg');
106+
}
107+
}
108+
}
109+
110+
h1.mx_RoomPreviewCard_name {
111+
margin: $spacing-16 0 !important; // Override SpaceRoomView's default margins
112+
}
113+
114+
.mx_RoomPreviewCard_topic {
115+
line-height: $font-22px;
116+
margin-top: $spacing-16;
117+
max-height: 160px;
118+
overflow-y: auto;
119+
}
120+
121+
.mx_FacePile {
122+
margin-top: $spacing-20;
123+
}
124+
125+
.mx_RoomPreviewCard_joinButtons {
126+
margin-top: $spacing-20;
127+
display: flex;
128+
gap: $spacing-20;
129+
130+
.mx_AccessibleButton {
131+
max-width: 200px;
132+
padding: 14px 0;
133+
flex-grow: 1;
134+
}
135+
}
136+
}

0 commit comments

Comments
 (0)