diff --git a/res/css/_components.scss b/res/css/_components.scss index d894688cac..6b38d3aa10 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -111,12 +111,13 @@ @import "./views/elements/_AddressSelector.scss"; @import "./views/elements/_AddressTile.scss"; @import "./views/elements/_DesktopBuildsNotice.scss"; -@import "./views/elements/_DirectorySearchBox.scss"; @import "./views/elements/_DesktopCapturerSourcePicker.scss"; +@import "./views/elements/_DirectorySearchBox.scss"; @import "./views/elements/_Dropdown.scss"; @import "./views/elements/_EditableItemList.scss"; @import "./views/elements/_ErrorBoundary.scss"; @import "./views/elements/_EventListSummary.scss"; +@import "./views/elements/_FacePile.scss"; @import "./views/elements/_Field.scss"; @import "./views/elements/_FormButton.scss"; @import "./views/elements/_ImageView.scss"; @@ -217,7 +218,6 @@ @import "./views/settings/_DevicesPanel.scss"; @import "./views/settings/_E2eAdvancedPanel.scss"; @import "./views/settings/_EmailAddresses.scss"; -@import "./views/settings/_SpellCheckLanguages.scss"; @import "./views/settings/_IntegrationManager.scss"; @import "./views/settings/_Notifications.scss"; @import "./views/settings/_PhoneNumbers.scss"; @@ -225,6 +225,7 @@ @import "./views/settings/_SecureBackupPanel.scss"; @import "./views/settings/_SetIdServer.scss"; @import "./views/settings/_SetIntegrationManager.scss"; +@import "./views/settings/_SpellCheckLanguages.scss"; @import "./views/settings/_UpdateCheckButton.scss"; @import "./views/settings/tabs/_SettingsTab.scss"; @import "./views/settings/tabs/room/_GeneralRoomSettingsTab.scss"; diff --git a/res/css/views/elements/_FacePile.scss b/res/css/views/elements/_FacePile.scss new file mode 100644 index 0000000000..3ab0d7049f --- /dev/null +++ b/res/css/views/elements/_FacePile.scss @@ -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; + } +} diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index dd15e76326..1ad591d4e6 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -51,6 +51,7 @@ import AutoHideScrollbar from "./AutoHideScrollbar"; import MemberAvatar from "../views/avatars/MemberAvatar"; import {useStateToggle} from "../../hooks/useStateToggle"; import SpaceStore from "../../stores/SpaceStore"; +import FacePile from "../views/elements/FacePile"; interface IProps { space: Room; @@ -158,8 +159,10 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) => joinButtons = ; } + const joinRule = space.getJoinRule(); + let visibilitySection; - if (space.getJoinRule() === "public") { + if (joinRule === "public") { visibilitySection = { _t("Public space") } ; @@ -177,7 +180,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) =>
{ visibilitySection } - + { joinRule === "public" && {(count) => count > 0 ? ( { _t("%(count)s members", { count }) } ) : null} - + }
{(topic, ref) => @@ -202,6 +205,7 @@ const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }) => } + { joinRule === "public" && }
{ joinButtons }
diff --git a/src/components/views/elements/FacePile.tsx b/src/components/views/elements/FacePile.tsx new file mode 100644 index 0000000000..dd5ca9ce1f --- /dev/null +++ b/src/components/views/elements/FacePile.tsx @@ -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
+
+ { shownMembers.map(member => ) } +
+ + { _t("%(count)s people you know have already joined", { count: knownMembers.length }) } + +
+}; + +export default FacePile; diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 617f1c5533..a8b2322b31 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1906,6 +1906,8 @@ "Please create a new issue on GitHub so that we can investigate this bug.": "Please create a new issue on GitHub so that we can investigate this bug.", "collapse": "collapse", "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)", "Uploaded on %(date)s by %(user)s": "Uploaded on %(date)s by %(user)s", "Rotate Left": "Rotate Left",