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

Commit 83612dd

Browse files
t3chguyt3chguy
authored
Merge pull request #5792 from matrix-org/t3chguy/spaces4.12
Fixing spaces papercuts
2 parents e23583d + a64e0d7 commit 83612dd

File tree

24 files changed

+503
-350
lines changed

24 files changed

+503
-350
lines changed

‎res/css/_components.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,7 @@
117117
@import "./views/elements/_EditableItemList.scss";
118118
@import "./views/elements/_ErrorBoundary.scss";
119119
@import "./views/elements/_EventListSummary.scss";
120+
@import "./views/elements/_FacePile.scss";
120121
@import "./views/elements/_Field.scss";
121122
@import "./views/elements/_FormButton.scss";
122123
@import "./views/elements/_ImageView.scss";

‎res/css/structures/_RoomSearch.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ limitations under the License.
2222
// keep border thickness consistent to prevent movement
2323
border: 1px solid transparent;
2424
height: 28px;
25-
padding: 2px;
25+
padding: 1px;
2626

2727
// Create a flexbox for the icons (easier to manage)
2828
display: flex;

‎res/css/structures/_SpacePanel.scss‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -330,10 +330,6 @@ $activeBorderColor: $secondary-fg-color;
330330
mask-image: url('$(res)/img/element-icons/leave.svg');
331331
}
332332

333-
.mx_SpacePanel_iconHome::before {
334-
mask-image: url('$(res)/img/element-icons/roomlist/home.svg');
335-
}
336-
337333
.mx_SpacePanel_iconMembers::before {
338334
mask-image: url('$(res)/img/element-icons/room/members.svg');
339335
}

‎res/css/structures/_SpaceRoomDirectory.scss‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -182,14 +182,15 @@ limitations under the License.
182182

183183
.mx_SpaceRoomDirectory_roomTile {
184184
position: relative;
185-
padding: 6px 16px;
185+
padding: 8px 16px;
186186
border-radius: 8px;
187187
min-height: 56px;
188188
box-sizing: border-box;
189189

190190
display: grid;
191191
grid-template-columns: 20px auto max-content;
192192
grid-column-gap: 8px;
193+
grid-row-gap: 6px;
193194
align-items: center;
194195

195196
.mx_BaseAvatar {
@@ -213,16 +214,28 @@ limitations under the License.
213214

214215
.mx_InfoTooltip_icon {
215216
margin-right: 4px;
217+
position: relative;
218+
vertical-align: text-top;
219+
220+
&::before {
221+
position: absolute;
222+
top: 0;
223+
left: 0;
224+
}
216225
}
217226
}
218227
}
219228

220229
.mx_SpaceRoomDirectory_roomTile_info {
221-
font-size: $font-12px;
222-
line-height: $font-15px;
223-
color: $tertiary-fg-color;
230+
font-size: $font-14px;
231+
line-height: $font-18px;
232+
color: $secondary-fg-color;
224233
grid-row: 2;
225234
grid-column: 1/3;
235+
display: -webkit-box;
236+
-webkit-box-orient: vertical;
237+
-webkit-line-clamp: 2;
238+
overflow: hidden;
226239
}
227240

228241
.mx_SpaceRoomDirectory_actions {
@@ -232,9 +245,9 @@ limitations under the License.
232245
grid-row: 1/3;
233246

234247
.mx_AccessibleButton {
235-
padding: 6px 18px;
236-
237-
display: none;
248+
padding: 8px 18px;
249+
display: inline-block;
250+
visibility: hidden;
238251
}
239252

240253
.mx_Checkbox {
@@ -248,7 +261,7 @@ limitations under the License.
248261
background-color: $groupFilterPanel-bg-color;
249262

250263
.mx_AccessibleButton {
251-
display: inline-block;
264+
visibility: visible;
252265
}
253266
}
254267
}

‎res/css/structures/_SpaceRoomView.scss‎

