diff --git a/package-lock.json b/package-lock.json
index 64a36ef..7b8eebc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1140,9 +1140,9 @@
}
},
"@designestate/dees-catalog": {
- "version": "1.0.29",
- "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-catalog/-/dees-catalog-1.0.29.tgz",
- "integrity": "sha512-kg2Igsr5gQF5Txrx5cAKRWRcS1FFaVRG0lTFaImV48o9rNiEYCNoI0SvrAUV8w53THdEq4vC3+h3LsxEwXcXnQ==",
+ "version": "1.0.32",
+ "resolved": "https://verdaccio.lossless.one/@designestate%2fdees-catalog/-/dees-catalog-1.0.32.tgz",
+ "integrity": "sha512-+gAJ8RE8zuWdSUlfXRHbK/eCUd4rGORyOJ/5nPjOczVtcm0c8adx0vtbVizUlVv2g8CBTIgX1MMnukLOQYY7KA==",
"requires": {
"@designestate/dees-domtools": "^1.0.84",
"@designestate/dees-element": "^1.0.10",
@@ -10396,9 +10396,9 @@
"dev": true
},
"typescript": {
- "version": "4.2.2",
- "resolved": "https://verdaccio.lossless.one/typescript/-/typescript-4.2.2.tgz",
- "integrity": "sha512-tbb+NVrLfnsJy3M59lsDgrzWIflR4d4TIUjz+heUnHZwdF7YsrMTKoRERiIvI2lvBG95dfpLxB21WZhys1bgaQ=="
+ "version": "4.2.3",
+ "resolved": "https://verdaccio.lossless.one/typescript/-/typescript-4.2.3.tgz",
+ "integrity": "sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw=="
},
"uglify-js": {
"version": "3.10.4",
diff --git a/package.json b/package.json
index 6dea3e1..afee2d6 100644
--- a/package.json
+++ b/package.json
@@ -13,14 +13,14 @@
"author": "Lossless GmbH",
"license": "UNLICENSED",
"dependencies": {
- "@designestate/dees-catalog": "^1.0.29",
+ "@designestate/dees-catalog": "^1.0.32",
"@designestate/dees-domtools": "^1.0.84",
"@designestate/dees-element": "^1.0.10",
"@designestate/dees-wcctools": "^1.0.54",
"@gitzone/tsrun": "^1.2.12",
"@losslessone_private/loint-pubapi": "^1.0.10",
"@pushrocks/smartexpress": "^3.0.100",
- "typescript": "^4.2.2"
+ "typescript": "^4.2.3"
},
"devDependencies": {
"@gitzone/tsbuild": "^2.1.24",
diff --git a/ts_web/elements/deap-maincontent.ts b/ts_web/elements/deap-maincontent.ts
index 9a90c80..663e0db 100644
--- a/ts_web/elements/deap-maincontent.ts
+++ b/ts_web/elements/deap-maincontent.ts
@@ -1,3 +1,5 @@
+import * as interfaces from './interfaces';
+
import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
@@ -8,7 +10,7 @@ export class DeapMaincontent extends DeesElement {
// INSTANCE
@property()
- public tabs: {key: string; action: () => void}[] = [
+ public tabs: interfaces.tab[] = [
{key: 'option 1', action: () => {alert('hello')}},
{key: 'a very long option', action: () => {}},
{key: 'option 3', action: () => {}},
@@ -43,6 +45,7 @@ export class DeapMaincontent extends DeesElement {
width: 100%;
height: 120px;
background: #101010;
+ user-select: none;
}
.topbar .heading {
@@ -58,6 +61,7 @@ export class DeapMaincontent extends DeesElement {
}
.topbar .tabsContainer .tab {
+ color: #a0a0a0;
white-space: nowrap;
margin-right: 20px;
cursor: pointer;
@@ -82,7 +86,7 @@ export class DeapMaincontent extends DeesElement {
${this.tabs.map(tabArg => {
return html`
-
{this.selectedTab = tabArg; this.updateIndicator()}}">${tabArg.key}
+
{this.selectedTab = tabArg; this.updateIndicator(); tabArg.action()}}">${tabArg.key}
`;
})}
diff --git a/ts_web/elements/deap-mainmenu.ts b/ts_web/elements/deap-mainmenu.ts
index 82d0b4d..0b422dd 100644
--- a/ts_web/elements/deap-mainmenu.ts
+++ b/ts_web/elements/deap-mainmenu.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';
import * as domtools from '@designestate/dees-domtools';
import '@designestate/dees-catalog';
@@ -8,40 +16,107 @@ export class DeapMainmenu extends DeesElement {
public static demo = () => html``;
// INSTANCE
- public render (): TemplateResult {
+
+ // INSTANCE
+ @property()
+ public tabs: interfaces.tab[] = [
+ {key: 'option 1', iconName: 'visibility', action: () => {alert('hello')}},
+ {key: 'option 2', iconName: 'alarm', action: () => {}},
+ {key: 'option 3', iconName: 'alarm', action: () => {}},
+ {key: 'option 4', iconName: 'alarm', action: () => {}}
+ ];
+
+ @property()
+ public selectedTab: interfaces.tab;
+
+ public render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
-
-
+ .tabsContainer {
+ }
-
-
-
-
+ .tab {
+ padding-top: 16px;
+ font-size: 25px;
+ width: 80px;
+ height: 80px;
+ text-align: center;
+ cursor: pointer;
+ transition: color 0.1s;
+ }
+
+ .tab:hover {
+ background: #222222;
+ }
+
+ .tab.selectedTab {
+ color: #fff;
+ }
+
+ .tab .label {
+ font-size: 12px;
+ margin-top: 5px;
+ }
+
+ .tabIndicator {
+ background: #4E729A;
+ position: absolute;
+ width: 7px;
+ height: 60px;
+ left: 0px;
+ top: 90px;
+ border-top-right-radius: 7px;
+ border-bottom-right-radius: 7px;
+ transition: all 0.3s;
+ }
+
+
+
+ ${this.tabs.map(tabArg => {
+ return html`
+
{this.selectedTab = tabArg; this.updateTabIndicator(); tabArg.action()}}">
+
+
${tabArg.key}
+
+ `;
+ })}
+
`;
}
-}
\ No newline at end of file
+
+ private async 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.top = selectedTabElement.offsetTop + 10 + 'px';
+ }
+
+ firstUpdated() {
+ this.selectedTab = this.tabs[0];
+ this.updateTabIndicator();
+ }
+}
diff --git a/ts_web/elements/interfaces/index.ts b/ts_web/elements/interfaces/index.ts
new file mode 100644
index 0000000..6ac64fe
--- /dev/null
+++ b/ts_web/elements/interfaces/index.ts
@@ -0,0 +1 @@
+export * from './tab';
\ No newline at end of file
diff --git a/ts_web/elements/interfaces/tab.ts b/ts_web/elements/interfaces/tab.ts
new file mode 100644
index 0000000..4d04527
--- /dev/null
+++ b/ts_web/elements/interfaces/tab.ts
@@ -0,0 +1,5 @@
+export interface tab {
+ key: string;
+ iconName?: string;
+ action: () => void;
+}