Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(ui5-busyindicator): introduce active property and simplify usage #519

Merged
merged 5 commits into from
Jun 10, 2019
Merged

feat(ui5-busyindicator): introduce active property and simplify usage #519

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
58dd1ee
feat(ui5-busyindicator): introduce active property and simplify usage
MapTo0 Jun 6, 2019
feb711d
add IE specific css
MapTo0 Jun 6, 2019
e4192da
fix failing tests
MapTo0 Jun 7, 2019
dd8a879
Merge remote-tracking branch 'origin/master' into busy-indicator-simp…
MapTo0 Jun 7, 2019
08381c6
Merge remote-tracking branch 'origin/master' into busy-indicator-simp…
MapTo0 Jun 10, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 10 additions & 3 deletions packages/main/src/BusyIndicator.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
9 changes: 9 additions & 0 deletions packages/main/src/BusyIndicator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
},
};

Expand Down
65 changes: 45 additions & 20 deletions packages/main/src/themes/BusyIndicator.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,68 +1,94 @@
:host(ui5-busyindicator) span[data-sap-ui-wc-root] {
:host(ui5-busyindicator:not([hidden])) {
display: inline-block;
width: 100%;
height: 100%;
}

ui5-busyindicator span[data-sap-ui-wc-root] {
:host(ui5-busyindicator:not([hidden])[active]) {
opacity: 1;
background-color: var(--sapBackgroundColorFade72);
pointer-events: none;
}

ui5-busyindicator:not([hidden]) {
display: inline-block;
width: 100%;
height: 100%;
}

.ui5-busyindicator-wrapper {
ui5-busyindicator:not([hidden])[active] {
opacity: 1;
background-color: var(--sapBackgroundColorFade72);
pointer-events: none;
}

span[data-sap-ui-wc-root] {
background-color: inherit;
}

.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);
}
Expand All @@ -84,7 +110,6 @@ ui5-busyindicator span[data-sap-ui-wc-root] {
-ms-transform: scale(1.0);
transform: scale(1.0);
}

25% {
-webkit-transform: scale(2.5);
-moz-transform: scale(2.5);
Expand Down
1 change: 1 addition & 0 deletions packages/main/src/themes/base/component-derived-colors.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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),
};

return derivations;
Expand Down
69 changes: 66 additions & 3 deletions packages/main/test/sap/ui/webcomponents/main/pages/BusyIndicator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>

<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
Expand All @@ -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>
86 changes: 78 additions & 8 deletions packages/main/test/sap/ui/webcomponents/main/samples/BusyIndicator.sample.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand All @@ -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>

Expand Down