Merge pull request #5751 from matrix-org/t3chguy/spaces4.7

Rebuild space previews with new designs

res/css/structures/_SpaceRoomView.scss

@@ -20,6 +20,8 @@ $SpaceRoomViewInnerWidth: 428px;
     .mx_MainSplit > div:first-child {
         padding: 80px 60px;
         flex-grow: 1;
+        max-height: 100%;
+        overflow-y: auto;
 
         h1 {
             margin: 0;
@@ -69,9 +71,116 @@ $SpaceRoomViewInnerWidth: 428px;
         }
     }
 
-    .mx_SpaceRoomView_landing {
-        overflow-y: auto;
+    .mx_SpaceRoomView_preview {
+        padding: 32px 24px !important; // override default padding from above
+        margin: auto;
+        max-width: 480px;
+        box-sizing: border-box;
+        box-shadow: 2px 15px 30px $dialog-shadow-color;
+        border: 1px solid $input-border-color;
+        border-radius: 8px;
 
+        .mx_SpaceRoomView_preview_inviter {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+            font-size: $font-15px;
+
+            > div {
+                margin-left: 8px;
+
+                .mx_SpaceRoomView_preview_inviter_name {
+                    line-height: $font-18px;
+                }
+
+                .mx_SpaceRoomView_preview_inviter_mxid {
+                    line-height: $font-24px;
+                    color: $secondary-fg-color;
+                }
+            }
+        }
+
+        > .mx_BaseAvatar_image,
+        > .mx_BaseAvatar > .mx_BaseAvatar_image {
+            border-radius: 12px;
+        }
+
+        h1.mx_SpaceRoomView_preview_name {
+            margin: 20px 0 !important; // override default margin from above
+        }
+
+        .mx_SpaceRoomView_preview_info {
+            color: $tertiary-fg-color;
+            font-size: $font-15px;
+            line-height: $font-24px;
+            margin: 20px 0;
+
+            .mx_SpaceRoomView_preview_info_public,
+            .mx_SpaceRoomView_preview_info_private {
+                padding-left: 20px;
+                position: relative;
+
+                &::before {
+                    position: absolute;
+                    content: "";
+                    width: 20px;
+                    height: 20px;
+                    top: 0;
+                    left: -2px;
+                    mask-position: center;
+                    mask-repeat: no-repeat;
+                    background-color: $tertiary-fg-color;
+                }
+            }
+
+            .mx_SpaceRoomView_preview_info_public::before {
+                mask-size: 12px;
+                mask-image: url("$(res)/img/globe.svg");
+            }
+
+            .mx_SpaceRoomView_preview_info_private::before {
+                mask-size: 14px;
+                mask-image: url("$(res)/img/element-icons/lock.svg");
+            }
+
+            .mx_AccessibleButton_kind_link {
+                color: inherit;
+                position: relative;
+                padding-left: 16px;
+
+                &::before {
+                    content: "·"; // visual separator
+                    position: absolute;
+                    left: 6px;
+                }
+            }
+        }
+
+        .mx_SpaceRoomView_preview_topic {
+            font-size: $font-14px;
+            line-height: $font-22px;
+            color: $secondary-fg-color;
+            margin: 20px 0;
+            max-height: 160px;
+            overflow-y: auto;
+        }
+
+        .mx_SpaceRoomView_preview_joinButtons {
+            margin-top: 20px;
+
+            .mx_AccessibleButton {
+                width: 200px;
+                box-sizing: border-box;
+                padding: 14px 0;
+
+                & + .mx_AccessibleButton {
+                    margin-left: 20px;
+                }
+            }
+        }
+    }
+
+    .mx_SpaceRoomView_landing {
         > .mx_BaseAvatar_image,
         > .mx_BaseAvatar > .mx_BaseAvatar_image {
             border-radius: 12px;
@@ -128,14 +237,6 @@ $SpaceRoomViewInnerWidth: 428px;
             font-size: $font-15px;
         }
 
-        .mx_SpaceRoomView_landing_joinButtons {
-            margin-top: 24px;
-
-            .mx_FormButton {
-                padding: 8px 22px;
-            }
-        }
-
         .mx_SpaceRoomView_landing_adminButtons {
             margin-top: 32px;
 

res/css/views/elements/_FormButton.scss

@@ -33,4 +33,10 @@ limitations under the License.
         color: $notice-primary-color;
         background-color: $notice-primary-bg-color;
     }
+
+    &.mx_AccessibleButton_kind_secondary {
+        color: $secondary-fg-color;
+        border: 1px solid $secondary-fg-color;
+        background-color: unset;
+    }
 }

src/components/structures/SpaceRoomView.tsx

@@ -94,26 +94,95 @@ const useMyRoomMembership = (room: Room) => {
     return membership;
 };
 
-const SpaceLanding = ({ space, onJoinButtonClicked, onRejectButtonClicked }) => {
+const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) => {
     const cli = useContext(MatrixClientContext);
     const myMembership = useMyRoomMembership(space);
-    const joinRule = space.getJoinRule();
-    const userId = cli.getUserId();
 
+    let inviterSection;
     let joinButtons;
     if (myMembership === "invite") {
-        joinButtons = <div className="mx_SpaceRoomView_landing_joinButtons">
-            <FormButton label={_t("Accept Invite")} onClick={onJoinButtonClicked} />
-            <AccessibleButton kind="link" onClick={onRejectButtonClicked}>
-                {_t("Decline")}
-            </AccessibleButton>
-        </div>;
-    } else if (myMembership !== "join" && joinRule === "public") {
-        joinButtons = <div className="mx_SpaceRoomView_landing_joinButtons">
-            <FormButton label={_t("Join")} onClick={onJoinButtonClicked} />
+        const inviteSender = space.getMember(cli.getUserId())?.events.member?.getSender();
+        const inviter = inviteSender && space.getMember(inviteSender);
+
+        if (inviteSender) {
+            inviterSection = <div className="mx_SpaceRoomView_preview_inviter">
+                <MemberAvatar member={inviter} width={32} height={32} />
+                <div>
+                    <div className="mx_SpaceRoomView_preview_inviter_name">
+                        { _t("<inviter/> invites you", {}, {
+                            inviter: () => <b>{ inviter.name || inviteSender }</b>,
+                        }) }
+                    </div>
+                    { inviter ? <div className="mx_SpaceRoomView_preview_inviter_mxid">
+                        { inviteSender }
+                    </div> : null }
+                </div>
             </div>;
         }
 
+        joinButtons = <>
+            <FormButton label={_t("Reject")} kind="secondary" onClick={onRejectButtonClicked} />
+            <FormButton label={_t("Accept")} onClick={onJoinButtonClicked} />
+        </>;
+    } else {
+        joinButtons = <FormButton label={_t("Join")} onClick={onJoinButtonClicked} />
+    }
+
+    let visibilitySection;
+    if (space.getJoinRule() === "public") {
+        visibilitySection = <span className="mx_SpaceRoomView_preview_info_public">
+            { _t("Public space") }
+        </span>;
+    } else {
+        visibilitySection = <span className="mx_SpaceRoomView_preview_info_private">
+            { _t("Private space") }
+        </span>;
+    }
+
+    return <div className="mx_SpaceRoomView_preview">
+        { inviterSection }
+        <RoomAvatar room={space} height={80} width={80} viewAvatarOnClick={true} />
+        <h1 className="mx_SpaceRoomView_preview_name">
+            <RoomName room={space} />
+        </h1>
+        <div className="mx_SpaceRoomView_preview_info">
+            { visibilitySection }
+            <RoomMemberCount room={space}>
+                {(count) => count > 0 ? (
+                    <AccessibleButton
+                        className="mx_SpaceRoomView_preview_memberCount"
+                        kind="link"
+                        onClick={() => {
+                            defaultDispatcher.dispatch<SetRightPanelPhasePayload>({
+                                action: Action.SetRightPanelPhase,
+                                phase: RightPanelPhases.RoomMemberList,
+                                refireParams: { space },
+                            });
+                        }}
+                    >
+                        { _t("%(count)s members", { count }) }
+                    </AccessibleButton>
+                ) : null}
+            </RoomMemberCount>
+        </div>
+        <RoomTopic room={space}>
+            {(topic, ref) =>
+                <div className="mx_SpaceRoomView_preview_topic" ref={ref}>
+                    { topic }
+                </div>
+            }
+        </RoomTopic>
+        <div className="mx_SpaceRoomView_preview_joinButtons">
+            { joinButtons }
+        </div>
+    </div>;
+};
+
+const SpaceLanding = ({ space }) => {
+    const cli = useContext(MatrixClientContext);
+    const myMembership = useMyRoomMembership(space);
+    const userId = cli.getUserId();
+
     let inviteButton;
     if (myMembership === "join" && space.canInvite(userId)) {
         inviteButton = (
@@ -227,26 +296,7 @@ const SpaceLanding = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
                             ) : null}
                         </RoomMemberCount>
                     </div> };
-                    if (myMembership === "invite") {
-                        const inviteSender = space.getMember(userId)?.events.member?.getSender();
-                        const inviter = inviteSender && space.getMember(inviteSender);
-
-                        if (inviteSender) {
-                            return _t("<inviter/> invited you to <name/>", {}, {
-                                name: tags.name,
-                                inviter: () => inviter
-                                    ? <span className="mx_SpaceRoomView_landing_inviter">
-                                        <MemberAvatar member={inviter} width={26} height={26} viewUserOnClick={true} />
-                                        { inviter.name }
-                                    </span>
-                                    : <span className="mx_SpaceRoomView_landing_inviter">
-                                        { inviteSender }
-                                    </span>,
-                            }) as JSX.Element;
-                        } else {
-                            return _t("You have been invited to <name/>", {}, tags) as JSX.Element;
-                        }
-                    } else if (shouldShowSpaceSettings(cli, space)) {
+                    if (shouldShowSpaceSettings(cli, space)) {
                         if (space.getJoinRule() === "public") {
                             return _t("Your public space <name/>", {}, tags) as JSX.Element;
                         } else {
@@ -260,7 +310,6 @@ const SpaceLanding = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
         <div className="mx_SpaceRoomView_landing_topic">
             <RoomTopic room={space} />
         </div>
-        { joinButtons }
         <div className="mx_SpaceRoomView_landing_adminButtons">
             { inviteButton }
             { addRoomButtons }
@@ -548,12 +597,15 @@ export default class SpaceRoomView extends React.PureComponent<IProps, IState> {
     private renderBody() {
         switch (this.state.phase) {
             case Phase.Landing:
-                return <SpaceLanding
+                if (this.props.space.getMyMembership() === "join") {
+                    return <SpaceLanding space={this.props.space} />;
+                } else {
+                    return <SpacePreview
                         space={this.props.space}
                         onJoinButtonClicked={this.props.onJoinButtonClicked}
                         onRejectButtonClicked={this.props.onRejectButtonClicked}
                     />;
-
+                }
             case Phase.PublicCreateRooms:
                 return <SpaceSetupFirstRooms
                     space={this.props.space}

src/i18n/strings/en_EN.json

@@ -2611,14 +2611,14 @@
     "Promoted to users": "Promoted to users",
     "Manage rooms": "Manage rooms",
     "Find a room...": "Find a room...",
-    "Accept Invite": "Accept Invite",
+    "<inviter/> invites you": "<inviter/> invites you",
+    "Public space": "Public space",
+    "Private space": "Private space",
+    "%(count)s members|other": "%(count)s members",
+    "%(count)s members|one": "%(count)s member",
     "Add existing rooms & spaces": "Add existing rooms & spaces",
     "Default Rooms": "Default Rooms",
     "Your server does not support showing space hierarchies.": "Your server does not support showing space hierarchies.",
-    "%(count)s members|other": "%(count)s members",
-    "%(count)s members|one": "%(count)s member",
-    "<inviter/> invited you to <name/>": "<inviter/> invited you to <name/>",
-    "You have been invited to <name/>": "You have been invited to <name/>",
     "Your public space <name/>": "Your public space <name/>",
     "Your private space <name/>": "Your private space <name/>",
     "Welcome to <name/>": "Welcome to <name/>",