fix(core): update

2020-05-11 00:36:58 +00:00
parent addec288bd
commit c0900e265b
9 changed files with 495 additions and 19 deletions
--- a/ts_web/elements/wcc-sidebar.ts
+++ b/ts_web/elements/wcc-sidebar.ts
@ -0,0 +1,147 @@
+import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
+
+@customElement('wcc-sidebar')
+export class WccSidebar extends LitElement {
+  @property()
+  public pages: { [key: string]: TemplateResult };
+
+  @property()
+  public elements: { [key: string]: LitElement };
+
+  @property({ attribute: false })
+  public selectedItem: LitElement | TemplateResult;
+
+  public render(): TemplateResult {
+    return html`
+      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
+      <style>
+        :host {
+          display: block;
+          border-right: 1px solid #999;
+          font-family: 'Roboto', sans-serif;
+          box-sizing: border-box;
+          position: absolute;
+          left: 0px;
+          width: 200px;
+          top: 0px;
+          bottom: 0px;
+          overflow-y: scroll;
+          overflow-x: hidden;
+          background: #222;
+          color: #fff;
+          padding: 5px;
+        }
+
+        .heading {
+          font-size: 24px;
+          text-align: center;
+          margin: 20px 5px 5px 5px;
+        }
+        .subheading {
+          text-align: center;
+        }
+        .selectOption {
+          position: relative;
+          line-height: 24px;
+          padding: 5px;
+          transition: all 0.2s;
+          display: grid;
+          grid-template-columns: 28px auto;
+        }
+        .selectOption:hover {
+          cursor: pointer;
+          padding: 5px;
+          color: #333;
+          background: #fff;
+        }
+
+        .selectOption.selected {
+          background: #455A64;;
+        }
+
+        .selectOption.selected:hover {
+          cursor: pointer;
+          color: #ffffff;
+          background: #455A64;
+        }
+
+        .selectOption .material-icons {
+          color: #666;
+          display: block;
+          transition: all 0.2s;
+        }
+
+        .selectOption.selected .material-icons {
+          color: #000;
+        }
+
+        .selectOption .text {
+          display: block;
+          word-wrap: break-word;
+          word-break: break-all;
+          max-width: 100%;
+        }
+
+        
+      </style>
+      <div class="heading">
+        lele-catalog
+      </div>
+      <div class="subheading">
+        Lossless GmbH
+      </div>
+      <div class="menu">
+        <h3>Live Websites</h3>
+        <div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">lossless.com</div></div>
+        <div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">central.eu</div></div>
+        <div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">coffee.link</div></div>
+        <h3>Pages</h3>
+        ${(() => {
+          const pages = Object.keys(this.pages);
+          return pages.map(pageName => {
+            const item = this.pages[pageName];
+            return html`
+              <div
+                class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
+                @click=${() => {
+                  this.selectItem(item);
+                }}
+              >
+                <i class="material-icons">insert_drive_file</i>
+                <div class="text">${pageName}</div>
+              </div>
+            `;
+          });
+        })()}
+        <h3>Elements</h3>
+        ${(() => {
+          const elements = Object.keys(this.elements);
+          return elements.map(elementName => {
+            const item = this.elements[elementName];
+            return html`
+              <div
+                class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
+                @click=${() => {
+                  this.selectItem(item);
+                }}
+              >
+                <i class="material-icons">featured_video</i>
+                <div class="text">${elementName}</div>
+              </div>
+            `;
+          });
+        })()}
+      </menu>
+    `;
+  }
+
+  public selectItem(item: TemplateResult | LitElement) {
+    console.log('selected item');
+    this.selectedItem = item;
+    this.dispatchEvent(
+      new CustomEvent('selectedItem', {
+        detail: item
+      })
+    );
+  }
+}