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

fix(core): update

Browse Source
This commit is contained in:
Philipp Kunz 2020-05-11 00:36:58 +00:00
parent addec288bd
commit c0900e265b
9 changed files with 495 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
html/index.html
View File

@ -21,6 +21,6 @@
<script src="../ts_web/index.ts"></script>
</head>
<body>
<></>
<wcc-dashboard></wcc-dashboard>
</body>
</html>

9
package-lock.json generated
View File

@ -1933,15 +1933,6 @@
"symbol-tree": "^3.2.4"
}
},
"@pushrocks/parcel-plugin-wrapper": {
"version": "1.0.5",
"resolved": "https://verdaccio.lossless.one/@pushrocks%2fparcel-plugin-wrapper/-/parcel-plugin-wrapper-1.0.5.tgz",
"integrity": "sha512-xsWIffLeBEB6P6V1+y3LHB1fko3e3nh8qDxH5meWcIMe8/BiaXhtDx1NyvHMWUXWFF0UzbQ1FGT9QBUwwyac6Q==",
"dev": true,
"requires": {
"@gitzone/tsrun": "^1.1.17"
}
},
"@pushrocks/projectinfo": {
"version": "4.0.2",
"resolved": "https://verdaccio.lossless.one/@pushrocks%2fprojectinfo/-/projectinfo-4.0.2.tgz",

5
package.json
View File

@ -1,8 +1,8 @@
{
"name": "@losslessone_private/dees-wcctools",
"name": "@designestate/dees-wcctools",
"version": "1.0.18",
"private": false,
"description": "website for lossless.com",
"description": "wcc tools for creating element catalogues",
"main": "dist_ts_web/index.js",
"typings": "dist_ts_web/index.d.ts",
"scripts": {
@ -22,7 +22,6 @@
"devDependencies": {
"@gitzone/tsbuild": "^2.1.8",
"@gitzone/tswatch": "^1.0.30",
"@pushrocks/parcel-plugin-wrapper": "^1.0.5",
"@pushrocks/projectinfo": "^4.0.2",
"tslint": "^5.11.0",
"tslint-config-prettier": "^1.17.0"

80
ts_web/elements/wcc-dashboard.ts Normal file
View File

@ -0,0 +1,80 @@
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
import { WccDefaultElement } from './wcc-defaultelement';
// wcc tools
import './wcc-frame';
import './wcc-sidebar';
import './wcc-properties';
@customElement('wcc-dashboard')
export class WccDashboard extends LitElement {
@property()
public selectedItem: TemplateResult | LitElement = WccDefaultElement as any;
@property()
public selectedInstance;
@property()
public selectedViewport: string = 'desktop';
@property()
public pages: TemplateResult[] = [];
@property()
public elements: LitElement[] = [];
constructor() {
super();
}
public render(): TemplateResult {
return html`
<style>
@import url('https://fonts.googleapis.com/css?family=Roboto');
:host {
font-family: 'Roboto', sans-serif;
background: #fcfcfc;
display: block;
box-sizing: border-box;
}
:host([hidden]) {
display: none;
}
</style>
<wcc-sidebar .pages=${this.pages} .elements=${this.elements} @selectedItem=${eventArg => {
this.selectedItem = eventArg.detail;
}}></wcc-sidebar>
<wcc-properties .selectedItem=${this.selectedItem} .selectedInstance=${this.selectedInstance} @selectedViewport=${eventArg => {this.selectedViewport = eventArg.detail; this.updateSlot();}}></wcc-properties>
<wcc-frame id="wccFrame" viewport=${this.selectedViewport}>
${(() => {
if (this.selectedItem instanceof TemplateResult) {
return this.selectedItem;
} else if (this.selectedItem) {
console.log(this.selectedItem);
const anonItem: any = this.selectedItem;
if (anonItem.demo) {
return html`${anonItem.demo}`;
} else {
alert(`component does not expose a demo property.`);
}
} else {
}
})()}
</wcc-frame>
${this.selectedViewport}
`;
}
public updateSlot() {
console.log('updateSlot');
const oldSelectedItem = this.selectedItem;
this.selectedItem = null;
setTimeout(() => {
this.selectedItem = oldSelectedItem;
}, 0);
}
}

14
ts_web/elements/lele-element.ts → ts_web/elements/wcc-defaultelement.ts
View File

@ -1,8 +1,10 @@
import { LitElement, property, html, customElement } from 'lit-element';
import { TemplateResult } from 'lit-html';
@customElement('lele-element')
export class LeleElement extends LitElement {
@customElement('wcc-defaultelement')
export class WccDefaultElement extends LitElement {
public static demo = html`<wcc-defaultelement></wcc-defaultelement>`;
@property()
public footerText = `Lossless GmbH - 2018`;
@ -20,16 +22,20 @@ export class LeleElement extends LitElement {
@import url('https://fonts.googleapis.com/css?family=Roboto');
:host {
font-family: 'Roboto', sans-serif;
background: #FCFCFC;
background: #333;
text-align: center;
padding:30px;
box-shadow: 0px 0px 5px rgba(0,0,0,0.6);
display: block;
box-sizing: border-box;
color: #fff;
font-size: 30px;
}
:host([hidden]) {
display: none;
}
</style>
<slot></slot>
No Element specified!
`;
}
}

71
ts_web/elements/wcc-frame.ts Normal file
View File

@ -0,0 +1,71 @@
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
const breakpoints = {
desktop: 1240,
tablet: 700,
phablet: 500,
phone: 340,
};
@customElement('wcc-frame')
export class WccFrame extends LitElement {
@property()
public viewport: string;
public render(): TemplateResult {
return html`
<style>
:host {
border: 10px solid #ffaeaf;
background: #222;
position: absolute;
left: 200px;
right: 0px;
top: 0px;
bottom: 100px;
overflow-y: auto;
overflow-x: auto;
${(() => {
switch (this.viewport) {
case 'desktop':
return `
padding: 0px 0px;
`;
case 'tablet':
return `
padding: 0px ${(document.body.clientWidth - 200 - breakpoints.tablet) / 2}px;
`;
case 'phablet':
return `
padding: 0px ${(document.body.clientWidth - 200 - breakpoints.phablet) / 2}px;
`;
case 'phone':
return `
padding: 0px ${(document.body.clientWidth - 200 - breakpoints.phone) / 2}px;
`;
}
})()}
}
.viewport {
position: relative;
${this.viewport !== 'desktop'
? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
: html``}
min-height: 100%;
background:
radial-gradient(#444444 3px, transparent 4px),
radial-gradient(#444444 3px, transparent 4px),
linear-gradient(#222222 4px, transparent 0),
linear-gradient(45deg, transparent 74px, transparent 75px, #444444 75px, #444444 76px, transparent 77px, transparent 109px),
linear-gradient(-45deg, transparent 75px, transparent 76px, #444444 76px, #444444 77px, transparent 78px, transparent 109px),
#222222;
background-size: 109px 109px, 109px 109px,100% 6px, 109px 109px, 109px 109px;
background-position: 54px 55px, 0px 0px, 0px 0px, 0px 0px, 0px 0px;
}
</style>
<div class="viewport">
<slot></slot>
</div>
`;
}
}

182
ts_web/elements/wcc-properties.ts Normal file
View File

@ -0,0 +1,182 @@
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
export type TEnvironment = 'native' | 'desktop' | 'tablet' | 'phablet' | 'phone';
let environment: TEnvironment = 'native';
export const setEnvironment = envArg => {
environment = envArg;
};
@customElement('wcc-properties')
export class WccProperties extends LitElement {
@property()
public selectedItem: TemplateResult | LitElement;
@property()
public selectedInstance;
@property()
public selectedViewport = 'native';
public render(): TemplateResult {
return html`
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style>
:host {
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
position: absolute;
left: 200px;
height: 100px;
bottom: 0px;
right: 0px;
overflow: hidden;
background: #111;
color: #fff;
}
.grid {
display: grid;
grid-template-columns: auto 300px 70px;
}
.properties {
border-right: 1px solid #999;
height: 100px;
overflow-y: auto;
display: grid;
grid-template-columns: 33% 33% 33%;
}
.properties .property {
padding: 5px;
background: #444;
border: 1px solid #000;
}
.viewports {
border-right: 1px solid #999;
}
.viewport-selectors {
display: grid;
grid-template-columns: 25% 25% 25% 25%;
}
.viewport {
padding: 10px;
text-align: center;
border: 1px solid #000;
transition: all 0.2s;
}
.viewport:hover {
cursor: pointer;
color: #333;
background: #fff;
}
.viewport.selected {
background: #455A64;
}
.viewport.selected:hover {
cursor: pointer;
color: #ffffff;
background: #455a64;
}
.panelheading {
padding: 5px;
font-weight: bold;
background: #444;
border: 1px solid #000;
}
.docs {
text-align: center;
line-height: 100px;
text-transform: uppercase;
}
.docs:hover {
cursor: pointer;
color: #333;
background: #fff;
}
</style>
<div class="grid">
<div class="properties">
<div class="panelheading">Properties</div>
${(() => {
if (this.selectedItem && !(this.selectedItem instanceof TemplateResult)) {
const anonItem: any = this.selectedItem;
const classProperties: Map<string, any> = anonItem._classProperties;
const returnArray: TemplateResult[] = [];
for (const key of classProperties.keys()) {
returnArray.push(
html`
<div class="property">
${key} / ${classProperties.get(key).type.name} /
<pre>
${(() => {
const result = this.selectedInstance
? JSON.stringify(this.selectedInstance[key], null, 2)
: null;
return result;
})()}</pre
>
</div>
`
);
}
return returnArray;
}
})()}
</div>
<div class="viewports">
<div class="panelheading">Viewports</div>
<div class="viewport-selectors">
<div
class="viewport ${this.selectedViewport === 'phone' ? 'selected' : null}"
@click=${() => {
this.selectViewport('phone');
}}
>
Phone<br /><i class="material-icons">smartphone</i>
</div>
<div
class="viewport ${this.selectedViewport === 'phablet' ? 'selected' : null}"
@click=${() => {
this.selectViewport('phablet');
}}
>
Phablet<br /><i class="material-icons">smartphone</i>
</div>
<div
class="viewport ${this.selectedViewport === 'tablet' ? 'selected' : null}"
@click=${() => {
this.selectViewport('tablet');
}}
>
Tablet<br /><i class="material-icons">tablet</i>
</div>
<div
class="viewport ${this.selectedViewport === 'desktop' || this.selectedViewport === 'native' ? 'selected' : null}"
@click=${() => {
this.selectViewport('native');
}}
>
Desktop<br /><i class="material-icons">desktop_windows</i>
</div>
</div>
</div>
<div class="docs">Docs</div>
</div>
`;
}
public selectViewport(viewport: TEnvironment) {
this.selectedViewport = viewport;
setEnvironment(viewport);
this.dispatchEvent(
new CustomEvent('selectedViewport', {
detail: viewport
})
);
}
}

147
ts_web/elements/wcc-sidebar.ts Normal file
View File

@ -0,0 +1,147 @@
import { LitElement, property, html, customElement, TemplateResult } from 'lit-element';
@customElement('wcc-sidebar')
export class WccSidebar extends LitElement {
@property()
public pages: { [key: string]: TemplateResult };
@property()
public elements: { [key: string]: LitElement };
@property({ attribute: false })
public selectedItem: LitElement | TemplateResult;
public render(): TemplateResult {
return html`
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<style>
:host {
display: block;
border-right: 1px solid #999;
font-family: 'Roboto', sans-serif;
box-sizing: border-box;
position: absolute;
left: 0px;
width: 200px;
top: 0px;
bottom: 0px;
overflow-y: scroll;
overflow-x: hidden;
background: #222;
color: #fff;
padding: 5px;
}
.heading {
font-size: 24px;
text-align: center;
margin: 20px 5px 5px 5px;
}
.subheading {
text-align: center;
}
.selectOption {
position: relative;
line-height: 24px;
padding: 5px;
transition: all 0.2s;
display: grid;
grid-template-columns: 28px auto;
}
.selectOption:hover {
cursor: pointer;
padding: 5px;
color: #333;
background: #fff;
}
.selectOption.selected {
background: #455A64;;
}
.selectOption.selected:hover {
cursor: pointer;
color: #ffffff;
background: #455A64;
}
.selectOption .material-icons {
color: #666;
display: block;
transition: all 0.2s;
}
.selectOption.selected .material-icons {
color: #000;
}
.selectOption .text {
display: block;
word-wrap: break-word;
word-break: break-all;
max-width: 100%;
}
</style>
<div class="heading">
lele-catalog
</div>
<div class="subheading">
Lossless GmbH
</div>
<div class="menu">
<h3>Live Websites</h3>
<div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">lossless.com</div></div>
<div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">central.eu</div></div>
<div class="selectOption"><i class="material-icons">ondemand_video</i><div class="text">coffee.link</div></div>
<h3>Pages</h3>
${(() => {
const pages = Object.keys(this.pages);
return pages.map(pageName => {
const item = this.pages[pageName];
return html`
<div
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
@click=${() => {
this.selectItem(item);
}}
>
<i class="material-icons">insert_drive_file</i>
<div class="text">${pageName}</div>
</div>
`;
});
})()}
<h3>Elements</h3>
${(() => {
const elements = Object.keys(this.elements);
return elements.map(elementName => {
const item = this.elements[elementName];
return html`
<div
class="selectOption ${this.selectedItem === item ? 'selected' : console.log('hi')}"
@click=${() => {
this.selectItem(item);
}}
>
<i class="material-icons">featured_video</i>
<div class="text">${elementName}</div>
</div>
`;
});
})()}
</menu>
`;
}
public selectItem(item: TemplateResult | LitElement) {
console.log('selected item');
this.selectedItem = item;
this.dispatchEvent(
new CustomEvent('selectedItem', {
detail: item
})
);
}
}

4
ts_web/index.ts
View File

@ -1,5 +1,5 @@
import { LeleElement } from './elements/lele-element';
import { WccDashboard } from './elements/wcc-dashboard';
export {
LeleElement
WccDashboard
};