imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Unify widget header actions with those in right panel (#7734)

Browse source
This commit is contained in:
J. Ryan Stinnett 2022-02-09 10:47:41 +00:00 • committed by GitHub
parent fdbdde83c2
commit 59cdd3edc0
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 77 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/components/views/elements/AppTile.tsx
View file

@ -83,7 +83,7 @@ interface IProps {
// sets the pointer-events property on the iframe
pointerEvents?: string;
widgetPageTitle?: string;
hideMaximiseButton?: boolean;
showLayoutButtons?: boolean;
}
interface IState {
@ -115,6 +115,7 @@ export default class AppTile extends React.Component<IProps, IState> {
userWidget: false,
miniMode: false,
threadId: null,
showLayoutButtons: true,
};
private contextMenuButton = createRef<any>();
@ -507,7 +508,7 @@ export default class AppTile extends React.Component<IProps, IState> {
{ target: '_blank', href: this.sgWidget.popoutUrl, rel: 'noreferrer noopener' }).click();
};
private onMaxMinWidgetClick = (): void => {
private onToggleMaximisedClick = (): void => {
const targetContainer =
WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Center)
? Container.Right
@ -515,6 +516,14 @@ export default class AppTile extends React.Component<IProps, IState> {
WidgetLayoutStore.instance.moveToContainer(this.props.room, this.props.app, targetContainer);
};
private onTogglePinnedClick = (): void => {
const targetContainer =
WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Top)
? Container.Right
: Container.Top;
WidgetLayoutStore.instance.moveToContainer(this.props.room, this.props.app, targetContainer);
};
private onContextMenuClick = (): void => {
this.setState({ menuDisplayed: true });
};
@ -647,22 +656,37 @@ export default class AppTile extends React.Component<IProps, IState> {
);
}
let maxMinButton;
if (!this.props.hideMaximiseButton) {
const widgetIsMaximised = WidgetLayoutStore.instance.
const layoutButtons: React.ReactNodeArray = [];
if (this.props.showLayoutButtons) {
const isMaximised = WidgetLayoutStore.instance.
isInContainer(this.props.room, this.props.app, Container.Center);
const className = classNames({
const maximisedClasses = classNames({
"mx_AppTileMenuBar_iconButton": true,
"mx_AppTileMenuBar_iconButton_minWidget": widgetIsMaximised,
"mx_AppTileMenuBar_iconButton_maxWidget": !widgetIsMaximised,
"mx_AppTileMenuBar_iconButton_close": isMaximised,
"mx_AppTileMenuBar_iconButton_maximise": !isMaximised,
});
maxMinButton = <AccessibleButton
className={className}
layoutButtons.push(<AccessibleButton
className={maximisedClasses}
title={
widgetIsMaximised ? _t('Close') : _t('Maximise widget')
isMaximised ? _t("Close") : _t("Maximise")
}
onClick={this.onMaxMinWidgetClick}
/>;
onClick={this.onToggleMaximisedClick}
/>);
const isPinned = WidgetLayoutStore.instance.
isInContainer(this.props.room, this.props.app, Container.Top);
const pinnedClasses = classNames({
"mx_AppTileMenuBar_iconButton": true,
"mx_AppTileMenuBar_iconButton_unpin": isPinned,
"mx_AppTileMenuBar_iconButton_pin": !isPinned,
});
layoutButtons.push(<AccessibleButton
className={pinnedClasses}
title={
isPinned ? _t("Unpin") : _t("Pin")
}
onClick={this.onTogglePinnedClick}
/>);
}
return <React.Fragment>
@ -673,7 +697,7 @@ export default class AppTile extends React.Component<IProps, IState> {
{ this.props.showTitle && this.getTileTitle() }
</span>
<span className="mx_AppTileMenuBarWidgets">
{ maxMinButton }
{ layoutButtons }
{ (this.props.showPopout && !this.state.requiresClient) && <AccessibleButton
className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton_popout"
title={_t('Popout widget')}

15
src/components/views/right_panel/RoomSummaryCard.tsx
View file

@ -135,16 +135,12 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
pinTitle = isPinned ? _t("Unpin") : _t("Pin");
}
const classes = classNames("mx_BaseCard_Button mx_RoomSummaryCard_Button", {
mx_RoomSummaryCard_Button_pinned: isPinned,
});
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); };
const maximiseTitle = isMaximised ? _t("Close") : _t("Maximise widget");
const maximiseTitle = isMaximised ? _t("Close") : _t("Maximise");
let openTitle = "";
if (isPinned) {
@ -153,6 +149,11 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
openTitle =_t("Close this widget to view it in this panel");
}
const classes = classNames("mx_BaseCard_Button mx_RoomSummaryCard_Button", {
mx_RoomSummaryCard_Button_pinned: isPinned,
mx_RoomSummaryCard_Button_maximised: isMaximised,
});
return <div className={classes} ref={handle}>
<AccessibleTooltipButton
className="mx_RoomSummaryCard_icon_app"
@ -169,7 +170,7 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
</AccessibleTooltipButton>
{ canModifyWidget && <ContextMenuTooltipButton
className="mx_RoomSummaryCard_app_options mx_RoomSummaryCard_maximised_widget"
className="mx_RoomSummaryCard_app_options"
isExpanded={menuDisplayed}
onClick={openMenu}
title={_t("Options")}
@ -184,7 +185,7 @@ const AppRow: React.FC<IAppRowProps> = ({ app, room }) => {
yOffset={-24}
/>
<AccessibleTooltipButton
className={isMaximised ? "mx_RoomSummaryCard_app_minimise" : "mx_RoomSummaryCard_app_maximise"}
className="mx_RoomSummaryCard_app_maximiseToggle"
onClick={toggleMaximised}
title={maximiseTitle}
yOffset={-24}

2
src/components/views/rooms/Stickerpicker.tsx
View file

@ -304,7 +304,7 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
showPopout={false}
handleMinimisePointerEvents={true}
userWidget={true}
hideMaximiseButton={true}
showLayoutButtons={false}
/>
</PersistedElement>
</div>