78 lines
1.8 KiB
TypeScript
78 lines
1.8 KiB
TypeScript
import { customElement, LitElement, TemplateResult, html, property } from 'lit-element';
|
|
|
|
import * as domtools from '@designestate/dees-domtools';
|
|
|
|
|
|
import './dees-windowlayer';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'dees-updater': DeesUpdater;
|
|
}
|
|
}
|
|
|
|
@customElement('dees-updater')
|
|
export class DeesUpdater extends LitElement {
|
|
public static demo = () => html`<dees-updater ></dees-updater>`;
|
|
|
|
@property()
|
|
currentVersion: string;
|
|
|
|
@property()
|
|
updatedVersion: string;
|
|
|
|
constructor() {
|
|
super();
|
|
domtools.elementBasic.setup();
|
|
}
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
${domtools.elementBasic.styles}
|
|
<style>
|
|
.modalContainer {
|
|
will-change: transform;
|
|
position: relative;
|
|
background: #222;
|
|
margin: auto;
|
|
max-width: 800px;
|
|
border-radius: 3px;
|
|
border-top: 1px solid #333;
|
|
}
|
|
|
|
.headingContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 40px 40px;
|
|
}
|
|
|
|
h1 {
|
|
margin: none;
|
|
font-size: 20px;
|
|
color: #fff;
|
|
margin-left: 20px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.buttonContainer {
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
}
|
|
</style>
|
|
<dees-windowlayer>
|
|
<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>
|
|
</dees-windowlayer>>
|
|
`;
|
|
}
|
|
}
|