Lines changed: 120 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ $SpaceRoomViewInnerWidth: 428px;
2222
width: 432px;
2323
box-sizing: border-box;
2424
border-radius: 8px;
25-
border: 1px solid $space-button-outline-color;
25+
border: 1px solid $input-border-color;
2626
font-size: $font-15px;
2727
margin: 20px 0;
2828

@@ -122,7 +122,6 @@ $SpaceRoomViewInnerWidth: 428px;
122122
max-width: 480px;
123123
box-sizing: border-box;
124124
box-shadow: 2px 15px 30px $dialog-shadow-color;
125-
border: 1px solid $input-border-color;
126125
border-radius: 8px;
127126

128127
.mx_SpaceRoomView_preview_inviter {
@@ -154,53 +153,6 @@ $SpaceRoomViewInnerWidth: 428px;
154153
margin: 20px 0 !important; // override default margin from above
155154
}
156155

157-
.mx_SpaceRoomView_preview_info {
158-
color: $tertiary-fg-color;
159-
font-size: $font-15px;
160-
line-height: $font-24px;
161-
margin: 20px 0;
162-
163-
.mx_SpaceRoomView_preview_info_public,
164-
.mx_SpaceRoomView_preview_info_private {
165-
padding-left: 20px;
166-
position: relative;
167-
168-
&::before {
169-
position: absolute;
170-
content: "";
171-
width: 20px;
172-
height: 20px;
173-
top: 0;
174-
left: -2px;
175-
mask-position: center;
176-
mask-repeat: no-repeat;
177-
background-color: $tertiary-fg-color;
178-
}
179-
}
180-
181-
.mx_SpaceRoomView_preview_info_public::before {
182-
mask-size: 12px;
183-
mask-image: url("$(res)/img/globe.svg");
184-
}
185-
186-
.mx_SpaceRoomView_preview_info_private::before {
187-
mask-size: 14px;
188-
mask-image: url("$(res)/img/element-icons/lock.svg");
189-
}
190-
191-
.mx_AccessibleButton_kind_link {
192-
color: inherit;
193-
position: relative;
194-
padding-left: 16px;
195-
196-
&::before {
197-
content: "·"; // visual separator
198-
position: absolute;
199-
left: 6px;
200-
}
201-
}
202-
}
203-
204156
.mx_SpaceRoomView_preview_topic {
205157
font-size: $font-14px;
206158
line-height: $font-22px;
@@ -254,36 +206,90 @@ $SpaceRoomViewInnerWidth: 428px;
254206
vertical-align: middle;
255207
}
256208
}
209+
}
210+
211+
.mx_SpaceRoomView_landing_info {
212+
display: flex;
213+
align-items: center;
214+
215+
.mx_SpaceRoomView_info {
216+
display: inline-block;
217+
margin: 0;
218+
}
219+
220+
.mx_FacePile {
221+
display: inline-block;
222+
margin-left: auto;
223+
margin-right: 12px;
257224

258-
.mx_SpaceRoomView_landing_memberCount {
225+
.mx_FacePile_faces {
226+
cursor: pointer;
227+
228+
> span:hover {
229+
.mx_BaseAvatar {
230+
filter: brightness(0.8);
231+
}
232+
}
233+
234+
> span:first-child {
235+
position: relative;
236+
237+
.mx_BaseAvatar {
238+
filter: brightness(0.8);
239+
}
240+
241+
&::before {
242+
content: "";
243+
z-index: 1;
244+
position: absolute;
245+
top: 0;
246+
left: 0;
247+
height: 30px;
248+
width: 30px;
249+
background: #ffffff; // white icon fill
250+
mask-position: center;
251+
mask-size: 24px;
252+
mask-repeat: no-repeat;
253+
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
254+
}
255+
}
256+
}
257+
}
258+
259+
.mx_SpaceRoomView_landing_inviteButton {
259260
position: relative;
260-
margin-left: 24px;
261-
padding: 0 0 0 28px;
262-
line-height: $font-24px;
263-
vertical-align: text-bottom;
261+
padding-left: 40px;
262+
height: min-content;
264263

265264
&::before {
266265
position: absolute;
267-
content: '';
268-
width: 24px;
269-
height: 24px;
270-
top: 0;
271-
left: 0;
266+
content: "";
267+
left: 8px;
268+
height: 16px;
269+
width: 16px;
270+
background: #ffffff; // white icon fill
272271
mask-position: center;
272+
mask-size: 16px;
273273
mask-repeat: no-repeat;
274-
mask-size: contain;
275-
background-color: $accent-color;
276-
mask-image: url('$(res)/img/element-icons/community-members.svg');
274+
mask-image: url('$(res)/img/element-icons/room/invite.svg');
277275
}
278276
}
279277
}
280278

281279
.mx_SpaceRoomView_landing_topic {
282280
font-size: $font-15px;
281+
margin-top: 12px;
282+
margin-bottom: 16px;
283+
}
284+
285+
> hr {
286+
border: none;
287+
height: 1px;
288+
background-color: $groupFilterPanel-bg-color;
283289
}
284290

285291
.mx_SpaceRoomView_landing_adminButtons {
286-
margin-top: 32px;
292+
margin-top: 24px;
287293

288294
.mx_AccessibleButton {
289295
position: relative;
@@ -292,9 +298,9 @@ $SpaceRoomViewInnerWidth: 428px;
292298
box-sizing: border-box;
293299
padding: 72px 16px 0;
294300
border-radius: 12px;
295-
border: 1px solid $space-button-outline-color;
301+
border: 1px solid $input-border-color;
296302
margin-right: 28px;
297-
margin-bottom: 28px;
303+
margin-bottom: 20px;
298304
font-size: $font-14px;
299305
display: inline-block;
300306
vertical-align: bottom;
@@ -324,16 +330,6 @@ $SpaceRoomViewInnerWidth: 428px;
324330
background: #ffffff; // white icon fill
325331
}
326332

327-
&.mx_SpaceRoomView_landing_inviteButton {
328-
&::before {
329-
background-color: $accent-color;
330-
}
331-
332-
&::after {
333-
mask-image: url('$(res)/img/element-icons/room/invite.svg');
334-
}
335-
}
336-
337333
&.mx_SpaceRoomView_landing_addButton {
338334
&::before {
339335
background-color: #ac3ba8;
@@ -366,12 +362,8 @@ $SpaceRoomViewInnerWidth: 428px;
366362
}
367363
}
368364

369-
.mx_SpaceRoomDirectory_list {
370-
max-width: 600px;
371-
372-
.mx_SpaceRoomDirectory_roomTile_actions {
373-
display: none;
374-
}
365+
.mx_SearchBox {
366+
margin: 0 0 20px;
375367
}
376368
}
377369

@@ -424,3 +416,50 @@ $SpaceRoomViewInnerWidth: 428px;
424416
}
425417
}
426418
}
419+
420+
.mx_SpaceRoomView_info {
421+
color: $secondary-fg-color;
422+
font-size: $font-15px;
423+
line-height: $font-24px;
424+
margin: 20px 0;
425+
426+
.mx_SpaceRoomView_info_public,
427+
.mx_SpaceRoomView_info_private {
428+
padding-left: 20px;
429+
position: relative;
430+
431+
&::before {
432+
position: absolute;
433+
content: "";
434+
width: 20px;
435+
height: 20px;
436+
top: 0;
437+
left: -2px;
438+
mask-position: center;
439+
mask-repeat: no-repeat;
440+
background-color: $tertiary-fg-color;
441+
}
442+
}
443+
444+
.mx_SpaceRoomView_info_public::before {
445+
mask-size: 12px;
446+
mask-image: url("$(res)/img/globe.svg");
447+
}
448+
449+
.mx_SpaceRoomView_info_private::before {
450+
mask-size: 14px;
451+
mask-image: url("$(res)/img/element-icons/lock.svg");
452+
}
453+
454+
.mx_AccessibleButton_kind_link {
455+
color: inherit;
456+
position: relative;
457+
padding-left: 16px;
458+
459+
&::before {
460+
content: "·"; // visual separator
461+
position: absolute;
462+
left: 6px;
463+
}
464+
}
465+
}

0 commit comments

Comments
 (0)