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 # 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) ## 2024-06-27 - 1.0.82 - fix(core)
No code changes detected. Preparing for version increment based on package state. 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 = { export const commitinfo = {
name: '@uptime.link/webwidget', 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.' 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; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
overflow: hidden; overflow: hidden;
will-change: transform;
} }
.firstLine { .firstLine {
@ -77,6 +78,7 @@ export class UptimelinkWebwidget extends DeesElement {
.mainbox.focused { .mainbox.focused {
width: 182px; width: 182px;
height: 117px; height: 117px;
transform: scale(1.1, 1.1);
} }
.statusindicator { .statusindicator {
@ -91,7 +93,7 @@ export class UptimelinkWebwidget extends DeesElement {
.expanded { .expanded {
opacity: 0; opacity: 0;
transition: opacity 0.2s; transition: opacity 0.1s;
} }
.miniHeading { .miniHeading {
@ -199,7 +201,7 @@ export class UptimelinkWebwidget extends DeesElement {
} }
this.showExpanded = true; this.showExpanded = true;
await this.performUpdate(); 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; const expandedDiv = this.shadowRoot.querySelector('.expanded') as HTMLElement;
expandedDiv.style.opacity = '1'; expandedDiv.style.opacity = '1';
}; };