Skip to content

Commit 6b6b544

Browse files
fifoosidfifoosid
authored
feat(ui5-busyindicator): initial implementation (#416)
1 parent c177f10 commit 6b6b544

17 files changed

+333
-1
lines changed

‎packages/main/bundle.esm.js

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import Islamic from "@ui5/webcomponents-core/dist/sap/ui/core/date/Islamic.js";
1010
import Japanese from "@ui5/webcomponents-core/dist/sap/ui/core/date/Japanese.js";
1111
import Persian from "@ui5/webcomponents-core/dist/sap/ui/core/date/Persian.js";
1212

13+
import BusyIndicator from "./dist/BusyIndicator.js";
1314
import Button from "./dist/Button.js";
1415
import CheckBox from "./dist/CheckBox.js";
1516
import Card from "./dist/Card.js";

‎packages/main/src/BusyIndicator.hbs

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div class="{{classes.main}}">
2+
<div class="ui5-busyindicator-circle circle-animation-0"></div>
3+
<div class="ui5-busyindicator-circle circle-animation-1"></div>
4+
<div class="ui5-busyindicator-circle circle-animation-2"></div>
5+
</div>

‎packages/main/src/BusyIndicator.js

+82
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import UI5Element from "@ui5/webcomponents-base/src/UI5Element.js";
2+
import Bootstrap from "@ui5/webcomponents-base/src/Bootstrap.js";
3+
import BusyIndicatorRenderer from "./build/compiled/BusyIndicatorRenderer.lit.js";
4+
5+
// Styles
6+
import busyIndicatorCss from "./themes/BusyIndicator.css.js";
7+
8+
// all themes should work via the convenience import (inlined now, switch to json when elements can be imported individyally)
9+
import "./ThemePropertiesProvider.js";
10+
import BusyIndicatorType from "./types/BusyIndicatorType.js";
11+
12+
/**
13+
* @public
14+
*/
15+
const metadata = {
16+
tag: "ui5-busyindicator",
17+
properties: /** @lends sap.ui.webcomponents.main.BusyIndicator.prototype */ {
18+
/**
19+
* Defines the size of the <code>ui5-busyindicator</code>.
20+
* </br></br>
21+
* <b>Note:</b> Available options are "Small", "Medium", "Large"
22+
*
23+
* @type {BusyIndicatorType}
24+
* @defaultvalue "Large"
25+
* @public
26+
*/
27+
size: { type: BusyIndicatorType, defaultValue: BusyIndicatorType.Large },
28+
},
29+
};
30+
31+
/**
32+
* @class
33+
*
34+
* <h3 class="comment-api-title">Overview</h3>
35+
*
36+
* The <code>ui5-busyindicator</code> signals that some operation is going on and that the
37+
* user must wait. It does not block the current UI screen so other operations could be
38+
* triggered in parallel.
39+
*
40+
* <h3>Usage</h3>
41+
* For the <code>ui5-busyindicator</code> you can define the size of the indicator as well
42+
* as whether it is shown or hidden. In order to hide it, use the html attribute <code>hidden</code> or <code>display: none;</code>
43+
*
44+
* <h3>ES6 Module Import</h3>
45+
*
46+
* <code>import "@ui5/webcomponents/dist/BusyIndicator";</code>
47+
*
48+
* @constructor
49+
* @author SAP SE
50+
* @alias sap.ui.webcomponents.main.BusyIndicator
51+
* @extends UI5Element
52+
* @tagname ui5-busyindicator
53+
* @public
54+
*/
55+
class BusyIndicator extends UI5Element {
56+
static get metadata() {
57+
return metadata;
58+
}
59+
60+
static get styles() {
61+
return busyIndicatorCss;
62+
}
63+
64+
static get renderer() {
65+
return BusyIndicatorRenderer;
66+
}
67+
68+
get classes() {
69+
return {
70+
main: {
71+
"ui5-busyindicator-wrapper": true,
72+
[`ui5-busyindicator-${this.size.toLowerCase()}`]: true,
73+
},
74+
};
75+
}
76+
}
77+
78+
Bootstrap.boot().then(_ => {
79+
BusyIndicator.define();
80+
});
81+
82+
export default BusyIndicator;

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

+94
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
:host(ui5-busyindicator) span[data-sap-ui-wc-root] {
2+
display: inline-block;
3+
width: 100%;
4+
height: 100%;
5+
}
6+
7+
ui5-busyindicator span[data-sap-ui-wc-root] {
8+
display: inline-block;
9+
width: 100%;
10+
height: 100%;
11+
}
12+
13+
.ui5-busyindicator-wrapper {
14+
display: flex;
15+
justify-content: center;
16+
align-items: center;
17+
}
18+
19+
.ui5-busyindicator-circle {
20+
display: flex;
21+
background-color: var(--ui5-busyindicator-color);
22+
border-radius: 50%;
23+
}
24+
25+
/* Belize specific */
26+
.ui5-busyindicator-circle::before {
27+
content: "";
28+
width: 100%;
29+
height: 100%;
30+
border-radius: 100%;
31+
}
32+
33+
.ui5-busyindicator-small {
34+
width: 3rem;
35+
height: 1rem;
36+
}
37+
38+
.ui5-busyindicator-medium {
39+
width: 5rem;
40+
height: 2rem;
41+
}
42+
43+
.ui5-busyindicator-large {
44+
width: 8rem;
45+
height: 3rem;
46+
}
47+
48+
.ui5-busyindicator-small > .ui5-busyindicator-circle {
49+
width: 0.125rem;
50+
height: 0.125rem;
51+
margin: 0 0.2rem;
52+
}
53+
54+
.ui5-busyindicator-medium > .ui5-busyindicator-circle {
55+
width: 0.5rem;
56+
height: 0.5rem;
57+
margin: 0 0.4rem;
58+
}
59+
60+
.ui5-busyindicator-large > .ui5-busyindicator-circle {
61+
width: 1rem;
62+
height: 1rem;
63+
margin: 0 .75rem;
64+
}
65+
66+
.circle-animation-0 {
67+
animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
68+
}
69+
70+
.circle-animation-1 {
71+
animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
72+
animation-delay: 200ms;
73+
}
74+
75+
.circle-animation-2 {
76+
animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
77+
animation-delay: 400ms;
78+
}
79+
80+
@keyframes grow {
81+
0%, 50%, 100% {
82+
-webkit-transform: scale(1.0);
83+
-moz-transform: scale(1.0);
84+
-ms-transform: scale(1.0);
85+
transform: scale(1.0);
86+
}
87+
88+
25% {
89+
-webkit-transform: scale(2.5);
90+
-moz-transform: scale(2.5);
91+
-ms-transform: scale(2.5);
92+
transform: scale(2.5);
93+
}
94+
}

‎packages/main/src/themes/base/BusyIndicator-parameters.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
:root {
2+
--ui5-busyindicator-color: var(--sapUiContentIconColor);
3+
}

‎packages/main/src/themes/sap_belize/BusyIndicator-parameters.css

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import "../base/BusyIndicator-parameters.css";
2+
3+
:root {
4+
--ui5-busyindicator-color: var(--sapUiAccent6);
5+
}

‎packages/main/src/themes/sap_belize/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import "./global-parameters.css";
33

44
@import "./Button-parameters.css";
5+
@import "./BusyIndicator-parameters.css";
56
@import "./Popover-parameters.css";
67
@import "./DatePicker-parameters.css";
78
@import "./DayPicker-parameters.css";

‎packages/main/src/themes/sap_belize_hcb/BusyIndicator-parameters.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "../base/BusyIndicator-parameters.css";

‎packages/main/src/themes/sap_belize_hcb/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import "./global-parameters.css";
33

44
@import "./Button-parameters.css";
5+
@import "./BusyIndicator-parameters.css";
56
@import "./CalendarHeader-parameters.css";
67
@import "./Card-parameters.css";
78
@import "./CheckBox-parameters.css";

‎packages/main/src/themes/sap_fiori_3/BusyIndicator-parameters.css

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "../base/BusyIndicator-parameters.css";

‎packages/main/src/themes/sap_fiori_3/parameters-bundle.css

+1
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
@import "./global-parameters.css";
33

44
@import "./Button-parameters.css";
5+
@import "./BusyIndicator-parameters.css";
56
@import "./Card-parameters.css";
67
@import "./CheckBox-parameters.css";
78
@import "./DatePicker-parameters.css";

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

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import DataType from "@ui5/webcomponents-base/src/types/DataType.js";
2+
3+
/**
4+
* Different types of BusyIndicator.
5+
*/
6+
const BusyIndicatorTypes = {
7+
/**
8+
* small size
9+
*/
10+
Small: "Small",
11+
12+
/**
13+
* medium size
14+
*/
15+
Medium: "Medium",
16+
17+
/**
18+
* large size
19+
*/
20+
Large: "Large",
21+
};
22+
23+
class BusyIndicatorType extends DataType {
24+
static isValid(value) {
25+
return !!BusyIndicatorTypes[value];
26+
}
27+
}
28+
29+
BusyIndicatorType.generataTypeAcessors(BusyIndicatorTypes);
30+
31+
export default BusyIndicatorType;

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

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
5+
<meta charset="utf-8">
6+
7+
<title>Busy Indicator</title>
8+
<script>
9+
delete Document.prototype.adoptedStyleSheets
10+
</script>
11+
12+
<script data-id="sap-ui-config" type="application/json">
13+
{
14+
"rtl": false,
15+
"compactSize": false
16+
}
17+
</script>
18+
19+
<script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
20+
<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js" type="module"></script>
21+
<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js">
22+
</script>
23+
</head>
24+
25+
<body>
26+
<ui5-busyindicator id="indicator1"></ui5-busyindicator>
27+
<ui5-busyindicator id="indicator2" hidden></ui5-busyindicator>
28+
</body>
29+
</html>

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

+2
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
</head>
2222

2323
<body>
24+
<ui5-busyindicator id="busyIndicator"></ui5-busyindicator>
2425
<ui5-button id="btn">Primary button</ui5-button>
2526
<ui5-togglebutton id="toggleBtn">Toggle button</ui5-togglebutton>
2627
<ui5-input id="inp"></ui5-input>
@@ -35,6 +36,7 @@
3536
<ui5-panel id="panel"></ui5-panel>
3637

3738
<!-- hidden web components -->
39+
<ui5-busyindicator id="busyIndicator2" hidden></ui5-busyindicator>
3840
<ui5-button id="btn2" hidden>Primary button</ui5-button>
3941
<ui5-card id="card2" hidden header-text="Primary card"></ui5-card>
4042
<ui5-checkbox id="cb2" text="I agree" hidden></ui5-checkbox>

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

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<title>&lt;ui5-busyindicator&gt;</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8+
<meta charset="utf-8">
9+
10+
<link rel="stylesheet" href="../../../../../../www/home/core.css">
11+
12+
<script src="../../../../../../test-resources/playground/libs/google-code-prettify/prettify.js"></script>
13+
<link href="../../../../../../test-resources/playground/libs/google-code-prettify/sunburst.css" type="text/css" rel="stylesheet">
14+
15+
<link href="../../../../../../test-resources/playground/css/api.css" type="text/css" rel="stylesheet">
16+
17+
<script data-id="sap-ui-config" type="application/json">
18+
{
19+
"theme": "sap_fiori_3",
20+
"language": "EN"
21+
}
22+
</script>
23+
24+
<script src="../../../../../../webcomponentsjs/webcomponents-loader.js"></script>
25+
<script src="../../../../../../resources/sap/ui/webcomponents/main/bundle.esm.js"
26+
type="module"
27+
>
28+
</script>
29+
30+
<script nomodule src="../../../../../../resources/sap/ui/webcomponents/main/bundle.es5.js">
31+
</script>
32+
33+
<script defer src="../../../../../../www/samples/settings.js"></script>
34+
<script>delete Document.prototype.adoptedStyleSheets;</script>
35+
36+
<style>
37+
.center {
38+
display: flex;
39+
justify-content: center;
40+
align-items: center;
41+
flex-direction: column;
42+
}
43+
</style>
44+
</head>
45+
<body class="sapUiBody example-wrapper">
46+
47+
<header>
48+
<div class="control-header">Busy Indicator</div>
49+
<div style="margin-bottom: 2rem; font-weight: 300; font-size: 1.1rem; color: #666666;">&lt;ui5-busyindicator&gt;</div>
50+
</header>
51+
52+
<section>
53+
<h3>Busy Indicator with different size</h3>
54+
<div class="snippet center">
55+
<ui5-busyindicator size="Small"></ui5-busyindicator>
56+
<ui5-busyindicator size="Medium"></ui5-busyindicator>
57+
<ui5-busyindicator size="Large"></ui5-busyindicator>
58+
</div>
59+
<pre class="prettyprint lang-html"><xmp>
60+
<div>
61+
<ui5-busyindicator size="Small"></ui5-busyindicator>
62+
<ui5-busyindicator size="Medium"></ui5-busyindicator>
63+
<ui5-busyindicator size="Large"></ui5-busyindicator>
64+
</div>
65+
</xmp></pre>
66+
</section>
67+
68+
<script>
69+
window.prettyPrint();
70+
</script>
71+
</body>
72+
73+
</html>

‎packages/main/test/specs/Components.spec.js

+1
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,7 @@ describe("General assertions", () => {
7575

7676
it("tests components with 'hidden' property are not visible", () => {
7777
[
78+
browser.$("#busyIndicator2"),
7879
browser.$("#btn2"),
7980
browser.$("#card2"),
8081
browser.$("#cb2"),

0 commit comments

Comments
 (0)