changelog.md

@@ -1,22 +1,5 @@
 # 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
-
-- Corrected the status indicator dimensions for consistency.
-
-## 2025-01-09 - 1.2.1 - fix(UptimelinkWebwidget)
-Remove incorrect scale transformation in focused state.
-
-- Fixed the CSS transform property for the .mainbox.focused class in the UptimelinkWebwidget component by removing an unintended scale transformation.
-
 ## 2025-01-09 - 1.2.0 - feat(webwidget)
 Enhanced widget animations and styling
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uptime.link/webwidget",
-  "version": "1.2.3",
+  "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",

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@uptime.link/webwidget',
-  version: '1.2.3',
+  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

@@ -1,12 +1,4 @@
-import {
-  DeesElement,
-  property,
-  html,
-  customElement,
-  type TemplateResult,
-  cssManager,
-  css,
-} from '@design.estate/dees-element';
+import { DeesElement, property, html, customElement, type TemplateResult, cssManager } from '@design.estate/dees-element';
 
 import { DeesWindowLayer } from '@design.estate/dees-catalog';
 
@@ -24,7 +16,7 @@ export class UptimelinkWebwidget extends DeesElement {
 
   @property({
     type: Boolean,
-    reflect: true,
+    reflect: true
   })
   isOnTop = false;
 
@@ -39,7 +31,7 @@ export class UptimelinkWebwidget extends DeesElement {
 
   @property({
     type: Boolean,
-    reflect: true,
+    reflect: true
   })
   public showExpanded: boolean = false;
 
@@ -52,11 +44,16 @@ export class UptimelinkWebwidget extends DeesElement {
 
   public static styles = [
     cssManager.defaultStyles,
-    css`
+  ]
+
+  public render(): TemplateResult {
+    return html`
+      <style>
         :host {
           position: relative;
           display: block;
           height: 30px;
+          z-index: ${this.isElevated || this.isOnTop ? '1000' : 'auto'} ;
         }
         .mainbox {
           position: relative;
@@ -69,11 +66,11 @@ export class UptimelinkWebwidget extends DeesElement {
           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')};
+          background: ${this.goBright ? '#ffffff00' : '#22222200' };
+          box-shadow: ${this.goBright ? '0px 0px 5px rgba(0,0,0,0.1)' : ''};
+          border: 1px solid ${this.goBright ? '#22222220' : '#ffffff20' };
           padding: 4px;
-        color: ${cssManager.bdTheme('#333', '#CCC')};
+          color: ${this.goBright ? '#333' : '#CCC' };
           cursor: pointer;
           transition: all 0.2s, background 0.1s;
           overflow: hidden;
@@ -92,16 +89,15 @@ export class UptimelinkWebwidget extends DeesElement {
         .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;
+          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 {
-        transform: translate(4px, 4px);
-        height: 12px;
-        width: 12px;
-        background: #66bb6a;
+          height: 20px;
+          width: 20px;
+          background:  #66BB6A;
           border-radius: 10px;
         }
         .statustext {
@@ -126,7 +122,7 @@ export class UptimelinkWebwidget extends DeesElement {
           position: absolute;
           top: 55px;
           left: 5px;
-        background: ${cssManager.bdTheme('rgba(0,0,0,0.07)', 'rgba(255,255,255,0.07)')};
+          background: ${this.goBright ? 'rgba(0,0,0,0.07)' : 'rgba(255,255,255,0.07)'};
           border-radius: 3px;
           width: 172px;
           height: 30px;
@@ -137,12 +133,12 @@ export class UptimelinkWebwidget extends DeesElement {
         }
 
         .miniOverview24h .statusBar {
-        background: ${cssManager.bdTheme('rgba(0,0,0,0.15)', 'rgba(255,255,255,0.15)')};
+          background: ${this.goBright ? 'rgba(0,0,0,0.15)' : 'rgba(255,255,255,0.15)'};
           border-radius: 10px;
         }
 
         .miniOverview24h .statusBar.ok {
-        background: #66bb6a;
+          background:  #66BB6A;
         }
 
         .viewStatuspage {
@@ -151,7 +147,7 @@ export class UptimelinkWebwidget extends DeesElement {
           top: 80px;
           left: 5px;
           text-align: center;
-        background: ${cssManager.bdTheme('rgba(0,0,0,0.07)', 'rgba(255,255,255,0.07)')};
+          background: ${this.goBright ? 'rgba(0,0,0,0.07)' : 'rgba(255,255,255,0.07)'};
           border-radius: 3px 3px 10px 10px;
           padding: 5px;
           margin-top: 10px;
@@ -159,16 +155,7 @@ export class UptimelinkWebwidget extends DeesElement {
         }
 
         .viewStatuspage:hover {
-        background: ${cssManager.bdTheme('rgba(0,0,0,0.1)', 'rgba(255,255,255,0.1)')};
-      }
-    `,
-  ];
-
-  public render(): TemplateResult {
-    return html`
-      <style>
-      :host {
-        z-index: ${this.isElevated || this.isOnTop ? '1000' : 'auto'};
+          background: ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)'};
         }
       </style>
       <div class="mainbox ${this.isFocused ? 'focused' : null}">
@@ -176,25 +163,25 @@ export class UptimelinkWebwidget extends DeesElement {
           <div class="statusindicator"></div>
           <div class="statustext">All systems are up!</div>
         </div>
-        ${this.showExpanded
-          ? html`
+        ${this.showExpanded ? html`
           <div class="expanded">
-                <div class="miniHeading">last 24 hours:</div>
+            <div class="miniHeading">
+              last 24 hours:
+            </div>
             <div class="miniOverview24h">
               ${(() => {
                 let counter = 0;
                 const returnArray = [];
                 while(counter < 24) {
-                      returnArray.push(html`<div class="statusBar ok"></div>`);
+                  returnArray.push(html`<div class="statusBar ok"></div>`)
                   counter++;
-                    }
+                };
                 return returnArray;
               })()}
             </div>
             <div class="viewStatuspage">View full Statuspage ...</div>
           </div>
-            `
-          : null}
+        ` : null}
       </div>
     `;
   }
@@ -238,10 +225,11 @@ export class UptimelinkWebwidget extends DeesElement {
         return;
       }
       this.windowLayer.destroy();
-      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();
         }
       });
@@ -252,6 +240,6 @@ export class UptimelinkWebwidget extends DeesElement {
       this.showExpanded = false;
       await domtools.convenience.smartdelay.delayFor(50);
       this.isFocused = false;
-    };
+    }
   }
 }