uptime.link/webwidget
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(webwidget): Fix style issues for UptimelinkWebwidget element.

Browse Source
This commit is contained in:
Philipp Kunz 2025-01-09 13:46:31 +01:00
parent e75b1d50cf
commit 06bde76424
3 changed files with 155 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
changelog.md
View File

@ -1,5 +1,12 @@
# Changelog # Changelog
## 2025-01-09 - 1.2.3 - fix(webwidget)
Fix style issues for UptimelinkWebwidget element.
- Resolved indentation and formatting issues in UptimelinkWebwidget component.
- Ensured proper use of cssManager for theming.
- Fixed event handling for expanded view toggle.
## 2025-01-09 - 1.2.2 - fix(component) ## 2025-01-09 - 1.2.2 - fix(component)
Fix sizing of status indicator in uptimelink-webwidget Fix sizing of status indicator in uptimelink-webwidget

2
ts_web/00_commitinfo_data.ts
View File

@ -3,6 +3,6 @@
*/ */
export const commitinfo = { export const commitinfo = {
name: '@uptime.link/webwidget', name: '@uptime.link/webwidget',
version: '1.2.2', version: '1.2.3',
description: 'The web widget for public use of uptimelink, allowing users to monitor uptime status through a user-friendly interface.' description: 'The web widget for public use of uptimelink, allowing users to monitor uptime status through a user-friendly interface.'
} }

73
ts_web/elements/uptimelink-webwidget.ts
View File

