fix(ui5-list): show busy ind over the list (#2684)

- Show busy indicator over the list (as specified in Fiori 3), not at the bottom (as it is prior to this change). - Fade background with opacity (0.72), closest to openui5 where we have calculated background - fade(@sapBackgroundColor, 72%) FIXES: #2568
SAP · Jan 20, 2021 · b8b7974 · b8b7974
1 parent 205b5cb
commit b8b7974
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 59 deletions.
diff --git a/packages/main/src/List.hbs b/packages/main/src/List.hbs
@@ -2,53 +2,52 @@
 	class="ui5-list-root"
 	@focusin="{{_onfocusin}}"
 	@keydown="{{_onkeydown}}"
-	@scroll="{{_onScroll}}"
 >
-	<!-- header -->
-	{{#if header.length}}
-		<slot name="header" />
-	{{/if}}
-	{{#if shouldRenderH1}}
-		<header id="{{headerID}}" class="ui5-list-header">
-			{{headerText}}
-		</header>
-	{{/if}}
+	<div class="ui5-list-scroll-container" @scroll="{{_onScroll}}">
+		<!-- header -->
+		{{#if header.length}}
+			<slot name="header" />
+		{{/if}}
+		{{#if shouldRenderH1}}
+			<header id="{{headerID}}" class="ui5-list-header">
+				{{headerText}}
+			</header>
+		{{/if}}
+
+		{{#if hasData}}
+			<div id="{{_id}}-before" tabindex="0" class="ui5-list-focusarea"></div>
+		{{/if}}
 
-	{{#if hasData}}
-		<div id="{{_id}}-before" tabindex="0" class="ui5-list-focusarea"></div>
-	{{/if}}
+		<ul id="{{_id}}-listUl"
+			class="ui5-list-ul"
+			role="{{accRole}}"
+			aria-label="{{ariaLabelТxt}}"
+			aria-labelledby="{{ariaLabelledBy}}"
+			aria-multiselectable="{{isMultiSelect}}"
+		>
+			<slot></slot>
 
-	<ul id="{{_id}}-listUl"
-		class="ui5-list-ul"
-		role="{{accRole}}"
-		aria-label="{{ariaLabelТxt}}"
-		aria-labelledby="{{ariaLabelledBy}}"
-		aria-multiselectable="{{isMultiSelect}}"
-	>
-		<slot></slot>
+			{{#if showNoDataText}}
+				<li id="{{_id}}-nodata" class="ui5-list-nodata" tabindex="{{noDataTabIndex}}" style="list-style-type: none;">
+					<div id="{{_id}}-nodata-text" class="ui5-list-nodata-text">
+						{{noDataText}}
+					</div>
+				</li>
+			{{/if}}
+		</ul>
 
-		{{#if showNoDataText}}
-			<li id="{{_id}}-nodata" class="ui5-list-nodata" tabindex="{{noDataTabIndex}}" style="list-style-type: none;">
-				<div id="{{_id}}-nodata-text" class="ui5-list-nodata-text">
-					{{noDataText}}
-				</div>
-			</li>
+		{{#if footerText}}
+			<footer id="{{_id}}-footer" class="ui5-list-footer">
+				{{footerText}}
+			</footer>
 		{{/if}}
-	</ul>
-
-	{{#if footerText}}
-		<footer id="{{_id}}-footer" class="ui5-list-footer">
-			{{footerText}}
-		</footer>
-	{{/if}}
 
-	{{#if showBusy}}
-		<div class="ui5-list-busy-row">
-			<ui5-busyindicator ?active="{{busy}}" size="Medium" class="ui5-list-busy-ind"></ui5-busyindicator>
-		</div>
-	{{/if}}
+		{{#if hasData}}
+			<div id="{{_id}}-after" tabindex="0" class="ui5-list-focusarea"></div>
+		{{/if}}
+	</div>
 
-	{{#if hasData}}
-		<div id="{{_id}}-after" tabindex="0" class="ui5-list-focusarea"></div>
-	{{/if}}
+	<div class="ui5-list-busy-row">
+		<ui5-busyindicator ?active="{{busy}}" size="Medium" class="ui5-list-busy-ind"></ui5-busyindicator>
+	</div>
 </div>
diff --git a/packages/main/src/List.js b/packages/main/src/List.js
@@ -15,7 +15,6 @@ import ListTemplate from "./generated/templates/ListTemplate.lit.js";
 // Styles
 import listCss from "./generated/themes/List.css.js";
 
-const BUSYINDICATOR_HEIGHT = 48; // px
 const INFINITE_SCROLL_DEBOUNCE_RATE = 250; // ms
 
 /**
@@ -389,10 +388,6 @@ class List extends UI5Element {
 		return !this.hasData && this.noDataText;
 	}
 
-	get showBusy() {
-		return this.busy || this.infiniteScroll;
-	}
-
 	get isMultiSelect() {
 		return this.mode === ListMode.MultiSelect;
 	}
@@ -763,7 +758,7 @@ class List extends UI5Element {
 		}
 		this.previousScrollPosition = scrollTop;
 
-		if (scrollHeight - BUSYINDICATOR_HEIGHT <= height + scrollTop) {
+		if (scrollHeight <= height + scrollTop) {
 			this.fireEvent("load-more");
 		}
 	}

diff --git a/packages/main/src/themes/List.css b/packages/main/src/themes/List.css
@@ -12,12 +12,26 @@
 	border-bottom: 0;
 }
 
+:host([busy]) {
+	opacity: 0.72;
+}
+
+:host([busy]) .ui5-list-busy-row {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+}
+
 .ui5-list-root {
 	width: 100%;
 	height: 100%;
 	position: relative;
 	box-sizing: border-box;
+}
+
+.ui5-list-scroll-container {
 	overflow: auto;
+	height: 100%;
 }
 
 .ui5-list-ul {
@@ -84,11 +98,4 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-}
-
-.ui5-list-busy-row {
-	display: flex;
-	align-items: center;
-	height: var(--_ui5_list_busy_row_height);
-	justify-content: center;
-}
+}
diff --git a/packages/main/test/pages/List.html b/packages/main/test/pages/List.html
@@ -383,15 +383,16 @@ <h3 id="infoLbl">Items 3/3</h3>
 		var itemsLoadedTotal = 0;
 		var itemsToLoad = 5;
 		var loadedCount = 0;
-		infiniteScrollEx.addEventListener("loadMore", function(e) {
+
+		infiniteScrollEx.addEventListener("ui5-load-more", function(e) {
 			var el = infiniteScrollEx;
 			el.busy = true;
 
 			setTimeout(function() {
 				insertItems(el, 3);
 				el.busy = false;
 				result.textContent = (++loadedCount) + " times " + (itemsLoadedTotal += itemsToLoad);
-			}, 200);
+			}, 1000);
 		});
 
 	</script>

diff --git a/packages/main/test/pages/List_test_page.html b/packages/main/test/pages/List_test_page.html
@@ -222,7 +222,7 @@ <h2 id="testHeader">Test aria</h2>
 		})
 
 		btnTrigger.addEventListener("click", function(e) {
-			var scrollableContiner = infiniteScrollEx.shadowRoot.querySelector(".ui5-list-root");
+			var scrollableContiner = infiniteScrollEx.shadowRoot.querySelector(".ui5-list-scroll-container");
 			scrollableContiner.scroll(0, scrollableContiner.scrollHeight);
 		});