Matrix/element-web-Github
1
0
Fork 0
mirror of https://github.com/vector-im/element-web.git synced 2024-11-15 20:54:59 +08:00
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
res/css/views/right_panel/_RoomSummaryCard.scss
View File

@ -133,8 +133,7 @@ limitations under the License.
}
.mx_RoomSummaryCard_app_pinToggle,
.mx_RoomSummaryCard_app_maximise,
.mx_RoomSummaryCard_app_minimise,
.mx_RoomSummaryCard_app_maximiseToggle,
.mx_RoomSummaryCard_app_options {
position: absolute;
top: 0;
@ -176,7 +175,7 @@ limitations under the License.
mask-image: url('$(res)/img/element-icons/room/pin-upright.svg');
}
}
.mx_RoomSummaryCard_app_maximise {
.mx_RoomSummaryCard_app_maximiseToggle {
right: 32px; //24 + 8
&::before {
@ -184,25 +183,14 @@ limitations under the License.
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
}
}
.mx_RoomSummaryCard_app_minimise {
right: 32px; //24 + 8
&::before {
mask-size: 14px;
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
background-color: $accent;
}
}
.mx_RoomSummaryCard_app_options {
right: 32px; //24 + 8
right: 56px; //2*24 + 8
display: none;
&::before {
mask-image: url('$(res)/img/element-icons/room/ellipsis.svg');
}
&.mx_RoomSummaryCard_maximised_widget {
right: 56px; //2*24 + 8
}
}
&.mx_RoomSummaryCard_Button_pinned {
@ -215,6 +203,16 @@ limitations under the License.
}
}
&.mx_RoomSummaryCard_Button_maximised {
&::after {
opacity: 0.2;
}
.mx_RoomSummaryCard_app_maximiseToggle::before {
background-color: $accent;
}
}
&:hover {
.mx_RoomSummaryCard_icon_app {
padding-right: 72px;

22
res/css/views/rooms/_AppsDrawer.scss
View File

@ -231,14 +231,24 @@ $MinWidth: 240px;
background-color: $topleftmenu-color;
margin: 0 5px;
&.mx_AppTileMenuBar_iconButton_minWidget {
mask-size: auto 10px;
mask-image: url("$(res)/img/element-icons/minimise-collapse.svg");
}
&.mx_AppTileMenuBar_iconButton_maxWidget {
&.mx_AppTileMenuBar_iconButton_close {
mask-size: auto 10px;
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
background-color: $accent;
}
&.mx_AppTileMenuBar_iconButton_maximise {
mask-size: auto 10px;
mask-image: url("$(res)/img/element-icons/maximise-expand.svg");
}
&.mx_AppTileMenuBar_iconButton_unpin {
mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
background-color: $accent;
}
&.mx_AppTileMenuBar_iconButton_pin {
mask-image: url("$(res)/img/element-icons/room/pin-upright.svg");
}
&.mx_AppTileMenuBar_iconButton_popout {

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>

2
src/i18n/strings/en_EN.json
View File

@ -1947,7 +1947,7 @@
"Chat": "Chat",
"Room Info": "Room Info",
"You can only pin up to %(count)s widgets|other": "You can only pin up to %(count)s widgets",
"Maximise widget": "Maximise widget",
"Maximise": "Maximise",
"Unpin this widget to view it in this panel": "Unpin this widget to view it in this panel",
"Close this widget to view it in this panel": "Close this widget to view it in this panel",
"Set my room layout for everyone": "Set my room layout for everyone",