design.estate/dees-appui-catalog
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 2022-01-31 14:07:15 +01:00
parent 9e685633d3
commit 2f9a88ee80
7 changed files with 19163 additions and 3724 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22327
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

20
package.json
View File

@ -13,19 +13,19 @@
"author": "Lossless GmbH", "author": "Lossless GmbH",
"license": "UNLICENSED", "license": "UNLICENSED",
"dependencies": { "dependencies": {
"@designestate/dees-catalog": "^1.0.32", "@designestate/dees-catalog": "^1.0.74",
"@designestate/dees-domtools": "^1.0.84", "@designestate/dees-domtools": "^1.0.109",
"@designestate/dees-element": "^1.0.10", "@designestate/dees-element": "^1.0.35",
"@designestate/dees-wcctools": "^1.0.54", "@designestate/dees-wcctools": "^1.0.66",
"@gitzone/tsrun": "^1.2.12", "@gitzone/tsrun": "^1.2.18",
"@losslessone_private/loint-pubapi": "^1.0.10", "@losslessone_private/loint-pubapi": "^1.0.10",
"@pushrocks/smartexpress": "^3.0.100", "@pushrocks/smartexpress": "^3.0.108",
"typescript": "^4.2.3" "typescript": "^4.5.5"
}, },
"devDependencies": { "devDependencies": {
"@gitzone/tsbuild": "^2.1.24", "@gitzone/tsbuild": "^2.1.29",
"@gitzone/tsbundle": "^1.0.80", "@gitzone/tsbundle": "^1.0.89",
"@gitzone/tswatch": "^1.0.52", "@gitzone/tswatch": "^1.0.56",
"@pushrocks/projectinfo": "^4.0.5", "@pushrocks/projectinfo": "^4.0.5",
"tslint": "^6.1.3", "tslint": "^6.1.3",
"tslint-config-prettier": "^1.17.0" "tslint-config-prettier": "^1.17.0"

18
ts_web/elements/deap-activitylog.ts
View File

@ -4,19 +4,21 @@ import {
property, property,
customElement, customElement,
html, html,
css,
cssManager,
} from '@designestate/dees-element'; } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
@customElement('deap-activitylog') @customElement('deap-activitylog')
export class DeapActivitylog extends DeesElement { export class DeapActivitylog extends DeesElement {
// STATIC
public static demo = () => html`<deap-activitylog></deap-activitylog>`; public static demo = () => html`<deap-activitylog></deap-activitylog>`;
// INSTANCE // INSTANCE
public render(): TemplateResult { public static styles = [
return html` cssManager.defaultStyles,
${domtools.elementBasic.styles} css`
<style>
:host { :host {
color: #fff; color: #fff;
position: relative; position: relative;
@ -63,7 +65,13 @@ export class DeapActivitylog extends DeesElement {
border-radius: 3px; border-radius: 3px;
cursor: pointer; cursor: pointer;
} }
</style> `,
];
public render(): TemplateResult {
return html`
${domtools.elementBasic.styles}
<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>

25
ts_web/elements/deap-base.ts
View File

@ -1,13 +1,20 @@
import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element'; import {
DeesElement,
TemplateResult,
property,
customElement,
html,
css,
cssManager,
} from '@designestate/dees-element';
@customElement('deap-base') @customElement('deap-base')
export class DeapBase extends DeesElement { export class DeapBase extends DeesElement {
public static demo = () => html`<deap-base></deap-base>`; public static demo = () => html`<deap-base></deap-base>`;
// INSTANCE public static styles = [
public render(): TemplateResult { cssManager.defaultStyles,
return html` css`
<style>
:host { :host {
position: absolute; position: absolute;
height: 100%; height: 100%;
@ -20,7 +27,13 @@ export class DeapBase extends DeesElement {
display: grid; display: grid;
grid-template-columns: 80px 240px auto 210px; grid-template-columns: 80px 240px auto 210px;
} }
</style> `,
];
// INSTANCE
public render(): TemplateResult {
return html`
<style></style>
<div class="maingrid"> <div class="maingrid">
<deap-mainmenu></deap-mainmenu> <deap-mainmenu></deap-mainmenu>
<deap-mainselector></deap-mainselector> <deap-mainselector></deap-mainselector>

54
ts_web/elements/deap-maincontent.ts
View File

@ -1,6 +1,14 @@
import * as interfaces from './interfaces'; import * as interfaces from './interfaces';
import { DeesElement, TemplateResult, property, customElement, html } from '@designestate/dees-element'; import {
DeesElement,
TemplateResult,
property,
customElement,
html,
css,
cssManager,
} from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
@ -11,19 +19,18 @@ export class DeapMaincontent extends DeesElement {
// INSTANCE // INSTANCE
@property() @property()
public tabs: interfaces.ITab[] = [ public tabs: interfaces.ITab[] = [
{key: 'option 1', action: () => {}}, { key: 'option 1', action: () => {} },
{key: 'a very long option', action: () => {}}, { key: 'a very long option', action: () => {} },
{key: 'reminder: set your tabs', action: () => {}}, { key: 'reminder: set your tabs', action: () => {} },
{key: 'option 4', action: () => {}} { key: 'option 4', action: () => {} },
]; ];
@property() @property()
public selectedTab = null; public selectedTab = null;
public render(): TemplateResult { public static styles = [
return html` cssManager.defaultStyles,
${domtools.elementBasic.styles} css`
<style>
:host { :host {
color: #fff; color: #fff;
display: block; display: block;
@ -57,7 +64,6 @@ export class DeapMaincontent extends DeesElement {
.topbar .tabsContainer { .topbar .tabsContainer {
display: grid; display: grid;
margin-left: 50px; margin-left: 50px;
grid-template-columns: repeat(${this.tabs.length}, min-content)
} }
.topbar .tabsContainer .tab { .topbar .tabsContainer .tab {
@ -86,16 +92,34 @@ export class DeapMaincontent extends DeesElement {
transition: all 0.1s; transition: all 0.1s;
} }
.mainicon {
}
`,
];
.mainicon {} public render(): TemplateResult {
return html`
<style>
.topbar .tabsContainer {
grid-template-columns: repeat(${this.tabs.length}, min-content);
}
</style> </style>
<div class="maincontainer"> <div class="maincontainer">
<div class="topbar"> <div class="topbar">
<div class="heading">lossless.com</div> <div class="heading">lossless.com</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()}}">${tabArg.key}</div> <div
class="tab ${tabArg === this.selectedTab ? 'selectedTab' : null}"
@click="${() => {
this.selectedTab = tabArg;
this.updateTabIndicator();
tabArg.action();
}}"
>
${tabArg.key}
</div>
`; `;
})} })}
</div> </div>
@ -111,7 +135,9 @@ export class DeapMaincontent extends DeesElement {
private updateTabIndicator() { private updateTabIndicator() {
let selectedTab = this.selectedTab; let selectedTab = this.selectedTab;
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';

41
ts_web/elements/deap-mainmenu.ts
View File

@ -6,6 +6,8 @@ import {
property, property,
customElement, customElement,
html, html,
css,
cssManager,
} from '@designestate/dees-element'; } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools'; import * as domtools from '@designestate/dees-domtools';
@ -20,21 +22,20 @@ export class DeapMainmenu extends DeesElement {
// INSTANCE // INSTANCE
@property() @property()
public tabs: interfaces.ITab[] = [ public tabs: interfaces.ITab[] = [
{key: 'option 1', iconName: 'visibility', action: () => {}}, { 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.ITab; public selectedTab: interfaces.ITab;
public render(): TemplateResult { public static styles = [
return html` cssManager.defaultStyles,
${domtools.elementBasic.styles} css`
<style>
:host { :host {
color: #CCC; color: #ccc;
z-index: 10; z-index: 10;
display: block; display: block;
position: relative; position: relative;
@ -79,7 +80,7 @@ export class DeapMainmenu extends DeesElement {
} }
.tabIndicator { .tabIndicator {
background: #4E729A; background: #4e729a;
position: absolute; position: absolute;
width: 7px; width: 7px;
height: 60px; height: 60px;
@ -89,12 +90,22 @@ export class DeapMainmenu extends DeesElement {
border-bottom-right-radius: 7px; border-bottom-right-radius: 7px;
transition: all 0.1s; transition: all 0.1s;
} }
</style> `,
];
public render(): TemplateResult {
return html`
<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.updateTab(tabArg)}}"> <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>
@ -111,7 +122,9 @@ export class DeapMainmenu extends DeesElement {
selectedTab = this.tabs[0]; 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.top = selectedTabElement.offsetTop + 10 + 'px'; tabIndicator.style.top = selectedTabElement.offsetTop + 10 + 'px';
} }

14
ts_web/elements/deap-mainselector.ts
View File

@ -6,6 +6,8 @@ import {
property, property,
customElement, customElement,
html, html,
css,
cssManager,
} from '@designestate/dees-element'; } from '@designestate/dees-element';
@customElement('deap-mainselector') @customElement('deap-mainselector')
@ -27,9 +29,9 @@ export class DeapMainselector extends DeesElement {
@property() @property()
public selectedOption: interfaces.ISelectionOption = null; public selectedOption: interfaces.ISelectionOption = null;
public render(): TemplateResult { public static styles = [
return html` cssManager.defaultStyles,
<style> css`
:host { :host {
color: #fff; color: #fff;
position: relative; position: relative;
@ -101,6 +103,12 @@ export class DeapMainselector extends DeesElement {
margin-bottom: 20px; margin-bottom: 20px;
border-bottom: 1px solid #707070; border-bottom: 1px solid #707070;
} }
`
];
public render(): TemplateResult {
return html`
<style>
</style> </style>
<div class="maincontainer"> <div class="maincontainer">
<div class="topbar"> <div class="topbar">