diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts
index 357b2b1..6fcefad 100644
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@design.estate/dees-catalog',
- version: '1.0.186',
+ version: '1.0.187',
description: 'website for lossless.com'
}
diff --git a/ts_web/elements/dees-dataview-codebox.demo.ts b/ts_web/elements/dees-dataview-codebox.demo.ts
new file mode 100644
index 0000000..dcabe58
--- /dev/null
+++ b/ts_web/elements/dees-dataview-codebox.demo.ts
@@ -0,0 +1,18 @@
+import { html } from '@design.estate/dees-element';
+
+export const demoFunc = () => html`
+
+
+ import * as text from './hello'; const hiThere = 'nice'; const myFunction = async () => {
+ console.log('nice one'); }
+
+
`
\ No newline at end of file
diff --git a/ts_web/elements/dees-dataview-codebox.ts b/ts_web/elements/dees-dataview-codebox.ts
index a68a370..f4fb02b 100644
--- a/ts_web/elements/dees-dataview-codebox.ts
+++ b/ts_web/elements/dees-dataview-codebox.ts
@@ -1,3 +1,4 @@
+import { demoFunc } from './dees-dataview-codebox.demo.js';
import {
DeesElement,
html,
@@ -21,10 +22,7 @@ declare global {
@customElement('dees-dataview-codebox')
export class DeesDataviewCodebox extends DeesElement {
- public static demo = () => html`
- import * as text from './hello'; const hiThere = 'nice'; const myFunction = async () => {
- console.log('nice one'); }
- `;
+ public static demo = demoFunc;
@property()
public progLang: string = 'typescript';
@@ -52,19 +50,48 @@ export class DeesDataviewCodebox extends DeesElement {
.mainbox {
position: relative;
color: ${this.goBright ? '#333333' : '#ffffff'};
+ border-top: 1px solid ${this.goBright ? '#ffffff' : '#333333'};
+ box-shadow: 0px 0px 5px ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.5)'};
+ background: ${this.goBright ? '#ffffff' : '#191919'};
+ border-radius: 16px;
+ overflow: hidden;
+ }
+
+ .appbar {
+ height: 24px;
+ background: #161616;
+ border-bottom: 1px solid #222222;
+ font-size: 12px;
+ color: #CCC;
+ font-family: 'Hubot Sans', 'monospace';
+ line-height: 24px;
+ }
+
+ .appbar .fileName {
+ text-align: center;
+ }
+
+ .bottomBar {
+ height: 24px;
+ background: #161616;
+ border-top: 1px solid #222222;
+ font-size: 12px;
+ color: #CCC;
+ font-family: 'Hubot Sans', 'monospace';
+ line-height: 24px;
}
.languageLabel {
color: #fff;
font-size: 12px;
+ line-height: 24px;
z-index: 10;
- background: #6596ff;
+ background: #6596ff20;
display: inline-block;
position: absolute;
- right: 32px;
- padding: 4px;
- border-bottom-left-radius: 3px;
- border-bottom-right-radius: 3px;
+ bottom: 0px;
+ right: 0px;
+ padding: 0px 16px 0px 8px;
}
.hljs-keyword {
@@ -74,18 +101,15 @@ export class DeesDataviewCodebox extends DeesElement {
.codegrid {
display: grid;
grid-template-columns: 50px auto;
- background: ${this.goBright ? '#ffffff' : '#191919'};
- border-top: 1px solid ${this.goBright ? '#ffffff' : '#333333'};
- box-shadow: 0px 0px 5px ${this.goBright ? 'rgba(0,0,0,0.1)' : 'rgba(0,0,0,0.5)'};
- border-radius: 3px;
overflow: hidden;
}
.lineNumbers {
- background: ${this.goBright ? '#fafafa' : '#151515'};
+
color: ${this.goBright ? '#acacac' : '#666666'};
padding: 30px 16px 0px 0px;
text-align: right;
+ border-right: 1px solid ${this.goBright ? '#eaeaea' : '#222222'};
}
.lineCounter:last-child {
@@ -121,31 +145,37 @@ export class DeesDataviewCodebox extends DeesElement {
}
.hljs-function {
- color: ${this.goBright ? '#2765DF': '#6596ff' };
+ color: ${this.goBright ? '#2765DF' : '#6596ff'};
}
.hljs-params {
- color: ${this.goBright ? '#3DB420' : '#65d5ff' };
+ color: ${this.goBright ? '#3DB420' : '#65d5ff'};
}
.hljs-comment {
- color: ${this.goBright ? '#EF9300' : '#ffd765' };
+ color: ${this.goBright ? '#EF9300' : '#ffd765'};
}
-
${this.progLang}
+
${(() => {
let lineCounter = 0;
- return this.codeToDisplay.split('\n').map(lineArg => {
+ return this.codeToDisplay.split('\n').map((lineArg) => {
lineCounter++;
return html`
${lineCounter}
`;
- })
+ });
})()}
+
+ Spaces: 2
+
${this.progLang}
+
`;
}
@@ -167,12 +197,17 @@ export class DeesDataviewCodebox extends DeesElement {
this.codeToDisplayStore = smartstring.indent.normalize(this.codeToDisplay).trimStart();
}
if (slottedCodeNodes[0] && slottedCodeNodes[0].wholeText && !this.codeToDisplay) {
- this.codeToDisplayStore = smartstring.indent.normalize(slottedCodeNodes[0].wholeText).trimStart();
+ this.codeToDisplayStore = smartstring.indent
+ .normalize(slottedCodeNodes[0].wholeText)
+ .trimStart();
this.codeToDisplay = this.codeToDisplayStore;
}
await domtools.plugins.smartdelay.delayFor(0);
const localCodeNode = this.shadowRoot.querySelector('code');
- const html = hlight.highlight(this.codeToDisplayStore, {language: this.progLang, ignoreIllegals: true});
+ const html = hlight.highlight(this.codeToDisplayStore, {
+ language: this.progLang,
+ ignoreIllegals: true,
+ });
localCodeNode.innerHTML = html.value;
}
}
diff --git a/ts_web/elements/dees-dataview-statusobject.demo.ts b/ts_web/elements/dees-dataview-statusobject.demo.ts
new file mode 100644
index 0000000..4fcc0ca
--- /dev/null
+++ b/ts_web/elements/dees-dataview-statusobject.demo.ts
@@ -0,0 +1,39 @@
+import { html } from '@design.estate/dees-element';
+import * as tsclass from '@tsclass/tsclass';
+
+export const demoFunc = () => html`
+`;
diff --git a/ts_web/elements/dees-dataview-statusobject.ts b/ts_web/elements/dees-dataview-statusobject.ts
index 7617dd9..49a694c 100644
--- a/ts_web/elements/dees-dataview-statusobject.ts
+++ b/ts_web/elements/dees-dataview-statusobject.ts
@@ -1,3 +1,4 @@
+import { demoFunc } from './dees-dataview-statusobject.demo.js';
import {
DeesElement,
html,
@@ -20,41 +21,7 @@ declare global {
@customElement('dees-dataview-statusobject')
export class DeesDataviewStatusobject extends DeesElement {
- public static demo = () => html`
- `;
+ public static demo = demoFunc;
@property({ type: Object }) statusObject: tsclass.code.IStatusObject;
@@ -95,7 +62,7 @@ export class DeesDataviewStatusobject extends DeesElement {
.copyMain {
cursor: pointer;
- font-size: 8px;
+ font-size: 10px;
font-weight: 600;
text-transform: uppercase;
border: 1px solid ${cssManager.bdTheme('#999', '#444')};
@@ -103,6 +70,7 @@ export class DeesDataviewStatusobject extends DeesElement {
padding: 4px;
border-radius: 3px;
margin-right: 16px;
+ color: #ffffff80
}
.statusdot.ok {
@@ -122,7 +90,7 @@ export class DeesDataviewStatusobject extends DeesElement {
align-items: center;
display: grid;
grid-template-columns: 40px auto;
- border-top: 1px dotted ${cssManager.bdTheme('#999', '#444')};
+ border-top: 1px dotted ${cssManager.bdTheme('#999', '#282828')};
}
.detail .detailsText {
@@ -134,10 +102,11 @@ export class DeesDataviewStatusobject extends DeesElement {
.detail .detailsText .label {
font-size: 12px;
+ color: #ffffff80
}
.detail .detailsText .value {
- font-size: 16px;
+ font-size: 14px;
font-family: 'Intel One Mono';
}
`,
diff --git a/ts_web/elements/dees-table.ts b/ts_web/elements/dees-table.ts
index e646012..3abe854 100644
--- a/ts_web/elements/dees-table.ts
+++ b/ts_web/elements/dees-table.ts
@@ -62,7 +62,7 @@ export class DeesTable extends DeesElement {
position: absolute;
width: 100%;
height: 100%;
- padding: 60px;
+ padding: 20px;
background: #000000;
}