From d61d8f584347bca1cfd97100966bebf266d880ac Mon Sep 17 00:00:00 2001
From: Patrizio Bekerle <patrizio.bekerle@tugraz.at>
Date: Thu, 2 Jan 2020 11:29:51 +0100
Subject: [PATCH] Add mini-spinner text support
---
packages/common/vpu-common-demo.js | 1 +
packages/common/vpu-mini-spinner.js | 20 +++++++++++++++++++-
2 files changed, 20 insertions(+), 1 deletion(-)
diff --git a/packages/common/vpu-common-demo.js b/packages/common/vpu-common-demo.js
index a0874dbd..01c13798 100644
--- a/packages/common/vpu-common-demo.js
+++ b/packages/common/vpu-common-demo.js
@@ -99,6 +99,7 @@ class VpuCommonDemo extends LitElement {
<div class="content">
<h2>Mini Spinner</h2>
<div class="control">
+ <vpu-mini-spinner text="Loading..."></vpu-mini-spinner>
<vpu-mini-spinner></vpu-mini-spinner>
<vpu-mini-spinner style="font-size: 2em"></vpu-mini-spinner>
<vpu-mini-spinner style="font-size: 3em"></vpu-mini-spinner>
diff --git a/packages/common/vpu-mini-spinner.js b/packages/common/vpu-mini-spinner.js
index 199e2121..1d0c9916 100644
--- a/packages/common/vpu-mini-spinner.js
+++ b/packages/common/vpu-mini-spinner.js
@@ -5,10 +5,21 @@ import * as commonUtils from './utils.js';
class MiniSpinner extends LitElement {
constructor() {
super();
+ this.text = "";
+ }
+
+ static get properties() {
+ return {
+ text: { type: String },
+ };
}
static get styles() {
+ // language=css
return css`
+ .outer {
+ display: flex;
+ }
.ring {
display: inline-block;
position: relative;
@@ -42,11 +53,18 @@ class MiniSpinner extends LitElement {
100% {
transform: rotate(360deg);
}
+ }
+ .text {
+ display: inline-block;
+ margin-left: 0.5em;
+ font-size: 0.7em;
}`;
}
render() {
- return html`<div class="ring"><div></div><div></div><div></div><div></div></div>`;
+ const textHtml = this.text !== "" ? html`<div class="text">${this.text}</div>` : html``;
+
+ return html`<div class="outer"><div class="ring"><div></div><div></div><div></div><div></div></div>${textHtml}</div>`;
}
}
--
GitLab