dees-catalog/ts_web/elements/dees-updater.ts

91 lines
2.1 KiB
TypeScript
Raw Normal View History

2021-02-13 21:52:36 +00:00
import { customElement, LitElement, TemplateResult, html, property } from 'lit-element';
import * as domtools from '@designestate/dees-domtools';
import './dees-windowlayer';
2021-09-01 20:43:31 +00:00
import { css, cssManager } from '@designestate/dees-element';
2021-02-13 21:52:36 +00:00
declare global {
interface HTMLElementTagNameMap {
'dees-updater': DeesUpdater;
}
}
@customElement('dees-updater')
export class DeesUpdater extends LitElement {
2021-11-26 19:06:09 +00:00
public static demo = () => html`<dees-updater></dees-updater>`;
2021-02-13 21:52:36 +00:00
2021-11-26 19:06:09 +00:00
@property({
type: String,
})
2021-02-13 21:52:36 +00:00
currentVersion: string;
2021-11-26 19:06:09 +00:00
@property({
type: String,
})
2021-02-13 21:52:36 +00:00
updatedVersion: string;
constructor() {
super();
domtools.elementBasic.setup();
}
2021-09-01 20:43:31 +00:00
public static styles = [
cssManager.defaultStyles,
css`
.modalContainer {
2021-08-29 15:10:25 +00:00
will-change: transform;
position: relative;
2021-09-01 20:43:31 +00:00
background: ${cssManager.bdTheme('#eeeeeb', '#222')};
2021-02-13 21:52:36 +00:00
margin: auto;
2021-08-29 15:10:25 +00:00
max-width: 800px;
border-radius: 3px;
2021-09-01 20:43:31 +00:00
border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
2021-08-29 15:10:25 +00:00
}
.headingContainer {
display: flex;
justify-content: center;
align-items: center;
padding: 40px 40px;
}
h1 {
margin: none;
font-size: 20px;
2021-09-01 20:43:31 +00:00
color: ${cssManager.bdTheme('#333', '#fff')};
2021-08-29 15:10:25 +00:00
margin-left: 20px;
font-weight: normal;
}
.buttonContainer {
display: grid;
grid-template-columns: 50% 50%;
2021-02-13 21:52:36 +00:00
}
2021-09-01 20:43:31 +00:00
`
]
public render(): TemplateResult {
return html`
2021-09-01 19:48:22 +00:00
<dees-windowlayer @clicked="${this.windowLayerClicked}">
2021-08-29 15:10:25 +00:00
<div class="modalContainer">
<div class="headingContainer">
<dees-spinner .size=${60}></dees-spinner>
<h1>Updating the application...</h1>
</div>
<div class="buttonContainer">
<dees-button>More info</dees-button>
<dees-button>Changelog</dees-button>
</div>
</div>
2021-02-13 21:52:36 +00:00
</dees-windowlayer>>
`;
}
2021-09-01 19:48:22 +00:00
private windowLayerClicked() {
const windowLayer = this.shadowRoot.querySelector('dees-windowlayer');
windowLayer.toggleVisibility();
}
2021-02-13 21:52:36 +00:00
}