fix(core): update

ts_web/elements/deap-activitylog.ts

@@ -1,4 +1,10 @@
-import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
+import {
+  DeesElement,
+  TemplateResult,
+  property,
+  customElement,
+  html,
+} from '@designestate/dees-element';
 
 import * as domtools from '@designestate/dees-domtools';
 
@@ -7,7 +13,7 @@ export class DeapActivitylog extends DeesElement {
   public static demo = () => html`<deap-activitylog></deap-activitylog>`;
 
   // INSTANCE
-  public render (): TemplateResult {
+  public render(): TemplateResult {
     return html`
       ${domtools.elementBasic.styles}
       <style>
@@ -18,7 +24,7 @@ export class DeapActivitylog extends DeesElement {
           width: 100%;
           max-width: 300px;
           height: 100%;
-          background: #343B43;
+          background: #343b43;
         }
         .maincontainer {
           position: absolute;
@@ -42,12 +48,30 @@ export class DeapActivitylog extends DeesElement {
           font-family: Roboto Mono;
           font-size: 14px;
         }
+
+        .activityContainer {
+          position: absolute;
+          top: 80px;
+          bottom: 0px;
+          width: 100%;
+          padding: 10px;
+        }
+
+        .activityentry {
+          background: rgba(0, 0, 0, 0.2);
+          min-height: 30px;
+          border-radius: 3px;
+          cursor: pointer;
+        }
       </style>
       <div class="maincontainer">
         <div class="topbar">
           <div class="heading">Activity Log</div>
         </div>
+        <div class="activityContainer">
+          <div class="activityentry"></div>
+        </div>
       </div>
     `;
   }
-}
+}

ts_web/elements/deap-maincontent.ts

