fix(core): update
This commit is contained in:
parent
7d9987f904
commit
1875a44ee5
@ -13,6 +13,7 @@
|
|||||||
},
|
},
|
||||||
"npmci": {
|
"npmci": {
|
||||||
"npmGlobalTools": [],
|
"npmGlobalTools": [],
|
||||||
"npmAccessLevel": "public"
|
"npmAccessLevel": "private",
|
||||||
|
"npmRegistryUrl": "verdaccio.lossless.one"
|
||||||
}
|
}
|
||||||
}
|
}
|
1048
package-lock.json
generated
1048
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
15
package.json
15
package.json
@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "@designestate/deap-catalog",
|
"name": "@designestate_private/deap-catalog",
|
||||||
"version": "1.0.56",
|
"version": "1.0.56",
|
||||||
"private": false,
|
"private": false,
|
||||||
"description": "a catalog with app webcomponents",
|
"description": "a catalog with app webcomponents",
|
||||||
@ -13,13 +13,14 @@
|
|||||||
"author": "Lossless GmbH",
|
"author": "Lossless GmbH",
|
||||||
"license": "UNLICENSED",
|
"license": "UNLICENSED",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@designestate/dees-domtools": "^1.0.41",
|
"@designestate/dees-catalog": "^1.0.29",
|
||||||
"@designestate/dees-wcctools": "^1.0.37",
|
"@designestate/dees-domtools": "^1.0.84",
|
||||||
|
"@designestate/dees-element": "^1.0.10",
|
||||||
|
"@designestate/dees-wcctools": "^1.0.54",
|
||||||
"@gitzone/tsrun": "^1.2.12",
|
"@gitzone/tsrun": "^1.2.12",
|
||||||
"@losslessone_private/loint-pubapi": "^1.0.9",
|
"@losslessone_private/loint-pubapi": "^1.0.10",
|
||||||
"@pushrocks/smartexpress": "^3.0.76",
|
"@pushrocks/smartexpress": "^3.0.100",
|
||||||
"lit-element": "^2.3.1",
|
"typescript": "^4.2.2"
|
||||||
"typescript": "^3.9.7"
|
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@gitzone/tsbuild": "^2.1.24",
|
"@gitzone/tsbuild": "^2.1.24",
|
||||||
|
53
ts_web/elements/deap-activitylog.ts
Normal file
53
ts_web/elements/deap-activitylog.ts
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
|
||||||
|
|
||||||
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
|
|
||||||
|
@customElement('deap-activitylog')
|
||||||
|
export class DeapActivitylog extends DeesElement {
|
||||||
|
public static demo = () => html`<deap-activitylog></deap-activitylog>`;
|
||||||
|
|
||||||
|
// INSTANCE
|
||||||
|
public render (): TemplateResult {
|
||||||
|
return html`
|
||||||
|
${domtools.elementBasic.styles}
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="maincontainer">
|
||||||
|
<div class="topbar">
|
||||||
|
<div class="heading">Activity Log</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
32
ts_web/elements/deap-base.ts
Normal file
32
ts_web/elements/deap-base.ts
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
|
||||||
|
|
||||||
|
@customElement('deap-base')
|
||||||
|
export class DeapBase extends DeesElement {
|
||||||
|
public static demo = () => html`<deap-base></deap-base>`;
|
||||||
|
|
||||||
|
// INSTANCE
|
||||||
|
public render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<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">
|
||||||
|
<deap-mainmenu></deap-mainmenu>
|
||||||
|
<deap-mainselector></deap-mainselector>
|
||||||
|
<deap-maincontent></deap-maincontent>
|
||||||
|
<deap-activitylog></deap-activitylog>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
113
ts_web/elements/deap-maincontent.ts
Normal file
113
ts_web/elements/deap-maincontent.ts
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
|
||||||
|
|
||||||
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
|
|
||||||
|
@customElement('deap-maincontent')
|
||||||
|
export class DeapMaincontent extends DeesElement {
|
||||||
|
public static demo = () => html`<deap-maincontent></deap-maincontent>`;
|
||||||
|
|
||||||
|
// INSTANCE
|
||||||
|
@property()
|
||||||
|
public tabs: {key: string; action: () => void}[] = [
|
||||||
|
{key: 'option 1', action: () => {alert('hello')}},
|
||||||
|
{key: 'a very long option', action: () => {}},
|
||||||
|
{key: 'option 3', action: () => {}},
|
||||||
|
{key: 'option 4', action: () => {}}
|
||||||
|
];
|
||||||
|
|
||||||
|
@property()
|
||||||
|
public selectedTab = null;
|
||||||
|
|
||||||
|
public render(): TemplateResult {
|
||||||
|
return html`
|
||||||
|
${domtools.elementBasic.styles}
|
||||||
|
<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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .heading {
|
||||||
|
padding: 30px 50px 25px 50px;
|
||||||
|
font-family: Roboto Mono;
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .tabsContainer {
|
||||||
|
display: grid;
|
||||||
|
margin-left: 50px;
|
||||||
|
grid-template-columns: repeat(${this.tabs.length}, min-content)
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .tabsContainer .tab {
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .tabIndicator {
|
||||||
|
position: absolute;
|
||||||
|
left: 50px;
|
||||||
|
bottom: 0px;
|
||||||
|
height: 4px;
|
||||||
|
width: 50px;
|
||||||
|
background: #484848;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.mainicon {}
|
||||||
|
</style>
|
||||||
|
<div class="maincontainer">
|
||||||
|
<div class="topbar">
|
||||||
|
<div class="heading">lossless.com</div>
|
||||||
|
<div class="tabsContainer">
|
||||||
|
${this.tabs.map(tabArg => {
|
||||||
|
return html`
|
||||||
|
<div class="tab" @click="${() => {this.selectedTab = tabArg; this.updateIndicator()}}">${tabArg.key}</div>
|
||||||
|
`;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
<div class="tabIndicator"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
firstUpdated() {
|
||||||
|
this.updateIndicator();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* updates the indicator
|
||||||
|
*/
|
||||||
|
private updateIndicator() {
|
||||||
|
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';
|
||||||
|
}
|
||||||
|
}
|
47
ts_web/elements/deap-mainmenu.ts
Normal file
47
ts_web/elements/deap-mainmenu.ts
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
|
||||||
|
|
||||||
|
import * as domtools from '@designestate/dees-domtools';
|
||||||
|
import '@designestate/dees-catalog';
|
||||||
|
|
||||||
|
@customElement('deap-mainmenu')
|
||||||
|
export class DeapMainmenu extends DeesElement {
|
||||||
|
public static demo = () => html`<deap-mainmenu></deap-mainmenu>`;
|
||||||
|
|
||||||
|
// INSTANCE
|
||||||
|
public render (): TemplateResult {
|
||||||
|
return html`
|
||||||
|
${domtools.elementBasic.styles}
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
z-index: 10;
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 80px;
|
||||||
|
height: 100%;
|
||||||
|
background: #3c3c3c;
|
||||||
|
box-shadow: 0px 0px 5px rgba(0,0,0,0.5)
|
||||||
|
}
|
||||||
|
|
||||||
|
.maincontainer {
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainlogo {
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background: rgba(0,0,0,0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.mainicon {}
|
||||||
|
</style>
|
||||||
|
<div class="maincontainer">
|
||||||
|
<div class="mainlogo">
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="mainicon">
|
||||||
|
<dees-icon ></dees-icon>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
94
ts_web/elements/deap-mainselector.ts
Normal file
94
ts_web/elements/deap-mainselector.ts
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element';
|
||||||
|
|
||||||
|
@customElement('deap-mainselector')
|
||||||
|
export class DeapMainselector extends DeesElement {
|
||||||
|
public static demo = () => html`<deap-mainselector></deap-mainselector>`;
|
||||||
|
|
||||||
|
// INSTANCE
|
||||||
|
@property()
|
||||||
|
public selectionOptions: {key: string; action: () => void}[] = [
|
||||||
|
{key: 'option 1', action: () => {alert('hello')}},
|
||||||
|
{key: 'option 2', action: () => {}},
|
||||||
|
{key: 'option 3', action: () => {}},
|
||||||
|
{key: 'option 4', action: () => {}}
|
||||||
|
];
|
||||||
|
|
||||||
|
public render (): TemplateResult {
|
||||||
|
return html`
|
||||||
|
<style>
|
||||||
|
:host {
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 300px;
|
||||||
|
height: 100%;
|
||||||
|
background: #3c3c3c;
|
||||||
|
}
|
||||||
|
.maincontainer {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
left: 0px;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar {
|
||||||
|
position: absolute;
|
||||||
|
height: 80px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
background: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topbar .heading {
|
||||||
|
padding-left: 20px;
|
||||||
|
line-height: 80px;
|
||||||
|
font-family: Roboto Mono;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectionOptions {
|
||||||
|
position: absolute;
|
||||||
|
top: 80px;
|
||||||
|
left: 0px;
|
||||||
|
width: 100%;
|
||||||
|
font-family: Roboto Mono;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectionOptions .selectionOption {
|
||||||
|
margin-left: 20px;
|
||||||
|
margin-right: 20px;
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 10px;
|
||||||
|
border-top: 1px solid #707070;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectionOptions .selectionOption:first-child {
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.selectionOptions .selectionOption:last-child {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border-bottom: 1px solid #707070;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<div class="maincontainer">
|
||||||
|
<div class="topbar">
|
||||||
|
<div class="heading">Properties</div>
|
||||||
|
</div>
|
||||||
|
<div class="selectionOptions">
|
||||||
|
${this.selectionOptions.map(selectionOptionArg => {
|
||||||
|
return html`
|
||||||
|
<div class="selectionOption" @click="${() => {selectionOptionArg.action()}}">
|
||||||
|
${selectionOptionArg.key}
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
}
|
@ -1 +1,5 @@
|
|||||||
|
export * from './deap-activitylog';
|
||||||
export * from './deap-base';
|
export * from './deap-base';
|
||||||
|
export * from './deap-maincontent';
|
||||||
|
export * from './deap-mainmenu';
|
||||||
|
export * from './deap-mainselector';
|
@ -1,8 +1 @@
|
|||||||
export * from './elements/index';
|
export * from './elements/index';
|
||||||
|
|
||||||
import * as themelogic from './themelogic';
|
|
||||||
|
|
||||||
export {
|
|
||||||
themelogic
|
|
||||||
};
|
|
||||||
|
|
||||||
|
@ -1,5 +0,0 @@
|
|||||||
import * as leleCv from './lelecv';
|
|
||||||
|
|
||||||
export {
|
|
||||||
leleCv
|
|
||||||
}
|
|
@ -1,3 +0,0 @@
|
|||||||
|
|
||||||
export const backgroundAccent = '#303f9f';
|
|
||||||
export const pageWidth = '1200px';
|
|
Loading…
Reference in New Issue
Block a user