design.estate/dees-wcctools
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz
2020-11-26 02:28:17 +00:00
parent ebc2c82b7f
commit 40f54c574d
9 changed files with 2473 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
ts_web/elements/wcc-properties.ts
View File

@ -1,20 +1,28 @@
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
import { WccDashboard } from './wcc-dashboard';
export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
export type TTheme = 'bright' | 'dark';
let environment: TEnvironment = 'native';
export const setEnvironment = envArg => {
export const setEnvironment = (envArg) => {
environment = envArg;
};
@customElement('wcc-properties')
export class WccProperties extends LitElement {
@property()
dashboardRef: WccDashboard;
@property()
public selectedItem: TemplateResult | LitElement;
@property()
public selectedViewport = 'native';
public selectedViewport: TEnvironment = 'native';
@property()
public selectedTheme: TTheme = 'dark';
@property()
public warning: string = null;
@ -37,7 +45,7 @@ export class WccProperties extends LitElement {
}
.grid {
display: grid;
grid-template-columns: auto 300px 70px;
grid-template-columns: auto 150px 300px 70px;
}
.properties {
border-right: 1px solid #999;
@ -52,30 +60,35 @@ export class WccProperties extends LitElement {
background: #444;
border: 1px solid #000;
}
.viewports {
.viewportSelector,
.themeSelector {
border-right: 1px solid #999;
}
.viewport-selectors {
.selectorButtons2 {
display: grid;
grid-template-columns: 50% 50%;
}
.selectorButtons4 {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
.viewport {
.button {
padding: 10px;
text-align: center;
border: 1px solid #000;
transition: all 0.2s;
}
.viewport:hover {
.button:hover {
cursor: pointer;
color: #333;
background: #fff;
}
.viewport.selected {
background: #455A64;
.button.selected {
background: #455a64;
}
.viewport.selected:hover {
.button.selected:hover {
cursor: pointer;
color: #ffffff;
background: #455a64;
@ -121,22 +134,39 @@ export class WccProperties extends LitElement {
const returnArray: TemplateResult[] = [];
for (const key of classProperties.keys()) {
returnArray.push(
html`
<div class="property">
${key} / ${classProperties.get(key).type.name}
</div>
`
html` <div class="property">${key} / ${classProperties.get(key).type.name}</div> `
);
}
return returnArray;
}
})()}
</div>
<div class="viewports">
<div class="panelheading">Viewports</div>
<div class="viewport-selectors">
<div class="themeSelector">
<div class="panelheading">Theme</div>
<div class="selectorButtons2">
<div
class="viewport ${this.selectedViewport === 'phone' ? 'selected' : null}"
class="button ${this.selectedTheme === 'dark' ? 'selected' : null}"
@click=${() => {
this.selectTheme('dark');
}}
>
Dark<br /><i class="material-icons">nights_stay</i>
</div>
<div
class="button ${this.selectedTheme === 'bright' ? 'selected' : null}"
@click=${() => {
this.selectTheme('bright');
}}
>
Bright<br /><i class="material-icons">flare</i>
</div>
</div>
</div>
<div class="viewportSelector">
<div class="panelheading">Viewport</div>
<div class="selectorButtons4">
<div
class="button ${this.selectedViewport === 'phone' ? 'selected' : null}"
@click=${() => {
this.selectViewport('phone');
}}
@ -144,7 +174,7 @@ export class WccProperties extends LitElement {
Phone<br /><i class="material-icons">smartphone</i>
</div>
<div
class="viewport ${this.selectedViewport === 'phablet' ? 'selected' : null}"
class="button ${this.selectedViewport === 'phablet' ? 'selected' : null}"
@click=${() => {
this.selectViewport('phablet');
}}
@ -152,7 +182,7 @@ export class WccProperties extends LitElement {
Phablet<br /><i class="material-icons">smartphone</i>
</div>
<div
class="viewport ${this.selectedViewport === 'tablet' ? 'selected' : null}"
class="button ${this.selectedViewport === 'tablet' ? 'selected' : null}"
@click=${() => {
this.selectViewport('tablet');
}}
@ -160,7 +190,10 @@ export class WccProperties extends LitElement {
Tablet<br /><i class="material-icons">tablet</i>
</div>
<div
class="viewport ${this.selectedViewport === 'desktop' || this.selectedViewport === 'native' ? 'selected' : null}"
class="button ${this.selectedViewport === 'desktop' ||
this.selectedViewport === 'native'
? 'selected'
: null}"
@click=${() => {
this.selectViewport('native');
}}
@ -171,19 +204,29 @@ export class WccProperties extends LitElement {
</div>
<div class="docs">Docs</div>
</div>
${this.warning ? html`<div class="warning">
${this.warning}
</div>` : null}
${this.warning ? html`<div class="warning">${this.warning}</div>` : null}
`;
}
public selectTheme(themeArg: TTheme) {
this.selectedTheme = themeArg;
this.dispatchEvent(
new CustomEvent('selectedTheme', {
detail: themeArg,
})
);
console.log(this.dashboardRef.selectedType);
this.dashboardRef.buildUrl();
}
public selectViewport(viewport: TEnvironment) {
this.selectedViewport = viewport;
setEnvironment(viewport);
this.dispatchEvent(
new CustomEvent('selectedViewport', {
detail: viewport
detail: viewport,
})
);
this.dashboardRef.buildUrl();
}
}