From 8b5513c035b6f8abce3ab7015199d1a97c5048f0 Mon Sep 17 00:00:00 2001 From: Petar Dimov Date: Wed, 31 Mar 2021 14:44:37 +0300 Subject: [PATCH] fix positioning of custom text --- packages/main/src/BusyIndicator.hbs | 38 +++++++++---------- packages/main/src/themes/BusyIndicator.css | 33 ++++++++-------- packages/main/test/pages/BusyIndicator.html | 10 ++++- .../main/test/specs/BusyIndicator.spec.js | 4 +- 4 files changed, 45 insertions(+), 40 deletions(-) diff --git a/packages/main/src/BusyIndicator.hbs b/packages/main/src/BusyIndicator.hbs index b76f75731375..3c71b3c23ca1 100644 --- a/packages/main/src/BusyIndicator.hbs +++ b/packages/main/src/BusyIndicator.hbs @@ -1,27 +1,27 @@
-
- {{#if active}} -
+ {{#if active}} +
+
- {{/if}} - {{#if text}} - - {{text}} - - {{/if}} -
+ {{#if text}} + + {{text}} + + {{/if}} +
+ {{/if}}
\ No newline at end of file diff --git a/packages/main/src/themes/BusyIndicator.css b/packages/main/src/themes/BusyIndicator.css index 134274a5f59c..ddc197dcccac 100644 --- a/packages/main/src/themes/BusyIndicator.css +++ b/packages/main/src/themes/BusyIndicator.css @@ -2,10 +2,6 @@ display: inline-block; } -:host(:not([active])) .ui5-busyindicator-wrapper { - display: none; -} - :host([active]) { color: var(--sapContent_IconColor); } @@ -74,13 +70,27 @@ background-color: inherit; } -.ui5-busyindicator-wrapper { +.ui5-busyindicator-busy-area { position: absolute; z-index: 99; left: 0; right: 0; top: 0; bottom: 0; + display: flex; + justify-content: center; + align-items: center; + background-color: inherit; + flex-direction: column; +} + +.ui5-busyindicator-busy-area:focus { + outline: 1px dotted var(--sapContent_FocusColor); + outline-offset: -2px; +} + +.ui5-busyindicator-circles-wrapper { + line-height: 0; } .ui5-busyindicator-circle { @@ -96,19 +106,6 @@ border-radius: 100%; } -.ui5-busyindicator-dynamic-content { - height: 100%; - display: flex; - justify-content: center; - align-items: center; - background-color: inherit; -} - -.ui5-busyindicator-dynamic-content:focus { - outline: 1px dotted var(--sapContent_FocusColor); - outline-offset: -2px; -} - .circle-animation-0 { animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11); } diff --git a/packages/main/test/pages/BusyIndicator.html b/packages/main/test/pages/BusyIndicator.html index 2d110e41dadb..beaf9838f36a 100644 --- a/packages/main/test/pages/BusyIndicator.html +++ b/packages/main/test/pages/BusyIndicator.html @@ -3,7 +3,7 @@ - + Busy Indicator @@ -79,6 +79,14 @@ + + + Item 1 + Item 2 + Item 3 + + +


diff --git a/packages/main/test/specs/BusyIndicator.spec.js b/packages/main/test/specs/BusyIndicator.spec.js index aefe9733e116..1da46702ee2f 100644 --- a/packages/main/test/specs/BusyIndicator.spec.js +++ b/packages/main/test/specs/BusyIndicator.spec.js @@ -27,13 +27,13 @@ describe("BusyIndicator general interaction", () => { innerFocusElement = $(innerFocusElement); - assert.strictEqual(innerFocusElement.getAttribute("class"), "ui5-busyindicator-dynamic-content", "The correct inner element is focused"); + assert.strictEqual(innerFocusElement.getAttribute("class"), "ui5-busyindicator-busy-area", "The correct inner element is focused"); }); it("tests internal focused element attributes", () => { const busyIndicator = browser.$("#indicator1"); busyIndicator.click(); - const innerFocusElement = busyIndicator.shadow$(".ui5-busyindicator-dynamic-content"); + const innerFocusElement = busyIndicator.shadow$(".ui5-busyindicator-busy-area"); assert.strictEqual(innerFocusElement.getAttribute("role"), "progressbar", "Correct 'role' is set"); assert.strictEqual(innerFocusElement.getAttribute("tabindex"), "0", "Correct 'tabindex' is set");