1.2.0

changelog.md

@@ -1,5 +1,23 @@
 # Changelog
 
+## 2025-01-09 - 1.2.0 - feat(webwidget)
+Enhanced widget animations and styling
+
+- Enabled reflect option for 'isOnTop' and 'showExpanded' properties.
+- Improved the animation and styling of the 'mainbox' when it gains focus.
+- Mainbox now has smoother opacity transitions and better background handling.
+- Enhanced functionality of widget positioning for better rendering.
+
+## 2024-06-28 - 1.1.2 - fix(elements)
+Fix blur effect in UptimelinkWebwidget component
+
+- Changed blur effect from true to false in the DeesWindowLayer setup
+
+## 2024-06-27 - 1.1.1 - fix(build)
+Fix build script to use correct tsbuild command
+
+- Corrected the build script in package.json to use 'tsbuild tsfolders --allowimplicitany && tsbundle element --production' instead of 'tsbuild element --allowimplicitany && tsbundle element --production'.
+
 ## 2024-06-27 - 1.1.0 - feat(elements)
 Add performance improvements to uptimelink-webwidget
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uptime.link/webwidget",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "private": false,
   "description": "The web widget for public use of uptimelink, allowing users to monitor uptime status through a user-friendly interface.",
   "main": "dist_ts_web/index.js",
@@ -8,22 +8,22 @@
   "type": "module",
   "scripts": {
     "test": "npm run build",
-    "build": "tsbuild element --allowimplicitany && tsbundle element --production",
+    "build": "tsbuild tsfolders --allowimplicitany && tsbundle element --production",
     "watch": "tswatch element"
   },
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@design.estate/dees-catalog": "^1.0.289",
+    "@design.estate/dees-catalog": "^1.3.3",
-    "@design.estate/dees-domtools": "^2.0.57",
+    "@design.estate/dees-domtools": "^2.1.1",
-    "@design.estate/dees-element": "^2.0.34",
+    "@design.estate/dees-element": "^2.0.39",
     "@design.estate/dees-wcctools": "^1.0.90"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^2.1.82",
+    "@git.zone/tsbuild": "^2.2.0",
-    "@git.zone/tsbundle": "^2.0.15",
+    "@git.zone/tsbundle": "^2.1.0",
-    "@git.zone/tsrun": "^1.2.49",
+    "@git.zone/tsrun": "^1.3.3",
-    "@git.zone/tswatch": "^2.0.23",
+    "@git.zone/tswatch": "^2.0.37",
     "@push.rocks/projectinfo": "^5.0.2"
   },
   "files": [

ts_web/00_commitinfo_data.ts

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

ts_web/elements/uptimelink-webwidget.ts

@@ -15,7 +15,8 @@ export class UptimelinkWebwidget extends DeesElement {
   `;
 
   @property({
-    type: Boolean
+    type: Boolean,
+    reflect: true
   })
   isOnTop = false;
 
@@ -28,9 +29,14 @@ export class UptimelinkWebwidget extends DeesElement {
   @property()
   public isElevated = false;
 
-  @property()
+  @property({
+    type: Boolean,
+    reflect: true
+  })
   public showExpanded: boolean = false;
 
+  public parentWebwidget: UptimelinkWebwidget;
+
   constructor() {
     super();
     this.setupEventing();
@@ -60,14 +66,19 @@ export class UptimelinkWebwidget extends DeesElement {
           width: 150px;
           border-radius: 15px;
           height: 30px;
-          background: ${this.goBright ? '#fff' : '#222' };
+          background: ${this.goBright ? '#ffffff00' : '#22222200' };
           box-shadow: ${this.goBright ? '0px 0px 5px rgba(0,0,0,0.1)' : ''};
-          padding: 5px;
+          border: 1px solid ${this.goBright ? '#22222220' : '#ffffff20' };
+          padding: 4px;
           color: ${this.goBright ? '#333' : '#CCC' };
           cursor: pointer;
-          transition: all 0.2s;
+          transition: all 0.2s, background 0.1s;
           overflow: hidden;
           will-change: transform;
+          opacity: 1;
+        }
+        .mainbox.hidden {
+          opacity: 0;
         }
 
         .firstLine {
@@ -78,7 +89,9 @@ export class UptimelinkWebwidget extends DeesElement {
         .mainbox.focused {
           width: 182px;
           height: 117px;
-          transform: scale(1.1, 1.1);
+          transform: translateX(-16px)scale(1.1, 1.1);
+          background: ${this.goBright ? '#ffffff' : '#222222' } !important;
+          box-shadow: ${this.goBright ? '0px 0px 5px rgba(0,0,0,0.1)' : ''} !important;
         }
 
         .statusindicator {
@@ -183,17 +196,19 @@ export class UptimelinkWebwidget extends DeesElement {
         const mainbox = this.shadowRoot.querySelector('.mainbox') as HTMLElement;
         const rect = mainbox.getBoundingClientRect();
         const uptimelinkWidget = new UptimelinkWebwidget();
+        uptimelinkWidget.parentWebwidget = this;
         uptimelinkWidget.isOnTop = true;
         uptimelinkWidget.style.position = 'fixed';
         uptimelinkWidget.style.top = `${rect.top}px`;
         uptimelinkWidget.style.left = `${rect.left}px`;
         document.body.append(uptimelinkWidget);
+        mainbox.classList.add('hidden');
         return;
       }
       this.isElevated = true;
       this.isFocused = true;
       this.windowLayer = await DeesWindowLayer.createAndShow({
-        blur: true,
+        blur: false,
       });
       await domtools.convenience.smartdelay.delayFor(200);
       if (!this.isFocused) {
@@ -210,9 +225,11 @@ export class UptimelinkWebwidget extends DeesElement {
         return;
       }
       this.windowLayer.destroy();
-      domtools.convenience.smartdelay.delayFor(200).then(() => {
+      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();
         }
       });