111 lines
2.4 KiB
TypeScript
111 lines
2.4 KiB
TypeScript
import {
|
|
customElement,
|
|
DeesElement,
|
|
type TemplateResult,
|
|
html,
|
|
property,
|
|
type CSSResult,
|
|
domtools,
|
|
} from '@design.estate/dees-element';
|
|
import { demoFunc } from './dees-updater.demo.js';
|
|
|
|
import './dees-windowlayer';
|
|
import { css, cssManager } from '@design.estate/dees-element';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'dees-updater': DeesUpdater;
|
|
}
|
|
}
|
|
|
|
@customElement('dees-updater')
|
|
export class DeesUpdater extends DeesElement {
|
|
public static demo = demoFunc;
|
|
|
|
public static async createAndShow() {
|
|
const updater = new DeesUpdater();
|
|
document.body.appendChild(updater);
|
|
return updater;
|
|
}
|
|
|
|
@property({
|
|
type: String,
|
|
})
|
|
currentVersion: string;
|
|
|
|
@property({
|
|
type: String,
|
|
})
|
|
updatedVersion: string;
|
|
|
|
constructor() {
|
|
super();
|
|
domtools.elementBasic.setup();
|
|
}
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
.modalContainer {
|
|
will-change: transform;
|
|
position: relative;
|
|
background: ${cssManager.bdTheme('#eeeeeb', '#222')};
|
|
max-width: 800px;
|
|
border-radius: 8px;
|
|
border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')};
|
|
}
|
|
|
|
.headingContainer {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: 40px 40px;
|
|
}
|
|
|
|
h1 {
|
|
margin: none;
|
|
font-size: 20px;
|
|
color: ${cssManager.bdTheme('#333', '#fff')};
|
|
margin-left: 20px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.buttonContainer {
|
|
display: grid;
|
|
grid-template-columns: 50% 50%;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<dees-windowlayer
|
|
@clicked="${this.windowLayerClicked}"
|
|
.options=${{
|
|
blur: true,
|
|
}}
|
|
>
|
|
<div class="modalContainer">
|
|
<div class="headingContainer">
|
|
<dees-spinner .size=${60}></dees-spinner>
|
|
<h1>Updating the application...</h1>
|
|
</div>
|
|
<div class="progress">
|
|
<dees-progressbar .progress=${0.5}></dees-progressbar>
|
|
</div>
|
|
<div class="buttonContainer">
|
|
<dees-button>More info</dees-button>
|
|
<dees-button>Changelog</dees-button>
|
|
</div>
|
|
</div> </dees-windowlayer
|
|
>>
|
|
`;
|
|
}
|
|
|
|
public async destroy() {
|
|
this.parentElement.removeChild(this);
|
|
}
|
|
|
|
private windowLayerClicked() {}
|
|
}
|