style(LoadingButton): 💄 Migliorato CSS inline del LoadingButton
This commit is contained in:
parent
052065e4e4
commit
c187aa8410
|
@ -80,6 +80,7 @@
|
|||
"autoprefixer": "^10.4.0",
|
||||
"babel-plugin-transform-flow-enums": "^0.0.2",
|
||||
"concurrently": "^6.4.0",
|
||||
"csstype": "^3.0.10",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-config-airbnb-base": "^15.0.0",
|
||||
"eslint-plugin-flowtype": "^8.0.3",
|
||||
|
|
|
@ -55,6 +55,7 @@ specifiers:
|
|||
collect.js: ^4.29.3
|
||||
coloquent: ^2.4.0
|
||||
concurrently: ^6.4.0
|
||||
csstype: ^3.0.10
|
||||
eslint: ^7.32.0
|
||||
eslint-config-airbnb-base: ^15.0.0
|
||||
eslint-plugin-flowtype: ^8.0.3
|
||||
|
@ -161,6 +162,7 @@ devDependencies:
|
|||
autoprefixer: 10.4.0_postcss@8.4.4
|
||||
babel-plugin-transform-flow-enums: 0.0.2_@babel+core@7.16.0
|
||||
concurrently: 6.4.0
|
||||
csstype: 3.0.10
|
||||
eslint: 7.32.0
|
||||
eslint-config-airbnb-base: 15.0.0_a820dc868cc8cd66d8297be6779b9035
|
||||
eslint-plugin-flowtype: 8.0.3_f352da6f9c36c27d4e75da053be5baab
|
||||
|
@ -3238,6 +3240,10 @@ packages:
|
|||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/csstype/3.0.10:
|
||||
resolution: {integrity: sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA==}
|
||||
dev: true
|
||||
|
||||
/damerau-levenshtein/1.0.7:
|
||||
resolution: {integrity: sha512-VvdQIPGdWP0SqFXghj79Wf/5LArmreyMsGLa6FG6iC4t3j7j5s71TrwWmT/4akbDQIqjfACkLZmjXhA7g2oUZw==}
|
||||
dev: true
|
||||
|
|
|
@ -5,6 +5,7 @@ import {type ClassComponent} from 'mithril';
|
|||
|
||||
import Component from './Component.jsx';
|
||||
import Mdi from './Mdi.jsx';
|
||||
import type CSS from 'csstype';
|
||||
|
||||
export default class LoadingButton extends Component implements ClassComponent<Button> {
|
||||
view(vnode) {
|
||||
|
@ -14,7 +15,7 @@ export default class LoadingButton extends Component implements ClassComponent<B
|
|||
<span slot="icon" style="display: inline;">
|
||||
<mwc-circular-progress
|
||||
indeterminate
|
||||
style={`display: none; vertical-align: bottom; ${this.attrs.has('raised') ? '--mdc-theme-primary: #ffffff;' : ''}'`}/>
|
||||
style={this.getCSSProperties()}/>
|
||||
{this.attrs.has('icon') ? <Mdi icon={this.attrs.get('icon')}/> : ''}
|
||||
</span>
|
||||
</mwc-button>
|
||||
|
@ -22,6 +23,23 @@ export default class LoadingButton extends Component implements ClassComponent<B
|
|||
);
|
||||
}
|
||||
|
||||
getCSSProperties() {
|
||||
const css: CSS.Properties<> = {
|
||||
display: 'none',
|
||||
verticalAlign: 'bottom'
|
||||
};
|
||||
|
||||
if (this.attrs.has('raised')) {
|
||||
css['--mdc-theme-primary'] = '#ffffff';
|
||||
}
|
||||
|
||||
if (this.attrs.has('icon')) {
|
||||
css.marginRight = '8px';
|
||||
}
|
||||
|
||||
return css;
|
||||
}
|
||||
|
||||
oncreate(vnode) {
|
||||
super.oncreate(vnode);
|
||||
$(this.element)
|
||||
|
|
Loading…
Reference in New Issue