@ -1,4 +1,12 @@
import { DeesElement, property, html, customElement, type TemplateResult, cssManager } from '@design.estate/dees-element'; import {
DeesElement,
property,
html,
customElement,
type TemplateResult,
cssManager,
css,
} from '@design.estate/dees-element';
import { DeesWindowLayer } from '@design.estate/dees-catalog'; import { DeesWindowLayer } from '@design.estate/dees-catalog';
@ -16,7 +24,7 @@ export class UptimelinkWebwidget extends DeesElement {
@property({ @property({
type: Boolean, type: Boolean,
reflect: true reflect: true,
}) })
isOnTop = false; isOnTop = false;
@ -31,7 +39,7 @@ export class UptimelinkWebwidget extends DeesElement {
@property({ @property({
type: Boolean, type: Boolean,
reflect: true reflect: true,
}) })
public showExpanded: boolean = false; public showExpanded: boolean = false;
@ -44,16 +52,11 @@ export class UptimelinkWebwidget extends DeesElement {
public static styles = [ public static styles = [
cssManager.defaultStyles, cssManager.defaultStyles,
] css`
public render(): TemplateResult {
return html`
<style>
:host { :host {
position: relative; position: relative;
display: block; display: block;
height: 30px; height: 30px;
z-index: ${this.isElevated || this.isOnTop ? '1000' : 'auto'} ;
} }
.mainbox { .mainbox {
position: relative; position: relative;
@ -66,11 +69,11 @@ export class UptimelinkWebwidget extends DeesElement {
width: 150px; width: 150px;
border-radius: 15px; border-radius: 15px;
height: 30px; height: 30px;
background: ${this.goBright ? '#ffffff00' : '#22222200' }; background: ${cssManager.bdTheme('#ffffff', '#000000')};
box-shadow: ${this.goBright ? '0px 0px 5px rgba(0,0,0,0.1)' : ''}; box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', '')};
border: 1px solid ${this.goBright ? '#22222220' : '#ffffff20' }; border: 1px solid ${cssManager.bdTheme('#ffffff', '#333333')};
padding: 4px; padding: 4px;
color: ${this.goBright ? '#333' : '#CCC' }; color: ${cssManager.bdTheme('#333', '#CCC')};
cursor: pointer; cursor: pointer;
transition: all 0.2s, background 0.1s; transition: all 0.2s, background 0.1s;
overflow: hidden; overflow: hidden;
@ -90,15 +93,15 @@ export class UptimelinkWebwidget extends DeesElement {
width: 182px; width: 182px;
height: 117px; height: 117px;
transform: translateX(-16px); transform: translateX(-16px);
background: ${this.goBright ? '#ffffff' : '#222222' } !important; background: ${cssManager.bdTheme('#ffffff', '#222222')} !important;
box-shadow: ${this.goBright ? '0px 0px 5px rgba(0,0,0,0.1)' : ''} !important; box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', '')} !important;
} }
.statusindicator { .statusindicator {
transform: translate(4px, 4px); transform: translate(4px, 4px);
height: 12px; height: 12px;
width: 12px; width: 12px;
background: #66BB6A; background: #66bb6a;
border-radius: 10px; border-radius: 10px;
} }
.statustext { .statustext {
@ -123,7 +126,7 @@ export class UptimelinkWebwidget extends DeesElement {
position: absolute; position: absolute;
top: 55px; top: 55px;
left: 5px; left: 5px;
background: ${this.goBright ? 'rgba(0,0,0,0.07)' : 'rgba(255,255,255,0.07)'}; background: ${cssManager.bdTheme('rgba(0,0,0,0.07)', 'rgba(255,255,255,0.07)')};
border-radius: 3px; border-radius: 3px;
width: 172px; width: 172px;
height: 30px; height: 30px;
@ -134,12 +137,12 @@ export class UptimelinkWebwidget extends DeesElement {
} }
.miniOverview24h .statusBar { .miniOverview24h .statusBar {
background: ${this.goBright ? 'rgba(0,0,0,0.15)' : 'rgba(255,255,255,0.15)'}; background: ${cssManager.bdTheme('rgba(0,0,0,0.15)', 'rgba(255,255,255,0.15)')};
border-radius: 10px; border-radius: 10px;
} }
.miniOverview24h .statusBar.ok { .miniOverview24h .statusBar.ok {
background: #66BB6A; background: #66bb6a;
} }
.viewStatuspage { .viewStatuspage {
@ -148,7 +151,7 @@ export class UptimelinkWebwidget extends DeesElement {
top: 80px; top: 80px;
left: 5px; left: 5px;
text-align: center; text-align: center;
background: ${this.goBright ? 'rgba(0,0,0,0.07)' : 'rgba(255,255,255,0.07)'}; background: ${cssManager.bdTheme('rgba(0,0,0,0.07)', 'rgba(255,255,255,0.07)')};
border-radius: 3px 3px 10px 10px; border-radius: 3px 3px 10px 10px;
padding: 5px; padding: 5px;
margin-top: 10px; margin-top: 10px;
@ -156,7 +159,16 @@ export class UptimelinkWebwidget extends DeesElement {
} }
.viewStatuspage:hover { .viewStatuspage:hover {
background: ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)'}; background: ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')};
}
`,
];
public render(): TemplateResult {
return html`
<style>
:host {
z-index: ${this.isElevated || this.isOnTop ? '1000' : 'auto'};
} }
</style> </style>
<div class="mainbox ${this.isFocused ? 'focused' : null}"> <div class="mainbox ${this.isFocused ? 'focused' : null}">
@ -164,25 +176,25 @@ export class UptimelinkWebwidget extends DeesElement {
<div class="statusindicator"></div> <div class="statusindicator"></div>
<div class="statustext">All systems are up!</div> <div class="statustext">All systems are up!</div>
</div> </div>
${this.showExpanded ? html` ${this.showExpanded
? html`
<div class="expanded"> <div class="expanded">
<div class="miniHeading"> <div class="miniHeading">last 24 hours:</div>
last 24 hours:
</div>
<div class="miniOverview24h"> <div class="miniOverview24h">
${(() => { ${(() => {
let counter = 0; let counter = 0;
const returnArray = []; const returnArray = [];
while (counter < 24) { while (counter < 24) {
returnArray.push(html`<div class="statusBar ok"></div>`) returnArray.push(html`<div class="statusBar ok"></div>`);
counter++; counter++;
}; }
return returnArray; return returnArray;
})()} })()}
</div> </div>
<div class="viewStatuspage">View full Statuspage ...</div> <div class="viewStatuspage">View full Statuspage ...</div>
</div> </div>
` : null} `
: null}
</div> </div>
`; `;
} }
@ -226,11 +238,10 @@ export class UptimelinkWebwidget extends DeesElement {
return; return;
} }
this.windowLayer.destroy(); this.windowLayer.destroy();
this.parentWebwidget.shadowRoot.querySelector('.mainbox').classList.remove('hidden');
domtools.convenience.smartdelay.delayFor(200).then(async () => { domtools.convenience.smartdelay.delayFor(200).then(async () => {
if (!this.isFocused) { if (!this.isFocused) {
this.isElevated = false; this.isElevated = false;
this.parentWebwidget.shadowRoot.querySelector('.mainbox').classList.remove('hidden');
await domtools.convenience.smartdelay.delayFor(100);
this.remove(); this.remove();
} }
}); });
@ -241,6 +252,6 @@ export class UptimelinkWebwidget extends DeesElement {
this.showExpanded = false; this.showExpanded = false;
await domtools.convenience.smartdelay.delayFor(50); await domtools.convenience.smartdelay.delayFor(50);
this.isFocused = false; this.isFocused = false;
} };
} }
} }