From dc7909d6b0f8ffe798125de43a7881e6ae3f26c7 Mon Sep 17 00:00:00 2001
From: Christoph Reiter <reiter.christoph@gmail.com>
Date: Thu, 5 Nov 2020 14:37:04 +0100
Subject: [PATCH] Add a new LoadingButton component
Add anew one since this adds some default padding and I don't want to
break existing layouts by changing the normal button.
If we figure out a way to keep the layout the same without changing
the padding then we can merge things back.
Also align the mini spinner a bit better with text
---
packages/common/index.js | 4 +-
packages/common/src/button.js | 76 +++++++++++++++++++++++++++++
packages/common/src/mini-spinner.js | 1 +
3 files changed, 79 insertions(+), 2 deletions(-)
diff --git a/packages/common/index.js b/packages/common/index.js
index c4e7bb02..ed77d0e4 100644
--- a/packages/common/index.js
+++ b/packages/common/index.js
@@ -2,11 +2,11 @@ import {EventBus} from './src/eventbus.js';
import {createLinkedAbortController, createTimeoutAbortSignal} from './src/abort.js';
import {getIconSVGURL, getIconCSS, Icon} from './src/icon.js';
import {MiniSpinner} from './src/mini-spinner.js';
-import {Button} from './src/button.js';
+import {Button, LoadingButton} from './src/button.js';
import {Spinner} from './src/spinner.js';
export {EventBus, createLinkedAbortController, createTimeoutAbortSignal};
export {getIconSVGURL, getIconCSS, Icon};
export {MiniSpinner};
-export {Button};
+export {Button, LoadingButton};
export {Spinner};
\ No newline at end of file
diff --git a/packages/common/src/button.js b/packages/common/src/button.js
index 26d192a9..26d22b7b 100644
--- a/packages/common/src/button.js
+++ b/packages/common/src/button.js
@@ -80,3 +80,79 @@ export class Button extends ScopedElementsMixin(LitElement) {
`;
}
}
+
+export class LoadingButton extends ScopedElementsMixin(LitElement) {
+ constructor() {
+ super();
+ this.value = "";
+ this.type = "";
+ this.loading = false;
+ this.disabled = false;
+ }
+
+ static get scopedElements() {
+ return {
+ 'dbp-mini-spinner': MiniSpinner,
+ };
+ }
+
+ static get properties() {
+ return {
+ value: { type: String },
+ type: { type: String },
+ loading: { type: Boolean },
+ disabled: { type: Boolean, reflect: true },
+ };
+ }
+
+ start() {
+ this.loading = true;
+ this.disabled = true;
+ }
+
+ stop() {
+ this.loading = false;
+ this.disabled = false;
+ }
+
+ static get styles() {
+ // language=css
+ return css`
+ ${commonStyles.getThemeCSS()}
+ ${commonStyles.getButtonCSS()}
+
+ .spinner {
+ padding-left: 0.5em;
+ min-width: 16px;
+ }
+
+ .loading-container {
+ display: flex;
+ align-items: baseline;
+ }
+
+ .label {
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ :host {
+ display: inline-block;
+ }
+
+ .is-not-loading .label {
+ padding-left: 12px;
+ padding-right: 12px;
+ }
+ `;
+ }
+
+ render() {
+ return html`
+ <button class="button ${this.type} loading-container ${!this.loading ? "is-not-loading" : ""}" ?disabled="${this.disabled}">
+ <div class="label">${this.value}</div> <dbp-mini-spinner class="spinner" style="display: ${this.loading ? "inline" : "none"}"></dbp-mini-spinner>
+ </button>
+ `;
+ }
+}
diff --git a/packages/common/src/mini-spinner.js b/packages/common/src/mini-spinner.js
index 67e76999..f03d734d 100644
--- a/packages/common/src/mini-spinner.js
+++ b/packages/common/src/mini-spinner.js
@@ -17,6 +17,7 @@ export class MiniSpinner extends LitElement {
return css`
.outer {
display: inline-block;
+ vertical-align: sub;
}
.inner {
display: flex;
--
GitLab