Skip to content

Commit 5d27c7f

Browse files
ivoplashkovilhan007
ivoplashkov
authored and
ilhan007
committed
feat(ui5-avatar): add initials, imageFitType and bg-color (#1151)
1 parent 6733de9 commit 5d27c7f

File tree

8 files changed

+354
-31
lines changed

8 files changed

+354
-31
lines changed

‎packages/main/src/Avatar.hbs

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<div class="ui5-avatar-root">
2-
{{#if displayIcon}}
2+
{{#if image}}
3+
<span alt="avatar" class="ui5-avatar-img" style="background-image: url({{image}})"></span>
4+
{{else if icon}}
35
<ui5-icon class="ui5-avatar-icon" name="{{icon}}"></ui5-icon>
4-
{{else}}
5-
<img alt="avatar" class="ui5-avatar-img" src="{{img}}"/>
6+
{{else if initials}}
7+
<span class="ui5-avatar-initials">{{validInitials}}</span>
68
{{/if}}
79
</div>

‎packages/main/src/Avatar.js

+68-4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import AvatarCss from "./generated/themes/Avatar.css.js";
1010
import Icon from "./Icon.js";
1111
import AvatarSize from "./types/AvatarSize.js";
1212
import AvatarShape from "./types/AvatarShape.js";
13+
import AvatarFitType from "./types/AvatarFitType.js";
14+
import AvatarBackgroundColor from "./types/AvatarBackgroundColor.js";
1315

1416
/**
1517
* @public
@@ -24,14 +26,14 @@ const metadata = {
2426
* @defaultvalue ""
2527
* @public
2628
*/
27-
img: {
29+
image: {
2830
type: String,
2931
},
3032

3133
/**
3234
* Defines the name of the UI5 Icon, that would be displayed.
3335
* <br>
34-
* <b>Note:</b> if <code>img</code> is set, the property would be ignored.
36+
* <b>Note:</b> if <code>image</code> is set, the property would be ignored.
3537
* <br>
3638
* <b>Note:</b> you should import the desired icon first, then use its name as "icon".
3739
* <br><br>
@@ -48,6 +50,18 @@ const metadata = {
4850
type: String,
4951
},
5052

53+
/**
54+
* Defines the displayed initials.
55+
* <br>
56+
* Up to two Latin letters can be displayed as initials in a <code>ui5-avatar</code>.
57+
*
58+
* @type {string}
59+
* @public
60+
*/
61+
initials: {
62+
type: String,
63+
},
64+
5165
/**
5266
* Defines the shape of the <code>ui5-avatar</code>.
5367
* <br><br>
@@ -82,6 +96,50 @@ const metadata = {
8296
type: String,
8397
defaultValue: AvatarSize.S,
8498
},
99+
100+
/**
101+
* Defines the fit type of the desired image.
102+
* <br><br>
103+
* Available options are:
104+
* <ul>
105+
* <li><code>Cover</code></li>
106+
* <li><code>Contain</code></li>
107+
* <ul>
108+
* @type {String}
109+
* @defaultvalue "Cover"
110+
* @public
111+
*/
112+
imageFitType: {
113+
type: String,
114+
defaultValue: AvatarFitType.Cover,
115+
},
116+
117+
/**
118+
* Defines the background color of the desired image.
119+
* <br><br>
120+
* Available options are:
121+
* <ul>
122+
* <li><code>Accent1</code></li>
123+
* <li><code>Accent2</code></li>
124+
* <li><code>Accent3</code></li>
125+
* <li><code>Accent4</code></li>
126+
* <li><code>Accent5</code></li>
127+
* <li><code>Accent6</code></li>
128+
* <li><code>Accent7</code></li>
129+
* <li><code>Accent8</code></li>
130+
* <li><code>Accent9</code></li>
131+
* <li><code>Accent10</code></li>
132+
* <li><code>Placeholder</code></li>
133+
* <ul>
134+
* @type {String}
135+
* @defaultvalue "Accent6"
136+
* @public
137+
*/
138+
backgroundColor: {
139+
type: String,
140+
defaultValue: AvatarBackgroundColor.Accent6,
141+
},
142+
85143
},
86144
slots: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
87145
},
@@ -134,8 +192,14 @@ class Avatar extends UI5Element {
134192
super.define(...params);
135193
}
136194

137-
get displayIcon() {
138-
return !!this.icon && !this.img;
195+
get validInitials() {
196+
const validInitials = /^[a-zA-Z]{1,2}$/;
197+
198+
if (this.initials && validInitials.test(this.initials)) {
199+
return this.initials;
200+
}
201+
202+
return null;
139203
}
140204
}
141205

‎packages/main/src/themes/Avatar.css

+71-6
Original file line numberDiff line numberDiff line change
@@ -8,46 +8,52 @@
88
width: 3rem;
99
border-radius: 50%;
1010
outline: none;
11+
color: var(--sapContent_ImagePlaceholderForegroundColor);
1112
}
1213

1314
/* Shapes */
1415
:host([shape="Square"]) {
15-
border-radius: 0.25rem;
16+
border-radius: .25rem;
1617
}
1718

1819
:host([shape="Square"]) .ui5-avatar-root {
19-
border-radius: 0.25rem;
20+
border-radius: .25rem;
2021
}
2122

2223
:host([shape="Square"]) .ui5-avatar-img {
23-
border-radius: 0.25rem;
24+
border-radius: .25rem;
2425
}
2526

2627
/* Sizes */
2728

2829
:host([size="XS"]) {
2930
height: 2rem;
3031
width: 2rem;
32+
font-size: .75rem;
3133
}
3234

3335
:host([size="S"]) {
3436
height: 3rem;
3537
width: 3rem;
38+
font-size: 1.125rem;
3639
}
3740

3841
:host([size="M"]) {
3942
height: 4rem;
4043
width: 4rem;
44+
font-size: 1.625rem;
4145
}
4246

4347
:host([size="L"]) {
4448
height: 5rem;
4549
width: 5rem;
50+
font-size: 2rem;
4651
}
4752

4853
:host([size="XL"]) {
4954
height: 7rem;
5055
width: 7rem;
56+
font-size: 2.75rem;
5157
}
5258

5359
/* Icon */
@@ -81,12 +87,60 @@
8187
width: 3rem;
8288
}
8389

84-
:host(:not([img])) {
90+
:host(:not([image])) {
8591
background-color: var(--sapAccentColor6);
8692
}
8793

88-
:host(:not([img])) .ui5-avatar-icon {
89-
color: var(--sapContent_ImagePlaceholderForegroundColor);
94+
:host([backgroundColor="Accent1"]) {
95+
background-color: var(--sapAccentColor1);
96+
}
97+
98+
:host([backgroundColor="Accent2"]) {
99+
background-color: var(--sapAccentColor2);
100+
}
101+
102+
:host([backgroundColor="Accent3"]) {
103+
background-color: var(--sapAccentColor3);
104+
}
105+
106+
:host([backgroundColor="Accent4"]) {
107+
background-color: var(--sapAccentColor4);
108+
}
109+
110+
:host([backgroundColor="Accent5"]) {
111+
background-color: var(--sapAccentColor5);
112+
}
113+
114+
:host([backgroundColor="Accent6"]) {
115+
background-color: var(--sapAccentColor6);
116+
}
117+
118+
:host([backgroundColor="Accent7"]) {
119+
background-color: var(--sapAccentColor7);
120+
}
121+
122+
:host([backgroundColor="Accent8"]) {
123+
background-color: var(--sapAccentColor8);
124+
}
125+
126+
:host([backgroundColor="Accent9"]) {
127+
background-color: var(--sapAccentColor9);
128+
}
129+
130+
:host([backgroundColor="Accent10"]) {
131+
background-color: var(--sapAccentColor10);
132+
}
133+
134+
:host([backgroundColor="Placeholder"]) {
135+
background-color: var(--sapContent_ImagePlaceholderBackground);
136+
}
137+
138+
:host(:not([image])) .ui5-avatar-icon {
139+
color: inherit;
140+
}
141+
142+
:host([image-fit-type="Contain"]) .ui5-avatar-img {
143+
background-size: contain;
90144
}
91145

92146
.ui5-avatar-root {
@@ -101,3 +155,14 @@
101155
width: 100%;
102156
border-radius: 50%;
103157
}
158+
159+
.ui5-avatar-img {
160+
background-repeat: no-repeat;
161+
background-position: center;
162+
background-size: cover;
163+
}
164+
165+
.ui5-avatar-initials {
166+
position: absolute;
167+
color: inherit;
168+
}

‎packages/main/src/types/AvatarBackgroundColor.js

+104
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
2+
3+
/**
4+
* Different types of AvatarBackgroundColor.
5+
* @lends sap.ui.webcomponents.main.types.AvatarBackgroundColor.prototype
6+
* @public
7+
*/
8+
const AvatarBackGroundColors = {
9+
/**
10+
*
11+
* @public
12+
* @type {Accent1}
13+
*/
14+
Accent1: "Accent1",
15+
16+
/**
17+
*
18+
* @public
19+
* @type {Accent2}
20+
*/
21+
Accent2: "Accent2",
22+
23+
/**
24+
*
25+
* @public
26+
* @type {Accent3}
27+
*/
28+
Accent3: "Accent3",
29+
30+
/**
31+
*
32+
* @public
33+
* @type {Accent4}
34+
*/
35+
Accent4: "Accent4",
36+
37+
/**
38+
*
39+
* @public
40+
* @type {Accent5}
41+
*/
42+
Accent5: "Accent5",
43+
44+
/**
45+
*
46+
* @public
47+
* @type {Accent6}
48+
*/
49+
Accent6: "Accent6",
50+
51+
/**
52+
*
53+
* @public
54+
* @type {Accent7}
55+
*/
56+
Accent7: "Accent7",
57+
58+
/**
59+
*
60+
* @public
61+
* @type {Accent8}
62+
*/
63+
Accent8: "Accent8",
64+
65+
/**
66+
*
67+
* @public
68+
* @type {Accent9}
69+
*/
70+
Accent9: "Accent9",
71+
72+
/**
73+
*
74+
* @public
75+
* @type {Accent10}
76+
*/
77+
Accent10: "Accent10",
78+
79+
/**
80+
*
81+
* @public
82+
* @type {Placeholder}
83+
*/
84+
Placeholder: "Placeholder",
85+
};
86+
87+
/**
88+
* @class
89+
* Different types of AvatarBackgroundColor.
90+
* @constructor
91+
* @author SAP SE
92+
* @alias sap.ui.webcomponents.main.types.AvatarBackgroundColor
93+
* @public
94+
* @enum {string}
95+
*/
96+
class AvatarBackgroundColor extends DataType {
97+
static isValid(value) {
98+
return !!AvatarBackGroundColors[value];
99+
}
100+
}
101+
102+
AvatarBackgroundColor.generataTypeAcessors(AvatarBackGroundColors);
103+
104+
export default AvatarBackgroundColor;

0 commit comments

Comments
 (0)