diff --git a/changelog.md b/changelog.md index 94cc391..ebae59a 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,12 @@ # 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) Fix sizing of status indicator in uptimelink-webwidget diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index ac8cd01..79f53b2 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { 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.' } diff --git a/ts_web/elements/uptimelink-webwidget.ts b/ts_web/elements/uptimelink-webwidget.ts index 6d87866..f23871f 100644 --- a/ts_web/elements/uptimelink-webwidget.ts +++ b/ts_web/elements/uptimelink-webwidget.ts @@ -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'; @@ -16,7 +24,7 @@ export class UptimelinkWebwidget extends DeesElement { @property({ type: Boolean, - reflect: true + reflect: true, }) isOnTop = false; @@ -31,7 +39,7 @@ export class UptimelinkWebwidget extends DeesElement { @property({ type: Boolean, - reflect: true + reflect: true, }) public showExpanded: boolean = false; @@ -44,145 +52,149 @@ export class UptimelinkWebwidget extends DeesElement { public static styles = [ cssManager.defaultStyles, - ] + css` + :host { + position: relative; + display: block; + height: 30px; + } + .mainbox { + position: relative; + line-height: 1em; + margin: auto; + font-family: Roboto; + font-weight: 540; + font-size: 12px; + box-sizing: border-box; + width: 150px; + border-radius: 15px; + height: 30px; + background: ${cssManager.bdTheme('#ffffff', '#000000')}; + box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', '')}; + border: 1px solid ${cssManager.bdTheme('#ffffff', '#333333')}; + padding: 4px; + color: ${cssManager.bdTheme('#333', '#CCC')}; + cursor: pointer; + transition: all 0.2s, background 0.1s; + overflow: hidden; + will-change: transform; + opacity: 1; + } + .mainbox.hidden { + opacity: 0; + } + + .firstLine { + display: grid; + grid-template-columns: 26px auto; + } + + .mainbox.focused { + width: 182px; + height: 117px; + transform: translateX(-16px); + background: ${cssManager.bdTheme('#ffffff', '#222222')} !important; + box-shadow: ${cssManager.bdTheme('0px 0px 5px rgba(0,0,0,0.1)', '')} !important; + } + + .statusindicator { + transform: translate(4px, 4px); + height: 12px; + width: 12px; + background: #66bb6a; + border-radius: 10px; + } + .statustext { + line-height: 20px; + } + + .expanded { + opacity: 0; + transition: opacity 0.1s; + } + + .miniHeading { + position: absolute; + width: 190px; + top: 25px; + left: 5px; + margin-top: 10px; + font-size: 12px; + } + + .miniOverview24h { + position: absolute; + top: 55px; + left: 5px; + background: ${cssManager.bdTheme('rgba(0,0,0,0.07)', 'rgba(255,255,255,0.07)')}; + border-radius: 3px; + width: 172px; + height: 30px; + display: grid; + padding: 3px 3px; + grid-template-columns: repeat(30, 4px); + grid-column-gap: 3px; + } + + .miniOverview24h .statusBar { + background: ${cssManager.bdTheme('rgba(0,0,0,0.15)', 'rgba(255,255,255,0.15)')}; + border-radius: 10px; + } + + .miniOverview24h .statusBar.ok { + background: #66bb6a; + } + + .viewStatuspage { + position: absolute; + width: 172px; + top: 80px; + left: 5px; + text-align: center; + background: ${cssManager.bdTheme('rgba(0,0,0,0.07)', 'rgba(255,255,255,0.07)')}; + border-radius: 3px 3px 10px 10px; + padding: 5px; + margin-top: 10px; + transition: background 0.1s; + } + + .viewStatuspage:hover { + background: ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')}; + } + `, + ]; public render(): TemplateResult { return html`
All systems are up!
- ${this.showExpanded ? html` -
-
- last 24 hours: -
-
- ${(() => { - let counter = 0; - const returnArray = []; - while(counter < 24) { - returnArray.push(html`
`) - counter++; - }; - return returnArray; - })()} -
-
View full Statuspage ...
-
- ` : null} + ${this.showExpanded + ? html` +
+
last 24 hours:
+
+ ${(() => { + let counter = 0; + const returnArray = []; + while (counter < 24) { + returnArray.push(html`
`); + counter++; + } + return returnArray; + })()} +
+
View full Statuspage ...
+
+ ` + : null}
`; } @@ -226,11 +238,10 @@ export class UptimelinkWebwidget extends DeesElement { return; } this.windowLayer.destroy(); - domtools.convenience.smartdelay.delayFor(200).then(async() => { + this.parentWebwidget.shadowRoot.querySelector('.mainbox').classList.remove('hidden'); + domtools.convenience.smartdelay.delayFor(200).then(async () => { if (!this.isFocused) { this.isElevated = false; - this.parentWebwidget.shadowRoot.querySelector('.mainbox').classList.remove('hidden'); - await domtools.convenience.smartdelay.delayFor(100); this.remove(); } }); @@ -241,6 +252,6 @@ export class UptimelinkWebwidget extends DeesElement { this.showExpanded = false; await domtools.convenience.smartdelay.delayFor(50); this.isFocused = false; - } + }; } }