fix(ui5-li): Scale image properly (#2059)

Use ui5-avatar internally to scale the user image within the list item properly FIXES #2045
SAP · Aug 4, 2020 · 3aadc0e · 3aadc0e
1 parent dba7a2c
commit 3aadc0e
Show file tree

Hide file tree

Showing 6 changed files with 11 additions and 6 deletions.
diff --git a/packages/main/src/StandardListItem.hbs b/packages/main/src/StandardListItem.hbs
@@ -19,7 +19,7 @@
 
 {{#*inline "imageBegin"}}
 	{{#if displayImage}}
-		<img part="img" src="{{image}}" class="ui5-li-img">
+		<ui5-avatar image="{{image}}" image-fit-type="Contain" shape="Square" class="ui5-li-img"></ui5-avatar>
 	{{/if}}
 {{/inline}}
 

diff --git a/packages/main/src/StandardListItem.js b/packages/main/src/StandardListItem.js
@@ -1,6 +1,7 @@
 import ValueState from "@ui5/webcomponents-base/dist/types/ValueState.js";
 import ListItem from "./ListItem.js";
 import Icon from "./Icon.js";
+import Avatar from "./Avatar.js";
 import StandardListItemTemplate from "./generated/templates/StandardListItemTemplate.lit.js";
 
 /**
@@ -151,7 +152,10 @@ class StandardListItem extends ListItem {
 	}
 
 	static async onDefine() {
-		await Icon.define();
+		await Promise.all([
+			Icon.define(),
+			Avatar.define(),
+		]);
 	}
 }
 

diff --git a/packages/main/src/themes/Avatar.css b/packages/main/src/themes/Avatar.css
@@ -11,7 +11,7 @@
 	height: 3rem;
 	width: 3rem;
 	border-radius: 50%;
-    border: var(--ui5-avatar-initials-border);
+	border: var(--ui5-avatar-initials-border);
 	outline: none;
 	color: var(--ui5-avatar-initials-color);
 }
@@ -22,11 +22,11 @@
 }
 
 :host([shape="Square"]) .ui5-avatar-root {
-	border-radius: .25rem;
+	border-radius: inherit;
 }
 
 :host([shape="Square"]) .ui5-avatar-img {
-	border-radius: .25rem;
+	border-radius: inherit;
 }
 
 /* Sizes */

diff --git a/packages/main/src/themes/ListItem.css b/packages/main/src/themes/ListItem.css
@@ -106,6 +106,7 @@
 	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;
 }
 
 .ui5-li-icon {

diff --git a/packages/main/test/pages/List.html b/packages/main/test/pages/List.html
@@ -20,7 +20,7 @@
 	<ui5-list id="infiniteScrollEx" style="height: 300px" infinite-scroll>
 		<ui5-li-groupheader>New Items</ui5-li-groupheader>
 		<ui5-li image="./img/HT-1000.jpg" icon="navigation-right-arrow" info="Available">Voluptate do eu cupidatat elit est culpa. Reprehenderit eiusmod voluptate ex est dolor nostrud Lorem Lorem do nisi laborum veniam. Sint do non culpa aute occaecat labore ipsum veniam minim tempor est. Duis pariatur aute culpa irure ad excepteur pariatur culpa culpa ea duis occaecat aute irure. Ipsum velit culpa non exercitation ex laboris deserunt in eu non officia in. Laborum sunt aliqua labore cupidatat sunt labore.</ui5-li>
-		<ui5-li image="./img/HT-1010.jpg" icon="navigation-right-arrow" info="Re-stock" description="#12331232131" info-state="Error">Laptop Lenovo</ui5-li>
+		<ui5-li image="./img/portrait.jpg" icon="navigation-right-arrow" info="Re-stock" description="#12331232131" info-state="Error">Laptop Lenovo</ui5-li>
 		<ui5-li image="./img/HT-1022.jpg" icon="navigation-right-arrow" info="Re-stock" description="#12331232131"  info-state="Information">IPhone 3</ui5-li>
 
 		<ui5-li-groupheader>Discounted Items</ui5-li-groupheader>

diff --git a/packages/main/test/pages/img/portrait.jpg b/packages/main/test/pages/img/portrait.jpg