initial

2024-12-27 01:53:26 +01:00
commit cebae44ff5
21 changed files with 8510 additions and 0 deletions
--- a/ts_web/elements/sio-combox.ts
+++ b/ts_web/elements/sio-combox.ts
@@ -0,0 +1,199 @@
+import {
+  DeesElement,
+  property,
+  html,
+  customElement,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+import * as domtools from '@design.estate/dees-domtools';
+
+import * as deesCatalog from '@design.estate/dees-catalog';
+deesCatalog;
+
+@customElement('sio-combox')
+export class SioCombox extends DeesElement {
+  public static demo = () => html` <sio-combox></sio-combox> `;
+
+  @property({ type: Object })
+  public referenceObject: HTMLElement;
+
+  /**
+   * computes the button offset
+   */
+  public cssComputeHeight() {
+    let height = window.innerHeight < 760 ? window.innerHeight : 760;
+    if (!this.referenceObject) {
+      console.log('SioCombox: no reference object set');
+    }
+    if (this.referenceObject) {
+      console.log(`referenceObject height is ${this.referenceObject.clientHeight}`);
+      height = height - (this.referenceObject.clientHeight + 60);
+    }
+    return height;
+  }
+
+  public cssComputeInnerScroll() {
+    console.log(
+      `SioCombox clientHeight: ${this.shadowRoot.querySelector('.mainbox').clientHeight}`
+    );
+    console.log(
+      `SioCombox content scrollheight is: ${
+        this.shadowRoot.querySelector('.contentbox').clientHeight
+      }`
+    );
+    if (
+      this.shadowRoot.querySelector('.mainbox').clientHeight <
+      this.shadowRoot.querySelector('.contentbox').clientHeight
+    ) {
+      (this.shadowRoot.querySelector('.mainbox') as HTMLElement).style.overflowY = 'scroll';
+    } else {
+      (this.shadowRoot.querySelector('.mainbox') as HTMLElement).style.overflowY = 'hidden';
+    }
+  }
+
+  constructor() {
+    super();
+    domtools.DomTools.setupDomTools();
+  }
+
+  public render(): TemplateResult {
+    return html`
+      ${domtools.elementBasic.styles}
+      <style>
+        :host {
+          overflow: hidden;
+          font-family: 'Dees Sans';
+          position: absolute;
+          display: block;
+          height: ${this.cssComputeHeight()}px;
+          width: 375px;
+          background: ${this.goBright ? '#eeeeee' : '#000000'};
+          border-radius: 16px;
+          border: 1px solid rgba(250, 250, 250, 0.2);
+          right: 0px;
+          z-index: 10000;
+          box-shadow: 0px 0px 5px ${this.goBright ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.5)'};
+          color: ${this.goBright ? '#333' : '#ccc'};
+          cursor: default;
+          user-select: none;
+          text-align: left;
+        }
+
+        .mainbox {
+          position: absolute;
+          height: 100%;
+          width: 100%;
+          overflow: hidden;
+          overscroll-behavior: contain;
+          padding-bottom: 80px;
+        }
+
+        .toppanel {
+          height: 200px;
+          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
+          padding: 20px;
+          --bg-color: ${this.goBright ? '#00000050' : '#ffffff30'};
+          --dot-color: #ffffff00;
+          --dot-size: 1px;
+          --dot-space: 6px;
+
+          background: linear-gradient(45deg, var(--bg-color) 1px, var(--dot-color) 1px) top left;
+          background-size: var(--dot-space) var(--dot-space);
+          margin-bottom: -50px;
+        }
+
+        #greeting {
+          padding-top: 50px;
+          font-family: 'Dees Sans';
+          margin: 0px;
+          font-size: 30px;
+          font-weight: 400;
+        }
+
+        #callToAction {
+          font-family: 'Dees Sans';
+          margin: 0px;
+          font-weight: 400;
+        }
+
+        .quicktabs {
+          position: absolute;
+          z-index: 100;
+          bottom: 30px;
+          display: grid;
+          width: 100%;
+          padding-bottom: 16px;
+          grid-template-columns: repeat(2, 1fr);
+          background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%);
+          padding-top: 24px;
+        }
+
+        .quicktabs .quicktab {
+          text-align: center;
+          width: 100%;
+        }
+        .quicktabs .quicktab .quicktabicon {
+          font-size: 20px;
+          margin-bottom: 8px;
+        }
+
+        .quicktabs .quicktab .quicktabtext {
+          font-size: 12px;
+          font-weight: 600;
+        }
+        
+
+
+        .brandingbox {
+          z-index: 101;
+          text-align: center;
+          position: absolute;
+          width: 100%;
+          bottom: 0px;
+          left: 0px;
+          font-size: 12px;
+          padding: 8px;
+          border-top: 1px solid rgba(250, 250, 250, 0.1);
+          font-family: 'Dees Sans';
+          box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
+          background: ${this.goBright ? '#EEE' : '#000'};
+          color: ${this.goBright ? '#333' : '#777'};
+        }
+      </style>
+      <div class="mainbox">
+        <div class="contentbox">
+          <div class="toppanel">
+            <div id="greeting">Hello :)</div>
+            <div id="callToAction">Ask us anything or share your feedback!</div>
+          </div>
+          <sio-subwidget-conversations></sio-subwidget-conversations>
+          <sio-subwidget-onboardme></sio-subwidget-onboardme>
+        </div>
+      </div>
+      <div class="quicktabs">
+        <div class="quicktab">
+          <div class="quicktabicon">
+            <dees-icon iconFA="message"></dees-icon>
+          </div>
+          <div class="quicktabtext">Conversations</div>
+        </div>
+        <div class="quicktab">
+          <div class="quicktabicon">
+            <dees-icon iconFA="mugHot"></dees-icon>
+          </div>
+          <div class="quicktabtext">Onboarding</div>
+        </div>
+      </div>
+      <div class="brandingbox">powered by social.io</div>
+    `;
+  }
+
+  async updated() {
+    this.cssComputeHeight();
+    window.requestAnimationFrame(() => {
+      setTimeout(() => {
+        this.cssComputeInnerScroll();
+      }, 200);
+    });
+  }
+}