Apply prettier formatting
This commit is contained in:
Michael Weimann
parent
1cac306093
commit
526645c791
1576 changed files with 65385 additions and 62478 deletions
|
|
@ -19,15 +19,15 @@ import classNames from "classnames";
|
|||
import { Room } from "matrix-js-sdk/src/models/room";
|
||||
|
||||
import MatrixClientContext from "../../../contexts/MatrixClientContext";
|
||||
import { useIsEncrypted } from '../../../hooks/useIsEncrypted';
|
||||
import { useIsEncrypted } from "../../../hooks/useIsEncrypted";
|
||||
import BaseCard, { Group } from "./BaseCard";
|
||||
import { _t } from '../../../languageHandler';
|
||||
import { _t } from "../../../languageHandler";
|
||||
import RoomAvatar from "../avatars/RoomAvatar";
|
||||
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
|
||||
import defaultDispatcher from "../../../dispatcher/dispatcher";
|
||||
import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
|
||||
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
|
||||
import Modal from "../../../Modal";
|
||||
import ShareDialog from '../dialogs/ShareDialog';
|
||||
import ShareDialog from "../dialogs/ShareDialog";
|
||||
import { useEventEmitter } from "../../../hooks/useEventEmitter";
|
||||
import WidgetUtils from "../../../utils/WidgetUtils";
|
||||
import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
|
||||
|
|
@ -67,12 +67,14 @@ interface IButtonProps {
|
|||
}
|
||||
|
||||
const Button: React.FC<IButtonProps> = ({ children, className, onClick }) => {
|
||||
return <AccessibleButton
|
||||
className={classNames("mx_BaseCard_Button mx_RoomSummaryCard_Button", className)}
|
||||
onClick={onClick}
|
||||
>
|
||||
{ children }
|
||||
</AccessibleButton>;
|
||||
return (
|
||||
<AccessibleButton
|
||||
className={classNames("mx_BaseCard_Button mx_RoomSummaryCard_Button", className)}
|
||||
onClick={onClick}
|
||||
>
|
||||
{children}
|
||||
</AccessibleButton>
|
||||
);
|
||||
};
|
||||
|
||||
export const useWidgets = (room: Room) => {
|
||||
|
|
@ -114,20 +116,26 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
|
|||
|
||||
const isPinned = WidgetLayoutStore.instance.isInContainer(room, app, Container.Top);
|
||||
const togglePin = isPinned
|
||||
? () => { WidgetLayoutStore.instance.moveToContainer(room, app, Container.Right); }
|
||||
: () => { WidgetLayoutStore.instance.moveToContainer(room, app, Container.Top); };
|
||||
? () => {
|
||||
WidgetLayoutStore.instance.moveToContainer(room, app, Container.Right);
|
||||
}
|
||||
: () => {
|
||||
WidgetLayoutStore.instance.moveToContainer(room, app, Container.Top);
|
||||
};
|
||||
|
||||
const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>();
|
||||
let contextMenu;
|
||||
if (menuDisplayed) {
|
||||
const rect = handle.current.getBoundingClientRect();
|
||||
contextMenu = <WidgetContextMenu
|
||||
chevronFace={ChevronFace.None}
|
||||
right={UIStore.instance.windowWidth - rect.right}
|
||||
bottom={UIStore.instance.windowHeight - rect.top}
|
||||
onFinished={closeMenu}
|
||||
app={app}
|
||||
/>;
|
||||
contextMenu = (
|
||||
<WidgetContextMenu
|
||||
chevronFace={ChevronFace.None}
|
||||
right={UIStore.instance.windowWidth - rect.right}
|
||||
bottom={UIStore.instance.windowHeight - rect.top}
|
||||
onFinished={closeMenu}
|
||||
app={app}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const cannotPin = !isPinned && !WidgetLayoutStore.instance.canAddToContainer(room, Container.Top);
|
||||
|
|
@ -141,8 +149,12 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
|
|||
|
||||
const isMaximised = WidgetLayoutStore.instance.isInContainer(room, app, Container.Center);
|
||||
const toggleMaximised = isMaximised
|
||||
? () => { WidgetLayoutStore.instance.moveToContainer(room, app, Container.Right); }
|
||||
: () => { WidgetLayoutStore.instance.moveToContainer(room, app, Container.Center); };
|
||||
? () => {
|
||||
WidgetLayoutStore.instance.moveToContainer(room, app, Container.Right);
|
||||
}
|
||||
: () => {
|
||||
WidgetLayoutStore.instance.moveToContainer(room, app, Container.Center);
|
||||
};
|
||||
|
||||
const maximiseTitle = isMaximised ? _t("Close") : _t("Maximise");
|
||||
|
||||
|
|
@ -150,7 +162,7 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
|
|||
if (isPinned) {
|
||||
openTitle = _t("Unpin this widget to view it in this panel");
|
||||
} else if (isMaximised) {
|
||||
openTitle =_t("Close this widget to view it in this panel");
|
||||
openTitle = _t("Close this widget to view it in this panel");
|
||||
}
|
||||
|
||||
const classes = classNames("mx_BaseCard_Button mx_RoomSummaryCard_Button", {
|
||||
|
|
@ -158,47 +170,51 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
|
|||
mx_RoomSummaryCard_Button_maximised: isMaximised,
|
||||
});
|
||||
|
||||
return <div className={classes} ref={handle}>
|
||||
<AccessibleTooltipButton
|
||||
className="mx_RoomSummaryCard_icon_app"
|
||||
onClick={onOpenWidgetClick}
|
||||
// only show a tooltip if the widget is pinned
|
||||
title={openTitle}
|
||||
forceHide={!(isPinned || isMaximised)}
|
||||
disabled={isPinned || isMaximised}
|
||||
>
|
||||
<WidgetAvatar app={app} />
|
||||
<span>{ name }</span>
|
||||
{ subtitle }
|
||||
</AccessibleTooltipButton>
|
||||
return (
|
||||
<div className={classes} ref={handle}>
|
||||
<AccessibleTooltipButton
|
||||
className="mx_RoomSummaryCard_icon_app"
|
||||
onClick={onOpenWidgetClick}
|
||||
// only show a tooltip if the widget is pinned
|
||||
title={openTitle}
|
||||
forceHide={!(isPinned || isMaximised)}
|
||||
disabled={isPinned || isMaximised}
|
||||
>
|
||||
<WidgetAvatar app={app} />
|
||||
<span>{name}</span>
|
||||
{subtitle}
|
||||
</AccessibleTooltipButton>
|
||||
|
||||
{ canModifyWidget && <ContextMenuTooltipButton
|
||||
className="mx_RoomSummaryCard_app_options"
|
||||
isExpanded={menuDisplayed}
|
||||
onClick={openMenu}
|
||||
title={_t("Options")}
|
||||
/> }
|
||||
{canModifyWidget && (
|
||||
<ContextMenuTooltipButton
|
||||
className="mx_RoomSummaryCard_app_options"
|
||||
isExpanded={menuDisplayed}
|
||||
onClick={openMenu}
|
||||
title={_t("Options")}
|
||||
/>
|
||||
)}
|
||||
|
||||
<AccessibleTooltipButton
|
||||
className="mx_RoomSummaryCard_app_pinToggle"
|
||||
onClick={togglePin}
|
||||
title={pinTitle}
|
||||
disabled={cannotPin}
|
||||
/>
|
||||
<AccessibleTooltipButton
|
||||
className="mx_RoomSummaryCard_app_maximiseToggle"
|
||||
onClick={toggleMaximised}
|
||||
title={maximiseTitle}
|
||||
/>
|
||||
<AccessibleTooltipButton
|
||||
className="mx_RoomSummaryCard_app_pinToggle"
|
||||
onClick={togglePin}
|
||||
title={pinTitle}
|
||||
disabled={cannotPin}
|
||||
/>
|
||||
<AccessibleTooltipButton
|
||||
className="mx_RoomSummaryCard_app_maximiseToggle"
|
||||
onClick={toggleMaximised}
|
||||
title={maximiseTitle}
|
||||
/>
|
||||
|
||||
{ contextMenu }
|
||||
</div>;
|
||||
{contextMenu}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
const AppsSection: React.FC<IAppsSectionProps> = ({ room }) => {
|
||||
const apps = useWidgets(room);
|
||||
// Filter out virtual widgets
|
||||
const realApps = useMemo(() => apps.filter(app => app.eventId !== undefined), [apps]);
|
||||
const realApps = useMemo(() => apps.filter((app) => app.eventId !== undefined), [apps]);
|
||||
|
||||
const onManageIntegrations = () => {
|
||||
const managers = IntegrationManagers.sharedInstance();
|
||||
|
|
@ -214,18 +230,22 @@ const AppsSection: React.FC<IAppsSectionProps> = ({ room }) => {
|
|||
if (realApps.length > 0 && WidgetLayoutStore.instance.canCopyLayoutToRoom(room)) {
|
||||
copyLayoutBtn = (
|
||||
<AccessibleButton kind="link" onClick={() => WidgetLayoutStore.instance.copyLayoutToRoom(room)}>
|
||||
{ _t("Set my room layout for everyone") }
|
||||
{_t("Set my room layout for everyone")}
|
||||
</AccessibleButton>
|
||||
);
|
||||
}
|
||||
|
||||
return <Group className="mx_RoomSummaryCard_appsGroup" title={_t("Widgets")}>
|
||||
{ realApps.map(app => <AppRow key={app.id} app={app} room={room} />) }
|
||||
{ copyLayoutBtn }
|
||||
<AccessibleButton kind="link" onClick={onManageIntegrations}>
|
||||
{ realApps.length > 0 ? _t("Edit widgets, bridges & bots") : _t("Add widgets, bridges & bots") }
|
||||
</AccessibleButton>
|
||||
</Group>;
|
||||
return (
|
||||
<Group className="mx_RoomSummaryCard_appsGroup" title={_t("Widgets")}>
|
||||
{realApps.map((app) => (
|
||||
<AppRow key={app.id} app={app} room={room} />
|
||||
))}
|
||||
{copyLayoutBtn}
|
||||
<AccessibleButton kind="link" onClick={onManageIntegrations}>
|
||||
{realApps.length > 0 ? _t("Edit widgets, bridges & bots") : _t("Add widgets, bridges & bots")}
|
||||
</AccessibleButton>
|
||||
</Group>
|
||||
);
|
||||
};
|
||||
|
||||
const onRoomMembersClick = (ev: ButtonEvent) => {
|
||||
|
|
@ -266,76 +286,71 @@ const RoomSummaryCard: React.FC<IProps> = ({ room, onClose }) => {
|
|||
const e2eStatus = roomContext.e2eStatus;
|
||||
const videoRoomsEnabled = useFeatureEnabled("feature_video_rooms");
|
||||
const elementCallVideoRoomsEnabled = useFeatureEnabled("feature_element_call_video_rooms");
|
||||
const isVideoRoom = videoRoomsEnabled && (
|
||||
room.isElementVideoRoom() || (elementCallVideoRoomsEnabled && room.isCallRoom())
|
||||
);
|
||||
const isVideoRoom =
|
||||
videoRoomsEnabled && (room.isElementVideoRoom() || (elementCallVideoRoomsEnabled && room.isCallRoom()));
|
||||
|
||||
const alias = room.getCanonicalAlias() || room.getAltAliases()[0] || "";
|
||||
const header = <React.Fragment>
|
||||
<div className="mx_RoomSummaryCard_avatar" role="presentation">
|
||||
<RoomAvatar room={room} height={54} width={54} viewAvatarOnClick />
|
||||
<TextWithTooltip
|
||||
tooltip={isRoomEncrypted ? _t("Encrypted") : _t("Not encrypted")}
|
||||
class={classNames("mx_RoomSummaryCard_e2ee", {
|
||||
mx_RoomSummaryCard_e2ee_normal: isRoomEncrypted,
|
||||
mx_RoomSummaryCard_e2ee_warning: isRoomEncrypted && e2eStatus === E2EStatus.Warning,
|
||||
mx_RoomSummaryCard_e2ee_verified: isRoomEncrypted && e2eStatus === E2EStatus.Verified,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
const header = (
|
||||
<React.Fragment>
|
||||
<div className="mx_RoomSummaryCard_avatar" role="presentation">
|
||||
<RoomAvatar room={room} height={54} width={54} viewAvatarOnClick />
|
||||
<TextWithTooltip
|
||||
tooltip={isRoomEncrypted ? _t("Encrypted") : _t("Not encrypted")}
|
||||
class={classNames("mx_RoomSummaryCard_e2ee", {
|
||||
mx_RoomSummaryCard_e2ee_normal: isRoomEncrypted,
|
||||
mx_RoomSummaryCard_e2ee_warning: isRoomEncrypted && e2eStatus === E2EStatus.Warning,
|
||||
mx_RoomSummaryCard_e2ee_verified: isRoomEncrypted && e2eStatus === E2EStatus.Verified,
|
||||
})}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<RoomName room={room}>
|
||||
{ name => (
|
||||
<h2 title={name}>
|
||||
{ name }
|
||||
</h2>
|
||||
) }
|
||||
</RoomName>
|
||||
<div className="mx_RoomSummaryCard_alias" title={alias}>
|
||||
{ alias }
|
||||
</div>
|
||||
</React.Fragment>;
|
||||
<RoomName room={room}>{(name) => <h2 title={name}>{name}</h2>}</RoomName>
|
||||
<div className="mx_RoomSummaryCard_alias" title={alias}>
|
||||
{alias}
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
|
||||
const memberCount = useRoomMemberCount(room);
|
||||
const pinningEnabled = useFeatureEnabled("feature_pinning");
|
||||
const pinCount = usePinnedEvents(pinningEnabled && room)?.length;
|
||||
|
||||
return <BaseCard header={header} className="mx_RoomSummaryCard" onClose={onClose}>
|
||||
<Group title={_t("About")} className="mx_RoomSummaryCard_aboutGroup">
|
||||
<Button className="mx_RoomSummaryCard_icon_people" onClick={onRoomMembersClick}>
|
||||
{ _t("People") }
|
||||
<span className="mx_BaseCard_Button_sublabel">
|
||||
{ memberCount }
|
||||
</span>
|
||||
</Button>
|
||||
{ !isVideoRoom && <Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
|
||||
{ _t("Files") }
|
||||
</Button> }
|
||||
{ pinningEnabled && !isVideoRoom &&
|
||||
<Button className="mx_RoomSummaryCard_icon_pins" onClick={onRoomPinsClick}>
|
||||
{ _t("Pinned") }
|
||||
{ pinCount > 0 && <span className="mx_BaseCard_Button_sublabel">
|
||||
{ pinCount }
|
||||
</span> }
|
||||
</Button> }
|
||||
{ !isVideoRoom && <Button className="mx_RoomSummaryCard_icon_export" onClick={onRoomExportClick}>
|
||||
{ _t("Export chat") }
|
||||
</Button> }
|
||||
<Button className="mx_RoomSummaryCard_icon_share" onClick={onShareRoomClick}>
|
||||
{ _t("Share room") }
|
||||
</Button>
|
||||
<Button className="mx_RoomSummaryCard_icon_settings" onClick={onRoomSettingsClick}>
|
||||
{ _t("Room settings") }
|
||||
</Button>
|
||||
</Group>
|
||||
return (
|
||||
<BaseCard header={header} className="mx_RoomSummaryCard" onClose={onClose}>
|
||||
<Group title={_t("About")} className="mx_RoomSummaryCard_aboutGroup">
|
||||
<Button className="mx_RoomSummaryCard_icon_people" onClick={onRoomMembersClick}>
|
||||
{_t("People")}
|
||||
<span className="mx_BaseCard_Button_sublabel">{memberCount}</span>
|
||||
</Button>
|
||||
{!isVideoRoom && (
|
||||
<Button className="mx_RoomSummaryCard_icon_files" onClick={onRoomFilesClick}>
|
||||
{_t("Files")}
|
||||
</Button>
|
||||
)}
|
||||
{pinningEnabled && !isVideoRoom && (
|
||||
<Button className="mx_RoomSummaryCard_icon_pins" onClick={onRoomPinsClick}>
|
||||
{_t("Pinned")}
|
||||
{pinCount > 0 && <span className="mx_BaseCard_Button_sublabel">{pinCount}</span>}
|
||||
</Button>
|
||||
)}
|
||||
{!isVideoRoom && (
|
||||
<Button className="mx_RoomSummaryCard_icon_export" onClick={onRoomExportClick}>
|
||||
{_t("Export chat")}
|
||||
</Button>
|
||||
)}
|
||||
<Button className="mx_RoomSummaryCard_icon_share" onClick={onShareRoomClick}>
|
||||
{_t("Share room")}
|
||||
</Button>
|
||||
<Button className="mx_RoomSummaryCard_icon_settings" onClick={onRoomSettingsClick}>
|
||||
{_t("Room settings")}
|
||||
</Button>
|
||||
</Group>
|
||||
|
||||
{
|
||||
SettingsStore.getValue(UIFeature.Widgets)
|
||||
&& !isVideoRoom
|
||||
&& shouldShowComponent(UIComponent.AddIntegrations)
|
||||
&& <AppsSection room={room} />
|
||||
}
|
||||
</BaseCard>;
|
||||
{SettingsStore.getValue(UIFeature.Widgets) &&
|
||||
!isVideoRoom &&
|
||||
shouldShowComponent(UIComponent.AddIntegrations) && <AppsSection room={room} />}
|
||||
</BaseCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default RoomSummaryCard;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue