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

Use Icon component for icons on AppTile's menu bar (#10955)

Browse source 
* Use icon component for buttons on mx_AppTileMenuBar_widgets

* Remove redundant declarations

* Add a Percy snapshot test

* Set color value to mx_Icon, fill and stroke with currentColor

* Iterate
This commit is contained in:
Suguru Hirahara 2023-05-22 07:48:40 +00:00 • committed by GitHub
parent 2e3cb0adf7
commit b7cd1f00fc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 74 additions and 71 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -40,6 +40,11 @@ import { WidgetContextMenu } from "../context_menus/WidgetContextMenu";
import WidgetAvatar from "../avatars/WidgetAvatar";
import LegacyCallHandler from "../../../LegacyCallHandler";
import { IApp, isAppWidget } from "../../../stores/WidgetStore";
import { Icon as CollapseIcon } from "../../../../res/img/element-icons/minimise-collapse.svg";
import { Icon as MaximiseIcon } from "../../../../res/img/element-icons/maximise-expand.svg";
import { Icon as MinimiseIcon } from "../../../../res/img/element-icons/minus-button.svg";
import { Icon as PopoutIcon } from "../../../../res/img/feather-customised/widget/external-link.svg";
import { Icon as MenuIcon } from "../../../../res/img/element-icons/room/ellipsis.svg";
import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
import { OwnProfileStore } from "../../../stores/OwnProfileStore";
import { UPDATE_EVENT } from "../../../stores/AsyncStore";
@ -714,27 +719,31 @@ export default class AppTile extends React.Component<IProps, IState> {
const isMaximised =
this.props.room &&
WidgetLayoutStore.instance.isInContainer(this.props.room, this.props.app, Container.Center);
const maximisedClasses = classNames({
"mx_AppTileMenuBar_iconButton": true,
"mx_AppTileMenuBar_iconButton--collapse": isMaximised,
"mx_AppTileMenuBar_iconButton--maximise": !isMaximised,
});
layoutButtons.push(
<AccessibleButton
key="toggleMaximised"
className={maximisedClasses}
className="mx_AppTileMenuBar_widgets_button"
title={isMaximised ? _t("Un-maximise") : _t("Maximise")}
onClick={this.onToggleMaximisedClick}
/>,
>
{isMaximised ? (
<CollapseIcon className="mx_Icon mx_Icon_12" />
) : (
<MaximiseIcon className="mx_Icon mx_Icon_12" />
)}
</AccessibleButton>,
);
layoutButtons.push(
<AccessibleButton
key="minimise"
className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton--minimise"
className="mx_AppTileMenuBar_widgets_button"
title={_t("Minimise")}
onClick={this.onMinimiseClicked}
/>,
>
<MinimiseIcon className="mx_Icon mx_Icon_12" />
</AccessibleButton>,
);
}
@ -753,18 +762,22 @@ export default class AppTile extends React.Component<IProps, IState> {
{layoutButtons}
{this.props.showPopout && !this.state.requiresClient && (
<AccessibleButton
className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton--popout"
className="mx_AppTileMenuBar_widgets_button"
title={_t("Popout widget")}
onClick={this.onPopoutWidgetClick}
/>
>
<PopoutIcon className="mx_Icon mx_Icon_12 mx_Icon--stroke" />
</AccessibleButton>
)}
<ContextMenuButton
className="mx_AppTileMenuBar_iconButton mx_AppTileMenuBar_iconButton--menu"
className="mx_AppTileMenuBar_widgets_button"
label={_t("Options")}
isExpanded={this.state.menuDisplayed}
inputRef={this.contextMenuButton}
onClick={this.onContextMenuClick}
/>
>
<MenuIcon className="mx_Icon mx_Icon_12" />
</ContextMenuButton>
</span>
</div>
)}