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
2022-04-14 16:56:04 +02:00
parent 6917145b58
commit 03c00919df
7 changed files with 916 additions and 1016 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
ts_web/elements/wcc-frame.ts
View File

@ -1,25 +1,45 @@
import { DeesElement, property, html, customElement, TemplateResult } from '@designestate/dees-element';
import { DeesElement, property, html, customElement, TemplateResult, css, cssManager } from '@designestate/dees-element';
import * as domtools from '@designestate/dees-domtools';
declare global {
interface HTMLElementTagNameMap {
'wcc-frame': WccFrame;
}
}
@customElement('wcc-frame')
export class WccFrame extends DeesElement {
@property()
public viewport: string;
public static styles = [
css`
:host {
border: 10px solid #ffaeaf;
position: absolute;
background: ${cssManager.bdTheme('#333', '#000')};
left: 200px;
right: 0px;
top: 0px;
bottom: 100px;
overflow-y: auto;
overflow-x: auto;
}
.viewport {
container-type: inline-size;
container-name: wccToolsViewport;
position: relative;
min-height: 100%;
}
`,
]
public render(): TemplateResult {
return html`
<style>
:host {
border: 10px solid #ffaeaf;
position: absolute;
background: ${this.goBright ? '#333': '#000'};
left: 200px;
right: 0px;
top: 0px;
bottom: 100px;
overflow-y: auto;
overflow-x: auto;
${(() => {
switch (this.viewport) {
case 'desktop':
@ -45,19 +65,17 @@ export class WccFrame extends DeesElement {
}px;
`;
}
})()}
})()}
}
.viewport {
container-type: inline-size;
container-name: wccToolsViewport;
position: relative;
${this.viewport !== 'desktop'
? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
: html``}
min-height: 100%;
? html` border-right: 1px dotted #444; border-left: 1px dotted #444; `
: html``
}
background:
${this.goBright ? `
${
this.goBright ? `
radial-gradient(#CCCCCC 3px, transparent 4px),
radial-gradient(#CCCCCC 3px, transparent 4px),
linear-gradient(#eeeeee 4px, transparent 0),
@ -75,11 +93,12 @@ export class WccFrame extends DeesElement {
#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>
`;
}
@ -89,4 +108,8 @@ export class WccFrame extends DeesElement {
const slottedContent = this.children;
console.log(slottedContent);
}
public async getViewportElement(): Promise<HTMLElement> {
return this.shadowRoot.querySelector('.viewport') as HTMLElement;
}
}