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

Commit eff0e6f

Browse files
t3chguyt3chguy
committed
Add facepile to Space landing page and tweak layout slightly
1 parent d10241b commit eff0e6f

File tree

3 files changed

+189
-145
lines changed

3 files changed

+189
-145
lines changed

‎res/css/structures/_SpaceRoomView.scss‎

Lines changed: 108 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -153,53 +153,6 @@ $SpaceRoomViewInnerWidth: 428px;
153153
margin: 20px 0 !important; // override default margin from above
154154
}
155155

156-
.mx_SpaceRoomView_preview_info {
157-
color: $tertiary-fg-color;
158-
font-size: $font-15px;
159-
line-height: $font-24px;
160-
margin: 20px 0;
161-
162-
.mx_SpaceRoomView_preview_info_public,
163-
.mx_SpaceRoomView_preview_info_private {
164-
padding-left: 20px;
165-
position: relative;
166-
167-
&::before {
168-
position: absolute;
169-
content: "";
170-
width: 20px;
171-
height: 20px;
172-
top: 0;
173-
left: -2px;
174-
mask-position: center;
175-
mask-repeat: no-repeat;
176-
background-color: $tertiary-fg-color;
177-
}
178-
}
179-
180-
.mx_SpaceRoomView_preview_info_public::before {
181-
mask-size: 12px;
182-
mask-image: url("$(res)/img/globe.svg");
183-
}
184-
185-
.mx_SpaceRoomView_preview_info_private::before {
186-
mask-size: 14px;
187-
mask-image: url("$(res)/img/element-icons/lock.svg");
188-
}
189-
190-
.mx_AccessibleButton_kind_link {
191-
color: inherit;
192-
position: relative;
193-
padding-left: 16px;
194-
195-
&::before {
196-
content: "·"; // visual separator
197-
position: absolute;
198-
left: 6px;
199-
}
200-
}
201-
}
202-
203156
.mx_SpaceRoomView_preview_topic {
204157
font-size: $font-14px;
205158
line-height: $font-22px;
@@ -253,32 +206,80 @@ $SpaceRoomViewInnerWidth: 428px;
253206
vertical-align: middle;
254207
}
255208
}
209+
}
210+
211+
.mx_SpaceRoomView_landing_info {
212+
display: flex;
213+
margin-right: 60px;
214+
align-items: center;
215+
216+
.mx_SpaceRoomView_info {
217+
display: inline-block;
218+
margin: 0;
219+
}
220+
221+
.mx_FacePile {
222+
display: inline-block;
223+
margin-left: auto;
224+
margin-right: 12px;
225+
226+
.mx_FacePile_faces {
227+
cursor: pointer;
228+
229+
> span:hover {
230+
.mx_BaseAvatar {
231+
filter: brightness(0.8);
232+
}
233+
}
256234

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

264265
&::before {
265266
position: absolute;
266-
content: '';
267-
width: 24px;
268-
height: 24px;
269-
top: 0;
270-
left: 0;
267+
content: "";
268+
left: 8px;
269+
height: 16px;
270+
width: 16px;
271+
background: #ffffff; // white icon fill
271272
mask-position: center;
273+
mask-size: 16px;
272274
mask-repeat: no-repeat;
273-
mask-size: contain;
274-
background-color: $accent-color;
275-
mask-image: url('$(res)/img/element-icons/community-members.svg');
275+
mask-image: url('$(res)/img/element-icons/room/invite.svg');
276276
}
277277
}
278278
}
279279

280280
.mx_SpaceRoomView_landing_topic {
281281
font-size: $font-15px;
282+
margin-top: 12px;
282283
}
283284

284285
.mx_SpaceRoomView_landing_adminButtons {
@@ -323,16 +324,6 @@ $SpaceRoomViewInnerWidth: 428px;
323324
background: #ffffff; // white icon fill
324325
}
325326

326-
&.mx_SpaceRoomView_landing_inviteButton {
327-
&::before {
328-
background-color: $accent-color;
329-
}
330-
331-
&::after {
332-
mask-image: url('$(res)/img/element-icons/room/invite.svg');
333-
}
334-
}
335-
336327
&.mx_SpaceRoomView_landing_addButton {
337328
&::before {
338329
background-color: #ac3ba8;
@@ -424,3 +415,50 @@ $SpaceRoomViewInnerWidth: 428px;
424415
}
425416
}
426417
}
418+
419+
.mx_SpaceRoomView_info {
420+
color: $tertiary-fg-color;
421+
font-size: $font-15px;
422+
line-height: $font-24px;
423+
margin: 20px 0;
424+
425+
.mx_SpaceRoomView_info_public,
426+
.mx_SpaceRoomView_info_private {
427+
padding-left: 20px;
428+
position: relative;
429+
430+
&::before {
431+
position: absolute;
432+
content: "";
433+
width: 20px;
434+
height: 20px;
435+
top: 0;
436+
left: -2px;
437+
mask-position: center;
438+
mask-repeat: no-repeat;
439+
background-color: $tertiary-fg-color;
440+
}
441+
}
442+
443+
.mx_SpaceRoomView_info_public::before {
444+
mask-size: 12px;
445+
mask-image: url("$(res)/img/globe.svg");
446+
}
447+
448+
.mx_SpaceRoomView_info_private::before {
449+
mask-size: 14px;
450+
mask-image: url("$(res)/img/element-icons/lock.svg");
451+
}
452+
453+
.mx_AccessibleButton_kind_link {
454+
color: inherit;
455+
position: relative;
456+
padding-left: 16px;
457+
458+
&::before {
459+
content: "·"; // visual separator
460+
position: absolute;
461+
left: 6px;
462+
}
463+
}
464+
}

