From 4dc9ef940c555811fa2d0f680ae9114c0d68c466 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Mon, 31 Jan 2022 18:24:33 -0600 Subject: [PATCH 1/4] Fix vertical spacing in compact context menus Fix https://github.com/vector-im/element-web/issues/20801 Regressed in https://github.com/matrix-org/matrix-react-sdk/pull/7339 Relevant styles were first added in https://github.com/matrix-org/matrix-react-sdk/pull/4858 (context behind why the original styles were added) --- .../views/context_menus/_IconizedContextMenu.scss | 12 ++++++------ res/css/views/messages/_JumpToDatePicker.scss | 2 ++ .../views/context_menus/IconizedContextMenu.tsx | 4 +++- src/components/views/messages/DateSeparator.tsx | 1 - 4 files changed, 11 insertions(+), 8 deletions(-) diff --git a/res/css/views/context_menus/_IconizedContextMenu.scss b/res/css/views/context_menus/_IconizedContextMenu.scss index 9dfda3b013a..01ca8a419d8 100644 --- a/res/css/views/context_menus/_IconizedContextMenu.scss +++ b/res/css/views/context_menus/_IconizedContextMenu.scss @@ -50,21 +50,21 @@ limitations under the License. } // round the top corners of the top button for the hover effect to be bounded - &:first-child .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind):first-child { + &:first-child .mx_IconizedContextMenu_item:first-child { border-radius: 8px 8px 0 0; // radius matches .mx_ContextualMenu } // round the bottom corners of the bottom button for the hover effect to be bounded - &:last-child .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind):last-child { + &:last-child .mx_IconizedContextMenu_item:last-child { border-radius: 0 0 8px 8px; // radius matches .mx_ContextualMenu } // round all corners of the only button for the hover effect to be bounded - &:first-child:last-child .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind):first-child:last-child { + &:first-child:last-child .mx_IconizedContextMenu_item:first-child:last-child { border-radius: 8px; // radius matches .mx_ContextualMenu } - .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) { + .mx_IconizedContextMenu_item { // pad the inside of the button so that the hover background is padded too padding-top: 12px; padding-bottom: 12px; @@ -130,7 +130,7 @@ limitations under the License. } .mx_IconizedContextMenu_optionList_red { - .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) { + .mx_IconizedContextMenu_item { color: $alert !important; } @@ -148,7 +148,7 @@ limitations under the License. } .mx_IconizedContextMenu_active { - &.mx_AccessibleButton:not(.mx_AccessibleButton_hasKind), .mx_AccessibleButton:not(.mx_AccessibleButton_hasKind) { + &.mx_IconizedContextMenu_item, .mx_IconizedContextMenu_item { color: $accent !important; } diff --git a/res/css/views/messages/_JumpToDatePicker.scss b/res/css/views/messages/_JumpToDatePicker.scss index 5722ed1306e..7aa5d06c6c1 100644 --- a/res/css/views/messages/_JumpToDatePicker.scss +++ b/res/css/views/messages/_JumpToDatePicker.scss @@ -16,6 +16,8 @@ limitations under the License. .mx_JumpToDatePicker_form { display: flex; + padding-top: 12px; + padding-bottom: 12px; } .mx_JumpToDatePicker_label { diff --git a/src/components/views/context_menus/IconizedContextMenu.tsx b/src/components/views/context_menus/IconizedContextMenu.tsx index cbe9d5fcc9b..c841fb67e2b 100644 --- a/src/components/views/context_menus/IconizedContextMenu.tsx +++ b/src/components/views/context_menus/IconizedContextMenu.tsx @@ -59,6 +59,7 @@ export const IconizedContextMenuRadio: React.FC = ({ return = ({ return = ({ }; export const IconizedContextMenuOption: React.FC = ({ label, iconClassName, children, ...props }) => { - return + return { iconClassName && } { label } { children } diff --git a/src/components/views/messages/DateSeparator.tsx b/src/components/views/messages/DateSeparator.tsx index 76040c1ad75..d0809c63d85 100644 --- a/src/components/views/messages/DateSeparator.tsx +++ b/src/components/views/messages/DateSeparator.tsx @@ -193,7 +193,6 @@ export default class DateSeparator extends React.Component { if (this.state.contextMenuPosition) { contextMenu = From aefe13fa38a2a7750c09781be0b6e7d553b8c818 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Mon, 31 Jan 2022 19:15:01 -0600 Subject: [PATCH 2/4] Make sure we pass along the other classes passed in like mx_IconizedContextMenu_option_red --- .../views/context_menus/IconizedContextMenu.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/components/views/context_menus/IconizedContextMenu.tsx b/src/components/views/context_menus/IconizedContextMenu.tsx index c841fb67e2b..4632167ebce 100644 --- a/src/components/views/context_menus/IconizedContextMenu.tsx +++ b/src/components/views/context_menus/IconizedContextMenu.tsx @@ -106,8 +106,14 @@ export const IconizedContextMenuCheckbox: React.FC = ({ ; }; -export const IconizedContextMenuOption: React.FC = ({ label, iconClassName, children, ...props }) => { - return +export const IconizedContextMenuOption: React.FC = ({ label, className, iconClassName, children, ...props }) => { + return { iconClassName && } { label } { children } From f0b098591deef9dde67318d59f81643ae062ceb6 Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Mon, 31 Jan 2022 19:15:14 -0600 Subject: [PATCH 3/4] Document where these magic values come from --- res/css/views/messages/_JumpToDatePicker.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/res/css/views/messages/_JumpToDatePicker.scss b/res/css/views/messages/_JumpToDatePicker.scss index 7aa5d06c6c1..d9b6fb9e91f 100644 --- a/res/css/views/messages/_JumpToDatePicker.scss +++ b/res/css/views/messages/_JumpToDatePicker.scss @@ -16,6 +16,8 @@ limitations under the License. .mx_JumpToDatePicker_form { display: flex; + // This matches the default padding of IconizedContextMenuOption + // (see context_menus/_IconizedContextMenu.scss) padding-top: 12px; padding-bottom: 12px; } From 1d6abea64620467d3a7156efdccaf2285c71636f Mon Sep 17 00:00:00 2001 From: Eric Eastwood Date: Mon, 31 Jan 2022 19:23:15 -0600 Subject: [PATCH 4/4] Fix lints --- .../views/context_menus/IconizedContextMenu.tsx | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/views/context_menus/IconizedContextMenu.tsx b/src/components/views/context_menus/IconizedContextMenu.tsx index 4632167ebce..2c6bdb3776b 100644 --- a/src/components/views/context_menus/IconizedContextMenu.tsx +++ b/src/components/views/context_menus/IconizedContextMenu.tsx @@ -59,7 +59,7 @@ export const IconizedContextMenuRadio: React.FC = ({ return = ({ return = ({ ; }; -export const IconizedContextMenuOption: React.FC = ({ label, className, iconClassName, children, ...props }) => { +export const IconizedContextMenuOption: React.FC = ({ + label, + className, + iconClassName, + children, + ...props +}) => { return