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

Update right panel base card styling to match Compound (#12768)

Browse source 
* Update base card styling to match Compound

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

* Update screenshot

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>

---------

Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski 2024-07-16 10:03:35 +01:00 • committed by GitHub
parent 5f10ccb5e4
commit f7a078d250
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
24 changed files with 118 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

62
src/components/views/right_panel/BaseCard.tsx
View file

@ -14,12 +14,14 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
import React, { forwardRef, ReactNode, KeyboardEvent, Ref } from "react";
import React, { forwardRef, ReactNode, KeyboardEvent, Ref, MouseEvent } from "react";
import classNames from "classnames";
import { IconButton, Text } from "@vector-im/compound-web";
import { Icon as CloseIcon } from "@vector-im/compound-design-tokens/icons/close.svg";
import { Icon as ChevronLeftIcon } from "@vector-im/compound-design-tokens/icons/chevron-left.svg";
import AutoHideScrollbar from "../../structures/AutoHideScrollbar";
import { _t } from "../../../languageHandler";
import AccessibleButton, { ButtonEvent } from "../elements/AccessibleButton";
import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
import { backLabelForPhase } from "../../../stores/right-panel/RightPanelStorePhases";
import { CardContext } from "./context";
@ -34,13 +36,13 @@ interface IProps {
ariaLabelledBy?: string;
withoutScrollContainer?: boolean;
closeLabel?: string;
onClose?(ev: ButtonEvent): void;
onBack?(ev: ButtonEvent): void;
onClose?(ev: MouseEvent<HTMLButtonElement>): void;
onBack?(ev: MouseEvent<HTMLButtonElement>): void;
onKeyDown?(ev: KeyboardEvent): void;
cardState?: any;
ref?: Ref<HTMLDivElement>;
// Ref for the 'close' button the the card
closeButtonRef?: Ref<HTMLDivElement>;
closeButtonRef?: Ref<HTMLButtonElement>;
children: ReactNode;
}
@ -81,26 +83,39 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
) => {
let backButton;
const cardHistory = RightPanelStore.instance.roomPhaseHistory;
if (cardHistory.length > 1) {
if (cardHistory.length > 1 && !hideHeaderButtons) {
const prevCard = cardHistory[cardHistory.length - 2];
const onBackClick = (ev: ButtonEvent): void => {
const onBackClick = (ev: MouseEvent<HTMLButtonElement>): void => {
onBack?.(ev);
RightPanelStore.instance.popCard();
};
const label = backLabelForPhase(prevCard.phase) ?? _t("action|back");
backButton = <AccessibleButton className="mx_BaseCard_back" onClick={onBackClick} title={label} />;
backButton = (
<IconButton
size="28px"
data-testid="base-card-back-button"
onClick={onBackClick}
tooltip={label}
subtleBackground
>
<ChevronLeftIcon />
</IconButton>
);
}
let closeButton;
if (onClose) {
if (onClose && !hideHeaderButtons) {
closeButton = (
<AccessibleButton
<IconButton
size="28px"
data-testid="base-card-close-button"
className="mx_BaseCard_close"
onClick={onClose}
title={closeLabel || _t("action|close")}
ref={closeButtonRef}
/>
tooltip={closeLabel ?? _t("action|close")}
subtleBackground
>
<CloseIcon />
</IconButton>
);
}
@ -108,16 +123,6 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
children = <AutoHideScrollbar>{children}</AutoHideScrollbar>;
}
let headerButtons: React.ReactElement | undefined;
if (!hideHeaderButtons) {
headerButtons = (
<>
{backButton}
{closeButton}
</>
);
}
const shouldRenderHeader = header || !hideHeaderButtons;
return (
@ -132,8 +137,15 @@ const BaseCard: React.FC<IProps> = forwardRef<HTMLDivElement, IProps>(
>
{shouldRenderHeader && (
<div className="mx_BaseCard_header">
{headerButtons}
<div className="mx_BaseCard_headerProp">{header}</div>
{backButton}
{typeof header === "string" ? (
<Text size="md" weight="medium" className="mx_BaseCard_header_title">
{header}
</Text>
) : (
header ?? <div className="mx_BaseCard_header_spacer" />
)}
{closeButton}
</div>
)}
{children}