From ee445124e3dc683a3de05f41d2a6d69b6f8f9e59 Mon Sep 17 00:00:00 2001 From: niyap <38278268+niyap@users.noreply.github.com> Date: Sun, 26 Nov 2023 19:39:23 +0200 Subject: [PATCH] fix(ui5-panel): improve header visualization (#7906) --- packages/main/src/themes/Panel.css | 2 +- packages/main/src/themes/base/Panel-parameters.css | 6 ++++-- packages/main/src/themes/base/sizes-parameters.css | 7 +++---- packages/main/src/themes/sap_belize/Panel-parameters.css | 2 ++ packages/main/src/themes/sap_fiori_3/Panel-parameters.css | 5 ----- packages/main/src/themes/sap_fiori_3/parameters-bundle.css | 2 +- .../main/src/themes/sap_fiori_3_dark/Panel-parameters.css | 5 ----- .../main/src/themes/sap_fiori_3_dark/parameters-bundle.css | 2 +- packages/main/src/themes/sap_horizon/Panel-parameters.css | 1 - .../main/src/themes/sap_horizon_dark/Panel-parameters.css | 1 - .../main/src/themes/sap_horizon_hcw/Panel-parameters.css | 1 - 11 files changed, 12 insertions(+), 22 deletions(-) delete mode 100644 packages/main/src/themes/sap_fiori_3/Panel-parameters.css delete mode 100644 packages/main/src/themes/sap_fiori_3_dark/Panel-parameters.css diff --git a/packages/main/src/themes/Panel.css b/packages/main/src/themes/Panel.css index e2265edce965..e69253b749ff 100644 --- a/packages/main/src/themes/Panel.css +++ b/packages/main/src/themes/Panel.css @@ -102,7 +102,7 @@ align-items: center; flex-shrink: 0; width: var(--_ui5_panel_button_root_width); - height: var(--_ui5_panel_button_root_width); + height: var(--_ui5_panel_button_root_height); padding: var(--_ui5_panel_header_button_wrapper_padding); box-sizing: border-box; } diff --git a/packages/main/src/themes/base/Panel-parameters.css b/packages/main/src/themes/base/Panel-parameters.css index 16f01e0e08f9..4d3e8396fd7a 100644 --- a/packages/main/src/themes/base/Panel-parameters.css +++ b/packages/main/src/themes/base/Panel-parameters.css @@ -1,6 +1,8 @@ :root { --_ui5_panel_focus_border: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); - --_ui5_panel_button_root_width: 3rem; + --_ui5_panel_header_height: 2.75rem; + --_ui5_panel_button_root_width: 2.75rem; + --_ui5_panel_button_root_height: 2.75rem; --_ui5_panel_border_radius: 0px; --_ui5_panel_border_radius_expanded: 0; --_ui5_panel_default_header_border: none; @@ -17,5 +19,5 @@ [data-ui5-compact-size], .ui5-content-density-compact, .sapUiSizeCompact { - --_ui5_panel_header_button_wrapper_padding: .5625rem .375rem; + --_ui5_panel_header_button_wrapper_padding: .1875rem .25rem; } diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 733db3cc46f0..dc83abb0aaa5 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -97,9 +97,6 @@ /* TextArea */ --_ui5_textarea_margin: .25rem 0; - /* Panel */ - --_ui5_panel_header_height: 2.75rem; - /* Radio Button */ --_ui5_radio_button_height: 2.75rem; --_ui5_radio_button_label_side_padding: .875rem; @@ -251,7 +248,9 @@ --_ui5_month_picker_item_height: 2rem; --_ui5_year_picker_item_height: 2rem; - --_ui5_panel_header_height: 2.5rem; + --_ui5_panel_header_height: 2rem; + --_ui5_panel_button_root_height: 2rem; + --_ui5_panel_button_root_width: 2.5rem; --_ui5_token_height: 1.25rem; --_ui5_token_right_margin: 0.25rem; diff --git a/packages/main/src/themes/sap_belize/Panel-parameters.css b/packages/main/src/themes/sap_belize/Panel-parameters.css index b2d67e781638..d885d90bdd80 100644 --- a/packages/main/src/themes/sap_belize/Panel-parameters.css +++ b/packages/main/src/themes/sap_belize/Panel-parameters.css @@ -3,6 +3,8 @@ :root { --_ui5_panel_header_padding_right: 1rem; --_ui5_panel_header_height: 3rem; + --_ui5_panel_button_root_width: 3rem; + --_ui5_panel_button_root_height: 3rem; } [data-ui5-compact-size], diff --git a/packages/main/src/themes/sap_fiori_3/Panel-parameters.css b/packages/main/src/themes/sap_fiori_3/Panel-parameters.css deleted file mode 100644 index 09a5df458a66..000000000000 --- a/packages/main/src/themes/sap_fiori_3/Panel-parameters.css +++ /dev/null @@ -1,5 +0,0 @@ -@import "../base/Panel-parameters.css"; - -:root { - --_ui5_panel_button_root_width: 2.75rem; -} \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css index d6639e081618..8e7248aefcf7 100644 --- a/packages/main/src/themes/sap_fiori_3/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3/parameters-bundle.css @@ -22,7 +22,7 @@ @import "../base/Menu-parameters.css"; @import "./MonthPicker-parameters.css"; @import "../base/MessageStrip-parameters.css"; -@import "./Panel-parameters.css"; +@import "../base/Panel-parameters.css"; @import "../base/Popover-parameters.css"; @import "../base/PopupsCommon-parameters.css"; @import "../base/ProgressIndicator-parameters.css"; diff --git a/packages/main/src/themes/sap_fiori_3_dark/Panel-parameters.css b/packages/main/src/themes/sap_fiori_3_dark/Panel-parameters.css deleted file mode 100644 index 09a5df458a66..000000000000 --- a/packages/main/src/themes/sap_fiori_3_dark/Panel-parameters.css +++ /dev/null @@ -1,5 +0,0 @@ -@import "../base/Panel-parameters.css"; - -:root { - --_ui5_panel_button_root_width: 2.75rem; -} \ No newline at end of file diff --git a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css index 018d45ebbb95..1db840786a3a 100644 --- a/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css +++ b/packages/main/src/themes/sap_fiori_3_dark/parameters-bundle.css @@ -22,7 +22,7 @@ @import "../base/Menu-parameters.css"; @import "./MonthPicker-parameters.css"; @import "../base/MessageStrip-parameters.css"; -@import "./Panel-parameters.css"; +@import "../base/Panel-parameters.css"; @import "../base/Popover-parameters.css"; @import "../base/PopupsCommon-parameters.css"; @import "../base/ProgressIndicator-parameters.css"; diff --git a/packages/main/src/themes/sap_horizon/Panel-parameters.css b/packages/main/src/themes/sap_horizon/Panel-parameters.css index dbc312c15d2a..24ca74a7011a 100644 --- a/packages/main/src/themes/sap_horizon/Panel-parameters.css +++ b/packages/main/src/themes/sap_horizon/Panel-parameters.css @@ -1,7 +1,6 @@ @import "../base/Panel-parameters.css"; :root { - --_ui5_panel_button_root_width: 2.75rem; --_ui5_panel_border_radius: var(--sapElement_BorderCornerRadius); --_ui5_panel_border_bottom: none; --_ui5_panel_default_header_border: 0.0625rem solid var(--sapGroup_TitleBorderColor); diff --git a/packages/main/src/themes/sap_horizon_dark/Panel-parameters.css b/packages/main/src/themes/sap_horizon_dark/Panel-parameters.css index dbc312c15d2a..24ca74a7011a 100644 --- a/packages/main/src/themes/sap_horizon_dark/Panel-parameters.css +++ b/packages/main/src/themes/sap_horizon_dark/Panel-parameters.css @@ -1,7 +1,6 @@ @import "../base/Panel-parameters.css"; :root { - --_ui5_panel_button_root_width: 2.75rem; --_ui5_panel_border_radius: var(--sapElement_BorderCornerRadius); --_ui5_panel_border_bottom: none; --_ui5_panel_default_header_border: 0.0625rem solid var(--sapGroup_TitleBorderColor); diff --git a/packages/main/src/themes/sap_horizon_hcw/Panel-parameters.css b/packages/main/src/themes/sap_horizon_hcw/Panel-parameters.css index fa3ae99cd4b0..4025c896d49b 100644 --- a/packages/main/src/themes/sap_horizon_hcw/Panel-parameters.css +++ b/packages/main/src/themes/sap_horizon_hcw/Panel-parameters.css @@ -2,7 +2,6 @@ :root { --_ui5_panel_focus_border: 0.125rem dotted var(--sapContent_FocusColor); - --_ui5_panel_button_root_width: 2.75rem; --_ui5_panel_default_header_border: 0.0625rem solid var(--sapGroup_TitleBorderColor); --_ui5_panel_outline_offset: -0.125rem; --_ui5_panel_icon_color: var(--sapButton_Lite_TextColor);