From fe8c267a143390807b20e0874aecc153385fd28e Mon Sep 17 00:00:00 2001 From: Suguru Hirahara Date: Thu, 16 Jun 2022 07:22:45 +0000 Subject: [PATCH] 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 * Move mx_TimelineCard__header under mx_BaseCard_header for normalization Signed-off-by: Suguru Hirahara * Normalize mx_BaseCard_close position Signed-off-by: Suguru Hirahara * Normalize className of header - mx_BaseCard_header__ThreadPanel - mx_BaseCard_header__TimelineCard Signed-off-by: Suguru Hirahara * Normalize header's button size Signed-off-by: Suguru Hirahara * Normalize inline start header margin Signed-off-by: Suguru Hirahara * normalize header bottom margin for PinnedMessagesCard and TimelineCard Signed-off-by: Suguru Hirahara * Normalize header declarations Signed-off-by: Suguru Hirahara * Add mixin RightPanelCard Signed-off-by: Suguru Hirahara * Move common declarations - top level Signed-off-by: Suguru Hirahara * Move common declarations - mx_BaseCard_header Remove specific declarations on PinnedMessagesCard Signed-off-by: Suguru Hirahara * Move common declarations - mx_BaseCard_back and mx_BaseCard_close Signed-off-by: Suguru Hirahara * Create a common class name - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara * Create a common class name - mx_BaseCard_header_title - ThreadPanel Signed-off-by: Suguru Hirahara * Move common declarations - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara * Move common declarations - span:first-of-type Signed-off-by: Suguru Hirahara * Remove redundant declarations Signed-off-by: Suguru Hirahara * Rename a variable to remove --ThreadPanel_header-button-size Signed-off-by: Suguru Hirahara * Remove class name - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara * Remove mx_BaseCard_header_title--ThreadPanel and h2 declarations from PinnedMessagesCard Signed-off-by: Suguru Hirahara * Headers need Heading Signed-off-by: Suguru Hirahara * Use spacing variables Signed-off-by: Suguru Hirahara * 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 * Hide long header title with ellipsis Signed-off-by: Suguru Hirahara * Merge style rules - BaseCard_header-button-size Signed-off-by: Suguru Hirahara * Merge style rules - BaseCard_header margin-bottom Signed-off-by: Suguru Hirahara * Merge style rules - BaseCard back and close margin Signed-off-by: Suguru Hirahara * Merge style rules - BaseCard back ~ mx_BaseCard_header_title Signed-off-by: Suguru Hirahara * Merge style rules - mx_BaseCard_header_title Signed-off-by: Suguru Hirahara * Return special declarations to _ThreadPanel.scss Signed-off-by: Suguru Hirahara * Remove the mixin Signed-off-by: Suguru Hirahara * Add mx_BaseCard_header_title_button--option Signed-off-by: Suguru Hirahara * Remove redundant margin from AppTileFullWidth Signed-off-by: Suguru Hirahara * Header on mx_RoomSummaryCard - remove default declarations Signed-off-by: Suguru Hirahara * Remove default declarations from mx_UserInfo Signed-off-by: Suguru Hirahara * Use variables - _BaseCard.scss Signed-off-by: Suguru Hirahara --- res/css/views/right_panel/_BaseCard.scss | 114 ++++++++++++++++-- .../right_panel/_PinnedMessagesCard.scss | 18 --- .../views/right_panel/_RoomSummaryCard.scss | 10 +- res/css/views/right_panel/_ThreadPanel.scss | 94 +-------------- res/css/views/right_panel/_TimelineCard.scss | 20 --- res/css/views/right_panel/_UserInfo.scss | 3 - res/css/views/right_panel/_WidgetCard.scss | 36 ------ src/components/structures/ThreadPanel.tsx | 7 +- src/components/structures/ThreadView.tsx | 5 +- .../context_menus/ThreadListContextMenu.tsx | 2 +- .../views/right_panel/PinnedMessagesCard.tsx | 4 +- .../views/right_panel/TimelineCard.tsx | 5 +- .../views/right_panel/WidgetCard.tsx | 10 +- .../__snapshots__/ThreadPanel-test.tsx.snap | 18 ++- 14 files changed, 138 insertions(+), 208 deletions(-) diff --git a/res/css/views/right_panel/_BaseCard.scss b/res/css/views/right_panel/_BaseCard.scss index fa3cbe9e66..64cb0c74f4 100644 --- a/res/css/views/right_panel/_BaseCard.scss +++ b/res/css/views/right_panel/_BaseCard.scss @@ -16,9 +16,10 @@ limitations under the License. .mx_BaseCard { --BaseCard_EventTile_line-padding-block: 2px; - --BaseCard_EventTile-spacing-inline: 36px; + --BaseCard_EventTile-spacing-inline: 36px; // TODO: Use a spacing variable + --BaseCard_header-button-size: 24px; - padding: 0 8px; + padding: 0 $spacing-8; overflow: hidden; display: flex; flex-direction: column; @@ -27,10 +28,10 @@ limitations under the License. .mx_BaseCard_header { --BaseCard_header_button-margin: $spacing-12; - margin: $spacing-4 0; + margin: $spacing-4 0 $spacing-12; > h2 { - margin: 0 44px; + margin: 0 44px; // TODO: Use a spacing variable font-size: $font-18px; font-weight: $font-semi-bold; overflow: hidden; @@ -42,8 +43,8 @@ limitations under the License. .mx_BaseCard_close { position: absolute; background-color: rgba(141, 151, 165, 0.2); - height: 20px; - width: 20px; + width: var(--BaseCard_header-button-size); + height: var(--BaseCard_header-button-size); margin: var(--BaseCard_header_button-margin); top: 0; border-radius: 50%; @@ -63,22 +64,73 @@ limitations under the License. .mx_BaseCard_back { left: 0; + margin-inline-start: calc(var(--BaseCard_header_button-margin) - $spacing-4); &::before { transform: rotate(90deg); mask-size: 22px; mask-image: url('$(res)/img/feather-customised/chevron-down.svg'); } + + // Header title with the back button + ~ .mx_BaseCard_header_title { + width: calc(100% - 60px); + margin-inline-start: var(--BaseCard_header-button-size); + + .mx_BaseCard_header_title_heading { + margin-inline-start: 6px; // TODO: Use a spacing variable + } + } } .mx_BaseCard_close { right: 0; + margin-inline-end: calc(var(--BaseCard_header_button-margin) - $spacing-4); &::before { mask-image: url('$(res)/img/icons-close.svg'); mask-size: 8px; } } + + .mx_BaseCard_header_title { + display: flex; + align-items: center; + justify-content: space-between; + width: calc(100% - 38px); + height: 24px; + flex: 1; + + .mx_BaseCard_header_title_heading { + color: $secondary-content; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + + .mx_BaseCard_header_title_button--option { + position: relative; + width: var(--BaseCard_header-button-size); + height: var(--BaseCard_header-button-size); + + &::after { + content: ''; + position: absolute; + inset-block-start: 0; + inset-inline-start: 0; + height: 100%; + width: 100%; + mask-repeat: no-repeat; + mask-position: center; + mask-image: url("$(res)/img/element-icons/message/overflow-large.svg"); + background-color: $secondary-content; + } + + &:hover::after { + background-color: $primary-content; + } + } + } } .mx_AutoHideScrollbar { @@ -91,11 +143,11 @@ limitations under the License. } .mx_BaseCard_Group { - margin: 20px 0 16px; + margin: $spacing-20 0 $spacing-16; & > * { - margin-left: 12px; - margin-right: 12px; + margin-left: $spacing-12; + margin-right: $spacing-12; } > h1 { @@ -105,7 +157,8 @@ limitations under the License. } .mx_BaseCard_Button { - padding: 10px 10px 10px 12px; + padding: 10px; // TODO: Use a spacing variable + padding-inline-start: $spacing-12; margin: 0; position: relative; font-size: $font-13px; @@ -127,7 +180,7 @@ limitations under the License. } &.mx_AccessibleButton_disabled { - padding-right: 12px; + padding-right: $spacing-12; &::after { content: unset; } @@ -136,7 +189,7 @@ limitations under the License. } .mx_BaseCard_footer { - padding-top: 4px; + padding-top: $spacing-4; text-align: center; display: flex; justify-content: space-around; @@ -159,7 +212,7 @@ limitations under the License. .mx_NotificationPanel, .mx_MemberList { &.mx_BaseCard { - padding: 32px 0 0; + padding: $spacing-32 0 0; .mx_AutoHideScrollbar { margin-right: unset; @@ -167,3 +220,38 @@ limitations under the License. } } } + +.mx_ContextualMenu_wrapper.mx_BaseCard_header_title { + .mx_ContextualMenu { + position: initial; + + span:first-of-type { + font-weight: $font-semi-bold; + font-size: inherit; + color: $primary-content; + } + + font-size: $font-12px; + color: $secondary-content; + padding-top: 10px; // TODO: Use a spacing variable + padding-bottom: 10px; // TODO: Use a spacing variable + + border: 1px solid $quinary-content; + box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05); + } + + .mx_ContextualMenu_chevron_top { + left: auto; + right: 22px; // TODO: Use a spacing variable + border-bottom-color: $quinary-content; + + &::after { + content: ""; + border: inherit; + border-bottom-color: $menu-bg-color; + position: absolute; + top: 1px; + left: -8px; + } + } +} diff --git a/res/css/views/right_panel/_PinnedMessagesCard.scss b/res/css/views/right_panel/_PinnedMessagesCard.scss index 7b099387f6..ac76cf6754 100644 --- a/res/css/views/right_panel/_PinnedMessagesCard.scss +++ b/res/css/views/right_panel/_PinnedMessagesCard.scss @@ -15,24 +15,6 @@ limitations under the License. */ .mx_PinnedMessagesCard { - padding-top: 0; - - .mx_BaseCard_header { - text-align: center; - margin-top: 0; - border-bottom: 1px solid $menu-border-color; - - > h2 { - font-weight: $font-semi-bold; - font-size: $font-18px; - margin: 8px 0; - } - - .mx_BaseCard_close { - margin-right: 6px; - } - } - .mx_PinnedMessagesCard_empty_wrapper { display: flex; height: 100%; diff --git a/res/css/views/right_panel/_RoomSummaryCard.scss b/res/css/views/right_panel/_RoomSummaryCard.scss index f340883d48..6061b853dd 100644 --- a/res/css/views/right_panel/_RoomSummaryCard.scss +++ b/res/css/views/right_panel/_RoomSummaryCard.scss @@ -17,25 +17,23 @@ limitations under the License. .mx_RoomSummaryCard { .mx_BaseCard_header { text-align: center; - margin-top: 20px; + margin-top: $spacing-20; h2 { - font-weight: $font-semi-bold; - font-size: $font-18px; - margin: 12px 0 4px; + margin: $spacing-12 0 $spacing-4; } .mx_RoomSummaryCard_alias { font-size: $font-13px; color: $secondary-content; + overflow: hidden; + text-overflow: ellipsis; } h2, .mx_RoomSummaryCard_alias { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; - overflow: hidden; - text-overflow: ellipsis; white-space: pre-wrap; } diff --git a/res/css/views/right_panel/_ThreadPanel.scss b/res/css/views/right_panel/_ThreadPanel.scss index 5ce596b8e6..50c61fa7ea 100644 --- a/res/css/views/right_panel/_ThreadPanel.scss +++ b/res/css/views/right_panel/_ThreadPanel.scss @@ -15,73 +15,16 @@ limitations under the License. */ .mx_ThreadPanel { - --ThreadPanel_header-button-size: 24px; - - display: flex; - flex-direction: column; height: 100px; overflow: visible; .mx_BaseCard_header { - margin-bottom: $spacing-12; - - .mx_BaseCard_close, - .mx_BaseCard_back { - width: var(--ThreadPanel_header-button-size); - height: var(--ThreadPanel_header-button-size); - } - - .mx_BaseCard_back { - margin-inline-start: calc(var(--BaseCard_header_button-margin) - 4px); - - ~ .mx_ThreadPanel__header { - width: calc(100% - 60px); - margin-inline-start: var(--ThreadPanel_header-button-size); - - span { - margin-inline-start: 6px; - } - } - } - - .mx_BaseCard_close { - margin-inline-end: calc(var(--BaseCard_header_button-margin) - 4px); - } - - .mx_ThreadPanel__header { - width: calc(100% - 38px); - height: 24px; - display: flex; - flex: 1; - justify-content: space-between; - align-items: center; - - span:first-of-type { - font-weight: 600; - font-size: 15px; - line-height: 18px; - color: $secondary-content; - } - + .mx_BaseCard_header_title { .mx_AccessibleButton { font-size: 12px; color: $secondary-content; } - .mx_MessageActionBar_optionsButton { - position: relative; - } - - .mx_MessageActionBar_maskButton { - width: var(--ThreadPanel_header-button-size); - height: var(--ThreadPanel_header-button-size); - - &::after { - mask-size: var(--ThreadPanel_header-button-size); - mask-image: url("$(res)/img/element-icons/message/overflow-large.svg"); - } - } - .mx_ThreadPanel_dropdown { padding: 3px $spacing-4 3px $spacing-8; // TODO: Use a spacing variable border-radius: 4px; @@ -278,40 +221,7 @@ limitations under the License. } } -.mx_ContextualMenu_wrapper.mx_ThreadPanel__header { - .mx_ContextualMenu { - position: initial; - - span:first-of-type { - font-weight: $font-semi-bold; - font-size: inherit; - color: $primary-content; - } - - font-size: $font-12px; - color: $secondary-content; - padding-top: 10px; - padding-bottom: 10px; - - border: 1px solid $quinary-content; - box-shadow: 0px 1px 3px rgba(23, 25, 28, 0.05); - } - - .mx_ContextualMenu_chevron_top { - left: auto; - right: 22px; - border-bottom-color: $quinary-content; - - &::after { - content: ""; - border: inherit; - border-bottom-color: $menu-bg-color; - position: absolute; - top: 1px; - left: -8px; - } - } - +.mx_ContextualMenu_wrapper { .mx_ThreadPanel_Header_FilterOptionItem { display: flex; flex-grow: 1; diff --git a/res/css/views/right_panel/_TimelineCard.scss b/res/css/views/right_panel/_TimelineCard.scss index e1b28aabec..5bb5efe9f6 100644 --- a/res/css/views/right_panel/_TimelineCard.scss +++ b/res/css/views/right_panel/_TimelineCard.scss @@ -15,26 +15,6 @@ limitations under the License. */ .mx_TimelineCard { - .mx_TimelineCard__header { - margin-left: 6px; - - span:first-of-type { - font-weight: 600; - font-size: 15px; - line-height: 18px; - color: $secondary-content; - } - } - - .mx_BaseCard_header { - margin: 5px 0 9px 0; - - .mx_BaseCard_close { - margin: 8px; - right: 0; - } - } - .mx_TimelineCard_timeline { overflow: hidden; position: relative; // offset parent for jump to bottom button diff --git a/res/css/views/right_panel/_UserInfo.scss b/res/css/views/right_panel/_UserInfo.scss index 5befee1425..4a0478888d 100644 --- a/res/css/views/right_panel/_UserInfo.scss +++ b/res/css/views/right_panel/_UserInfo.scss @@ -18,9 +18,6 @@ limitations under the License. .mx_UserInfo.mx_BaseCard { // UserInfo has a circular image at the top so it fits between the back & close buttons padding-top: 0; - display: flex; - flex-direction: column; - flex: 1; overflow-y: auto; font-size: $font-12px; diff --git a/res/css/views/right_panel/_WidgetCard.scss b/res/css/views/right_panel/_WidgetCard.scss index 812de3cfc8..6759cbc0d8 100644 --- a/res/css/views/right_panel/_WidgetCard.scss +++ b/res/css/views/right_panel/_WidgetCard.scss @@ -15,48 +15,12 @@ limitations under the License. */ .mx_WidgetCard { - height: 100%; - display: contents; - .mx_AppTileFullWidth { max-width: unset; width: auto !important; - margin: 0px $container-border-width 0px $container-border-width; height: 100%; border: 0; } - - .mx_BaseCard_header { - display: inline-flex; - - & > h2 { - margin-right: 0; - flex-grow: 1; - } - - .mx_WidgetCard_optionsButton { - position: relative; - margin-right: 44px; - height: 20px; - width: 20px; - min-width: 20px; // prevent crushing by the flexbox - padding: 0; - - &::before { - content: ""; - position: absolute; - width: 20px; - height: 20px; - top: 0; - left: 4px; - mask-repeat: no-repeat; - mask-position: center; - mask-size: contain; - mask-image: url('$(res)/img/element-icons/room/ellipsis.svg'); - background-color: $secondary-content; - } - } - } } .mx_WidgetCard_maxPinnedTooltip { diff --git a/src/components/structures/ThreadPanel.tsx b/src/components/structures/ThreadPanel.tsx index 0057a74cc8..55e6ed16f5 100644 --- 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 } : null; - return
- { _t("Threads") } + return
+ { _t("Threads") } { !empty && <> { } private renderThreadViewHeader = (): JSX.Element => { - return
- { _t("Thread") } + return
+ { _t("Thread") } diff --git a/src/components/views/context_menus/ThreadListContextMenu.tsx b/src/components/views/context_menus/ThreadListContextMenu.tsx index e433918fd7..73fa52ef3c 100644 --- a/src/components/views/context_menus/ThreadListContextMenu.tsx +++ b/src/components/views/context_menus/ThreadListContextMenu.tsx @@ -82,7 +82,7 @@ const ThreadListContextMenu: React.FC = ({ return { } return { _t("Pinned messages") }} + header={
+ { _t("Pinned messages") } +
} className="mx_PinnedMessagesCard" onClose={onClose} > diff --git a/src/components/views/right_panel/TimelineCard.tsx b/src/components/views/right_panel/TimelineCard.tsx index 7f6060ca2d..f73150db5e 100644 --- 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 { }; private renderTimelineCardHeader = (): JSX.Element => { - return
- { _t("Chat") } + return
+ { _t("Chat") }
; }; diff --git a/src/components/views/right_panel/WidgetCard.tsx b/src/components/views/right_panel/WidgetCard.tsx index 66bc627485..ee1c8729f8 100644 --- 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 = ({ room, widgetId, onClose }) => { ); } - const header = -

{ WidgetUtils.getWidgetName(app) }

+ const header =
+ { WidgetUtils.getWidgetName(app) } { contextMenu } - ; +
; return - + Threads - + - + Threads - +