1.0.67

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uptimelink/webwidget",
-  "version": "1.0.56",
+  "version": "1.0.67",
   "private": false,
   "description": "the webwidget for public use of uptimelink",
   "main": "dist_ts_web/index.js",
@@ -13,18 +13,16 @@
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@designestate/dees-domtools": "^1.0.41",
+    "@designestate/dees-domtools": "^1.0.84",
-    "@designestate/dees-wcctools": "^1.0.37",
+    "@designestate/dees-element": "^1.0.10",
+    "@designestate/dees-wcctools": "^1.0.54",
     "@gitzone/tsrun": "^1.2.12",
-    "@losslessone_private/loint-pubapi": "^1.0.9",
+    "typescript": "^4.2.3"
-    "@pushrocks/smartexpress": "^3.0.76",
-    "lit-element": "^2.3.1",
-    "typescript": "^3.9.7"
   },
   "devDependencies": {
     "@gitzone/tsbuild": "^2.1.24",
-    "@gitzone/tsbundle": "^1.0.72",
+    "@gitzone/tsbundle": "^1.0.80",
-    "@gitzone/tswatch": "^1.0.50",
+    "@gitzone/tswatch": "^1.0.52",
     "@pushrocks/projectinfo": "^4.0.5",
     "tslint": "^6.1.3",
     "tslint-config-prettier": "^1.17.0"

ts_web/elements/uptimelink-webwidget.ts

@@ -1,8 +1,14 @@
-import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
 import * as domtools from '@designestate/dees-domtools';
 
+declare global {
+  interface HTMLElementTagNameMap {
+    'uptimelink-webwidget': UptimelinkWebwidget;
+  }
+}
+
 @customElement('uptimelink-webwidget')
-export class UptimelinkWebwidget extends LitElement {
+export class UptimelinkWebwidget extends DeesElement {
   public static demo = () => html`
     <uptimelink-webwidget projectSlug="uptime.link"></uptimelink-webwidget>
   `;
@@ -10,31 +16,61 @@ export class UptimelinkWebwidget extends LitElement {
   @property()
   public projectSlug: string;
 
+  @property()
+  public isFocused = false;
+
+  @property()
+  public isElevated = false;
+
+  @property()
+  public showExpanded: boolean = false;
+
   constructor() {
     super();
     domtools.DomTools.setupDomTools();
+    this.setupEventing();
   }
 
   public render(): TemplateResult {
     return html`
       ${domtools.elementBasic.styles}
       <style>
+        :host {
+          position: relative;
+          display: block;
+          height: 30px;
+          z-index: ${this.isElevated ? '10' : 'auto'} ;
+        }
         .mainbox {
+          position: relative;
+          line-height: 1em;
           margin: auto;
-          display: grid;
-          grid-template-columns: 26px auto;
           font-family: Roboto;
           font-weight: 400;
           font-size: 13px;
           box-sizing: border-box;
           width: 150px;
-          border-radius: 20px;
+          border-radius: 15px;
           height: 30px;
-          background: #111;
+          background: ${this.goBright ? '#fff' : '#222' };
+          box-shadow: ${this.goBright ? '0px 0px 5px rgba(0,0,0,0.1)' : ''};
           padding: 5px;
-          color: #CCC;
+          color: ${this.goBright ? '#333' : '#CCC' };
           cursor: pointer;
+          transition: all 0.2s;
+          overflow: hidden;
         }
+
+        .firstLine {
+          display: grid;
+          grid-template-columns: 26px auto;
+        }
+
+        .mainbox.focused {
+          width: 200px;
+          height: 118px;
+        }
+
         .statusindicator {
           height: 20px;
           width: 20px;
@@ -44,11 +80,119 @@ export class UptimelinkWebwidget extends LitElement {
         .statustext {
           padding-top: 3px;
         }
+
+        .expanded {
+          opacity: 0;
+          transition: opacity 0.2s;
+        }
+
+        .miniHeading {
+          position: absolute;
+          width: 190px;
+          top: 25px;
+          left: calc(50% - 95px);
+
+          margin-top: 10px;
+          font-size: 12px;
+        }
+
+        .miniOverview24h {
+          position: absolute;
+          top: 55px;
+          left: calc(50% - 95px);
+          background: ${this.goBright ? 'rgba(0,0,0,0.07)' : 'rgba(255,255,255,0.07)'};
+          border-radius: 3px;
+          width: 190px;
+          height: 30px;
+          display: grid;
+          padding: 3px 3px;
+          grid-template-columns: repeat(30, 4px);
+          grid-column-gap: 3px;
+        }
+
+        .miniOverview24h .statusBar {
+          background: ${this.goBright ? 'rgba(0,0,0,0.15)' : 'rgba(255,255,255,0.15)'};
+          border-radius: 10px;
+        }
+
+        .miniOverview24h .statusBar.ok {
+          background:  #66BB6A;
+        }
+
+        .viewStatuspage {
+          position: absolute;
+          width: 190px;
+          top: 80px;
+          left: calc(50% - 95px);
+          text-align: center;
+          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;
+          transition: background 0.1s;
+        }
+
+        .viewStatuspage:hover {
+          background: ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(255,255,255,0.1)'};
+        }
       </style>
-      <div class="mainbox">
+      <div class="mainbox ${this.isFocused ? 'focused' : null}">
+        <div class="firstLine">
           <div class="statusindicator"></div>
           <div class="statustext">All systems are up!</div>
         </div>
+        ${this.showExpanded ? html`
+          <div class="expanded">
+            <div class="miniHeading">
+              last 26 hours:
+            </div>
+            <div class="miniOverview24h">
+              ${(() => {
+                let counter = 0;
+                const returnArray = [];
+                while(counter < 26) {
+                  returnArray.push(html`<div class="statusBar ok"></div>`)
+                  counter++;
+                };
+                return returnArray;
+              })()}
+            </div>
+            <div class="viewStatuspage">View full Statuspage ...</div>
+          </div>
+        ` : null}
+      </div>
     `;
   }
+
+  private async setupEventing() {
+    await this.updateComplete;
+    const mainbox: HTMLDivElement = this.shadowRoot.querySelector('.mainbox');
+    mainbox.onmouseenter = async () => {
+      this.isElevated = true;
+      this.isFocused = true;
+      await domtools.DomTools.getGlobalDomToolsSync().convenience.smartdelay.delayFor(200);
+      if (!this.isFocused) {
+        return;
+      }
+      this.showExpanded = true;
+      await this.performUpdate();
+      await (await this.domtoolsPromise).convenience.smartdelay.delayFor(50);
+      const expandedDiv = this.shadowRoot.querySelector('.expanded') as HTMLElement;
+      expandedDiv.style.opacity = '1';
+    };
+    mainbox.onmouseleave = async () => {
+      (await this.domtoolsPromise).convenience.smartdelay.delayFor(200).then(() => {
+        if (!this.isFocused) {
+          this.isElevated = false;
+        }
+      });
+      if (!this.showExpanded) {
+        this.isFocused = false;
+        return;
+      }
+      this.showExpanded = false;
+      await domtools.DomTools.getGlobalDomToolsSync().convenience.smartdelay.delayFor(50);
+      this.isFocused = false;
+    }
+  }
 }