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';
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
|
|
||||||
@ -7,7 +13,7 @@ export class DeapActivitylog extends DeesElement {
|
|||||||
public static demo = () => html`<deap-activitylog></deap-activitylog>`;
|
public static demo = () => html`<deap-activitylog></deap-activitylog>`;
|
||||||
|
|
||||||
// INSTANCE
|
// INSTANCE
|
||||||
public render (): TemplateResult {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
${domtools.elementBasic.styles}
|
${domtools.elementBasic.styles}
|
||||||
<style>
|
<style>
|
||||||
@ -18,7 +24,7 @@ export class DeapActivitylog extends DeesElement {
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
background: #343B43;
|
background: #343b43;
|
||||||
}
|
}
|
||||||
.maincontainer {
|
.maincontainer {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -42,11 +48,29 @@ export class DeapActivitylog extends DeesElement {
|
|||||||
font-family: Roboto Mono;
|
font-family: Roboto Mono;
|
||||||
font-size: 14px;
|
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>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="activityContainer">
|
||||||
|
<div class="activityentry"></div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
@ -10,10 +10,10 @@ export class DeapMaincontent extends DeesElement {
|
|||||||
|
|
||||||
// INSTANCE
|
// INSTANCE
|
||||||
@property()
|
@property()
|
||||||
public tabs: interfaces.tab[] = [
|
public tabs: interfaces.ITab[] = [
|
||||||
{key: 'option 1', action: () => {alert('hello')}},
|
{key: 'option 1', action: () => {}},
|
||||||
{key: 'a very long option', action: () => {}},
|
{key: 'a very long option', action: () => {}},
|
||||||
{key: 'option 3', action: () => {}},
|
{key: 'reminder: set your tabs', action: () => {}},
|
||||||
{key: 'option 4', action: () => {}}
|
{key: 'option 4', action: () => {}}
|
||||||
];
|
];
|
||||||
|
|
||||||
@ -65,6 +65,15 @@ export class DeapMaincontent extends DeesElement {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
transition: color 0.1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .tabsContainer .tab:hover {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .tabsContainer .tab.selectedTab {
|
||||||
|
color: #e0e0e0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.topbar .tabIndicator {
|
.topbar .tabIndicator {
|
||||||
@ -74,7 +83,7 @@ export class DeapMaincontent extends DeesElement {
|
|||||||
height: 4px;
|
height: 4px;
|
||||||
width: 50px;
|
width: 50px;
|
||||||
background: #484848;
|
background: #484848;
|
||||||
transition: all 0.3s;
|
transition: all 0.1s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -86,7 +95,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.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>
|
||||||
@ -96,22 +105,25 @@ export class DeapMaincontent extends DeesElement {
|
|||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated() {
|
|
||||||
this.updateIndicator();
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* updates the indicator
|
* updates the indicator
|
||||||
*/
|
*/
|
||||||
private updateIndicator() {
|
private updateTabIndicator() {
|
||||||
let selectedTab = this.selectedTab;
|
let selectedTab = this.selectedTab;
|
||||||
if (!selectedTab) {
|
|
||||||
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.width = selectedTabElement.clientWidth + 'px';
|
tabIndicator.style.width = selectedTabElement.clientWidth + 'px';
|
||||||
tabIndicator.style.left = selectedTabElement.offsetLeft + '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
|
// INSTANCE
|
||||||
@property()
|
@property()
|
||||||
public tabs: interfaces.tab[] = [
|
public tabs: interfaces.ITab[] = [
|
||||||
{key: 'option 1', iconName: 'visibility', action: () => {alert('hello')}},
|
{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.tab;
|
public selectedTab: interfaces.ITab;
|
||||||
|
|
||||||
public render(): TemplateResult {
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
@ -48,7 +48,7 @@ export class DeapMainmenu extends DeesElement {
|
|||||||
.mainlogo {
|
.mainlogo {
|
||||||
width: 80px;
|
width: 80px;
|
||||||
height: 80px;
|
height: 80px;
|
||||||
background: rgba(0, 0, 0, 0.2);
|
background: rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabsContainer {
|
.tabsContainer {
|
||||||
@ -61,15 +61,16 @@ export class DeapMainmenu extends DeesElement {
|
|||||||
height: 80px;
|
height: 80px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: color 0.1s;
|
transition: color 0.1s, background 0.2s;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab:hover {
|
.tab:hover {
|
||||||
background: #222222;
|
background: rgba(0, 0, 0, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab.selectedTab {
|
.tab.selectedTab {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
background: rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab .label {
|
.tab .label {
|
||||||
@ -86,14 +87,14 @@ export class DeapMainmenu extends DeesElement {
|
|||||||
top: 90px;
|
top: 90px;
|
||||||
border-top-right-radius: 7px;
|
border-top-right-radius: 7px;
|
||||||
border-bottom-right-radius: 7px;
|
border-bottom-right-radius: 7px;
|
||||||
transition: all 0.3s;
|
transition: all 0.1s;
|
||||||
}
|
}
|
||||||
</style>
|
</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.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>
|
<dees-icon iconName="${tabArg.iconName}"></dees-icon>
|
||||||
<div class="label">${tabArg.key}</div>
|
<div class="label">${tabArg.key}</div>
|
||||||
</div>
|
</div>
|
||||||
@ -115,8 +116,13 @@ export class DeapMainmenu extends DeesElement {
|
|||||||
tabIndicator.style.top = selectedTabElement.offsetTop + 10 + 'px';
|
tabIndicator.style.top = selectedTabElement.offsetTop + 10 + 'px';
|
||||||
}
|
}
|
||||||
|
|
||||||
firstUpdated() {
|
updateTab(tabArg: interfaces.ITab) {
|
||||||
this.selectedTab = this.tabs[0];
|
this.selectedTab = tabArg;
|
||||||
this.updateTabIndicator();
|
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')
|
@customElement('deap-mainselector')
|
||||||
export class DeapMainselector extends DeesElement {
|
export class DeapMainselector extends DeesElement {
|
||||||
@ -6,14 +14,20 @@ export class DeapMainselector extends DeesElement {
|
|||||||
|
|
||||||
// INSTANCE
|
// INSTANCE
|
||||||
@property()
|
@property()
|
||||||
public selectionOptions: {key: string; action: () => void}[] = [
|
public selectionOptions: interfaces.ISelectionOption[] = [
|
||||||
{key: 'option 1', action: () => {alert('hello')}},
|
{
|
||||||
{key: 'option 2', action: () => {}},
|
key: 'option 1',
|
||||||
{key: 'option 3', action: () => {}},
|
action: () => {},
|
||||||
{key: 'option 4', action: () => {}}
|
},
|
||||||
|
{ key: 'option 2', action: () => {} },
|
||||||
|
{ key: 'option 3', action: () => {} },
|
||||||
|
{ key: 'option 4', action: () => {} },
|
||||||
];
|
];
|
||||||
|
|
||||||
public render (): TemplateResult {
|
@property()
|
||||||
|
public selectedOption: interfaces.ISelectionOption = null;
|
||||||
|
|
||||||
|
public render(): TemplateResult {
|
||||||
return html`
|
return html`
|
||||||
<style>
|
<style>
|
||||||
:host {
|
:host {
|
||||||
@ -63,7 +77,20 @@ export class DeapMainselector extends DeesElement {
|
|||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
border-top: 1px solid #707070;
|
border-top: 1px solid #707070;
|
||||||
|
border-left: 0px solid rgba(0,0,0,0);
|
||||||
cursor: pointer;
|
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 {
|
.selectionOptions .selectionOption:first-child {
|
||||||
@ -80,9 +107,16 @@ export class DeapMainselector extends DeesElement {
|
|||||||
<div class="heading">Properties</div>
|
<div class="heading">Properties</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="selectionOptions">
|
<div class="selectionOptions">
|
||||||
${this.selectionOptions.map(selectionOptionArg => {
|
${this.selectionOptions.map((selectionOptionArg) => {
|
||||||
return html`
|
return html`
|
||||||
<div class="selectionOption" @click="${() => {selectionOptionArg.action()}}">
|
<div
|
||||||
|
class="selectionOption ${this.selectedOption === selectionOptionArg
|
||||||
|
? 'selectedOption'
|
||||||
|
: null}"
|
||||||
|
@click="${() => {
|
||||||
|
this.selectOption(selectionOptionArg);
|
||||||
|
}}"
|
||||||
|
>
|
||||||
${selectionOptionArg.key}
|
${selectionOptionArg.key}
|
||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
@ -91,4 +125,9 @@ export class DeapMainselector extends DeesElement {
|
|||||||
</div>
|
</div>
|
||||||
`;
|
`;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private selectOption(optionArg: interfaces.ISelectionOption) {
|
||||||
|
this.selectedOption = optionArg;
|
||||||
|
this.selectedOption.action();
|
||||||
|
}
|
||||||
}
|
}
|
@ -1 +1,2 @@
|
|||||||
export * from './tab';
|
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;
|
key: string;
|
||||||
iconName?: string;
|
iconName?: string;
|
||||||
action: () => void;
|
action: () => void;
|
||||||
|
Loading…
Reference in New Issue
Block a user