fix(core): update
This commit is contained in:
parent
e8800996ce
commit
0122b2dd20
2173
package-lock.json
generated
2173
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
12
package.json
12
package.json
|
|
@ -13,16 +13,16 @@
|
|||
"author": "Lossless GmbH",
|
||||
"license": "UNLICENSED",
|
||||
"dependencies": {
|
||||
"@designestate/dees-domtools": "^1.0.74",
|
||||
"@designestate/dees-element": "^1.0.6",
|
||||
"@designestate/dees-wcctools": "^1.0.47",
|
||||
"@designestate/dees-domtools": "^1.0.84",
|
||||
"@designestate/dees-element": "^1.0.10",
|
||||
"@designestate/dees-wcctools": "^1.0.54",
|
||||
"@gitzone/tsrun": "^1.2.12",
|
||||
"typescript": "^4.1.2"
|
||||
"typescript": "^4.2.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@gitzone/tsbuild": "^2.1.24",
|
||||
"@gitzone/tsbundle": "^1.0.72",
|
||||
"@gitzone/tswatch": "^1.0.50",
|
||||
"@gitzone/tsbundle": "^1.0.80",
|
||||
"@gitzone/tswatch": "^1.0.52",
|
||||
"@pushrocks/projectinfo": "^4.0.5",
|
||||
"tslint": "^6.1.3",
|
||||
"tslint-config-prettier": "^1.17.0"
|
||||
|
|
|
|||
|
|
@ -10,9 +10,16 @@ export class UptimelinkWebwidget extends DeesElement {
|
|||
@property()
|
||||
public projectSlug: string;
|
||||
|
||||
@property()
|
||||
public isFocused = false;
|
||||
|
||||
@property()
|
||||
public showExpanded: boolean = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
domtools.DomTools.setupDomTools();
|
||||
this.setupEventing();
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
|
|
@ -23,23 +30,36 @@ export class UptimelinkWebwidget extends DeesElement {
|
|||
display: block;
|
||||
}
|
||||
.mainbox {
|
||||
position: relative;
|
||||
line-height: 1em;
|
||||
|
||||
margin: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 26px auto;
|
||||
font-family: Roboto;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
box-sizing: border-box;
|
||||
width: 150px;
|
||||
border-radius: 20px;
|
||||
border-radius: 15px;
|
||||
height: 30px;
|
||||
background: ${this.goBright ? '#fff' : '#222' };
|
||||
box-shadow: ${this.goBright ? '0px 0px 5px rgba(0,0,0,0.1)' : ''};
|
||||
padding: 5px;
|
||||
color: ${this.goBright ? '#333' : '#CCC' };
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.firstLine {
|
||||
display: grid;
|
||||
grid-template-columns: 26px auto;
|
||||
}
|
||||
|
||||
.mainbox.focused {
|
||||
width: 200px;
|
||||
height: 128px;
|
||||
}
|
||||
|
||||
.statusindicator {
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
|
|
@ -49,11 +69,108 @@ export class UptimelinkWebwidget extends DeesElement {
|
|||
.statustext {
|
||||
padding-top: 3px;
|
||||
}
|
||||
|
||||
.expanded {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.miniHeading {
|
||||
position: absolute;
|
||||
width: 190px;
|
||||
top: 25px;
|
||||
left: calc(50% - 95px);
|
||||
|
||||
margin-top: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.miniOverview24h {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
left: calc(50% - 95px);
|
||||
background: ${this.goBright ? 'rgba(0,0,0,0.07)' : 'rgba(255,255,255,0.07)'};
|
||||
border-radius: 3px;
|
||||
width: 190px;
|
||||
height: 40px;
|
||||
display: grid;
|
||||
padding: 3px 3px;
|
||||
grid-template-columns: repeat(30, 4px);
|
||||
grid-column-gap: 3px;
|
||||
}
|
||||
|
||||
.miniOverview24h .statusBar {
|
||||
background: ${this.goBright ? 'rgba(0,0,0,0.15)' : 'rgba(255,255,255,0.15)'};
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.miniOverview24h .statusBar.ok {
|
||||
background: #66BB6A;
|
||||
}
|
||||
|
||||
.viewStatuspage {
|
||||
position: absolute;
|
||||
width: 190px;
|
||||
top: 90px;
|
||||
left: calc(50% - 95px);
|
||||
text-align: center;
|
||||
background: ${this.goBright ? 'rgba(0,0,0,0.07)' : 'rgba(255,255,255,0.07)'};
|
||||
border-radius: 3px 3px 10px 10px;
|
||||
padding: 5px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
<div class="mainbox">
|
||||
<div class="statusindicator"></div>
|
||||
<div class="statustext">All systems are up!</div>
|
||||
<div class="mainbox ${this.isFocused ? 'focused' : null}">
|
||||
<div class="firstLine">
|
||||
<div class="statusindicator"></div>
|
||||
<div class="statustext">All systems are up!</div>
|
||||
</div>
|
||||
${this.showExpanded ? html`
|
||||
<div class="expanded">
|
||||
<div class="miniHeading">
|
||||
last 26 hours:
|
||||
</div>
|
||||
<div class="miniOverview24h">
|
||||
${(() => {
|
||||
let counter = 0;
|
||||
const returnArray = [];
|
||||
while(counter < 26) {
|
||||
returnArray.push(html`<div class="statusBar ok"></div>`)
|
||||
counter++;
|
||||
};
|
||||
return returnArray;
|
||||
})()}
|
||||
</div>
|
||||
<div class="viewStatuspage">View full Statuspage ...</div>
|
||||
</div>
|
||||
` : null}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private async setupEventing() {
|
||||
await this.updateComplete;
|
||||
const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
|
||||
mainbox.onmouseenter = async () => {
|
||||
this.isFocused = true;
|
||||
await domtools.DomTools.getGlobalDomToolsSync().convenience.smartdelay.delayFor(200);
|
||||
if (!this.isFocused) {
|
||||
return;
|
||||
}
|
||||
this.showExpanded = true;
|
||||
await this.performUpdate();
|
||||
await domtools.DomTools.getGlobalDomToolsSync().convenience.smartdelay.delayFor(50);
|
||||
const expandedDiv = this.shadowRoot.querySelector('.expanded') as HTMLElement;
|
||||
expandedDiv.style.opacity = '1';
|
||||
};
|
||||
mainbox.onmouseleave = async () => {
|
||||
if (!this.showExpanded) {
|
||||
this.isFocused = false;
|
||||
return;
|
||||
}
|
||||
this.showExpanded = false;
|
||||
await domtools.DomTools.getGlobalDomToolsSync().convenience.smartdelay.delayFor(50);
|
||||
this.isFocused = false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user