fix(core): update
This commit is contained in:
parent
7766356011
commit
d157a3d9cd
0
ts_web/deap-view.ts
Normal file
0
ts_web/deap-view.ts
Normal file
@ -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';
|
||||
|
||||
@ -18,7 +24,7 @@ export class DeapActivitylog extends DeesElement {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
height: 100%;
|
||||
background: #343B43;
|
||||
background: #343b43;
|
||||
}
|
||||
.maincontainer {
|
||||
position: absolute;
|
||||
@ -42,11 +48,29 @@ export class DeapActivitylog extends DeesElement {
|
||||
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="topbar">
|
||||
<div class="heading">Activity Log</div>
|
||||
</div>
|
||||
<div class="activityContainer">
|
||||
<div class="activityentry"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
@ -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 {
|
||||
<div class="tabsContainer">
|
||||
${this.tabs.map(tabArg => {
|
||||
return html`
|
||||
<div class="tab" @click="${() => {this.selectedTab = tabArg; this.updateIndicator(); 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>
|
||||
@ -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]);
|
||||
}
|
||||
}
|
@ -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;
|
||||
}
|
||||
</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()}}">
|
||||
<div class="tab ${tabArg === this.selectedTab ? 'selectedTab': null}" @click="${() => {this.updateTab(tabArg)}}">
|
||||
<dees-icon iconName="${tabArg.iconName}"></dees-icon>
|
||||
<div class="label">${tabArg.key}</div>
|
||||
</div>
|
||||
@ -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]);
|
||||
}
|
||||
}
|
||||
|
@ -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,13 +14,19 @@ export class DeapMainselector extends DeesElement {
|
||||
|
||||
// INSTANCE
|
||||
@property()
|
||||
public selectionOptions: {key: string; action: () => void}[] = [
|
||||
{key: 'option 1', action: () => {alert('hello')}},
|
||||
public selectionOptions: interfaces.ISelectionOption[] = [
|
||||
{
|
||||
key: 'option 1',
|
||||
action: () => {},
|
||||
},
|
||||
{ key: 'option 2', action: () => {} },
|
||||
{ key: 'option 3', action: () => {} },
|
||||
{key: 'option 4', action: () => {}}
|
||||
{ key: 'option 4', action: () => {} },
|
||||
];
|
||||
|
||||
@property()
|
||||
public selectedOption: interfaces.ISelectionOption = null;
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<style>
|
||||
@ -63,7 +77,20 @@ export class DeapMainselector extends DeesElement {
|
||||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
border-top: 1px solid #707070;
|
||||
border-left: 0px solid rgba(0,0,0,0);
|
||||
cursor: pointer;
|
||||
transition: all 0.1s;
|
||||
|
||||
}
|
||||
|
||||
.selectionOptions .selectionOption:hover {
|
||||
border-left: 3px solid #26A69A50;
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.selectionOptions .selectionOption.selectedOption {
|
||||
border-left: 5px solid #26A69A;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.selectionOptions .selectionOption:first-child {
|
||||
@ -80,9 +107,16 @@ export class DeapMainselector extends DeesElement {
|
||||
<div class="heading">Properties</div>
|
||||
</div>
|
||||
<div class="selectionOptions">
|
||||
${this.selectionOptions.map(selectionOptionArg => {
|
||||
${this.selectionOptions.map((selectionOptionArg) => {
|
||||
return html`
|
||||
<div class="selectionOption" @click="${() => {selectionOptionArg.action()}}">
|
||||
<div
|
||||
class="selectionOption ${this.selectedOption === selectionOptionArg
|
||||
? 'selectedOption'
|
||||
: null}"
|
||||
@click="${() => {
|
||||
this.selectOption(selectionOptionArg);
|
||||
}}"
|
||||
>
|
||||
${selectionOptionArg.key}
|
||||
</div>
|
||||
`;
|
||||
@ -91,4 +125,9 @@ export class DeapMainselector extends DeesElement {
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private selectOption(optionArg: interfaces.ISelectionOption) {
|
||||
this.selectedOption = optionArg;
|
||||
this.selectedOption.action();
|
||||
}
|
||||
}
|
@ -1 +1,2 @@
|
||||
export * from './tab';
|
||||
export * from './selectionoption';
|
||||
|
4
ts_web/elements/interfaces/selectionoption.ts
Normal file
4
ts_web/elements/interfaces/selectionoption.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export interface ISelectionOption {
|
||||
key: string;
|
||||
action: () => void;
|
||||
}
|
@ -1,4 +1,4 @@
|
||||
export interface tab {
|
||||
export interface ITab {
|
||||
key: string;
|
||||
iconName?: string;
|
||||
action: () => void;
|
||||
|
Loading…
Reference in New Issue
Block a user