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

Change spaceroomfacepile tooltip if memberlist is shown #8571

Merged
merged 3 commits into from
May 12, 2022
Merged

Change spaceroomfacepile tooltip if memberlist is shown #8571

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7031bde
feat: simplify rendering of roomfacepile
justjanne May 12, 2022
a203a63
feat: disable clicking on spaceroomfacepile if already showing member…
justjanne May 12, 2022
c1fbaf0
fix: implement requested changes
justjanne May 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
85 changes: 49 additions & 36 deletions src/components/structures/SpaceRoomView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Copyright 2021-2022 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.
Expand All @@ -14,35 +14,32 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { RefObject, useContext, useRef, useState } from "react";
import { EventType, RoomType } from "matrix-js-sdk/src/@types/event";
import { JoinRule, Preset } from "matrix-js-sdk/src/@types/partials";
import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
import { logger } from "matrix-js-sdk/src/logger";
import { Room, RoomEvent } from "matrix-js-sdk/src/models/room";
import React, { RefObject, useCallback, useContext, useRef, useState } from "react";

import MatrixClientContext from "../../contexts/MatrixClientContext";
import RoomAvatar from "../views/avatars/RoomAvatar";
import { _t } from "../../languageHandler";
import AccessibleButton from "../views/elements/AccessibleButton";
import RoomName from "../views/elements/RoomName";
import RoomTopic from "../views/elements/RoomTopic";
import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite";
import { useFeatureEnabled } from "../../hooks/useSettings";
import createRoom, { IOpts } from "../../createRoom";
import Field from "../views/elements/Field";
import withValidation from "../views/elements/Validation";
import * as Email from "../../email";
import defaultDispatcher from "../../dispatcher/dispatcher";
import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
import { Action } from "../../dispatcher/actions";
import ResizeNotifier from "../../utils/ResizeNotifier";
import MainSplit from './MainSplit';
import ErrorBoundary from "../views/elements/ErrorBoundary";
import defaultDispatcher from "../../dispatcher/dispatcher";
import { ActionPayload } from "../../dispatcher/payloads";
import RightPanel from "./RightPanel";
import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
import * as Email from "../../email";
import { useEventEmitterState } from "../../hooks/useEventEmitter";
import { useMyRoomMembership } from "../../hooks/useRoomMembers";
import { useFeatureEnabled } from "../../hooks/useSettings";
import { useStateArray } from "../../hooks/useStateArray";
import { _t } from "../../languageHandler";
import PosthogTrackers from "../../PosthogTrackers";
import { inviteMultipleToRoom, showRoomInviteDialog } from "../../RoomInvite";
import { UIComponent } from "../../settings/UIFeature";
import { UPDATE_EVENT } from "../../stores/AsyncStore";
import RightPanelStore from "../../stores/right-panel/RightPanelStore";
import { RightPanelPhases } from "../../stores/right-panel/RightPanelStorePhases";
import { useStateArray } from "../../hooks/useStateArray";
import SpacePublicShare from "../views/spaces/SpacePublicShare";
import ResizeNotifier from "../../utils/ResizeNotifier";
import {
shouldShowSpaceInvite,
shouldShowSpaceSettings,
Expand All @@ -52,29 +49,33 @@ import {
showSpaceInvite,
showSpaceSettings,
} from "../../utils/space";
import SpaceHierarchy, { showRoom } from "./SpaceHierarchy";
import RoomFacePile from "../views/elements/RoomFacePile";
import RoomAvatar from "../views/avatars/RoomAvatar";
import { BetaPill } from "../views/beta/BetaCard";
import IconizedContextMenu, {
IconizedContextMenuOption,
IconizedContextMenuOptionList,
} from "../views/context_menus/IconizedContextMenu";
import {
AddExistingToSpace,
defaultDmsRenderer,
defaultRoomsRenderer,
} from "../views/dialogs/AddExistingToSpaceDialog";
import { ChevronFace, ContextMenuButton, useContextMenu } from "./ContextMenu";
import IconizedContextMenu, {
IconizedContextMenuOption,
IconizedContextMenuOptionList,
} from "../views/context_menus/IconizedContextMenu";
import AccessibleButton from "../views/elements/AccessibleButton";
import AccessibleTooltipButton from "../views/elements/AccessibleTooltipButton";
import { BetaPill } from "../views/beta/BetaCard";
import { SpaceFeedbackPrompt } from "../views/spaces/SpaceCreateMenu";
import ErrorBoundary from "../views/elements/ErrorBoundary";
import Field from "../views/elements/Field";
import RoomFacePile from "../views/elements/RoomFacePile";
import RoomName from "../views/elements/RoomName";
import RoomTopic from "../views/elements/RoomTopic";
import withValidation from "../views/elements/Validation";
import RoomInfoLine from "../views/rooms/RoomInfoLine";
import RoomPreviewCard from "../views/rooms/RoomPreviewCard";
import { useMyRoomMembership } from "../../hooks/useRoomMembers";
import { shouldShowComponent } from "../../customisations/helpers/UIComponents";
import { UIComponent } from "../../settings/UIFeature";
import { UPDATE_EVENT } from "../../stores/AsyncStore";
import PosthogTrackers from "../../PosthogTrackers";
import { ViewRoomPayload } from "../../dispatcher/payloads/ViewRoomPayload";
import { SpaceFeedbackPrompt } from "../views/spaces/SpaceCreateMenu";
import SpacePublicShare from "../views/spaces/SpacePublicShare";
import { ChevronFace, ContextMenuButton, useContextMenu } from "./ContextMenu";
import MainSplit from './MainSplit';
import RightPanel from "./RightPanel";
import SpaceHierarchy, { showRoom } from "./SpaceHierarchy";

interface IProps {
space: Room;
Expand Down Expand Up @@ -195,6 +196,13 @@ const SpaceLanding = ({ space }: { space: Room }) => {
const myMembership = useMyRoomMembership(space);
const userId = cli.getUserId();

const storeIsShowingSpaceMembers = useCallback(
() => RightPanelStore.instance.isOpenForRoom(space.roomId)
&& RightPanelStore.instance.currentCardForRoom(space.roomId)?.phase === RightPanelPhases.SpaceMemberList,
[space.roomId],
);
const isShowingMembers = useEventEmitterState(RightPanelStore.instance, UPDATE_EVENT, storeIsShowingSpaceMembers);

let inviteButton;
if (shouldShowSpaceInvite(space) && shouldShowComponent(UIComponent.InviteUsers)) {
inviteButton = (
Expand Down Expand Up @@ -249,7 +257,12 @@ const SpaceLanding = ({ space }: { space: Room }) => {
<div className="mx_SpaceRoomView_landing_infoBar">
<RoomInfoLine room={space} />
<div className="mx_SpaceRoomView_landing_infoBar_interactive">
<RoomFacePile room={space} onlyKnownUsers={false} numShown={7} onClick={onMembersClick} />
<RoomFacePile
room={space}
onlyKnownUsers={false}
numShown={7}
onClick={isShowingMembers ? undefined : onMembersClick}
/>
{ inviteButton }
{ settingsButton }
</div>
Expand Down
46 changes: 14 additions & 32 deletions src/components/views/elements/RoomFacePile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*
Copyright 2021 The Matrix.org Foundation C.I.C.
Copyright 2021-2022 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.
Expand All @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
limitations under the License.
*/

import React, { FC, HTMLAttributes, ReactNode, useContext } from "react";
import React, { FC, HTMLAttributes, useContext } from "react";
import { Room } from "matrix-js-sdk/src/models/room";
import { RoomMember } from "matrix-js-sdk/src/models/room-member";
import { sortBy } from "lodash";
Expand Down Expand Up @@ -60,36 +60,18 @@ const RoomFacePile: FC<IProps> = (
// reverse members in tooltip order to make the order between the two match up.
const commaSeparatedMembers = shownMembers.map(m => m.name).reverse().join(", ");

let tooltip: ReactNode;
if (props.onClick) {
let subText: string;
if (isJoined) {
subText = _t("Including you, %(commaSeparatedMembers)s", { commaSeparatedMembers });
} else {
subText = _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers });
}

tooltip = <div>
<div className="mx_Tooltip_title">
{ _t("View all %(count)s members", { count }) }
</div>
<div className="mx_Tooltip_sub">
{ subText }
</div>
</div>;
} else {
if (isJoined) {
tooltip = _t("%(count)s members including you, %(commaSeparatedMembers)s", {
count: count - 1,
commaSeparatedMembers,
});
} else {
tooltip = _t("%(count)s members including %(commaSeparatedMembers)s", {
count,
commaSeparatedMembers,
});
}
}
const tooltip = <div>
<div className="mx_Tooltip_title">
{ props.onClick
? _t("View all %(count)s members", { count })
: _t("%(count)s members", { count }) }
</div>
<div className="mx_Tooltip_sub">
{ isJoined
? _t("Including you, %(commaSeparatedMembers)s", { commaSeparatedMembers })
: _t("Including %(commaSeparatedMembers)s", { commaSeparatedMembers }) }
</div>
</div>;

return <FacePile
members={shownMembers}
Expand Down
9 changes: 2 additions & 7 deletions src/i18n/strings/en_EN.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2364,15 +2364,10 @@
"This address is available to use": "This address is available to use",
"This address is already in use": "This address is already in use",
"This address had invalid server or is already in use": "This address had invalid server or is already in use",
"Including you, %(commaSeparatedMembers)s": "Including you, %(commaSeparatedMembers)s",
"Including %(commaSeparatedMembers)s": "Including %(commaSeparatedMembers)s",
"View all %(count)s members|other": "View all %(count)s members",
"View all %(count)s members|one": "View 1 member",
"%(count)s members including you, %(commaSeparatedMembers)s|other": "%(count)s members including you, %(commaSeparatedMembers)s",
"%(count)s members including you, %(commaSeparatedMembers)s|zero": "You",
"%(count)s members including you, %(commaSeparatedMembers)s|one": "%(count)s members including you and %(commaSeparatedMembers)s",
"%(count)s members including %(commaSeparatedMembers)s|other": "%(count)s members including %(commaSeparatedMembers)s",
"%(count)s members including %(commaSeparatedMembers)s|one": "%(commaSeparatedMembers)s",
"Including you, %(commaSeparatedMembers)s": "Including you, %(commaSeparatedMembers)s",
"Including %(commaSeparatedMembers)s": "Including %(commaSeparatedMembers)s",
"%(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",
"Message search initialisation failed, check <a>your settings</a> for more information": "Message search initialisation failed, check <a>your settings</a> for more information",
Expand Down