Skip to content

Commit b1c8747

Browse files
ilhan007ilhan007
authored
feat(ui5-avatar): introduce new component (#1135)
1 parent 3daa88d commit b1c8747

File tree

11 files changed

+543
-0
lines changed

11 files changed

+543
-0
lines changed

‎packages/main/bundle.esm.js

+1
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import "./dist/Assets.js";
1515
import "./dist/features/InputElementsFormSupport.js";
1616
import "./dist/features/InputSuggestions.js";
1717

18+
import Avatar from "./dist/Avatar.js";
1819
import Badge from "./dist/Badge.js";
1920
import BusyIndicator from "./dist/BusyIndicator.js";
2021
import Button from "./dist/Button.js";

‎packages/main/src/Avatar.hbs

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<div class="ui5-avatar-root">
2+
{{#if displayIcon}}
3+
<ui5-icon class="ui5-avatar-icon" name="{{icon}}"></ui5-icon>
4+
{{else}}
5+
<img alt="avatar" class="ui5-avatar-img" src="{{img}}"/>
6+
{{/if}}
7+
</div>

‎packages/main/src/Avatar.js

+144
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
2+
import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
3+
4+
// Template
5+
import AvatarTemplate from "./generated/templates/AvatarTemplate.lit.js";
6+
7+
// Styles
8+
import AvatarCss from "./generated/themes/Avatar.css.js";
9+
10+
import Icon from "./Icon.js";
11+
import AvatarSize from "./types/AvatarSize.js";
12+
import AvatarShape from "./types/AvatarShape.js";
13+
14+
/**
15+
* @public
16+
*/
17+
const metadata = {
18+
tag: "ui5-avatar",
19+
properties: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
20+
21+
/**
22+
* Defines the source path to the desired image.
23+
* @type {string}
24+
* @defaultvalue ""
25+
* @public
26+
*/
27+
img: {
28+
type: String,
29+
},
30+
31+
/**
32+
* Defines the name of the UI5 Icon, that would be displayed.
33+
* <br>
34+
* <b>Note:</b> if <code>img</code> is set, the property would be ignored.
35+
* <br>
36+
* <b>Note:</b> you should import the desired icon first, then use its name as "icon".
37+
* <br><br>
38+
* import "@ui5/webcomponents-icons/dist/icons/{icon_name}.js"
39+
* <br>
40+
* <pre>&lt;ui5-avatar icon-src="employee"></pre>
41+
*
42+
* See all the available icons in the <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>.
43+
* @type {string}
44+
* @defaultvalue ""
45+
* @public
46+
*/
47+
icon: {
48+
type: String,
49+
},
50+
51+
/**
52+
* Defines the shape of the <code>ui5-avatar</code>.
53+
* <br><br>
54+
* Available options are:
55+
* <ul>
56+
* <li><code>Circle</code></li>
57+
* <li><code>Square</code></li>
58+
* <ul>
59+
* @public
60+
* @defaultvalue "Circle"
61+
*/
62+
shape: {
63+
type: String,
64+
defaultValue: AvatarShape.Circle,
65+
},
66+
67+
/**
68+
* Defines predefined size of the <code>ui5-avatar</code>.
69+
* <br><br>
70+
* Available options are:
71+
* <ul>
72+
* <li><code>XS</code></li>
73+
* <li><code>S</code></li>
74+
* <li><code>M</code></li>
75+
* <li><code>L</code></li>
76+
* <li><code>XL</code></li>
77+
* <ul>
78+
* @public
79+
* @defaultvalue "S"
80+
*/
81+
size: {
82+
type: String,
83+
defaultValue: AvatarSize.S,
84+
},
85+
},
86+
slots: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
87+
},
88+
events: /** @lends sap.ui.webcomponents.main.Avatar.prototype */ {
89+
},
90+
};
91+
92+
/**
93+
* @class
94+
*
95+
* <h3 class="comment-api-title">Overview</h3>
96+
*
97+
* An image-like control that has different display options for representing images and icons
98+
* in different shapes and sizes, depending on the use case.
99+
*
100+
* The shape can be circular or square. There are several predefined sizes, as well as an option to
101+
* set a custom size.
102+
*
103+
* <h3>ES6 Module Import</h3>
104+
*
105+
* <code>import @ui5/webcomponents/dist/Avatar.js";</code>
106+
*
107+
* @constructor
108+
* @author SAP SE
109+
* @alias sap.ui.webcomponents.main.Avatar
110+
* @extends UI5Element
111+
* @tagname ui5-avatar
112+
* @since 1.0.0-rc.6
113+
* @public
114+
*/
115+
class Avatar extends UI5Element {
116+
static get metadata() {
117+
return metadata;
118+
}
119+
120+
static get render() {
121+
return litRender;
122+
}
123+
124+
static get styles() {
125+
return AvatarCss;
126+
}
127+
128+
static get template() {
129+
return AvatarTemplate;
130+
}
131+
132+
static async define(...params) {
133+
await Icon.define();
134+
super.define(...params);
135+
}
136+
137+
get displayIcon() {
138+
return !!this.icon && !this.img;
139+
}
140+
}
141+
142+
Avatar.define();
143+
144+
export default Avatar;

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

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
:host(:not([hidden])) {
2+
display: inline-block;
3+
box-sizing: border-box;
4+
}
5+
6+
:host {
7+
height: 3rem;
8+
width: 3rem;
9+
border-radius: 50%;
10+
outline: none;
11+
}
12+
13+
/* Shapes */
14+
:host([shape="Square"]) {
15+
border-radius: 0.25rem;
16+
}
17+
18+
:host([shape="Square"]) .ui5-avatar-root {
19+
border-radius: 0.25rem;
20+
}
21+
22+
:host([shape="Square"]) .ui5-avatar-img {
23+
border-radius: 0.25rem;
24+
}
25+
26+
/* Sizes */
27+
28+
:host([size="XS"]) {
29+
height: 2rem;
30+
width: 2rem;
31+
}
32+
33+
:host([size="S"]) {
34+
height: 3rem;
35+
width: 3rem;
36+
}
37+
38+
:host([size="M"]) {
39+
height: 4rem;
40+
width: 4rem;
41+
}
42+
43+
:host([size="L"]) {
44+
height: 5rem;
45+
width: 5rem;
46+
}
47+
48+
:host([size="XL"]) {
49+
height: 7rem;
50+
width: 7rem;
51+
}
52+
53+
/* Icon */
54+
:host .ui5-avatar-icon {
55+
height: 1.5rem;
56+
width: 1.5rem;
57+
}
58+
59+
:host([size="XS"]) .ui5-avatar-icon {
60+
height: 1rem;
61+
width: 1rem;
62+
}
63+
64+
:host([size="S"]) .ui5-avatar-icon {
65+
height: 1.5rem;
66+
width: 1.5rem;
67+
}
68+
69+
:host([size="M"]) .ui5-avatar-icon {
70+
height: 2rem;
71+
width: 2rem;
72+
}
73+
74+
:host([size="L"]) .ui5-avatar-icon {
75+
height: 2.5rem;
76+
width: 2.5rem;
77+
}
78+
79+
:host([size="XL"]) .ui5-avatar-icon {
80+
height: 3rem;
81+
width: 3rem;
82+
}
83+
84+
:host(:not([img-src])) {
85+
background-color: var(--sapAccentColor6);
86+
}
87+
88+
:host(:not([img-src])) .ui5-avatar-icon {
89+
color: var(--sapContent_ImagePlaceholderForegroundColor);
90+
}
91+
92+
.ui5-avatar-root {
93+
display: flex;
94+
align-items: center;
95+
justify-content: center;
96+
}
97+
98+
.ui5-avatar-root,
99+
.ui5-avatar-img {
100+
height: 100%;
101+
width: 100%;
102+
border-radius: 50%;
103+
}

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

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
2+
3+
/**
4+
* Different types of AvatarShape.
5+
* @lends sap.ui.webcomponents.main.types.AvatarShape.prototype
6+
* @public
7+
*/
8+
const AvatarShapes = {
9+
/**
10+
* Circular shape.
11+
* @public
12+
* @type {Circle}
13+
*/
14+
Circle: "Circle",
15+
16+
/**
17+
* Square shape.
18+
* @public
19+
* @type {Square}
20+
*/
21+
Square: "Square",
22+
};
23+
24+
/**
25+
* @class
26+
* Different types of AvatarShape.
27+
* @constructor
28+
* @author SAP SE
29+
* @alias sap.ui.webcomponents.main.types.AvatarShape
30+
* @public
31+
* @enum {string}
32+
*/
33+
class AvatarShape extends DataType {
34+
static isValid(value) {
35+
return !!AvatarShapes[value];
36+
}
37+
}
38+
39+
AvatarShape.generataTypeAcessors(AvatarShapes);
40+
41+
export default AvatarShape;

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

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import DataType from "@ui5/webcomponents-base/dist/types/DataType.js";
2+
3+
/**
4+
* Different types of AvatarSize.
5+
* @lends sap.ui.webcomponents.main.types.AvatarSize.prototype
6+
* @public
7+
*/
8+
const AvatarSizes = {
9+
/**
10+
* component size - 2rem
11+
* font size - 1rem
12+
* @public
13+
* @type {XS}
14+
*/
15+
XS: "XS",
16+
17+
/**
18+
* component size - 3rem
19+
* font size - 1.5rem
20+
* @public
21+
* @type {S}
22+
*/
23+
S: "S",
24+
25+
/**
26+
* component size - 4rem
27+
* font size - 2rem
28+
* @public
29+
* @type {M}
30+
*/
31+
M: "M",
32+
33+
/**
34+
* component size - 5rem
35+
* font size - 2.5rem
36+
* @public
37+
* @type {L}
38+
*/
39+
L: "L",
40+
41+
/**
42+
* component size - 7rem
43+
* font size - 3rem
44+
* @public
45+
* @type {XL}
46+
*/
47+
XL: "XL",
48+
};
49+
50+
/**
51+
* @class
52+
* Different types of AvatarSize.
53+
* @constructor
54+
* @author SAP SE
55+
* @alias sap.ui.webcomponents.main.types.AvatarSize
56+
* @public
57+
* @enum {string}
58+
*/
59+
class AvatarSize extends DataType {
60+
static isValid(value) {
61+
return !!AvatarSizes[value];
62+
}
63+
}
64+
65+
AvatarSize.generataTypeAcessors(AvatarSizes);
66+
67+
export default AvatarSize;

0 commit comments

Comments
 (0)