fix(core): update
This commit is contained in:
parent
f4507dbaf3
commit
ae920b9466
12
package-lock.json
generated
12
package-lock.json
generated
@ -1140,9 +1140,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@designestate/dees-catalog": {
|
"@designestate/dees-catalog": {
|
||||||
"version": "1.0.29",
|
"version": "1.0.32",
|
||||||
"resolved": "https://verdaccio.lossless.one/@designestate%2fdees-catalog/-/dees-catalog-1.0.29.tgz",
|
"resolved": "https://verdaccio.lossless.one/@designestate%2fdees-catalog/-/dees-catalog-1.0.32.tgz",
|
||||||
"integrity": "sha512-kg2Igsr5gQF5Txrx5cAKRWRcS1FFaVRG0lTFaImV48o9rNiEYCNoI0SvrAUV8w53THdEq4vC3+h3LsxEwXcXnQ==",
|
"integrity": "sha512-+gAJ8RE8zuWdSUlfXRHbK/eCUd4rGORyOJ/5nPjOczVtcm0c8adx0vtbVizUlVv2g8CBTIgX1MMnukLOQYY7KA==",
|
||||||
"requires": {
|
"requires": {
|
||||||
"@designestate/dees-domtools": "^1.0.84",
|
"@designestate/dees-domtools": "^1.0.84",
|
||||||
"@designestate/dees-element": "^1.0.10",
|
"@designestate/dees-element": "^1.0.10",
|
||||||
@ -10396,9 +10396,9 @@
|
|||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"typescript": {
|
"typescript": {
|
||||||
"version": "4.2.2",
|
"version": "4.2.3",
|
||||||
"resolved": "https://verdaccio.lossless.one/typescript/-/typescript-4.2.2.tgz",
|
"resolved": "https://verdaccio.lossless.one/typescript/-/typescript-4.2.3.tgz",
|
||||||
"integrity": "sha512-tbb+NVrLfnsJy3M59lsDgrzWIflR4d4TIUjz+heUnHZwdF7YsrMTKoRERiIvI2lvBG95dfpLxB21WZhys1bgaQ=="
|
"integrity": "sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw=="
|
||||||
},
|
},
|
||||||
"uglify-js": {
|
"uglify-js": {
|
||||||
"version": "3.10.4",
|
"version": "3.10.4",
|
||||||
|
@ -13,14 +13,14 @@
|
|||||||
"author": "Lossless GmbH",
|
"author": "Lossless GmbH",
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@designestate/dees-catalog": "^1.0.29",
|
"@designestate/dees-catalog": "^1.0.32",
|
||||||
"@designestate/dees-domtools": "^1.0.84",
|
"@designestate/dees-domtools": "^1.0.84",
|
||||||
"@designestate/dees-element": "^1.0.10",
|
"@designestate/dees-element": "^1.0.10",
|
||||||
"@designestate/dees-wcctools": "^1.0.54",
|
"@designestate/dees-wcctools": "^1.0.54",
|
||||||
"@gitzone/tsrun": "^1.2.12",
|
"@gitzone/tsrun": "^1.2.12",
|
||||||
"@losslessone_private/loint-pubapi": "^1.0.10",
|
"@losslessone_private/loint-pubapi": "^1.0.10",
|
||||||
"@pushrocks/smartexpress": "^3.0.100",
|
"@pushrocks/smartexpress": "^3.0.100",
|
||||||
"typescript": "^4.2.2"
|
"typescript": "^4.2.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@gitzone/tsbuild": "^2.1.24",
|
"@gitzone/tsbuild": "^2.1.24",
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
import * as interfaces from './interfaces';
|
||||||
|
|
||||||
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';
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
@ -8,7 +10,7 @@ export class DeapMaincontent extends DeesElement {
|
|||||||
|
|
||||||
// INSTANCE
|
// INSTANCE
|
||||||
@property()
|
@property()
|
||||||
public tabs: {key: string; action: () => void}[] = [
|
public tabs: interfaces.tab[] = [
|
||||||
{key: 'option 1', action: () => {alert('hello')}},
|
{key: 'option 1', action: () => {alert('hello')}},
|
||||||
{key: 'a very long option', action: () => {}},
|
{key: 'a very long option', action: () => {}},
|
||||||
{key: 'option 3', action: () => {}},
|
{key: 'option 3', action: () => {}},
|
||||||
@ -43,6 +45,7 @@ export class DeapMaincontent extends DeesElement {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 120px;
|
height: 120px;
|
||||||
background: #101010;
|
background: #101010;
|
||||||
|
user-select: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topbar .heading {
|
.topbar .heading {
|
||||||
@ -58,6 +61,7 @@ export class DeapMaincontent extends DeesElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.topbar .tabsContainer .tab {
|
.topbar .tabsContainer .tab {
|
||||||
|
color: #a0a0a0;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -82,7 +86,7 @@ export class DeapMaincontent extends DeesElement {
|
|||||||
<div class="tabsContainer">
|
<div class="tabsContainer">
|
||||||
${this.tabs.map(tabArg => {
|
${this.tabs.map(tabArg => {
|
||||||
return html`
|
return html`
|
||||||
<div class="tab" @click="${() => {this.selectedTab = tabArg; this.updateIndicator()}}">${tabArg.key}</div>
|
<div class="tab" @click="${() => {this.selectedTab = tabArg; this.updateIndicator(); tabArg.action()}}">${tabArg.key}</div>
|
||||||
`;
|
`;
|
||||||
})}
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
@ -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 * as domtools from '@designestate/dees-domtools';
|
||||||
import '@designestate/dees-catalog';
|
import '@designestate/dees-catalog';
|
||||||
@ -8,40 +16,107 @@ export class DeapMainmenu extends DeesElement {
|
|||||||
public static demo = () => html`<deap-mainmenu></deap-mainmenu>`;
|
public static demo = () => html`<deap-mainmenu></deap-mainmenu>`;
|
||||||
|
|
||||||
// INSTANCE
|
// 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`
|
return html`
|
||||||
${domtools.elementBasic.styles}
|
${domtools.elementBasic.styles}
|
||||||
<style>
|
<style>
|
||||||
:host {
|
:host {
|
||||||
|
color: #CCC;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #3c3c3c;
|
background: #3c3c3c;
|
||||||
box-shadow: 0px 0px 5px rgba(0,0,0,0.5)
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||||
}
|
user-select: none;
|
||||||
|
|
||||||
.maincontainer {
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainlogo {
|
.mainlogo {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
background: rgba(0,0,0,0.2);
|
background: rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mainicon {}
|
.tabsContainer {
|
||||||
</style>
|
}
|
||||||
<div class="maincontainer">
|
|
||||||
<div class="mainlogo">
|
|
||||||
|
|
||||||
</div>
|
.tab {
|
||||||
<div class="mainicon">
|
padding-top: 16px;
|
||||||
<dees-icon ></dees-icon>
|
font-size: 25px;
|
||||||
</div>
|
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;
|
||||||
|
}
|
||||||
|
</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()}}">
|
||||||
|
<dees-icon iconName="${tabArg.iconName}"></dees-icon>
|
||||||
|
<div class="label">${tabArg.key}</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
})}
|
||||||
</div>
|
</div>
|
||||||
|
<div class="tabIndicator"></div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
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();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
1
ts_web/elements/interfaces/index.ts
Normal file
1
ts_web/elements/interfaces/index.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export * from './tab';
|
5
ts_web/elements/interfaces/tab.ts
Normal file
5
ts_web/elements/interfaces/tab.ts
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
export interface tab {
|
||||||
|
key: string;
|
||||||
|
iconName?: string;
|
||||||
|
action: () => void;
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user