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` -
${tabArg.key}
+
${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} -
- -
- -
+ .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` +
+ +
${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; +}