‎src/components/structures/SpaceRoomView.tsx‎

Lines changed: 58 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,41 @@ const useMyRoomMembership = (room: Room) => {
9292
return membership;
9393
};
9494

95+
const SpaceInfo = ({ space }) => {
96+
const joinRule = space.getJoinRule();
97+
98+
let visibilitySection;
99+
if (joinRule === "public") {
100+
visibilitySection = <span className="mx_SpaceRoomView_info_public">
101+
{ _t("Public space") }
102+
</span>;
103+
} else {
104+
visibilitySection = <span className="mx_SpaceRoomView_info_private">
105+
{ _t("Private space") }
106+
</span>;
107+
}
108+
109+
return <div className="mx_SpaceRoomView_info">
110+
{ visibilitySection }
111+
{ joinRule === "public" && <RoomMemberCount room={space}>
112+
{(count) => count > 0 ? (
113+
<AccessibleButton
114+
kind="link"
115+
onClick={() => {
116+
defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
117+
action: Action.SetRightPanelPhase,
118+
phase: RightPanelPhases.RoomMemberList,
119+
refireParams: { space },
120+
});
121+
}}
122+
>
123+
{ _t("%(count)s members", { count }) }
124+
</AccessibleButton>
125+
) : null}
126+
</RoomMemberCount> }
127+
</div>
128+
};
129+
95130
const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) => {
96131
const cli = useContext(MatrixClientContext);
97132
const myMembership = useMyRoomMembership(space);
@@ -158,53 +193,21 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
158193
joinButtons = <InlineSpinner />;
159194
}
160195

