Skip to content

Commit

Permalink
fix(ui5-li): fix visual deviations from Fiori 3 (#2314)
Browse files Browse the repository at this point in the history 
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
  • Loading branch information
@nnaydenow
nnaydenow committed Oct 7, 2020
1 parent ff245fa commit d430632
Show file tree
Hide file tree
Showing 4 changed files with 119 additions and 12 deletions.
1 change: 0 additions & 1 deletion packages/main/src/ListItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,6 @@ const metadata = {
_mode: {
type: ListMode,
defaultValue: ListMode.None,
noAttribute: true,
},
},
events: /** @lends sap.ui.webcomponents.main.ListItem.prototype */ {
Expand Down
74 changes: 67 additions & 7 deletions packages/main/src/themes/ListItem.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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);
Expand Down Expand Up @@ -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 {
Expand All @@ -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;
Expand All @@ -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);
}
Expand All @@ -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;
}
7 changes: 4 additions & 3 deletions packages/main/src/themes/base/sizes-parameters.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
49 changes: 48 additions & 1 deletion packages/main/test/pages/List.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@
</head>

<body style="background-color: var(--sapBackgroundColor);">

<ui5-title>List "infinite-scroll"</ui5-title>
<label style="font-size:2rem;">new items loaded:</label><label id="result" style="font-size:2rem;"> 0 times: 0</label>
<ui5-list id="infiniteScrollEx" style="height: 300px" infinite-scroll>
Expand Down Expand Up @@ -222,6 +221,37 @@ <h3 id="infoLbl">Items 3/3</h3>
</ui5-li-custom>
</ui5-list>

<br />
Change mode:
<ui5-select id="select">
<ui5-option selected>None</ui5-option>
<ui5-option>SingleSelect</ui5-option>
<ui5-option>SingleSelectBegin</ui5-option>
<ui5-option>SingleSelectEnd</ui5-option>
<ui5-option>MultiSelect</ui5-option>
<ui5-option>Delete</ui5-option>
</ui5-select>
<ui5-list id="myList6" header-text="visualization of different combinations of icon / title / description / info / image - (Current mode: None)">
<ui5-li-custom>
<div style="width: 100%; height: 3rem; display: flex; align-items: center; justify-content: space-between">
<ui5-button>Press me</ui5-button>
<ui5-link>Go to SAP</ui5-link>
</div>
</ui5-li-custom>
<ui5-li>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.</ui5-li>
<ui5-li description="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.</ui5-li>
<ui5-li info-state="Error" info="Lorem ipsum">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.</ui5-li>
<ui5-li info-state="Error" info="Lorem ipsum" description="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.</ui5-li>
<ui5-li icon="home">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.</ui5-li>
<ui5-li icon="home" description="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.</ui5-li>
<ui5-li icon="home" info-state="Error" info="Lorem ipsum">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.</ui5-li>
<ui5-li icon="home" info-state="Error" info="Lorem ipsum" description="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.</ui5-li>
<ui5-li image="./img/woman_avatar_5.png">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.</ui5-li>
<ui5-li image="./img/woman_avatar_5.png" description="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.</ui5-li>
<ui5-li image="./img/woman_avatar_5.png" info-state="Error" info="Lorem ipsum">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.</ui5-li>
<ui5-li image="./img/woman_avatar_5.png" info-state="Error" info="Lorem ipsum" description="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.</ui5-li>
</ui5-list>

<script>
'use strict';

Expand All @@ -238,11 +268,28 @@ <h3 id="infoLbl">Items 3/3</h3>
var lblSelectionChange = document.getElementById('selectionChange');
var lblItemPress2 = document.getElementById('itemPress2');
var lblSelectionChange2 = document.getElementById('selectionChange2');
var visualizationList = document.getElementById('myList6');
var select = document.getElementById('select');
var modes = {
"None": undefined,
"SingleSelect": "SingleSelect",
"SingleSelectBegin": "SingleSelectBegin",
"SingleSelectEnd": "SingleSelectEnd",
"MultiSelect": "MultiSelect",
"Delete": "Delete"
}
var items = ["<ui5-li id='arg'>Argentina</ui5-li>", "<ui5-li id='bg'>Bulgaria</ui5-li>", "<ui5-li id='ch'>China</ui5-li>"];
var info = {
0: "0/3", 1: "1/3", 2: "2/3", 3: "3/3"
};

select.addEventListener("ui5-change", function (event) {
var value = event.detail.selectedOption.textContent;

visualizationList.mode = modes[value];
visualizationList.headerText = visualizationList.headerText.replace(/\(.+\)/, `(Current mode: ${value})`);
});

var getItems = function getItems(items) {
return items.map(function (item) {
return '<ui5-li id="' + item.id + '">' + item.textContent + '</ui5-li>';
Expand Down

0 comments on commit d430632

Please sign in to comment.