mirror of
https://github.com/element-hq/element-web
synced 2024-11-24 02:05:45 +03:00
Change spaceroomfacepile tooltip if memberlist is shown (#8571)
This commit is contained in:
Janne Mareike Koschinski
GitHub
parent
997d8ab8b3
commit
d87cfae0c9
3 changed files with 65 additions and 75 deletions
|
|
@ -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.
|
||||
|
|
@ -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,
|
||||
|
|
@ -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;
|
||||
|
|
@ -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 = (
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
@ -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";
|
||||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue