Show a face pile on a space preview

pull/21833/head
Michael Telatynski 2021-03-25 16:15:34 +00:00
parent 7316eb052b
commit ea77ab125e
5 changed files with 101 additions and 5 deletions

View File

@ -111,12 +111,13 @@
@import "./views/elements/_AddressSelector.scss"; @import "./views/elements/_AddressSelector.scss";
@import "./views/elements/_AddressTile.scss"; @import "./views/elements/_AddressTile.scss";
@import "./views/elements/_DesktopBuildsNotice.scss"; @import "./views/elements/_DesktopBuildsNotice.scss";
@import "./views/elements/_DirectorySearchBox.scss";
@import "./views/elements/_DesktopCapturerSourcePicker.scss"; @import "./views/elements/_DesktopCapturerSourcePicker.scss";
@import "./views/elements/_DirectorySearchBox.scss";
@import "./views/elements/_Dropdown.scss"; @import "./views/elements/_Dropdown.scss";
@import "./views/elements/_EditableItemList.scss"; @import "./views/elements/_EditableItemList.scss";
@import "./views/elements/_ErrorBoundary.scss"; @import "./views/elements/_ErrorBoundary.scss";
@import "./views/elements/_EventListSummary.scss"; @import "./views/elements/_EventListSummary.scss";
@import "./views/elements/_FacePile.scss";
@import "./views/elements/_Field.scss"; @import "./views/elements/_Field.scss";
@import "./views/elements/_FormButton.scss"; @import "./views/elements/_FormButton.scss";
@import "./views/elements/_ImageView.scss"; @import "./views/elements/_ImageView.scss";
@ -217,7 +218,6 @@
@import "./views/settings/_DevicesPanel.scss"; @import "./views/settings/_DevicesPanel.scss";
@import "./views/settings/_E2eAdvancedPanel.scss"; @import "./views/settings/_E2eAdvancedPanel.scss";
@import "./views/settings/_EmailAddresses.scss"; @import "./views/settings/_EmailAddresses.scss";
@import "./views/settings/_SpellCheckLanguages.scss";
@import "./views/settings/_IntegrationManager.scss"; @import "./views/settings/_IntegrationManager.scss";
@import "./views/settings/_Notifications.scss"; @import "./views/settings/_Notifications.scss";
@import "./views/settings/_PhoneNumbers.scss"; @import "./views/settings/_PhoneNumbers.scss";
@ -225,6 +225,7 @@
@import "./views/settings/_SecureBackupPanel.scss"; @import "./views/settings/_SecureBackupPanel.scss";
@import "./views/settings/_SetIdServer.scss"; @import "./views/settings/_SetIdServer.scss";
@import "./views/settings/_SetIntegrationManager.scss"; @import "./views/settings/_SetIntegrationManager.scss";
@import "./views/settings/_SpellCheckLanguages.scss";
@import "./views/settings/_UpdateCheckButton.scss"; @import "./views/settings/_UpdateCheckButton.scss";
@import "./views/settings/tabs/_SettingsTab.scss"; @import "./views/settings/tabs/_SettingsTab.scss";
@import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss"; @import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss";

View File

@ -0,0 +1,40 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
.mx_FacePile {
.mx_FacePile_faces {
display: inline-flex;
flex-direction: row-reverse;
vertical-align: middle;
.mx_BaseAvatar {
& + .mx_BaseAvatar {
margin-right: -10px;
}
}
.mx_BaseAvatar_image {
border: 1px solid $primary-bg-color;
}
}
> span {
margin-left: 12px;
font-size: $font-14px;
line-height: $font-24px;
color: $tertiary-fg-color;
}
}

View File

