fix(core): update
This commit is contained in:
parent
9e685633d3
commit
2f9a88ee80
22375
package-lock.json
generated
22375
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
20
package.json
20
package.json
@ -13,19 +13,19 @@
|
|||||||
"author": "Lossless GmbH",
|
"author": "Lossless GmbH",
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@designestate/dees-catalog": "^1.0.32",
|
"@designestate/dees-catalog": "^1.0.74",
|
||||||
"@designestate/dees-domtools": "^1.0.84",
|
"@designestate/dees-domtools": "^1.0.109",
|
||||||
"@designestate/dees-element": "^1.0.10",
|
"@designestate/dees-element": "^1.0.35",
|
||||||
"@designestate/dees-wcctools": "^1.0.54",
|
"@designestate/dees-wcctools": "^1.0.66",
|
||||||
"@gitzone/tsrun": "^1.2.12",
|
"@gitzone/tsrun": "^1.2.18",
|
||||||
"@losslessone_private/loint-pubapi": "^1.0.10",
|
"@losslessone_private/loint-pubapi": "^1.0.10",
|
||||||
"@pushrocks/smartexpress": "^3.0.100",
|
"@pushrocks/smartexpress": "^3.0.108",
|
||||||
"typescript": "^4.2.3"
|
"typescript": "^4.5.5"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@gitzone/tsbuild": "^2.1.24",
|
"@gitzone/tsbuild": "^2.1.29",
|
||||||
"@gitzone/tsbundle": "^1.0.80",
|
"@gitzone/tsbundle": "^1.0.89",
|
||||||
"@gitzone/tswatch": "^1.0.52",
|
"@gitzone/tswatch": "^1.0.56",
|
||||||
"@pushrocks/projectinfo": "^4.0.5",
|
"@pushrocks/projectinfo": "^4.0.5",
|
||||||
"tslint": "^6.1.3",
|
"tslint": "^6.1.3",
|
||||||
"tslint-config-prettier": "^1.17.0"
|
"tslint-config-prettier": "^1.17.0"
|
||||||
|
@ -4,66 +4,74 @@ import {
|
|||||||
property,
|
property,
|
||||||
customElement,
|
customElement,
|
||||||
html,
|
html,
|
||||||
|
css,
|
||||||
|
cssManager,
|
||||||
} from '@designestate/dees-element';
|
} from '@designestate/dees-element';
|
||||||
|
|
||||||
import * as domtools from '@designestate/dees-domtools';
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
|
|
||||||
@customElement('deap-activitylog')
|
@customElement('deap-activitylog')
|
||||||
export class DeapActivitylog extends DeesElement {
|
export class DeapActivitylog extends DeesElement {
|
||||||
|
// STATIC
|
||||||
public static demo = () => html`<deap-activitylog></deap-activitylog>`;
|
public static demo = () => html`<deap-activitylog></deap-activitylog>`;
|
||||||
|
|
||||||
// INSTANCE
|
// INSTANCE
|
||||||
|
public static styles = [
|
||||||
|
cssManager.defaultStyles,
|
||||||
|
css`
|
||||||
|
:host {
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
height: 100%;
|
||||||
|
background: #343b43;
|
||||||
|
}
|
||||||
|
.maincontainer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
position: absolute;
|
||||||
|
height: 80px;
|
||||||
|
width: calc(100% - 20px);
|
||||||
|
margin: 0px 10px 0px 10px;
|
||||||
|
border-bottom: 1px solid #707070;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .heading {
|
||||||
|
text-align: center;
|
||||||
|
line-height: 80px;
|
||||||
|
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;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
];
|
||||||
|
|
||||||
public render(): TemplateResult {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
${domtools.elementBasic.styles}
|
${domtools.elementBasic.styles}
|
||||||
<style>
|
<style></style>
|
||||||
:host {
|
|
||||||
color: #fff;
|
|
||||||
position: relative;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 300px;
|
|
||||||
height: 100%;
|
|
||||||
background: #343b43;
|
|
||||||
}
|
|
||||||
.maincontainer {
|
|
||||||
position: absolute;
|
|
||||||
top: 0px;
|
|
||||||
left: 0px;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topbar {
|
|
||||||
position: absolute;
|
|
||||||
height: 80px;
|
|
||||||
width: calc(100% - 20px);
|
|
||||||
margin: 0px 10px 0px 10px;
|
|
||||||
border-bottom: 1px solid #707070;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topbar .heading {
|
|
||||||
text-align: center;
|
|
||||||
line-height: 80px;
|
|
||||||
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="maincontainer">
|
||||||
<div class="topbar">
|
<div class="topbar">
|
||||||
<div class="heading">Activity Log</div>
|
<div class="heading">Activity Log</div>
|
||||||
|
@ -1,26 +1,39 @@
|
|||||||
import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
|
import {
|
||||||
|
DeesElement,
|
||||||
|
TemplateResult,
|
||||||
|
property,
|
||||||
|
customElement,
|
||||||
|
html,
|
||||||
|
css,
|
||||||
|
cssManager,
|
||||||
|
} from '@designestate/dees-element';
|
||||||
|
|
||||||
@customElement('deap-base')
|
@customElement('deap-base')
|
||||||
export class DeapBase extends DeesElement {
|
export class DeapBase extends DeesElement {
|
||||||
public static demo = () => html`<deap-base></deap-base>`;
|
public static demo = () => html`<deap-base></deap-base>`;
|
||||||
|
|
||||||
|
public static styles = [
|
||||||
|
cssManager.defaultStyles,
|
||||||
|
css`
|
||||||
|
:host {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.maingrid {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 80px 240px auto 210px;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
];
|
||||||
|
|
||||||
// INSTANCE
|
// INSTANCE
|
||||||
public render(): TemplateResult {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
<style>
|
<style></style>
|
||||||
:host {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.maingrid {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
width: 100%;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 80px 240px auto 210px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="maingrid">
|
<div class="maingrid">
|
||||||
<deap-mainmenu></deap-mainmenu>
|
<deap-mainmenu></deap-mainmenu>
|
||||||
<deap-mainselector></deap-mainselector>
|
<deap-mainselector></deap-mainselector>
|
||||||
@ -29,4 +42,4 @@ export class DeapBase extends DeesElement {
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1,6 +1,14 @@
|
|||||||
import * as interfaces from './interfaces';
|
import * as interfaces from './interfaces';
|
||||||
|
|
||||||
import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
|
import {
|
||||||
|
DeesElement,
|
||||||
|
TemplateResult,
|
||||||
|
property,
|
||||||
|
customElement,
|
||||||
|
html,
|
||||||
|
css,
|
||||||
|
cssManager,
|
||||||
|
} from '@designestate/dees-element';
|
||||||
|
|
||||||
import * as domtools from '@designestate/dees-domtools';
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
|
|
||||||
@ -11,91 +19,107 @@ export class DeapMaincontent extends DeesElement {
|
|||||||
// INSTANCE
|
// INSTANCE
|
||||||
@property()
|
@property()
|
||||||
public tabs: interfaces.ITab[] = [
|
public tabs: interfaces.ITab[] = [
|
||||||
{key: 'option 1', action: () => {}},
|
{ key: 'option 1', action: () => {} },
|
||||||
{key: 'a very long option', action: () => {}},
|
{ key: 'a very long option', action: () => {} },
|
||||||
{key: 'reminder: set your tabs', action: () => {}},
|
{ key: 'reminder: set your tabs', action: () => {} },
|
||||||
{key: 'option 4', action: () => {}}
|
{ key: 'option 4', action: () => {} },
|
||||||
];
|
];
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public selectedTab = null;
|
public selectedTab = null;
|
||||||
|
|
||||||
|
public static styles = [
|
||||||
|
cssManager.defaultStyles,
|
||||||
|
css`
|
||||||
|
:host {
|
||||||
|
color: #fff;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
background: #222222;
|
||||||
|
}
|
||||||
|
.maincontainer {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
right: 0px;
|
||||||
|
top: 0px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 120px;
|
||||||
|
background: #101010;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .heading {
|
||||||
|
padding: 30px 50px 25px 50px;
|
||||||
|
font-family: Roboto Mono;
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .tabsContainer {
|
||||||
|
display: grid;
|
||||||
|
margin-left: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .tabsContainer .tab {
|
||||||
|
color: #a0a0a0;
|
||||||
|
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 {
|
||||||
|
position: absolute;
|
||||||
|
left: 50px;
|
||||||
|
bottom: 0px;
|
||||||
|
height: 4px;
|
||||||
|
width: 50px;
|
||||||
|
background: #484848;
|
||||||
|
transition: all 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainicon {
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
];
|
||||||
|
|
||||||
public render(): TemplateResult {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
${domtools.elementBasic.styles}
|
|
||||||
<style>
|
<style>
|
||||||
:host {
|
|
||||||
color: #fff;
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
background: #222222;
|
|
||||||
}
|
|
||||||
.maincontainer {
|
|
||||||
position: absolute;
|
|
||||||
height: 100%;
|
|
||||||
right: 0px;
|
|
||||||
top: 0px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topbar {
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
height: 120px;
|
|
||||||
background: #101010;
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topbar .heading {
|
|
||||||
padding: 30px 50px 25px 50px;
|
|
||||||
font-family: Roboto Mono;
|
|
||||||
font-size: 25px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.topbar .tabsContainer {
|
.topbar .tabsContainer {
|
||||||
display: grid;
|
grid-template-columns: repeat(${this.tabs.length}, min-content);
|
||||||
margin-left: 50px;
|
|
||||||
grid-template-columns: repeat(${this.tabs.length}, min-content)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.topbar .tabsContainer .tab {
|
|
||||||
color: #a0a0a0;
|
|
||||||
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 {
|
|
||||||
position: absolute;
|
|
||||||
left: 50px;
|
|
||||||
bottom: 0px;
|
|
||||||
height: 4px;
|
|
||||||
width: 50px;
|
|
||||||
background: #484848;
|
|
||||||
transition: all 0.1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.mainicon {}
|
|
||||||
</style>
|
</style>
|
||||||
<div class="maincontainer">
|
<div class="maincontainer">
|
||||||
<div class="topbar">
|
<div class="topbar">
|
||||||
<div class="heading">lossless.com</div>
|
<div class="heading">lossless.com</div>
|
||||||
<div class="tabsContainer">
|
<div class="tabsContainer">
|
||||||
${this.tabs.map(tabArg => {
|
${this.tabs.map((tabArg) => {
|
||||||
return html`
|
return html`
|
||||||
<div class="tab ${tabArg === this.selectedTab ? 'selectedTab': null}" @click="${() => {this.selectedTab = tabArg; this.updateTabIndicator(); 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>
|
</div>
|
||||||
@ -111,7 +135,9 @@ export class DeapMaincontent extends DeesElement {
|
|||||||
private updateTabIndicator() {
|
private updateTabIndicator() {
|
||||||
let selectedTab = this.selectedTab;
|
let selectedTab = this.selectedTab;
|
||||||
const tabIndex = this.tabs.indexOf(selectedTab);
|
const tabIndex = this.tabs.indexOf(selectedTab);
|
||||||
const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(`.tabsContainer .tab:nth-child(${tabIndex + 1})`);
|
const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(
|
||||||
|
`.tabsContainer .tab:nth-child(${tabIndex + 1})`
|
||||||
|
);
|
||||||
const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
|
const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
|
||||||
tabIndicator.style.width = selectedTabElement.clientWidth + 'px';
|
tabIndicator.style.width = selectedTabElement.clientWidth + 'px';
|
||||||
tabIndicator.style.left = selectedTabElement.offsetLeft + 'px';
|
tabIndicator.style.left = selectedTabElement.offsetLeft + 'px';
|
||||||
@ -126,4 +152,4 @@ export class DeapMaincontent extends DeesElement {
|
|||||||
firstUpdated() {
|
firstUpdated() {
|
||||||
this.updateTab(this.tabs[0]);
|
this.updateTab(this.tabs[0]);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -6,6 +6,8 @@ import {
|
|||||||
property,
|
property,
|
||||||
customElement,
|
customElement,
|
||||||
html,
|
html,
|
||||||
|
css,
|
||||||
|
cssManager,
|
||||||
} from '@designestate/dees-element';
|
} from '@designestate/dees-element';
|
||||||
|
|
||||||
import * as domtools from '@designestate/dees-domtools';
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
@ -17,84 +19,93 @@ export class DeapMainmenu extends DeesElement {
|
|||||||
|
|
||||||
// INSTANCE
|
// INSTANCE
|
||||||
|
|
||||||
// INSTANCE
|
// INSTANCE
|
||||||
@property()
|
@property()
|
||||||
public tabs: interfaces.ITab[] = [
|
public tabs: interfaces.ITab[] = [
|
||||||
{key: 'option 1', iconName: 'visibility', action: () => {}},
|
{ key: 'option 1', iconName: 'visibility', action: () => {} },
|
||||||
{key: 'option 2', iconName: 'alarm', action: () => {}},
|
{ key: 'option 2', iconName: 'alarm', action: () => {} },
|
||||||
{key: 'option 3', iconName: 'alarm', action: () => {}},
|
{ key: 'option 3', iconName: 'alarm', action: () => {} },
|
||||||
{key: 'option 4', iconName: 'alarm', action: () => {}}
|
{ key: 'option 4', iconName: 'alarm', action: () => {} },
|
||||||
];
|
];
|
||||||
|
|
||||||
@property()
|
@property()
|
||||||
public selectedTab: interfaces.ITab;
|
public selectedTab: interfaces.ITab;
|
||||||
|
|
||||||
|
public static styles = [
|
||||||
|
cssManager.defaultStyles,
|
||||||
|
css`
|
||||||
|
:host {
|
||||||
|
color: #ccc;
|
||||||
|
z-index: 10;
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 80px;
|
||||||
|
height: 100%;
|
||||||
|
background: #3c3c3c;
|
||||||
|
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainlogo {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background: rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tabsContainer {
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
padding-top: 16px;
|
||||||
|
font-size: 25px;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
text-align: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: color 0.1s, background 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab.selectedTab {
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.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.1s;
|
||||||
|
}
|
||||||
|
`,
|
||||||
|
];
|
||||||
|
|
||||||
public render(): TemplateResult {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
${domtools.elementBasic.styles}
|
<style></style>
|
||||||
<style>
|
|
||||||
:host {
|
|
||||||
color: #CCC;
|
|
||||||
z-index: 10;
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
width: 80px;
|
|
||||||
height: 100%;
|
|
||||||
background: #3c3c3c;
|
|
||||||
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.5);
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mainlogo {
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
background: rgba(0, 0, 0, 0.4);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tabsContainer {
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab {
|
|
||||||
padding-top: 16px;
|
|
||||||
font-size: 25px;
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
text-align: center;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: color 0.1s, background 0.2s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab:hover {
|
|
||||||
background: rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab.selectedTab {
|
|
||||||
color: #fff;
|
|
||||||
background: rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.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.1s;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<div class="mainlogo"></div>
|
<div class="mainlogo"></div>
|
||||||
<div class="tabsContainer">
|
<div class="tabsContainer">
|
||||||
${this.tabs.map(tabArg => {
|
${this.tabs.map((tabArg) => {
|
||||||
return html`
|
return html`
|
||||||
<div class="tab ${tabArg === this.selectedTab ? 'selectedTab': null}" @click="${() => {this.updateTab(tabArg)}}">
|
<div
|
||||||
|
class="tab ${tabArg === this.selectedTab ? 'selectedTab' : null}"
|
||||||
|
@click="${() => {
|
||||||
|
this.updateTab(tabArg);
|
||||||
|
}}"
|
||||||
|
>
|
||||||
<dees-icon iconName="${tabArg.iconName}"></dees-icon>
|
<dees-icon iconName="${tabArg.iconName}"></dees-icon>
|
||||||
<div class="label">${tabArg.key}</div>
|
<div class="label">${tabArg.key}</div>
|
||||||
</div>
|
</div>
|
||||||
@ -111,7 +122,9 @@ export class DeapMainmenu extends DeesElement {
|
|||||||
selectedTab = this.tabs[0];
|
selectedTab = this.tabs[0];
|
||||||
}
|
}
|
||||||
const tabIndex = this.tabs.indexOf(selectedTab);
|
const tabIndex = this.tabs.indexOf(selectedTab);
|
||||||
const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(`.tabsContainer .tab:nth-child(${tabIndex + 1})`);
|
const selectedTabElement: HTMLElement = this.shadowRoot.querySelector(
|
||||||
|
`.tabsContainer .tab:nth-child(${tabIndex + 1})`
|
||||||
|
);
|
||||||
const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
|
const tabIndicator: HTMLElement = this.shadowRoot.querySelector('.tabIndicator');
|
||||||
tabIndicator.style.top = selectedTabElement.offsetTop + 10 + 'px';
|
tabIndicator.style.top = selectedTabElement.offsetTop + 10 + 'px';
|
||||||
}
|
}
|
||||||
|
@ -6,6 +6,8 @@ import {
|
|||||||
property,
|
property,
|
||||||
customElement,
|
customElement,
|
||||||
html,
|
html,
|
||||||
|
css,
|
||||||
|
cssManager,
|
||||||
} from '@designestate/dees-element';
|
} from '@designestate/dees-element';
|
||||||
|
|
||||||
@customElement('deap-mainselector')
|
@customElement('deap-mainselector')
|
||||||
@ -27,10 +29,10 @@ export class DeapMainselector extends DeesElement {
|
|||||||
@property()
|
@property()
|
||||||
public selectedOption: interfaces.ISelectionOption = null;
|
public selectedOption: interfaces.ISelectionOption = null;
|
||||||
|
|
||||||
public render(): TemplateResult {
|
public static styles = [
|
||||||
return html`
|
cssManager.defaultStyles,
|
||||||
<style>
|
css`
|
||||||
:host {
|
:host {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
position: relative;
|
position: relative;
|
||||||
display: block;
|
display: block;
|
||||||
@ -101,6 +103,12 @@ export class DeapMainselector extends DeesElement {
|
|||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
border-bottom: 1px solid #707070;
|
border-bottom: 1px solid #707070;
|
||||||
}
|
}
|
||||||
|
`
|
||||||
|
];
|
||||||
|
|
||||||
|
public render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<style>
|
||||||
</style>
|
</style>
|
||||||
<div class="maincontainer">
|
<div class="maincontainer">
|
||||||
<div class="topbar">
|
<div class="topbar">
|
||||||
|
Loading…
Reference in New Issue
Block a user