From d157a3d9cdfcba51cc08b90e69085c5a3cbae126 Mon Sep 17 00:00:00 2001 From: Phil Kunz Date: Sat, 6 Mar 2021 18:59:00 +0000 Subject: [PATCH] fix(core): update --- ts_web/deap-view.ts | 0 ts_web/elements/deap-activitylog.ts | 32 ++++++++-- ts_web/elements/deap-maincontent.ts | 38 ++++++++---- ts_web/elements/deap-mainmenu.ts | 26 +++++--- ts_web/elements/deap-mainselector.ts | 61 +++++++++++++++---- ts_web/elements/interfaces/index.ts | 3 +- ts_web/elements/interfaces/selectionoption.ts | 4 ++ ts_web/elements/interfaces/tab.ts | 2 +- 8 files changed, 126 insertions(+), 40 deletions(-) create mode 100644 ts_web/deap-view.ts create mode 100644 ts_web/elements/interfaces/selectionoption.ts diff --git a/ts_web/deap-view.ts b/ts_web/deap-view.ts new file mode 100644 index 0000000..e69de29 diff --git a/ts_web/elements/deap-activitylog.ts b/ts_web/elements/deap-activitylog.ts index 4172269..00535d1 100644 --- a/ts_web/elements/deap-activitylog.ts +++ b/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``; // INSTANCE - public render (): TemplateResult { + public render(): TemplateResult { return html` ${domtools.elementBasic.styles}
Activity Log
+
+
+
`; } -} \ No newline at end of file +} diff --git a/ts_web/elements/deap-maincontent.ts b/ts_web/elements/deap-maincontent.ts index 663e0db..8aa6874 100644 --- a/ts_web/elements/deap-maincontent.ts +++ b/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 {
${this.tabs.map(tabArg => { return html` -
${tabArg.key}
+
${tabArg.key}
`; })}
@@ -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]); + } } \ No newline at end of file diff --git a/ts_web/elements/deap-mainmenu.ts b/ts_web/elements/deap-mainmenu.ts index 0b422dd..12a8644 100644 --- a/ts_web/elements/deap-mainmenu.ts +++ b/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; }
${this.tabs.map(tabArg => { return html` -
+
${tabArg.key}
@@ -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]); } } diff --git a/ts_web/elements/deap-mainselector.ts b/ts_web/elements/deap-mainselector.ts index b62ab6e..bcc1aab 100644 --- a/ts_web/elements/deap-mainselector.ts +++ b/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`