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')}