From 6f325c5ccd5203f268da60574ee51b7d6cceac5b Mon Sep 17 00:00:00 2001 From: Nayden Naydenov <31909318+nnaydenow@users.noreply.github.com> Date: Wed, 7 Oct 2020 18:09:41 +0300 Subject: [PATCH] fix(ui5-li): fix visual deviations from Fiori 3 (#2314) Changes: - info text is align centrally and it is align bottom if description attribute exists - title text is align centrally and it is align top if description attribute exists - item's height is changed to 5rem if description / image attribute exist - checkbox / radio button is positioned correctly Fixes #2297 Fixes #2218 --- packages/main/src/ListItem.js | 1 - packages/main/src/themes/ListItem.css | 74 +++++++++++++++++-- .../main/src/themes/base/sizes-parameters.css | 7 +- packages/main/test/pages/List.html | 49 +++++++++++- 4 files changed, 119 insertions(+), 12 deletions(-) diff --git a/packages/main/src/ListItem.js b/packages/main/src/ListItem.js index 5e048ff4bc8a..0a677769533b 100644 --- a/packages/main/src/ListItem.js +++ b/packages/main/src/ListItem.js @@ -73,7 +73,6 @@ const metadata = { _mode: { type: ListMode, defaultValue: ListMode.None, - noAttribute: true, }, }, events: /** @lends sap.ui.webcomponents.main.ListItem.prototype */ { diff --git a/packages/main/src/themes/ListItem.css b/packages/main/src/themes/ListItem.css index 5f3d3f2c752d..7fd77e4e4f23 100644 --- a/packages/main/src/themes/ListItem.css +++ b/packages/main/src/themes/ListItem.css @@ -61,6 +61,22 @@ height: 5rem; } +:host([has-title][image]) { + height: 5rem; +} + +:host([image]) .ui5-li-content { + height: 3rem; +} + +:host([description]) .ui5-li-root { + padding: 1rem; +} + +:host([description]) .ui5-li-content { + height: 3rem; +} + :host([has-title][description]) .ui5-li-title { padding-bottom: 0.375rem; } @@ -73,6 +89,12 @@ line-height: normal; } +:host([description]) .ui5-li-title-wrapper { + height: 100%; + justify-content: space-between; + padding: 0.125rem 0; +} + .ui5-li-title { color: var(--sapTextColor); font-size: var(--_ui5_list_item_title_size); @@ -100,13 +122,17 @@ white-space: nowrap; } +:host([description]) .ui5-li-info { + align-self: flex-end; +} + .ui5-li-img { width: var(--_ui5_list_item_img_size); min-width: var(--_ui5_list_item_img_size); height: var(--_ui5_list_item_img_size); min-height: var(--_ui5_list_item_img_size); margin: var(--_ui5_list_item_img_margin); - border-radius: 0; + border-radius: 0.25rem; } .ui5-li-icon { @@ -116,12 +142,6 @@ padding-right: 0.5rem; } -:host([description]) .ui5-li-img { - width: 3rem; - height: 3rem; - border-radius: 0.25rem; -} - .ui5-li-content { display: flex; align-items: center; @@ -142,6 +162,31 @@ flex-shrink: 0; } +:host([description]) .ui5-li-singlesel-radiobtn { + align-self: flex-start; + margin-top: var(--_ui5_list_item_selection_btn_margin_top); +} + +:host([description]) .ui5-li-multisel-cb { + align-self: flex-start; + margin-top: var(--_ui5_list_item_selection_btn_margin_top); +} + +:host([_mode="SingleSelectBegin"]) .ui5-li-root { + padding-right: 1rem; + padding-left: 0; +} + +:host([_mode="MultiSelect"]) .ui5-li-root { + padding-right: 1rem; + padding-left: 0; +} + +:host([_mode="SingleSelectEnd"]) .ui5-li-root { + padding-right: 0; + padding-left: 1rem; +} + :host [ui5-checkbox].ui5-li-singlesel-radiobtn { margin-right: var(--_ui5_list_item_cb_margin_right); } @@ -155,3 +200,18 @@ :host [dir="rtl"] .ui5-li-img { margin: .5rem 0 .5rem 0.75rem; } + +:host([_mode="SingleSelectBegin"]) [dir="rtl"].ui5-li-root { + padding-right: 0; + padding-left: 1rem; +} + +:host([_mode="MultiSelect"]) [dir="rtl"].ui5-li-root { + padding-right: 0; + padding-left: 1rem; +} + +:host([_mode="SingleSelectEnd"]) [dir="rtl"].ui5-li-root { + padding-right: 1rem; + padding-left: 0; +} \ No newline at end of file diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css index 4febb72f33be..8db6838228d9 100644 --- a/packages/main/src/themes/base/sizes-parameters.css +++ b/packages/main/src/themes/base/sizes-parameters.css @@ -5,7 +5,7 @@ --_ui5_checkbox_root_side_padding: .6875rem; --_ui5_checkbox_icon_size: 1rem; --_ui5_custom_list_item_height: 3rem; - --_ui5_custom_list_item_rb_min_width: 3rem; + --_ui5_custom_list_item_rb_min_width: 2.75rem; --_ui5_day_picker_item_width: 2.25rem; --_ui5_day_picker_item_height: 2.875rem; --_ui5_day_picker_empty_height: 3rem; @@ -23,10 +23,11 @@ --_ui5_list_no_data_height: 3rem; --_ui5_list_item_cb_margin_right: 0; --_ui5_list_item_title_size: var(--sapMFontLargeSize); - --_ui5_list_item_img_size: 2rem; + --_ui5_list_item_img_size: 3rem; --_ui5_list_item_img_margin: 0.5rem 0.75rem 0.5rem 0rem; --_ui5_list_item_base_height: 2.75rem; --_ui5_list_item_icon_size: 1.125rem; + --_ui5_list_item_selection_btn_margin_top: calc(-1 * var(--_ui5_checkbox_wrapper_padding)); --_ui5_list_busy_row_height: 3rem; --_ui5_month_picker_item_height: 3rem; --_ui5_year_picker_item_height: 3rem; @@ -129,10 +130,10 @@ --_ui5_list_no_data_height: 2rem; --_ui5_list_item_cb_margin_right: .5rem; --_ui5_list_item_title_size: var(--sapFontSize); - --_ui5_list_item_img_size: 1.75rem; --_ui5_list_item_img_margin: 0.55rem 0.75rem 0.5rem 0rem; --_ui5_list_item_base_height: 2rem; --_ui5_list_item_icon_size: 1rem; + --_ui5_list_item_selection_btn_margin_top: calc(-1 * var(--_ui5_checkbox_wrapper_padding)); --_ui5_list_busy_row_height: 2rem; --_ui5_month_picker_item_height: 2rem; diff --git a/packages/main/test/pages/List.html b/packages/main/test/pages/List.html index 431851276a1f..297810c0be1e 100644 --- a/packages/main/test/pages/List.html +++ b/packages/main/test/pages/List.html @@ -14,7 +14,6 @@ - List "infinite-scroll" @@ -222,6 +221,37 @@

Items 3/3

 +
+ Change mode: + + None + SingleSelect + SingleSelectBegin + SingleSelectEnd + MultiSelect + Delete + + + +
+ Press me + Go to SAP +
+ + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. + +