Skip to content

Commit cdaf549

Browse files
ilhan007ilhan007
authored
feat(ui5-card): add avatar property (#45)
The avatar property will replace two properties - image and icon. It will be displayed in the begin area of the ui5-card header. It can represent both custom image and built-in icon, depending on the provided source URI.
1 parent 0bb5eed commit cdaf549

File tree

7 files changed

+55
-46
lines changed

7 files changed

+55
-46
lines changed

‎packages/main/src/Card.hbs

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
<div {{> controlData}} class="sapFCard">
22
<header class="sapFCardHeader">
3-
{{#if ctr.icon}}
4-
<span role="img" aria-label="Avatar" class="sapFCardAvatar">
5-
<ui5-icon class="sapFCardHeaderIcon" src="{{ctr.icon}}"></ui5-icon>
6-
</span>
3+
{{#if image}}
4+
<img src="{{ctr.avatar}}" aria-label="Avatar" class="sapFCardAvatar sapFCardHeaderImg">
75
{{/if}}
6+
7+
{{#if icon}}
8+
<span role="img" aria-label="Avatar" class="sapFCardAvatar">
9+
<ui5-icon class="sapFCardHeaderIcon" src="{{ctr.avatar}}"></ui5-icon>
10+
</span>
11+
{{/if}}
12+
813
<div class="sapFCardHeaderText">
914
{{#if ctr.heading}}
1015
<div class="sapFCardTitle">{{ctr.heading}}</div>

‎packages/main/src/Card.js

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import WebComponent from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/
22
import URI from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/types/URI";
33
import Core from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/Core";
44
import ShadowDOM from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/compatibility/ShadowDOM";
5+
import IconPoolProxy from "@ui5/webcomponents-base/src/sap/ui/webcomponents/base/IconPoolProxy";
56
import CardRenderer from "./build/compiled/CardRenderer.lit";
67
import Icon from "./Icon";
78

@@ -69,11 +70,15 @@ const metadata = {
6970
},
7071

7172
/**
72-
* Defines the icon displayed in the <code>ui5-card</code> header.
73-
* @type {String}
73+
* Defines image source URI or built-in icon source URI.
74+
* </br></br>
75+
* <b>Note:</b>
76+
* SAP-icons font provides numerous options. To find all the available icons, see the
77+
* <ui5-link target="_blank" href="https://openui5.hana.ondemand.com/test-resources/sap/m/demokit/iconExplorer/webapp/index.html" class="api-table-content-cell-link">Icon Explorer</ui5-link>.
78+
* @type {URI}
7479
* @public
7580
*/
76-
icon: {
81+
avatar: {
7782
type: URI,
7883
defaultValue: null,
7984
},
@@ -83,12 +88,12 @@ const metadata = {
8388
/**
8489
* @class
8590
* <h3 class="comment-api-title">Overview</h3>
91+
*
8692
* The <code>ui5-card</code> is a component that represents information in the form of a
8793
* tile with separate header and content areas.
8894
* The content area of a <code>ui5-card</code> can be arbitrary HTML content.
89-
* The header can be used through several properties, such as, <code>heading</code>,
90-
* <code>subtitle</code>,
91-
* <code>status</code> and <code>icon</code>.
95+
* The header can be used through several properties, such as:
96+
* <code>heading</code>, <code>subtitle</code>, <code>status</code> and <code>avatar</code>.
9297
*
9398
* <h3>ES6 Module Import</h3>
9499
*
@@ -115,8 +120,15 @@ class Card extends WebComponent {
115120
}
116121

117122
static calculateTemplateContext(state) {
123+
const hasAvatar = !!state.avatar;
124+
const icon = hasAvatar && IconPoolProxy.isIconURI(state.avatar);
125+
const image = hasAvatar && !icon;
126+
118127
return {
128+
icon,
129+
image,
119130
ctr: state,
131+
renderIcon: state.icon && !state.image,
120132
};
121133
}
122134

‎packages/main/src/themes/base/Card.less

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,11 @@ ui5-card {
8181
align-items: center;
8282
justify-content: center;
8383

84-
.sapFCardHeaderIcon {
84+
&.sapFCardHeaderImg {
85+
border-radius: 50%;
86+
}
87+
88+
& .sapFCardHeaderIcon {
8589
font-size: 1.5rem;
8690
color: @sapUiTileIconColor;
8791
}

‎packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@
7373
<section class="row">
7474
<ui5-card
7575
style="flex-basis:20%;"
76-
icon="sap-icon://employee"
76+
avatar="sap-icon://employee"
7777
heading="Wolly King"
7878
subtitle="Back-end developer"
7979
status="1 of 3">
@@ -86,7 +86,7 @@
8686
<ui5-card
8787
style="flex-basis:20%;"
8888
heading="Lee, Y.Song"
89-
icon="sap-icon://employee"
89+
avatar="sap-icon://employee"
9090
subtitle="Full-stack developer"
9191
status="2 of 3">
9292
<ui5-list id="myList12" separators="Inner">
@@ -97,7 +97,7 @@
9797
</ui5-card>
9898
<ui5-card
9999
style="flex-basis:20%;"
100-
icon="sap-icon://employee"
100+
avatar="sap-icon://employee"
101101
heading="Anna P."
102102
subtitle="Visioner">
103103
<ui5-list id="myList13" separators="Inner">
@@ -108,7 +108,7 @@
108108
</ui5-card>
109109
<ui5-card
110110
style="flex-basis:20%;"
111-
icon="sap-icon://employee"
111+
avatar="sap-icon://employee"
112112
heading="Medved I."
113113
subtitle="Enthusiast"
114114
status="3 of 3">

‎packages/main/test/sap/ui/webcomponents/main/pages/Kitchen.openui5.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -84,7 +84,7 @@
8484
<section class="row">
8585
<ui5-card
8686
style="flex-basis:20%;"
87-
icon="sap-icon://employee"
87+
avatar="sap-icon://employee"
8888
heading="Wolly King"
8989
subtitle="Back-end developer"
9090
status="1 of 3">
@@ -97,7 +97,7 @@
9797
<ui5-card
9898
style="flex-basis:20%;"
9999
heading="Lee, Y.Song"
100-
icon="sap-icon://employee"
100+
avatar="sap-icon://employee"
101101
subtitle="Full-stack developer"
102102
status="2 of 3">
103103
<ui5-list id="myList12" separators="Inner">
@@ -108,7 +108,7 @@
108108
</ui5-card>
109109
<ui5-card
110110
style="flex-basis:20%;"
111-
icon="sap-icon://employee"
111+
avatar="sap-icon://employee"
112112
heading="Anna P."
113113
subtitle="Visioner">
114114
<ui5-list id="myList13" separators="Inner">
@@ -119,7 +119,7 @@
119119
</ui5-card>
120120
<ui5-card
121121
style="flex-basis:20%;"
122-
icon="sap-icon://employee"
122+
avatar="sap-icon://employee"
123123
heading="Medved I."
124124
subtitle="Enthusiast"
125125
status="3 of 3">

‎packages/main/test/sap/ui/webcomponents/main/samples/Card.sample.html

Lines changed: 15 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -303,9 +303,7 @@ <h3>Card with Table</h3>
303303
<section>
304304
<h3>Card with Timeline</h3>
305305
<div class="snippet card-container">
306-
<ui5-card
307-
heading="Upcoming Activities"
308-
subtitle="For Today">
306+
<ui5-card heading="Upcoming Activities" subtitle="For Today">
309307
<ui5-timeline>
310308
<ui5-timeline-item id="test-item" title-text="called" timestamp="1487583000000" icon="sap-icon://phone" item-name="John Smith" item-name-clickable></ui5-timeline-item>
311309
<ui5-timeline-item title-text="Weekly Sync - CP Design" timestamp="1517349600000" icon="sap-icon://calendar">
@@ -340,14 +338,13 @@ <h3>Card with Timeline</h3>
340338
<section>
341339
<h3>Card with entirely custom content</h3>
342340
<div class="snippet card-container">
343-
<ui5-card icon="sap-icon://employee" heading="Dona Maria Moore" subtitle="Senior Sales Executive" class="small">
341+
<ui5-card avatar="../../../../../../www/samples/images/woman_avatar_1.png" heading="Dona Maria Moore" subtitle="Senior Sales Executive" class="small">
344342
<div class="content content-padding">
345343
<ui5-title level="H5" style="padding-bottom: 1rem;">Contact details</ui5-title>
346344

347345
<div class="content-group">
348346
<ui5-label>Company Name</ui5-label>
349347
<ui5-title level="H6">Company A</ui5-title>
350-
351348
</div>
352349

353350
<div class="content-group">
@@ -377,14 +374,13 @@ <h3>Card with entirely custom content</h3>
377374
}
378375
</style>
379376

380-
<ui5-card icon="sap-icon://employee" heading="Dona Maria Moore" subtitle="Senior Sales Executive" class="small">
377+
<ui5-card avatar="../../../../../../www/samples/images/woman_avatar_1.png" heading="Dona Maria Moore" subtitle="Senior Sales Executive" class="small">
381378
<div class="content content-padding">
382379
<ui5-title level="H5" style="padding-bottom: 1rem;">Contact details</ui5-title>
383380

384381
<div class="content-group">
385382
<ui5-label>Company Name</ui5-label>
386383
<ui5-title level="H6">Company A</ui5-title>
387-
388384
</div>
389385
<div class="content-group">
390386
<ui5-label>Address</ui5-label>
@@ -401,35 +397,27 @@ <h3>Card with entirely custom content</h3>
401397
</section>
402398

403399
<section>
404-
<h3>Basic Cards</h3>
400+
<h3>Basic Card</h3>
405401

406402
<div class="snippet card-container">
407-
<ui5-card icon="sap-icon://employee" heading="Anna P." subtitle="Visioner" class="small">
403+
<ui5-card avatar="../../../../../../www/samples/images/man_avatar_1.png" heading="David Willams" subtitle="Sales Manager" class="small">
408404
<ui5-list separators="Inner" class="content-padding">
409-
<ui5-li icon="sap-icon://camera" icon-end>Photoshop</ui5-li>
410-
<ui5-li icon="sap-icon://camera" icon-end>CorelDRAW</ui5-li>
411-
<ui5-li icon="sap-icon://camera" icon-end>GIMP</ui5-li>
405+
<ui5-li icon="sap-icon://competitor" icon-end>Personal Development</ui5-li>
406+
<ui5-li icon="sap-icon://wallet" icon-end>Finance</ui5-li>
407+
<ui5-li icon="sap-icon://collaborate" icon-end>Communications Skills</ui5-li>
412408
</ui5-list>
413409
</ui5-card>
414-
415-
<ui5-card icon="sap-icon://employee" heading="Medved I." subtitle="Enthusiast" class="small">
416-
<ui5-list separators="Inner" class="content-padding">
417-
<ui5-li icon="sap-icon://syntax">JavaScript</ui5-li>
418-
<ui5-li icon="sap-icon://syntax">React</ui5-li>
419-
<ui5-li icon="sap-icon://syntax">Algorithms</ui5-li>
420-
</ui5-list>
421-
</ui5-card>
422410
</div>
423411

424412
<pre class="prettyprint lang-html">
425413
<xmp>
426-
<ui5-card heading="Medved I." icon="sap-icon://employee" subtitle="Enthusiast">
427-
<ui5-list separators="Inner" class="content-padding">
428-
<ui5-li icon="sap-icon://syntax">JavaScript</ui5-li>
429-
<ui5-li icon="sap-icon://syntax">React</ui5-li>
430-
<ui5-li icon="sap-icon://syntax">Algorithms</ui5-li>
431-
</ui5-list>
432-
</ui5-card>
414+
<ui5-card avatar="../../../../../../www/samples/images/man_avatar_1.png" heading="David Willams" subtitle="Sales Manager" class="small">
415+
<ui5-list separators="Inner" class="content-padding">
416+
<ui5-li icon="sap-icon://competitor" icon-end>Personal Development</ui5-li>
417+
<ui5-li icon="sap-icon://wallet" icon-end>Finance</ui5-li>
418+
<ui5-li icon="sap-icon://collaborate" icon-end>Communications Skills</ui5-li>
419+
</ui5-list>
420+
</ui5-card>
433421
</xmp>
434422
</pre>
435423
</section>

‎packages/main/test/sap/ui/webcomponents/main/pages/img/Donna_Moore.jpg renamed to ‎packages/playground/webapp/images/Donna_Moore.jpg

File renamed without changes.

0 commit comments

Comments
 (0)