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

feat(elements): Add performance improvements to uptimelink-webwidget

Browse Source
This commit is contained in:
Philipp Kunz 2024-06-27 01:52:35 +02:00
parent 077146f9c9
commit ce4e29a65e
3 changed files with 12 additions and 3 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
## 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.

2
ts_web/00_commitinfo_data.ts
View File

@ -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.'
}

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

@ -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';
};