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}
+
+
index.ts
+
${(() => { 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; }