Skip to content
Snippets Groups Projects
Commit 94747c6e authored by Steinwender, Tamara's avatar Steinwender, Tamara
Browse files

Add new dbp-icon-button element, refactor button code to prevent duplicated code

parent 30eda4b9
No related branches found
No related tags found
No related merge requests found
Pipeline #202790 failed
Stage: test
Stage: deploy
Show whitespace changes
Inline Side-by-side
packages/common/components.js
+ 2
− 0
View file @ 94747c6e
...@@ -4,6 +4,7 @@ import { ...@@ -4,6 +4,7 @@ import {
Icon, Icon,
InlineNotification, InlineNotification,
LoadingButton, LoadingButton,
IconButton,
MiniSpinner, MiniSpinner,
Spinner, Spinner,
Translated, Translated,
...@@ -15,6 +16,7 @@ commonUtils.defineCustomElement('dbp-spinner', Spinner); ...@@ -15,6 +16,7 @@ commonUtils.defineCustomElement('dbp-spinner', Spinner);
commonUtils.defineCustomElement('dbp-icon', Icon); commonUtils.defineCustomElement('dbp-icon', Icon);
commonUtils.defineCustomElement('dbp-button', Button); commonUtils.defineCustomElement('dbp-button', Button);
commonUtils.defineCustomElement('dbp-loading-button', LoadingButton); commonUtils.defineCustomElement('dbp-loading-button', LoadingButton);
commonUtils.defineCustomElement('dbp-icon-button', IconButton);
commonUtils.defineCustomElement('dbp-inline-notification', InlineNotification); commonUtils.defineCustomElement('dbp-inline-notification', InlineNotification);
commonUtils.defineCustomElement('dbp-translated', Translated); commonUtils.defineCustomElement('dbp-translated', Translated);
commonUtils.defineCustomElement('dbp-translation', Translation); commonUtils.defineCustomElement('dbp-translation', Translation);
packages/common/index.js
+ 2
− 2
View file @ 94747c6e
...@@ -2,7 +2,7 @@ import {EventBus} from './src/eventbus.js'; ...@@ -2,7 +2,7 @@ import {EventBus} from './src/eventbus.js';
import {createLinkedAbortController, createTimeoutAbortSignal} from './src/abort.js'; import {createLinkedAbortController, createTimeoutAbortSignal} from './src/abort.js';
import {getIconSVGURL, getIconCSS, Icon} from './src/icon.js'; import {getIconSVGURL, getIconCSS, Icon} from './src/icon.js';
import {MiniSpinner} from './src/mini-spinner.js'; import {MiniSpinner} from './src/mini-spinner.js';
import {Button, LoadingButton} from './src/button.js'; import {Button, LoadingButton, IconButton} from './src/button.js';
import {Spinner} from './src/spinner.js'; import {Spinner} from './src/spinner.js';
import {InlineNotification} from './src/inline-notification.js'; import {InlineNotification} from './src/inline-notification.js';
import {Translated} from './src/translated'; import {Translated} from './src/translated';
...@@ -12,7 +12,7 @@ import {AdapterLitElement} from './src/adapter-lit-element.js'; ...@@ -12,7 +12,7 @@ import {AdapterLitElement} from './src/adapter-lit-element.js';
export {EventBus, createLinkedAbortController, createTimeoutAbortSignal}; export {EventBus, createLinkedAbortController, createTimeoutAbortSignal};
export {getIconSVGURL, getIconCSS, Icon}; export {getIconSVGURL, getIconCSS, Icon};
export {MiniSpinner}; export {MiniSpinner};
export {Button, LoadingButton}; export {Button, LoadingButton, IconButton};
export {Spinner}; export {Spinner};
export {InlineNotification}; export {InlineNotification};
export {Translated, Translation}; export {Translated, Translation};
......
packages/common/src/button.js
+ 120
− 63
View file @ 94747c6e
...@@ -3,22 +3,12 @@ import {ScopedElementsMixin} from '@open-wc/scoped-elements'; ...@@ -3,22 +3,12 @@ import {ScopedElementsMixin} from '@open-wc/scoped-elements';
import {MiniSpinner} from './mini-spinner.js'; import {MiniSpinner} from './mini-spinner.js';
import * as commonStyles from '../styles.js'; import * as commonStyles from '../styles.js';
/** class DbpButton extends ScopedElementsMixin(LitElement) {
* dbp-button implements a button with Bulma styles and automatic spinner and
* disabling if button is clicked
*
* Use the attribute "no-spinner-on-click" to disable the spinner, then you can
* start it with start() and stop it with stop()
*
* Type can be is-primary/is-info/is-success/is-warning/is-danger
*/
export class Button extends ScopedElementsMixin(LitElement) {
constructor() { constructor() {
super(); super();
this.value = ''; this.value = '';
this.type = ''; this.type = '';
this.spinner = false; this.loading = false;
this.noSpinnerOnClick = false;
this.disabled = false; this.disabled = false;
// https://bugs.chromium.org/p/chromium/issues/detail?id=1061240#c12 // https://bugs.chromium.org/p/chromium/issues/detail?id=1061240#c12
...@@ -26,10 +16,6 @@ export class Button extends ScopedElementsMixin(LitElement) { ...@@ -26,10 +16,6 @@ export class Button extends ScopedElementsMixin(LitElement) {
if (this.disabled) { if (this.disabled) {
e.stopImmediatePropagation(); e.stopImmediatePropagation();
} }
if (!this.noSpinnerOnClick) {
this.start();
}
}); });
} }
...@@ -39,33 +25,65 @@ export class Button extends ScopedElementsMixin(LitElement) { ...@@ -39,33 +25,65 @@ export class Button extends ScopedElementsMixin(LitElement) {
}; };
} }
connectedCallback() {
super.connectedCallback();
}
static get properties() { static get properties() {
return { return {
// value is deprecated, use the main slot instead
value: {type: String}, value: {type: String},
type: {type: String}, type: {type: String},
spinner: {type: Boolean}, loading: {type: Boolean},
noSpinnerOnClick: {type: Boolean, attribute: 'no-spinner-on-click'},
disabled: {type: Boolean, reflect: true}, disabled: {type: Boolean, reflect: true},
}; };
} }
start() { start() {
this.spinner = true; this.loading = true;
this.disabled = true; this.disabled = true;
} }
stop() { stop() {
this.spinner = false; this.loading = false;
this.disabled = false; this.disabled = false;
} }
isDisabled() { isDisabled() {
return this.disabled; return this.disabled;
} }
}
/**
* dbp-button implements a button with Bulma styles and automatic spinner and
* disabling if button is clicked
*
* Use the attribute "no-spinner-on-click" to disable the spinner, then you can
* start it with start() and stop it with stop()
*
* Type can be is-primary/is-info/is-success/is-warning/is-danger/is-icon
*/
export class Button extends DbpButton {
constructor() {
super();
this.spinner = false;
this.noSpinnerOnClick = false;
// https://bugs.chromium.org/p/chromium/issues/detail?id=1061240#c12
this.addEventListener('click', (e) => {
if (!this.noSpinnerOnClick) {
this.start();
}
});
}
connectedCallback() {
super.connectedCallback();
}
static get properties() {
return {
...super.properties,
spinner: {type: Boolean},
noSpinnerOnClick: {type: Boolean, attribute: 'no-spinner-on-click'},
};
}
static get styles() { static get styles() {
// language=css // language=css
...@@ -84,7 +102,7 @@ export class Button extends ScopedElementsMixin(LitElement) { ...@@ -84,7 +102,7 @@ export class Button extends ScopedElementsMixin(LitElement) {
<button <button
class="button ${this.type}" class="button ${this.type}"
?disabled="${this.disabled}"> ?disabled="${this.disabled}">
${this.value} <slot>${this.value}</slot>
<dbp-mini-spinner <dbp-mini-spinner
class="spinner" class="spinner"
style="display: ${this.spinner ? 'inline' : 'none'}"></dbp-mini-spinner> style="display: ${this.spinner ? 'inline' : 'none'}"></dbp-mini-spinner>
...@@ -93,46 +111,85 @@ export class Button extends ScopedElementsMixin(LitElement) { ...@@ -93,46 +111,85 @@ export class Button extends ScopedElementsMixin(LitElement) {
} }
} }
export class LoadingButton extends ScopedElementsMixin(LitElement) { export class LoadingButton extends DbpButton {
constructor() { constructor() {
super(); super();
this.value = ''; }
this.type = '';
this.loading = false;
this.disabled = false;
// https://bugs.chromium.org/p/chromium/issues/detail?id=1061240#c12 static get styles() {
this.addEventListener('click', (e) => { // language=css
if (this.disabled) { return css`
e.stopImmediatePropagation(); ${commonStyles.getThemeCSS()}
${commonStyles.getButtonCSS()}
.spinner {
padding-left: 0.5em;
min-width: 16px;
} }
});
.loading-container {
display: flex;
align-items: baseline;
} }
static get scopedElements() { .label {
return { white-space: nowrap;
'dbp-mini-spinner': MiniSpinner, overflow: hidden;
}; text-overflow: ellipsis;
} }
static get properties() { :host {
return { display: inline-block;
// value is deprecated, use the main slot instead
value: {type: String},
type: {type: String},
loading: {type: Boolean},
disabled: {type: Boolean, reflect: true},
};
} }
start() { .is-not-loading .label {
this.loading = true; padding-left: 12px;
this.disabled = true; padding-right: 12px;
} }
stop() { .button {
this.loading = false; width: 100%;
this.disabled = false; }
@media only screen and (orientation: portrait) and (max-width: 768px) {
.button {
min-height: 36px;
}
.label {
margin: auto;
}
}
`;
}
render() {
return html`
<button
class="button ${this.type} loading-container ${!this.loading
? 'is-not-loading'
: ''}"
?disabled="${this.disabled}">
<div class="label"><slot>${this.value}</slot></div>
<dbp-mini-spinner
class="spinner"
style="display: ${this.loading ? 'inline' : 'none'}"></dbp-mini-spinner>
</button>
`;
}
}
export class IconButton extends ScopedElementsMixin(LitElement) {
constructor() {
super();
this.iconName = '';
}
static get properties() {
return {
...super.properties,
iconName: {type: String, attribute: 'icon-name'},
};
} }
static get styles() { static get styles() {
...@@ -141,6 +198,10 @@ export class LoadingButton extends ScopedElementsMixin(LitElement) { ...@@ -141,6 +198,10 @@ export class LoadingButton extends ScopedElementsMixin(LitElement) {
${commonStyles.getThemeCSS()} ${commonStyles.getThemeCSS()}
${commonStyles.getButtonCSS()} ${commonStyles.getButtonCSS()}
:host{
font-size: 1.2rem;
}
.spinner { .spinner {
padding-left: 0.5em; padding-left: 0.5em;
min-width: 16px; min-width: 16px;
...@@ -161,10 +222,6 @@ export class LoadingButton extends ScopedElementsMixin(LitElement) { ...@@ -161,10 +222,6 @@ export class LoadingButton extends ScopedElementsMixin(LitElement) {
display: inline-block; display: inline-block;
} }
.is-not-loading .label {
padding-left: 12px;
padding-right: 12px;
}
.button { .button {
width: 100%; width: 100%;
...@@ -185,11 +242,11 @@ export class LoadingButton extends ScopedElementsMixin(LitElement) { ...@@ -185,11 +242,11 @@ export class LoadingButton extends ScopedElementsMixin(LitElement) {
render() { render() {
return html` return html`
<button <button
class="button ${this.type} loading-container ${!this.loading class="button ${this.type} is-icon loading-container ${!this.loading
? 'is-not-loading' ? 'is-not-loading'
: ''}" : ''}"
?disabled="${this.disabled}"> ?disabled="${this.disabled}">
<div class="label"><slot>${this.value}</slot></div> <slot><dbp-icon class="dbp-button-icon" name="${this.iconName}"></dbp-icon></slot>
<dbp-mini-spinner <dbp-mini-spinner
class="spinner" class="spinner"
style="display: ${this.loading ? 'inline' : 'none'}"></dbp-mini-spinner> style="display: ${this.loading ? 'inline' : 'none'}"></dbp-mini-spinner>
......
packages/common/styles.js
+ 2
− 2
View file @ 94747c6e
...@@ -638,7 +638,6 @@ export function getButtonCSS() { ...@@ -638,7 +638,6 @@ export function getButtonCSS() {
button.button.is-icon, .button.is-icon { button.button.is-icon, .button.is-icon {
border: none; border: none;
background: none; background: none;
font-size: 1.2rem;
padding: 0px; padding: 0px;
width: 40px; width: 40px;
height: 40px; height: 40px;
...@@ -647,8 +646,9 @@ export function getButtonCSS() { ...@@ -647,8 +646,9 @@ export function getButtonCSS() {
align-items: center; align-items: center;
} }
button.button.is-icon dbp-icon, .button.is-icon dbp-icon{ button.button.is-icon dbp-icon, .button.is-icon dbp-icon, dbp-button-icon{
top: 0px; top: 0px;
font-size: 1.2em;
} }
button.button.is-icon:hover:enabled, button.button.is-icon:hover:enabled,
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment