Skip to content

Commit ff59a98

Browse files
MapTo0MapTo0
authored
feat(ui5-busyindicator): introduce active property and simplify usage (#519)
- busy indicator is invisible by default - it can slot any content - active property sets its visibility
1 parent c266590 commit ff59a98

File tree

6 files changed

+211
-28
lines changed

6 files changed

+211
-28
lines changed

‎packages/main/src/BusyIndicator.hbs‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,12 @@
11
<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>
2+
3+
{{#if active}}
4+
<div class="ui5-busyindicator-dynamic-content">
5+
<div class="ui5-busyindicator-circle circle-animation-0"></div>
6+
<div class="ui5-busyindicator-circle circle-animation-1"></div>
7+
<div class="ui5-busyindicator-circle circle-animation-2"></div>
8+
</div>
9+
{{/if}}
10+
11+
<slot></slot>
512
</div>

‎packages/main/src/BusyIndicator.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,15 @@ const metadata = {
2525
* @public
2626
*/
2727
size: { type: BusyIndicatorType, defaultValue: BusyIndicatorType.Large },
28+
29+
/**
30+
* Defines if the busy indicator is visible on the screen. By default it is not.
31+
*
32+
* @type {boolean}
33+
* @defaultvalue false
34+
* @public
35+
*/
36+
active: { type: Boolean },
2837
},
2938
};
3039

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

Lines changed: 47 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,90 @@
1-
.ui5-busyindicator-wrapper {
1+
:host(ui5-busyindicator:not([hidden])) {
2+
display: inline-block;
3+
}
4+
5+
:host(ui5-busyindicator:not([hidden])[active]) {
6+
opacity: 1;
7+
background-color: var(--sapBackgroundColorFade72);
8+
pointer-events: none;
9+
}
10+
11+
ui5-busyindicator:not([hidden]) {
12+
display: inline-block;
13+
}
14+
15+
ui5-busyindicator:not([hidden])[active] {
16+
opacity: 1;
17+
background-color: var(--sapBackgroundColorFade72);
18+
pointer-events: none;
19+
}
20+
21+
.ui5-busyindicator-wrapper {
222
display: flex;
323
justify-content: center;
424
align-items: center;
25+
position: relative;
26+
background-color: inherit;
527
}
628

729
.ui5-busyindicator-circle {
8-
display: flex;
30+
display: inline-block;
931
background-color: var(--ui5-busyindicator-color);
1032
border-radius: 50%;
1133
}
1234

1335
/* Belize specific */
36+
1437
.ui5-busyindicator-circle::before {
1538
content: "";
16-
width: 100%;
17-
height: 100%;
39+
width: 100%;
40+
height: 100%;
1841
border-radius: 100%;
1942
}
2043

2144
.ui5-busyindicator-small {
22-
width: 3rem;
23-
height: 1rem;
45+
min-width: 3rem;
46+
min-height: 1rem;
2447
}
2548

2649
.ui5-busyindicator-medium {
27-
width: 5rem;
28-
height: 2rem;
50+
min-width: 5rem;
51+
min-height: 2rem;
2952
}
3053

3154
.ui5-busyindicator-large {
32-
width: 8rem;
33-
height: 3rem;
55+
min-width: 8rem;
56+
min-height: 3rem;
3457
}
3558

36-
.ui5-busyindicator-small > .ui5-busyindicator-circle {
59+
.ui5-busyindicator-small .ui5-busyindicator-circle {
3760
width: 0.125rem;
3861
height: 0.125rem;
3962
margin: 0 0.2rem;
4063
}
4164

42-
.ui5-busyindicator-medium > .ui5-busyindicator-circle {
65+
.ui5-busyindicator-medium .ui5-busyindicator-circle {
4366
width: 0.5rem;
4467
height: 0.5rem;
4568
margin: 0 0.4rem;
4669
}
4770

48-
.ui5-busyindicator-large > .ui5-busyindicator-circle {
71+
.ui5-busyindicator-large .ui5-busyindicator-circle {
4972
width: 1rem;
5073
height: 1rem;
5174
margin: 0 .75rem;
5275
}
5376

77+
.ui5-busyindicator-dynamic-content {
78+
position: absolute;
79+
z-index: 999;
80+
width: 100%;
81+
height: 100%;
82+
display: flex;
83+
justify-content: center;
84+
align-items: center;
85+
background-color: inherit;
86+
}
87+
5488
.circle-animation-0 {
5589
animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
5690
}
@@ -72,7 +106,6 @@
72106
-ms-transform: scale(1.0);
73107
transform: scale(1.0);
74108
}
75-
76109
25% {
77110
-webkit-transform: scale(2.5);
78111
-moz-transform: scale(2.5);

‎packages/main/src/themes/base/component-derived-colors.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const derivationsFactory = ({ darken, lighten, contrast, fade, saturate, desatur
3131
"--sapUiButtonRejectActiveBackgroundLighten5": () => lighten("--sapUiButtonRejectActiveBackground", 5),
3232
"--sapUiButtonAcceptActiveBackgroundLighten5": () => lighten("--sapUiButtonAcceptActiveBackground", 5),
3333
"--sapUiButtonBackgroundDarken10": () => darken("--sapUiButtonBackground", 10),
34+
"--sapBackgroundColorFade72": () => fade("--sapBackgroundColor", 72),
3435
"--sapUiAccent1Lighten50": () => lighten("--sapUiAccent1", 50),
3536
"--sapUiAccent2Lighten40": () => lighten("--sapUiAccent2", 40),
3637
"--sapUiAccent3Lighten46": () => lighten("--sapUiAccent3", 46),

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

Lines changed: 66 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<!DOCTYPE html>
22
<html>
3+
34
<head>
45
<meta http-equiv="X-UA-Compatible" content="IE=edge">
56
<meta charset="utf-8">
@@ -23,7 +24,69 @@
2324
</head>
2425

2526
<body>
26-
<ui5-busyindicator id="indicator1"></ui5-busyindicator>
27-
<ui5-busyindicator id="indicator2" hidden></ui5-busyindicator>
27+
<ui5-busyindicator size="Medium" active id="indicator1"></ui5-busyindicator>
28+
29+
<br/>
30+
<br/>
31+
<ui5-busyindicator size="Medium" active id="indicator2"></ui5-busyindicator>
32+
33+
<br/>
34+
<br/>
35+
36+
<ui5-busyindicator size="Medium" active>
37+
<ui5-button>Hello World</ui5-button>
38+
</ui5-busyindicator>
39+
40+
<br/>
41+
<br/>
42+
<ui5-busyindicator size="Medium" active>
43+
<ui5-checkbox text="Hello World"></ui5-checkbox>
44+
</ui5-busyindicator>
45+
46+
<br/>
47+
<br/>
48+
49+
<ui5-button id="fetch-btn" style="width: 120px;">Fetch List Data</ui5-button>
50+
<br>
51+
<br>
52+
<ui5-busyindicator id="busy-container" style="width: 520px" size="Medium">
53+
<ui5-list id="fetch-list" no-data-text="No Data" header-text="Available Items" style="width: 100%"></ui5-list>
54+
</ui5-busyindicator>
55+
56+
57+
<br>
58+
<br>
59+
<br>
60+
<br>
61+
62+
<ui5-busyindicator size="Medium" active style="width: 500px; margin-left: 100px">
63+
<ui5-list style="width: 100%; border: 1px solid black;">
64+
<ui5-li>Item 1</ui5-li>
65+
<ui5-li>Item 2</ui5-li>
66+
<ui5-li>Item 3</ui5-li>
67+
</ui5-list>
68+
</ui5-busyindicator>
69+
70+
<script>
71+
const busyIndocator = document.getElementById("busy-container");
72+
const list = document.getElementById("fetch-list");
73+
74+
document.getElementById("fetch-btn").addEventListener("press", event => {
75+
busyIndocator.setAttribute("active", "");
76+
77+
setTimeout(() => {
78+
const elements = ["UI5", "Web", "Components"].forEach(title => {
79+
const el = document.createElement("ui5-li");
80+
el.textContent = title;
81+
82+
list.appendChild(el);
83+
});
84+
85+
list.noDataText = "";
86+
busyIndocator.removeAttribute("active");
87+
}, 2000);
88+
});
89+
</script>
2890
</body>
29-
</html>
91+
92+
</html>

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

Lines changed: 78 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -35,11 +35,23 @@
3535

3636
<style>
3737
.center {
38-
display: flex;
3938
justify-content: center;
4039
align-items: center;
40+
}
41+
42+
.flex {
43+
display: flex;
4144
flex-direction: column;
4245
}
46+
47+
#busy-container {
48+
margin-top: 2rem;
49+
flex: 1;
50+
}
51+
52+
#fetch-list {
53+
width: 100%;
54+
}
4355
</style>
4456
</head>
4557
<body class="sapUiBody example-wrapper">
@@ -53,22 +65,80 @@ <h2 class="control-header">BusyIndicator</h2>
5365

5466
<section>
5567
<h3>Busy Indicator with different size</h3>
56-
<div class="snippet center">
57-
<ui5-busyindicator size="Small"></ui5-busyindicator>
58-
<ui5-busyindicator size="Medium"></ui5-busyindicator>
59-
<ui5-busyindicator size="Large"></ui5-busyindicator>
68+
<div class="snippet flex center">
69+
<ui5-busyindicator active size="Small"></ui5-busyindicator>
70+
<ui5-busyindicator active size="Medium"></ui5-busyindicator>
71+
<ui5-busyindicator active size="Large"></ui5-busyindicator>
6072
</div>
6173
<pre class="prettyprint lang-html"><xmp>
6274
<div>
63-
<ui5-busyindicator size="Small"></ui5-busyindicator>
64-
<ui5-busyindicator size="Medium"></ui5-busyindicator>
65-
<ui5-busyindicator size="Large"></ui5-busyindicator>
75+
<ui5-busyindicator active size="Small"></ui5-busyindicator>
76+
<ui5-busyindicator active size="Medium"></ui5-busyindicator>
77+
<ui5-busyindicator active size="Large"></ui5-busyindicator>
6678
</div>
6779
</xmp></pre>
6880
</section>
6981

82+
83+
<section>
84+
<h3>Busy Indicator wrapping other elements</h3>
85+
<div class="snippet flex">
86+
<ui5-button id="fetch-btn" style="width: 120px;">Fetch List Data</ui5-button>
87+
88+
<ui5-busyindicator id="busy-container" size="Medium">
89+
<ui5-list id="fetch-list" no-data-text="No Data" header-text="Available Items"></ui5-list>
90+
</ui5-busyindicator>
91+
92+
</div>
93+
<pre class="prettyprint lang-html"><xmp>
94+
<ui5-button id="fetch-btn" style="width: 120px;">Fetch List Data</ui5-button>
95+
96+
<ui5-busyindicator id="busy-container" size="Medium">
97+
<ui5-list id="fetch-list" no-data-text="No Data" header-text="Available Items"></ui5-list>
98+
</ui5-busyindicator>
99+
100+
<script>
101+
const busyIndocator = document.getElementById("busy-container");
102+
const list = document.getElementById("fetch-list");
103+
104+
document.getElementById("fetch-btn").addEventListener("press", event => {
105+
busyIndocator.active = true;
106+
107+
setTimeout(() => {
108+
const elements = ["UI5", "Web", "Components"].forEach(title => {
109+
const el = document.createElement("ui5-li");
110+
el.textContent = title;
111+
112+
list.appendChild(el);
113+
});
114+
115+
list.noDataText = "";
116+
busyIndocator.active = false;
117+
}, 2000);
118+
});
119+
</script>
120+
</xmp></pre>
121+
</section>
122+
70123
<script>
71124
window.prettyPrint();
125+
const busyIndocator = document.getElementById("busy-container");
126+
const list = document.getElementById("fetch-list");
127+
128+
document.getElementById("fetch-btn").addEventListener("press", event => {
129+
busyIndocator.active = true;
130+
131+
setTimeout(() => {
132+
const elements = ["UI5", "Web", "Components"].forEach(title => {
133+
const el = document.createElement("ui5-li");
134+
el.textContent = title;
135+
136+
list.appendChild(el);
137+
});
138+
139+
busyIndocator.active = false;
140+
}, 2000);
141+
});
72142
</script>
73143
</body>
74144

0 commit comments

Comments
 (0)