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
SAP · Jun 10, 2019 · ff59a98 · ff59a98
1 parent c266590
commit ff59a98
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 28 deletions.
diff --git a/packages/main/src/BusyIndicator.hbs b/packages/main/src/BusyIndicator.hbs
@@ -1,5 +1,12 @@
 <div class="{{classes.main}}">
-	<div class="ui5-busyindicator-circle circle-animation-0"></div>
-	<div class="ui5-busyindicator-circle circle-animation-1"></div>
-	<div class="ui5-busyindicator-circle circle-animation-2"></div>
+
+	{{#if active}}
+		<div class="ui5-busyindicator-dynamic-content">
+			<div class="ui5-busyindicator-circle circle-animation-0"></div>
+			<div class="ui5-busyindicator-circle circle-animation-1"></div>
+			<div class="ui5-busyindicator-circle circle-animation-2"></div>
+		</div>
+	{{/if}}
+
+	<slot></slot>
 </div>
diff --git a/packages/main/src/BusyIndicator.js b/packages/main/src/BusyIndicator.js
@@ -25,6 +25,15 @@ const metadata = {
 		 * @public
 		 */
 		size: { type: BusyIndicatorType, defaultValue: BusyIndicatorType.Large },
+
+		/**
+		 * Defines if the busy indicator is visible on the screen. By default it is not.
+		 *
+		 * @type {boolean}
+		 * @defaultvalue false
+		 * @public
+		 */
+		active: { type: Boolean },
 	},
 };
 

diff --git a/packages/main/src/themes/BusyIndicator.css b/packages/main/src/themes/BusyIndicator.css
@@ -1,56 +1,90 @@
-.ui5-busyindicator-wrapper {
+:host(ui5-busyindicator:not([hidden])) {
+	display: inline-block;
+}
+
+:host(ui5-busyindicator:not([hidden])[active]) {
+	opacity: 1;
+	background-color: var(--sapBackgroundColorFade72);
+	pointer-events: none;
+}
+
+ui5-busyindicator:not([hidden]) {
+	display: inline-block;
+}
+
+ui5-busyindicator:not([hidden])[active] {
+	opacity: 1;
+	background-color: var(--sapBackgroundColorFade72);
+	pointer-events: none;
+}
+
+.ui5-busyindicator-wrapper {	
 	display: flex;
 	justify-content: center;
 	align-items: center;
+	position: relative;
+	background-color: inherit;
 }
 
 .ui5-busyindicator-circle {
-	display: flex;
+	display: inline-block;
 	background-color: var(--ui5-busyindicator-color);
 	border-radius: 50%;
 }
 
 /* Belize specific */
+
 .ui5-busyindicator-circle::before {
 	content: "";
-    width: 100%;
-    height: 100%;
+	width: 100%;
+	height: 100%;
 	border-radius: 100%;
 }
 
 .ui5-busyindicator-small {
-	width: 3rem;
-    height: 1rem;
+	min-width: 3rem;
+	min-height: 1rem;
 }
 
 .ui5-busyindicator-medium {
-	width: 5rem;
-    height: 2rem;
+	min-width: 5rem;
+	min-height: 2rem;
 }
 
 .ui5-busyindicator-large {
-	width: 8rem;
-	height: 3rem;
+	min-width: 8rem;
+	min-height: 3rem;
 }
 
-.ui5-busyindicator-small > .ui5-busyindicator-circle {
+.ui5-busyindicator-small .ui5-busyindicator-circle {
 	width: 0.125rem;
 	height: 0.125rem;
 	margin: 0 0.2rem;
 }
 
-.ui5-busyindicator-medium > .ui5-busyindicator-circle {
+.ui5-busyindicator-medium .ui5-busyindicator-circle {
 	width: 0.5rem;
 	height: 0.5rem;
 	margin: 0 0.4rem;
 }
 
-.ui5-busyindicator-large > .ui5-busyindicator-circle {
+.ui5-busyindicator-large .ui5-busyindicator-circle {
 	width: 1rem;
 	height: 1rem;
 	margin: 0 .75rem;
 }
 
+.ui5-busyindicator-dynamic-content {
+	position: absolute;
+	z-index: 999;
+	width: 100%;
+	height: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: inherit;
+}
+
 .circle-animation-0 {
 	animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
 }
@@ -72,7 +106,6 @@
 		-ms-transform: scale(1.0);
 		transform: scale(1.0);
 	}
-
 	25% {
 		-webkit-transform: scale(2.5);
 		-moz-transform: scale(2.5);

diff --git a/packages/main/src/themes/base/component-derived-colors.js b/packages/main/src/themes/base/component-derived-colors.js
@@ -31,6 +31,7 @@ const derivationsFactory = ({ darken, lighten, contrast, fade, saturate, desatur
 		"--sapUiButtonRejectActiveBackgroundLighten5": () => lighten("--sapUiButtonRejectActiveBackground", 5),
 		"--sapUiButtonAcceptActiveBackgroundLighten5": () => lighten("--sapUiButtonAcceptActiveBackground", 5),
 		"--sapUiButtonBackgroundDarken10": () => darken("--sapUiButtonBackground", 10),
+		"--sapBackgroundColorFade72": () => fade("--sapBackgroundColor", 72),
 		"--sapUiAccent1Lighten50": () => lighten("--sapUiAccent1", 50),
 		"--sapUiAccent2Lighten40": () => lighten("--sapUiAccent2", 40),
 		"--sapUiAccent3Lighten46": () => lighten("--sapUiAccent3", 46),

diff --git a/packages/main/test/sap/ui/webcomponents/main/pages/BusyIndicator.html b/packages/main/test/sap/ui/webcomponents/main/pages/BusyIndicator.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html>
+
 <head>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 	<meta charset="utf-8">
@@ -23,7 +24,69 @@
 </head>
 
 <body>
-	<ui5-busyindicator id="indicator1"></ui5-busyindicator>
-	<ui5-busyindicator id="indicator2" hidden></ui5-busyindicator>
+	<ui5-busyindicator size="Medium" active id="indicator1"></ui5-busyindicator>
+
+	<br/>
+	<br/>
+	<ui5-busyindicator size="Medium" active id="indicator2"></ui5-busyindicator>
+
+	<br/>
+	<br/>
+
+	<ui5-busyindicator size="Medium" active>
+		<ui5-button>Hello World</ui5-button>
+	</ui5-busyindicator>
+
+	<br/>
+	<br/>
+	<ui5-busyindicator size="Medium" active>
+		<ui5-checkbox text="Hello World"></ui5-checkbox>
+	</ui5-busyindicator>
+
+	<br/>
+	<br/>
+
+	<ui5-button id="fetch-btn" style="width: 120px;">Fetch List Data</ui5-button>
+	<br>
+	<br>
+	<ui5-busyindicator id="busy-container" style="width: 520px" size="Medium">
+		<ui5-list id="fetch-list" no-data-text="No Data" header-text="Available Items" style="width: 100%"></ui5-list>
+	</ui5-busyindicator>
+
+
+	<br>
+	<br>
+	<br>
+	<br>
+
+	<ui5-busyindicator size="Medium" active style="width: 500px; margin-left: 100px">
+			<ui5-list style="width: 100%; border: 1px solid black;">
+				<ui5-li>Item 1</ui5-li>
+				<ui5-li>Item 2</ui5-li>
+				<ui5-li>Item 3</ui5-li>
+			</ui5-list>
+		</ui5-busyindicator>
+
+	<script>
+		const busyIndocator = document.getElementById("busy-container");
+		const list = document.getElementById("fetch-list");
+
+		document.getElementById("fetch-btn").addEventListener("press", event => {
+			busyIndocator.setAttribute("active", "");
+
+			setTimeout(() => {
+				const elements = ["UI5", "Web", "Components"].forEach(title => {
+					const el = document.createElement("ui5-li");
+					el.textContent = title;
+
+					list.appendChild(el);
+				});
+
+				list.noDataText = "";
+				busyIndocator.removeAttribute("active");
+			}, 2000);
+		});
+	</script>
 </body>
-</html>
+
+</html>
diff --git a/packages/main/test/sap/ui/webcomponents/main/samples/BusyIndicator.sample.html b/packages/main/test/sap/ui/webcomponents/main/samples/BusyIndicator.sample.html
@@ -35,11 +35,23 @@
 
 	<style>
 		.center {
-			display: flex;
 			justify-content: center;
 			align-items: center;
+		}
+
+		.flex {
+			display: flex;
 			flex-direction: column;
 		}
+
+		#busy-container {
+			margin-top: 2rem;
+			flex: 1;
+		}
+
+		#fetch-list {
+			width: 100%;
+		}
 	</style>
 </head>
 <body class="sapUiBody example-wrapper">
@@ -53,22 +65,80 @@ <h2 class="control-header">BusyIndicator</h2>
 
 	<section>
 			<h3>Busy Indicator with different size</h3>
-			<div class="snippet center">
-				<ui5-busyindicator size="Small"></ui5-busyindicator>
-				<ui5-busyindicator size="Medium"></ui5-busyindicator>
-				<ui5-busyindicator size="Large"></ui5-busyindicator>
+			<div class="snippet flex center">
+				<ui5-busyindicator active size="Small"></ui5-busyindicator>
+				<ui5-busyindicator active size="Medium"></ui5-busyindicator>
+				<ui5-busyindicator active size="Large"></ui5-busyindicator>
 			</div>
 		<pre class="prettyprint lang-html"><xmp>
 <div>
-	<ui5-busyindicator size="Small"></ui5-busyindicator>
-	<ui5-busyindicator size="Medium"></ui5-busyindicator>
-	<ui5-busyindicator size="Large"></ui5-busyindicator>
+	<ui5-busyindicator active size="Small"></ui5-busyindicator>
+	<ui5-busyindicator active size="Medium"></ui5-busyindicator>
+	<ui5-busyindicator active size="Large"></ui5-busyindicator>
 </div>
 		</xmp></pre>
 		</section>
 
+
+		<section>
+			<h3>Busy Indicator wrapping other elements</h3>
+			<div class="snippet flex">
+				<ui5-button id="fetch-btn" style="width: 120px;">Fetch List Data</ui5-button>
+
+				<ui5-busyindicator id="busy-container" size="Medium">
+					<ui5-list id="fetch-list" no-data-text="No Data" header-text="Available Items"></ui5-list>
+				</ui5-busyindicator>
+
+			</div>
+		<pre class="prettyprint lang-html"><xmp>
+<ui5-button id="fetch-btn" style="width: 120px;">Fetch List Data</ui5-button>
+
+<ui5-busyindicator id="busy-container" size="Medium">
+	<ui5-list id="fetch-list" no-data-text="No Data" header-text="Available Items"></ui5-list>
+</ui5-busyindicator>
+
+<script>
+	const busyIndocator = document.getElementById("busy-container");
+	const list = document.getElementById("fetch-list");
+
+	document.getElementById("fetch-btn").addEventListener("press", event => {
+		busyIndocator.active = true;
+
+		setTimeout(() => {
+			const elements = ["UI5", "Web", "Components"].forEach(title => {
+				const el = document.createElement("ui5-li");
+				el.textContent = title;
+
+				list.appendChild(el);
+			});
+
+			list.noDataText = "";
+			busyIndocator.active = false;
+		}, 2000);
+	});
+</script>
+		</xmp></pre>
+		</section>
+
 	<script>
 		window.prettyPrint();
+		const busyIndocator = document.getElementById("busy-container");
+		const list = document.getElementById("fetch-list");
+
+		document.getElementById("fetch-btn").addEventListener("press", event => {
+			busyIndocator.active = true;
+
+			setTimeout(() => {
+				const elements = ["UI5", "Web", "Components"].forEach(title => {
+					const el = document.createElement("ui5-li");
+					el.textContent = title;
+
+					list.appendChild(el);
+				});
+
+				busyIndocator.active = false;
+			}, 2000);
+		});
 	</script>
 </body>