@ -51,6 +51,7 @@ import AutoHideScrollbar from "./AutoHideScrollbar";
import MemberAvatar from "../views/avatars/MemberAvatar"; import MemberAvatar from "../views/avatars/MemberAvatar";
import {useStateToggle} from "../../hooks/useStateToggle"; import {useStateToggle} from "../../hooks/useStateToggle";
import SpaceStore from "../../stores/SpaceStore"; import SpaceStore from "../../stores/SpaceStore";
import FacePile from "../views/elements/FacePile";
interface IProps { interface IProps {
space: Room; space: Room;
@ -158,8 +159,10 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
joinButtons = <InlineSpinner />; joinButtons = <InlineSpinner />;
} }
const joinRule = space.getJoinRule();
let visibilitySection; let visibilitySection;
if (space.getJoinRule() === "public") { if (joinRule === "public") {
visibilitySection = <span className="mx_SpaceRoomView_preview_info_public"> visibilitySection = <span className="mx_SpaceRoomView_preview_info_public">
{ _t("Public space") } { _t("Public space") }
</span>; </span>;
@ -177,7 +180,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
</h1> </h1>
<div className="mx_SpaceRoomView_preview_info"> <div className="mx_SpaceRoomView_preview_info">
{ visibilitySection } { visibilitySection }
<RoomMemberCount room={space}> { joinRule === "public" && <RoomMemberCount room={space}>
{(count) => count > 0 ? ( {(count) => count > 0 ? (
<AccessibleButton <AccessibleButton
className="mx_SpaceRoomView_preview_memberCount" className="mx_SpaceRoomView_preview_memberCount"
@ -193,7 +196,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
{ _t("%(count)s members", { count }) } { _t("%(count)s members", { count }) }
</AccessibleButton> </AccessibleButton>
) : null} ) : null}
</RoomMemberCount> </RoomMemberCount> }
</div> </div>
<RoomTopic room={space}> <RoomTopic room={space}>
{(topic, ref) => {(topic, ref) =>
@ -202,6 +205,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
</div> </div>
} }
</RoomTopic> </RoomTopic>
{ joinRule === "public" && <FacePile room={space} /> }
<div className="mx_SpaceRoomView_preview_joinButtons"> <div className="mx_SpaceRoomView_preview_joinButtons">
{ joinButtons } { joinButtons }
</div> </div>

View File

@ -0,0 +1,49 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
*/
import React from "react";
import { Room } from "matrix-js-sdk/src/models/room";
import MemberAvatar from "../avatars/MemberAvatar";
import { _t } from "../../../languageHandler";
import DMRoomMap from "../../../utils/DMRoomMap";
const DEFAULT_NUM_FACES = 5;
interface IProps {
room: Room;
numShown?: number;
}
const FacePile = ({ room, numShown = DEFAULT_NUM_FACES }: IProps) => {
const knownMembers = room.getJoinedMembers().filter(member => {
return !!DMRoomMap.shared().getDMRoomsForUserId(member.userId)?.length;
});
if (knownMembers.length < 1) return null;
const shownMembers = knownMembers.slice(0, numShown);
return <div className="mx_FacePile">
<div className="mx_FacePile_faces">
{ shownMembers.map(member => <MemberAvatar key={member.userId} member={member} width={28} height={28} />) }
</div>
<span>
{ _t("%(count)s people you know have already joined", { count: knownMembers.length }) }
</span>
</div>
};
export default FacePile;

View File

@ -1906,6 +1906,8 @@
"Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.": "Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.", "Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.": "Please <newIssueLink>create a new issue</newIssueLink> on GitHub so that we can investigate this bug.",
"collapse": "collapse", "collapse": "collapse",
"expand": "expand", "expand": "expand",
"%(count)s people you know have already joined|other": "%(count)s people you know have already joined",
"%(count)s people you know have already joined|one": "%(count)s person you know has already joined",
"You cannot delete this image. (%(code)s)": "You cannot delete this image. (%(code)s)", "You cannot delete this image. (%(code)s)": "You cannot delete this image. (%(code)s)",
"Uploaded on %(date)s by %(user)s": "Uploaded on %(date)s by %(user)s", "Uploaded on %(date)s by %(user)s": "Uploaded on %(date)s by %(user)s",
"Rotate Left": "Rotate Left", "Rotate Left": "Rotate Left",