161-
const joinRule = space.getJoinRule();
162-
163-
let visibilitySection;
164-
if (joinRule === "public") {
165-
visibilitySection = <span className="mx_SpaceRoomView_preview_info_public">
166-
{ _t("Public space") }
167-
</span>;
168-
} else {
169-
visibilitySection = <span className="mx_SpaceRoomView_preview_info_private">
170-
{ _t("Private space") }
171-
</span>;
172-
}
173-
174196
return <div className="mx_SpaceRoomView_preview">
175197
{ inviterSection }
176198
<RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
177199
<h1 className="mx_SpaceRoomView_preview_name">
178200
<RoomName room={space} />
179201
</h1>
180-
<div className="mx_SpaceRoomView_preview_info">
181-
{ visibilitySection }
182-
{ joinRule === "public" && <RoomMemberCount room={space}>
183-
{(count) => count > 0 ? (
184-
<AccessibleButton
185-
className="mx_SpaceRoomView_preview_memberCount"
186-
kind="link"
187-
onClick={() => {
188-
defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
189-
action: Action.SetRightPanelPhase,
190-
phase: RightPanelPhases.RoomMemberList,
191-
refireParams: { space },
192-
});
193-
}}
194-
>
195-
{ _t("%(count)s members", { count }) }
196-
</AccessibleButton>
197-
) : null}
198-
</RoomMemberCount> }
199-
</div>
202+
<SpaceInfo space={space} />
200203
<RoomTopic room={space}>
201204
{(topic, ref) =>
202205
<div className="mx_SpaceRoomView_preview_topic" ref={ref}>
203206
{ topic }
204207
</div>
205208
}
206209
</RoomTopic>
207-
{ joinRule === "public" && <FacePile room={space} /> }
210+
{ space.getJoinRule() === "public" && <FacePile room={space} /> }
208211
<div className="mx_SpaceRoomView_preview_joinButtons">
209212
{ joinButtons }
210213
</div>
@@ -219,10 +222,14 @@ const SpaceLanding = ({ space }) => {
219222
let inviteButton;
220223
if (myMembership === "join" && space.canInvite(userId)) {
221224
inviteButton = (
222-
<AccessibleButton className="mx_SpaceRoomView_landing_inviteButton" onClick={() => {
223-
showRoomInviteDialog(space.roomId);
224-
}}>
225-
{ _t("Invite people") }
225+
<AccessibleButton
226+
kind="primary"
227+
className="mx_SpaceRoomView_landing_inviteButton"
228+
onClick={() => {
229+
showRoomInviteDialog(space.roomId);
230+
}}
231+
>
232+
{ _t("Invite") }
226233
</AccessibleButton>
227234
);
228235
}
@@ -259,47 +266,35 @@ const SpaceLanding = ({ space }) => {
259266
</AccessibleButton>;
260267
}
261268

269+
const onMembersClick = () => {
270+
defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
271+
action: Action.SetRightPanelPhase,
272+
phase: RightPanelPhases.RoomMemberList,
273+
refireParams: { space },
274+
});
275+
};
276+
262277
return <div className="mx_SpaceRoomView_landing">
263278
<RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
264279
<div className="mx_SpaceRoomView_landing_name">
265280
<RoomName room={space}>
266281
{(name) => {
267282
const tags = { name: () => <div className="mx_SpaceRoomView_landing_nameRow">
268283
<h1>{ name }</h1>
269-
<RoomMemberCount room={space}>
270-
{(count) => count > 0 ? (
271-
<AccessibleButton
272-
className="mx_SpaceRoomView_landing_memberCount"
273-
kind="link"
274-
onClick={() => {
275-
defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
276-
action: Action.SetRightPanelPhase,
277-
phase: RightPanelPhases.RoomMemberList,
278-
refireParams: { space },
279-
});
280-
}}
281-
>
282-
{ _t("%(count)s members", { count }) }
283-
</AccessibleButton>
284-
) : null}
285-
</RoomMemberCount>
286284
</div> };
287-
if (shouldShowSpaceSettings(cli, space)) {
288-
if (space.getJoinRule() === "public") {
289-
return _t("Your public space <name/>", {}, tags) as JSX.Element;
290-
} else {
291-
return _t("Your private space <name/>", {}, tags) as JSX.Element;
292-
}
293-
}
294285
return _t("Welcome to <name/>", {}, tags) as JSX.Element;
295286
}}
296287
</RoomName>
297288
</div>
289+
<div className="mx_SpaceRoomView_landing_info">
290+
<SpaceInfo space={space} />
291+
<FacePile room={space} onlyKnownUsers={false} numShown={7} onClick={onMembersClick} />
292+
{ inviteButton }
293+
</div>
298294
<div className="mx_SpaceRoomView_landing_topic">
299295
<RoomTopic room={space} />
300296
</div>
301297
<div className="mx_SpaceRoomView_landing_adminButtons">
302-
{ inviteButton }
303298
{ addRoomButtons }
304299
{ settingsButton }
305300
</div>

0 commit comments

Comments
 (0)