Extract Extensions into their own right panel tab (#12844)
* Extract useIsVideoRoom hook Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Move useWidgets hook to WidgetUtils Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Extract Extensions into their own right panel tab Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Remove unused components & classes Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Tests Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
fae5bf1612
commit
b55653ddf0
25 changed files with 820 additions and 475 deletions
214
src/components/views/right_panel/ExtensionsCard.tsx
Normal file
214
src/components/views/right_panel/ExtensionsCard.tsx
Normal file
|
|
@ -0,0 +1,214 @@
|
|||
/*
|
||||
Copyright 2024 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, { useEffect, useMemo, useState } from "react";
|
||||
import { Room } from "matrix-js-sdk/src/matrix";
|
||||
import classNames from "classnames";
|
||||
import { Button, Link, Separator, Text } from "@vector-im/compound-web";
|
||||
import { Icon as PlusIcon } from "@vector-im/compound-design-tokens/icons/plus.svg";
|
||||
import { Icon as ExtensionsIcon } from "@vector-im/compound-design-tokens/icons/extensions.svg";
|
||||
|
||||
import BaseCard from "./BaseCard";
|
||||
import WidgetUtils, { useWidgets } from "../../../utils/WidgetUtils";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import { ChevronFace, ContextMenuTooltipButton, useContextMenu } from "../../structures/ContextMenu";
|
||||
import { WidgetContextMenu } from "../context_menus/WidgetContextMenu";
|
||||
import UIStore from "../../../stores/UIStore";
|
||||
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
|
||||
import { IApp } from "../../../stores/WidgetStore";
|
||||
import { RightPanelPhases } from "../../../stores/right-panel/RightPanelStorePhases";
|
||||
import { Container, MAX_PINNED, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
|
||||
import AccessibleButton from "../elements/AccessibleButton";
|
||||
import WidgetAvatar from "../avatars/WidgetAvatar";
|
||||
import { IntegrationManagers } from "../../../integrations/IntegrationManagers";
|
||||
import EmptyState from "./EmptyState";
|
||||
|
||||
interface Props {
|
||||
room: Room;
|
||||
onClose(): void;
|
||||
}
|
||||
|
||||
interface IAppRowProps {
|
||||
app: IApp;
|
||||
room: Room;
|
||||
}
|
||||
|
||||
const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
|
||||
const name = WidgetUtils.getWidgetName(app);
|
||||
const [canModifyWidget, setCanModifyWidget] = useState<boolean>();
|
||||
|
||||
useEffect(() => {
|
||||
setCanModifyWidget(WidgetUtils.canUserModifyWidgets(room.client, room.roomId));
|
||||
}, [room.client, room.roomId]);
|
||||
|
||||
const onOpenWidgetClick = (): void => {
|
||||
RightPanelStore.instance.pushCard({
|
||||
phase: RightPanelPhases.Widget,
|
||||
state: { widgetId: app.id },
|
||||
});
|
||||
};
|
||||
|
||||
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);
|
||||
};
|
||||
|
||||
const [menuDisplayed, handle, openMenu, closeMenu] = useContextMenu<HTMLDivElement>();
|
||||
let contextMenu;
|
||||
if (menuDisplayed) {
|
||||
const rect = handle.current?.getBoundingClientRect();
|
||||
const rightMargin = rect?.right ?? 0;
|
||||
const topMargin = rect?.top ?? 0;
|
||||
contextMenu = (
|
||||
<WidgetContextMenu
|
||||
chevronFace={ChevronFace.None}
|
||||
right={UIStore.instance.windowWidth - rightMargin}
|
||||
bottom={UIStore.instance.windowHeight - topMargin}
|
||||
onFinished={closeMenu}
|
||||
app={app}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
const cannotPin = !isPinned && !WidgetLayoutStore.instance.canAddToContainer(room, Container.Top);
|
||||
|
||||
let pinTitle: string;
|
||||
if (cannotPin) {
|
||||
pinTitle = _t("right_panel|pinned_messages|limits", { count: MAX_PINNED });
|
||||
} else {
|
||||
pinTitle = isPinned ? _t("action|unpin") : _t("action|pin");
|
||||
}
|
||||
|
||||
const isMaximised = WidgetLayoutStore.instance.isInContainer(room, app, Container.Center);
|
||||
|
||||
let openTitle = "";
|
||||
if (isPinned) {
|
||||
openTitle = _t("widget|unpin_to_view_right_panel");
|
||||
} else if (isMaximised) {
|
||||
openTitle = _t("widget|close_to_view_right_panel");
|
||||
}
|
||||
|
||||
const classes = classNames("mx_BaseCard_Button mx_ExtensionsCard_Button", {
|
||||
mx_ExtensionsCard_Button_pinned: isPinned,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={classes} ref={handle}>
|
||||
<AccessibleButton
|
||||
className="mx_ExtensionsCard_icon_app"
|
||||
onClick={onOpenWidgetClick}
|
||||
// only show a tooltip if the widget is pinned
|
||||
title={!(isPinned || isMaximised) ? undefined : openTitle}
|
||||
disabled={isPinned || isMaximised}
|
||||
>
|
||||
<WidgetAvatar app={app} size="24px" />
|
||||
<Text size="md" weight="medium" className="mx_lineClamp">
|
||||
{name}
|
||||
</Text>
|
||||
</AccessibleButton>
|
||||
|
||||
{canModifyWidget && (
|
||||
<ContextMenuTooltipButton
|
||||
className="mx_ExtensionsCard_app_options"
|
||||
isExpanded={menuDisplayed}
|
||||
onClick={openMenu}
|
||||
title={_t("common|options")}
|
||||
/>
|
||||
)}
|
||||
|
||||
<AccessibleButton
|
||||
className="mx_ExtensionsCard_app_pinToggle"
|
||||
onClick={togglePin}
|
||||
title={pinTitle}
|
||||
disabled={cannotPin}
|
||||
/>
|
||||
|
||||
{contextMenu}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* A right panel card displaying a list of widgets in the room and allowing the user to manage them.
|
||||
* @param room the room to manage widgets for
|
||||
* @param onClose callback when the card is closed
|
||||
*/
|
||||
const ExtensionsCard: React.FC<Props> = ({ room, onClose }) => {
|
||||
const apps = useWidgets(room);
|
||||
// Filter out virtual widgets
|
||||
const realApps = useMemo(() => apps.filter((app) => app.eventId !== undefined), [apps]);
|
||||
|
||||
const onManageIntegrations = (): void => {
|
||||
const managers = IntegrationManagers.sharedInstance();
|
||||
if (!managers.hasManager()) {
|
||||
managers.openNoManagerDialog();
|
||||
} else {
|
||||
// noinspection JSIgnoredPromiseFromCall
|
||||
managers.getPrimaryManager()?.open(room);
|
||||
}
|
||||
};
|
||||
|
||||
// The button is in the header to keep it outside the scrollable region
|
||||
const header = (
|
||||
<Button size="sm" onClick={onManageIntegrations} kind="secondary" Icon={PlusIcon}>
|
||||
{_t("right_panel|add_integrations")}
|
||||
</Button>
|
||||
);
|
||||
|
||||
let body: JSX.Element;
|
||||
if (realApps.length < 1) {
|
||||
body = (
|
||||
<EmptyState
|
||||
Icon={ExtensionsIcon}
|
||||
title={_t("right_panel|extensions_empty_title")}
|
||||
description={_t("right_panel|extensions_empty_description", {
|
||||
addIntegrations: _t("right_panel|add_integrations"),
|
||||
})}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
let copyLayoutBtn: JSX.Element | null = null;
|
||||
if (WidgetLayoutStore.instance.canCopyLayoutToRoom(room)) {
|
||||
copyLayoutBtn = (
|
||||
<Link onClick={() => WidgetLayoutStore.instance.copyLayoutToRoom(room)}>
|
||||
{_t("widget|set_room_layout")}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
|
||||
body = (
|
||||
<>
|
||||
<Separator />
|
||||
{realApps.map((app) => (
|
||||
<AppRow key={app.id} app={app} room={room} />
|
||||
))}
|
||||
{copyLayoutBtn}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<BaseCard header={header} className="mx_ExtensionsCard" onClose={onClose} hideHeaderButtons>
|
||||
{body}
|
||||
</BaseCard>
|
||||
);
|
||||
};
|
||||
|
||||
export default ExtensionsCard;
|
||||
Loading…
Add table
Add a link
Reference in a new issue