@@ -10,10 +10,10 @@ export class DeapMaincontent extends DeesElement {
 
   // INSTANCE
   @property()
-  public tabs: interfaces.tab[] = [
-    {key: 'option 1', action: () => {alert('hello')}},
+  public tabs: interfaces.ITab[] = [
+    {key: 'option 1', action: () => {}},
     {key: 'a very long option', action: () => {}},
-    {key: 'option 3', action: () => {}},
+    {key: 'reminder: set your tabs', action: () => {}},
     {key: 'option 4', action: () => {}}
   ];
 
@@ -65,6 +65,15 @@ export class DeapMaincontent extends DeesElement {
           white-space: nowrap;
           margin-right: 20px;
           cursor: pointer;
+          transition: color 0.1s;
+        }
+
+        .topbar .tabsContainer .tab:hover {
+          color: #ffffff;
+        }
+
+        .topbar .tabsContainer .tab.selectedTab {
+          color: #e0e0e0;
         }
 
         .topbar .tabIndicator {
@@ -74,7 +83,7 @@ export class DeapMaincontent extends DeesElement {
           height: 4px;
           width: 50px;
           background: #484848;
-          transition: all 0.3s;
+          transition: all 0.1s;
         }
 
 
@@ -86,7 +95,7 @@ export class DeapMaincontent extends DeesElement {
           <div class="tabsContainer">
             ${this.tabs.map(tabArg => {
               return html`
-                <div class="tab" @click="${() => {this.selectedTab = tabArg; this.updateIndicator(); tabArg.action()}}">${tabArg.key}</div>
+                <div class="tab ${tabArg === this.selectedTab ? 'selectedTab': null}" @click="${() => {this.selectedTab = tabArg; this.updateTabIndicator(); tabArg.action()}}">${tabArg.key}</div>
               `;
             })}
           </div>
@@ -96,22 +105,25 @@ export class DeapMaincontent extends DeesElement {
     `;
   }
 
-  firstUpdated() {
-    this.updateIndicator();
-  }
-
   /**
    * updates the indicator
    */
-  private updateIndicator() {
+  private updateTabIndicator() {
     let selectedTab = this.selectedTab;
-    if (!selectedTab) {
-      selectedTab = this.tabs[0];
-    }
     const tabIndex = this.tabs.indexOf(selectedTab);
     const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(`.tabsContainer .tab:nth-child(${tabIndex + 1})`);
     const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
     tabIndicator.style.width = selectedTabElement.clientWidth + 'px';
     tabIndicator.style.left = selectedTabElement.offsetLeft + 'px';
   }
+
+  private updateTab(tabArg: interfaces.ITab) {
+    this.selectedTab = tabArg;
+    this.updateTabIndicator();
+    this.selectedTab.action();
+  }
+
+  firstUpdated() {
+    this.updateTab(this.tabs[0]);
+  }
 }

ts_web/elements/deap-mainmenu.ts

@@ -19,15 +19,15 @@ export class DeapMainmenu extends DeesElement {
 
    // INSTANCE
    @property()
-   public tabs: interfaces.tab[] = [
-     {key: 'option 1', iconName: 'visibility', action: () => {alert('hello')}},
+   public tabs: interfaces.ITab[] = [
+     {key: 'option 1', iconName: 'visibility', action: () => {}},
      {key: 'option 2', iconName: 'alarm', action: () => {}},
      {key: 'option 3', iconName: 'alarm', action: () => {}},
      {key: 'option 4', iconName: 'alarm', action: () => {}}
    ];
 
    @property()
-   public selectedTab: interfaces.tab;
+   public selectedTab: interfaces.ITab;
 
   public render(): TemplateResult {
     return html`
@@ -48,7 +48,7 @@ export class DeapMainmenu extends DeesElement {
         .mainlogo {
           width: 80px;
           height: 80px;
-          background: rgba(0, 0, 0, 0.2);
+          background: rgba(0, 0, 0, 0.4);
         }
 
         .tabsContainer {
@@ -61,15 +61,16 @@ export class DeapMainmenu extends DeesElement {
           height: 80px;
           text-align: center;
           cursor: pointer;
-          transition: color 0.1s;
+          transition: color 0.1s, background 0.2s;
         }
 
         .tab:hover {
-          background: #222222;
+          background: rgba(0, 0, 0, 0.3);
         }
 
         .tab.selectedTab {
           color: #fff;
+          background: rgba(0, 0, 0, 0.2);
         }
 
         .tab .label {
@@ -86,14 +87,14 @@ export class DeapMainmenu extends DeesElement {
           top: 90px;
           border-top-right-radius: 7px;
           border-bottom-right-radius: 7px;
-          transition: all 0.3s;
+          transition: all 0.1s;
         }
       </style>
       <div class="mainlogo"></div>
       <div class="tabsContainer">
         ${this.tabs.map(tabArg => {
           return html`
-            <div class="tab ${tabArg === this.selectedTab ? 'selectedTab': null}" @click="${() => {this.selectedTab = tabArg; this.updateTabIndicator(); tabArg.action()}}">
+            <div class="tab ${tabArg === this.selectedTab ? 'selectedTab': null}" @click="${() => {this.updateTab(tabArg)}}">
               <dees-icon iconName="${tabArg.iconName}"></dees-icon>
               <div class="label">${tabArg.key}</div>
             </div>
@@ -115,8 +116,13 @@ export class DeapMainmenu extends DeesElement {
     tabIndicator.style.top = selectedTabElement.offsetTop + 10 + 'px';
   }
 
-  firstUpdated() {
-    this.selectedTab = this.tabs[0];
+  updateTab(tabArg: interfaces.ITab) {
+    this.selectedTab = tabArg;
     this.updateTabIndicator();
+    this.selectedTab.action();
+  }
+
+  firstUpdated() {
+    this.updateTab(this.tabs[0]);
   }
 }

ts_web/elements/deap-mainselector.ts

@@ -1,4 +1,12 @@
-import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
+import * as interfaces from './interfaces';
+
+import {
+  DeesElement,
+  TemplateResult,
+  property,
+  customElement,
+  html,
+} from '@designestate/dees-element';
 
 @customElement('deap-mainselector')
 export class DeapMainselector extends DeesElement {
@@ -6,14 +14,20 @@ export class DeapMainselector extends DeesElement {
 
   // INSTANCE
   @property()
-  public selectionOptions: {key: string; action: () => void}[] = [
-    {key: 'option 1', action: () => {alert('hello')}},
-    {key: 'option 2', action: () => {}},
-    {key: 'option 3', action: () => {}},
-    {key: 'option 4', action: () => {}}
+  public selectionOptions: interfaces.ISelectionOption[] = [
+    {
+      key: 'option 1',
+      action: () => {},
+    },
+    { key: 'option 2', action: () => {} },
+    { key: 'option 3', action: () => {} },
+    { key: 'option 4', action: () => {} },
   ];
 
-  public render (): TemplateResult {
+  @property()
+  public selectedOption: interfaces.ISelectionOption = null;
+
+  public render(): TemplateResult {
     return html`
       <style>
         :host {
@@ -37,7 +51,7 @@ export class DeapMainselector extends DeesElement {
           position: absolute;
           height: 80px;
           width: 100%;
-          
+
           background: #333333;
         }
 
@@ -63,7 +77,20 @@ export class DeapMainselector extends DeesElement {
           padding-top: 10px;
           padding-bottom: 10px;
           border-top: 1px solid #707070;
+          border-left: 0px solid rgba(0,0,0,0);
           cursor: pointer;
+          transition: all 0.1s;
+
+        }
+
+        .selectionOptions .selectionOption:hover {
+          border-left: 3px solid #26A69A50;
+          padding-left: 8px;
+        }
+
+        .selectionOptions .selectionOption.selectedOption {
+          border-left: 5px solid #26A69A;
+          padding-left: 10px;
         }
 
         .selectionOptions .selectionOption:first-child {
@@ -80,9 +107,16 @@ export class DeapMainselector extends DeesElement {
           <div class="heading">Properties</div>
         </div>
         <div class="selectionOptions">
-          ${this.selectionOptions.map(selectionOptionArg => {
+          ${this.selectionOptions.map((selectionOptionArg) => {
             return html`
-              <div class="selectionOption" @click="${() => {selectionOptionArg.action()}}">
+              <div
+                class="selectionOption ${this.selectedOption === selectionOptionArg
+                  ? 'selectedOption'
+                  : null}"
+                @click="${() => {
+                  this.selectOption(selectionOptionArg);
+                }}"
+              >
                 ${selectionOptionArg.key}
               </div>
             `;
@@ -91,4 +125,9 @@ export class DeapMainselector extends DeesElement {
       </div>
     `;
   }
-}
+
+  private selectOption(optionArg: interfaces.ISelectionOption) {
+    this.selectedOption = optionArg;
+    this.selectedOption.action();
+  }
+}

ts_web/elements/interfaces/index.ts

@@ -1 +1,2 @@
-export * from './tab';
+export * from './tab';
+export * from './selectionoption';

ts_web/elements/interfaces/selectionoption.ts

@@ -0,0 +1,4 @@
+export interface ISelectionOption {
+  key: string;
+  action: () => void;
+}

ts_web/elements/interfaces/tab.ts

@@ -1,4 +1,4 @@
-export interface tab {
+export interface ITab {
   key: string;
   iconName?: string;
   action: () => void;