Create a common header on right panel cards on BaseCard (#8808)

* Remove duplicate declarations and add height and overflow properties Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move mx_TimelineCard__header under mx_BaseCard_header for normalization Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Normalize mx_BaseCard_close position Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Normalize className of header - mx_BaseCard_header__ThreadPanel - mx_BaseCard_header__TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Normalize header's button size Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Normalize inline start header margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * normalize header bottom margin for PinnedMessagesCard and TimelineCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Normalize header declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add mixin RightPanelCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common declarations - top level Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common declarations - mx_BaseCard_header Remove specific declarations on PinnedMessagesCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common declarations - mx_BaseCard_back and mx_BaseCard_close Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Create a common class name - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Create a common class name - mx_BaseCard_header_title - ThreadPanel Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common declarations - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common declarations - span:first-of-type Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Rename a variable to remove --ThreadPanel_header-button-size Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove class name - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove mx_BaseCard_header_title--ThreadPanel and h2 declarations from PinnedMessagesCard Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Headers need Heading Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use spacing variables Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Move common style rules of mx_ContextualMenu inside mx_BaseCard_header_title to BaseCard leaving style rules specific to ThreadPanel. Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Hide long header title with ellipsis Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules - BaseCard_header-button-size Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules - BaseCard_header margin-bottom Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules - BaseCard back and close margin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules - BaseCard back ~ mx_BaseCard_header_title Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Merge style rules - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Return special declarations to _ThreadPanel.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove the mixin Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Add mx_BaseCard_header_title_button--option Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove redundant margin from AppTileFullWidth Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Header on mx_RoomSummaryCard - remove default declarations Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Remove default declarations from mx_UserInfo Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com> * Use variables - _BaseCard.scss Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
2022-06-16 07:22:45 +00:00 · 2022-06-16 07:22:45 +00:00 · fe8c267a14
commit fe8c267a14
parent 81c894f2d9
14 changed files with 138 additions and 208 deletions
--- a/src/components/structures/ThreadPanel.tsx
+++ b/src/components/structures/ThreadPanel.tsx
@ -40,6 +40,7 @@ import { Action } from '../../dispatcher/actions';
 import { UserTab } from '../views/dialogs/UserTab';
 import dis from '../../dispatcher/dispatcher';
 import Spinner from "../views/elements/Spinner";
+import Heading from '../views/typography/Heading';

 interface IProps {
    roomId: string;
@ -113,12 +114,12 @@ export const ThreadPanelHeader = ({ filterOption, setFilterOption, empty }: {
        right={33}
        onFinished={closeMenu}
        chevronFace={ChevronFace.Top}
-        wrapperClassName="mx_ThreadPanel__header"
+        wrapperClassName="mx_BaseCard_header_title"
    >
        { contextMenuOptions }
    </ContextMenu> : null;
-    return <div className="mx_ThreadPanel__header">
-        <span>{ _t("Threads") }</span>
+    return <div className="mx_BaseCard_header_title">
+        <Heading size="h4" className="mx_BaseCard_header_title_heading">{ _t("Threads") }</Heading>
        { !empty && <>
            <ContextMenuButton
                className="mx_ThreadPanel_dropdown"
--- a/src/components/structures/ThreadView.tsx
+++ b/src/components/structures/ThreadView.tsx
@ -54,6 +54,7 @@ import { ButtonEvent } from "../views/elements/AccessibleButton";
 import { RoomViewStore } from '../../stores/RoomViewStore';
 import Spinner from "../views/elements/Spinner";
 import { ComposerInsertPayload, ComposerType } from "../../dispatcher/payloads/ComposerInsertPayload";
+import Heading from '../views/typography/Heading';

 interface IProps {
    room: Room;
@ -298,8 +299,8 @@ export default class ThreadView extends React.Component<IProps, IState> {
    }

    private renderThreadViewHeader = (): JSX.Element => {
-        return <div className="mx_ThreadPanel__header">
-            <span>{ _t("Thread") }</span>
+        return <div className="mx_BaseCard_header_title">
+            <Heading size="h4" className="mx_BaseCard_header_title_heading">{ _t("Thread") }</Heading>
            <ThreadListContextMenu
                mxEvent={this.props.mxEvent}
                permalinkCreator={this.props.permalinkCreator} />
--- a/src/components/views/context_menus/ThreadListContextMenu.tsx
+++ b/src/components/views/context_menus/ThreadListContextMenu.tsx
@ -82,7 +82,7 @@ const ThreadListContextMenu: React.FC<IProps> = ({
    return <React.Fragment>
        <ContextMenuTooltipButton
            {...props}
-            className="mx_MessageActionBar_maskButton mx_MessageActionBar_optionsButton"
+            className="mx_BaseCard_header_title_button--option"
            onClick={openMenu}
            title={_t("Thread options")}
            isExpanded={menuDisplayed}
--- a/src/components/views/right_panel/PinnedMessagesCard.tsx
+++ b/src/components/views/right_panel/PinnedMessagesCard.tsx
@ -174,7 +174,9 @@ const PinnedMessagesCard = ({ room, onClose }: IProps) => {
    }

    return <BaseCard
-        header={<h2>{ _t("Pinned messages") }</h2>}
+        header={<div className="mx_BaseCard_header_title">
+            <Heading size="h4" className="mx_BaseCard_header_title_heading">{ _t("Pinned messages") }</Heading>
+        </div>}
        className="mx_PinnedMessagesCard"
        onClose={onClose}
    >
--- a/src/components/views/right_panel/TimelineCard.tsx
+++ b/src/components/views/right_panel/TimelineCard.tsx
@ -42,6 +42,7 @@ import SettingsStore from '../../../settings/SettingsStore';
 import JumpToBottomButton from '../rooms/JumpToBottomButton';
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 import Measured from '../elements/Measured';
+import Heading from '../typography/Heading';

 interface IProps {
    room: Room;
@ -192,8 +193,8 @@ export default class TimelineCard extends React.Component<IProps, IState> {
    };

    private renderTimelineCardHeader = (): JSX.Element => {
-        return <div className="mx_TimelineCard__header">
-            <span>{ _t("Chat") }</span>
+        return <div className="mx_BaseCard_header_title">
+            <Heading size="h4" className="mx_BaseCard_header_title_heading">{ _t("Chat") }</Heading>
        </div>;
    };

--- a/src/components/views/right_panel/WidgetCard.tsx
+++ b/src/components/views/right_panel/WidgetCard.tsx
@ -28,6 +28,7 @@ import WidgetContextMenu from "../context_menus/WidgetContextMenu";
 import { Container, WidgetLayoutStore } from "../../../stores/widgets/WidgetLayoutStore";
 import UIStore from "../../../stores/UIStore";
 import RightPanelStore from "../../../stores/right-panel/RightPanelStore";
+import Heading from '../typography/Heading';

 interface IProps {
    room: Room;
@ -68,18 +69,17 @@ const WidgetCard: React.FC<IProps> = ({ room, widgetId, onClose }) => {
        );
    }

-    const header = <React.Fragment>
-        <h2>{ WidgetUtils.getWidgetName(app) }</h2>
+    const header = <div className="mx_BaseCard_header_title">
+        <Heading size="h4" className="mx_BaseCard_header_title_heading">{ WidgetUtils.getWidgetName(app) }</Heading>
        <ContextMenuButton
-            kind="secondary"
-            className="mx_WidgetCard_optionsButton"
+            className="mx_BaseCard_header_title_button--option"
            inputRef={handle}
            onClick={openMenu}
            isExpanded={menuDisplayed}
            label={_t("Options")}
        />
        { contextMenu }
-    </React.Fragment>;
+    </div>;

    return <BaseCard
        header={header}