diff --git a/changelog.md b/changelog.md index 5c5b524..8732785 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,12 @@ # Changelog +## 2024-06-27 - 1.1.0 - feat(elements) +Add performance improvements to uptimelink-webwidget + +- Added 'will-change: transform' to improve performance of the transform property +- Increased transition speed for element opacity from 0.2s to 0.1s for faster visual feedback +- Added scale transformation effect to the focused state of the widget + ## 2024-06-27 - 1.0.82 - fix(core) No code changes detected. Preparing for version increment based on package state. diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 6fd3312..57fde56 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.0.82', + version: '1.1.0', 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 358d8ad..3614e0e 100644 --- a/ts_web/elements/uptimelink-webwidget.ts +++ b/ts_web/elements/uptimelink-webwidget.ts @@ -67,6 +67,7 @@ export class UptimelinkWebwidget extends DeesElement { cursor: pointer; transition: all 0.2s; overflow: hidden; + will-change: transform; } .firstLine { @@ -77,6 +78,7 @@ export class UptimelinkWebwidget extends DeesElement { .mainbox.focused { width: 182px; height: 117px; + transform: scale(1.1, 1.1); } .statusindicator { @@ -91,7 +93,7 @@ export class UptimelinkWebwidget extends DeesElement { .expanded { opacity: 0; - transition: opacity 0.2s; + transition: opacity 0.1s; } .miniHeading { @@ -199,7 +201,7 @@ export class UptimelinkWebwidget extends DeesElement { } this.showExpanded = true; await this.performUpdate(); - await (await this.domtoolsPromise).convenience.smartdelay.delayFor(50); + await domtools.convenience.smartdelay.delayFor(0); const expandedDiv = this.shadowRoot.querySelector('.expanded') as HTMLElement; expandedDiv.style.opacity = '1'; };