From 0b2f6715e0cce634f63733408755bc5485d1d75c Mon Sep 17 00:00:00 2001 From: Philipp Kunz Date: Mon, 15 Jan 2024 19:42:15 +0100 Subject: [PATCH] fix(core): update --- ts_web/00_commitinfo_data.ts | 2 +- ts_web/elements/00colors.ts | 11 +++ ts_web/elements/{plugins.ts => 00plugins.ts} | 0 ts_web/elements/dees-contextmenu.demo.ts | 2 +- ts_web/elements/dees-contextmenu.ts | 2 +- ts_web/elements/dees-icon.ts | 2 + ts_web/elements/dees-mobilenavigation.ts | 2 +- ts_web/elements/dees-modal.ts | 2 +- ts_web/elements/dees-progressbar.demo.ts | 11 +++ ts_web/elements/dees-progressbar.ts | 95 ++++++++++++++++++++ ts_web/elements/dees-table.demo.ts | 2 +- ts_web/elements/dees-table.ts | 2 +- ts_web/elements/dees-updater.demo.ts | 7 +- ts_web/elements/dees-updater.ts | 88 ++++++++++-------- ts_web/elements/index.ts | 1 + 15 files changed, 185 insertions(+), 44 deletions(-) create mode 100644 ts_web/elements/00colors.ts rename ts_web/elements/{plugins.ts => 00plugins.ts} (100%) create mode 100644 ts_web/elements/dees-progressbar.demo.ts diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index 63b1fc6..3c759a4 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.243', + version: '1.0.244', description: 'website for lossless.com' } diff --git a/ts_web/elements/00colors.ts b/ts_web/elements/00colors.ts new file mode 100644 index 0000000..81e1853 --- /dev/null +++ b/ts_web/elements/00colors.ts @@ -0,0 +1,11 @@ +export const dark = { + blue: '#0050b9', + blueActive: '#0069f2', + text: '#ffffff', +} + +export const bright = { + blue: '#0050b9', + blueActive: '#0069f2', + text: '#333333', +} \ No newline at end of file diff --git a/ts_web/elements/plugins.ts b/ts_web/elements/00plugins.ts similarity index 100% rename from ts_web/elements/plugins.ts rename to ts_web/elements/00plugins.ts diff --git a/ts_web/elements/dees-contextmenu.demo.ts b/ts_web/elements/dees-contextmenu.demo.ts index 5fb976c..ebeb898 100644 --- a/ts_web/elements/dees-contextmenu.demo.ts +++ b/ts_web/elements/dees-contextmenu.demo.ts @@ -1,5 +1,5 @@ import { html } from '@design.estate/dees-element'; -import * as plugins from './plugins.js'; +import * as plugins from './00plugins.js'; import { DeesContextmenu } from './dees-contextmenu.js'; diff --git a/ts_web/elements/dees-contextmenu.ts b/ts_web/elements/dees-contextmenu.ts index e525417..62160c2 100644 --- a/ts_web/elements/dees-contextmenu.ts +++ b/ts_web/elements/dees-contextmenu.ts @@ -1,5 +1,5 @@ import { demoFunc } from './dees-contextmenu.demo.js'; -import * as plugins from './plugins.js'; +import * as plugins from './00plugins.js'; import { customElement, html, diff --git a/ts_web/elements/dees-icon.ts b/ts_web/elements/dees-icon.ts index 216c180..f237e98 100644 --- a/ts_web/elements/dees-icon.ts +++ b/ts_web/elements/dees-icon.ts @@ -50,6 +50,7 @@ import { faEyeSlash as faEyeSlashSolid, faFileInvoice as faFileInvoiceSolid, faFileInvoiceDollar as faFileInvoiceDollarSolid, + faGear as faGearSolid, faGrip as faGripSolid, faMessage as faMessageSolid, faMoneyCheckDollar as faMoneyCheckDollarSolid, @@ -93,6 +94,7 @@ export const faIcons = { eyeSlash: faEyeSlashSolid, fileInvoice: faFileInvoiceSolid, fileInvoiceDoller: faFileInvoiceDollarSolid, + gear: faGearSolid, grip: faGripSolid, message: faMessageRegular, messageSolid: faMessageSolid, diff --git a/ts_web/elements/dees-mobilenavigation.ts b/ts_web/elements/dees-mobilenavigation.ts index 809d5de..956e153 100644 --- a/ts_web/elements/dees-mobilenavigation.ts +++ b/ts_web/elements/dees-mobilenavigation.ts @@ -1,4 +1,4 @@ -import * as plugins from './plugins.js'; +import * as plugins from './00plugins.js'; import { cssManager, css, diff --git a/ts_web/elements/dees-modal.ts b/ts_web/elements/dees-modal.ts index d71d98a..be825c5 100644 --- a/ts_web/elements/dees-modal.ts +++ b/ts_web/elements/dees-modal.ts @@ -1,4 +1,4 @@ -import * as plugins from './plugins.js'; +import * as plugins from './00plugins.js'; import { demoFunc } from './dees-modal.demo.js'; import { customElement, diff --git a/ts_web/elements/dees-progressbar.demo.ts b/ts_web/elements/dees-progressbar.demo.ts new file mode 100644 index 0000000..ee32025 --- /dev/null +++ b/ts_web/elements/dees-progressbar.demo.ts @@ -0,0 +1,11 @@ +import { html } from '@design.estate/dees-element'; + +import { DeesProgressbar } from './dees-progressbar.js'; + +export const demoFunc = () => { + return html` + + `; +} \ No newline at end of file diff --git a/ts_web/elements/dees-progressbar.ts b/ts_web/elements/dees-progressbar.ts index e69de29..fbf168c 100644 --- a/ts_web/elements/dees-progressbar.ts +++ b/ts_web/elements/dees-progressbar.ts @@ -0,0 +1,95 @@ +import * as plugins from './00plugins.js'; +import * as colors from './00colors.js'; +import { demoFunc } from './dees-progressbar.demo.js'; +import { + customElement, + html, + DeesElement, + property, + type TemplateResult, + cssManager, + css, + type CSSResult, + unsafeCSS, + unsafeHTML, + state, +} from '@design.estate/dees-element'; + +import * as domtools from '@design.estate/dees-domtools'; + +@customElement('dees-progressbar') +export class DeesProgressbar extends DeesElement { + // STATIC + public static demo = demoFunc; + + // INSTANCE + @property({ + type: Number, + }) + public percentage = 0; + + public static styles = [ + cssManager.defaultStyles, + css` + :host { + color: ${cssManager.bdTheme(colors.bright.text, colors.dark.text)}; + } + .progressBarContainer { + padding: 8px; + min-width: 200px; + } + + .progressBar { + background: ${cssManager.bdTheme('#eeeeeb', '#444')}; + height: 8px; + width: 100%; + border-radius: 4px; + border-top: 0.5px solid ${cssManager.bdTheme('none', '#555')}; + } + + .progressBarFill { + background: ${cssManager.bdTheme(colors.dark.blueActive, colors.bright.blueActive)}; + height: 8px; + margin-top: -0.5px; + transition: 0.2s width; + border-radius: 4px; + width: 0px; + border-top: 0.5 solid ${cssManager.bdTheme('none', '#398fff')}; + } + + .progressText { + padding: 8px; + text-align: center; + } + ` + ]; + + public render() { + return html` +
+
+
+
+ ${this.percentage}% +
+
+
+ ` + } + + firstUpdated (_changedProperties: Map): void { + super.firstUpdated(_changedProperties); + this.updateComplete.then(() => { + this.updatePercentage(); + }); + } + + public async updatePercentage() { + const progressBarFill = this.shadowRoot.querySelector('.progressBarFill') as HTMLElement; + progressBarFill.style.width = `${this.percentage}%`; + } + + updated(){ + this.updatePercentage(); + } +} \ No newline at end of file diff --git a/ts_web/elements/dees-table.demo.ts b/ts_web/elements/dees-table.demo.ts index 85e0a2a..c831546 100644 --- a/ts_web/elements/dees-table.demo.ts +++ b/ts_web/elements/dees-table.demo.ts @@ -1,5 +1,5 @@ import { type ITableAction } from './dees-table.js'; -import * as plugins from './plugins.js'; +import * as plugins from './00plugins.js'; import { html } from '@design.estate/dees-element'; interface ITableDemoData { diff --git a/ts_web/elements/dees-table.ts b/ts_web/elements/dees-table.ts index 54ea970..35c3f88 100644 --- a/ts_web/elements/dees-table.ts +++ b/ts_web/elements/dees-table.ts @@ -1,4 +1,4 @@ -import * as plugins from './plugins.js'; +import * as plugins from './00plugins.js'; import { demoFunc } from './dees-table.demo.js'; import { customElement, diff --git a/ts_web/elements/dees-updater.demo.ts b/ts_web/elements/dees-updater.demo.ts index e70219b..df54077 100644 --- a/ts_web/elements/dees-updater.demo.ts +++ b/ts_web/elements/dees-updater.demo.ts @@ -2,6 +2,9 @@ import { html } from '@design.estate/dees-element'; import { DeesUpdater } from './dees-updater.js'; -export const demoFunc = () => { - +export const demoFunc = async () => { + const updater = await DeesUpdater.createAndShow(); + setTimeout(async () => { + await updater.destroy(); + }, 10000); } \ No newline at end of file diff --git a/ts_web/elements/dees-updater.ts b/ts_web/elements/dees-updater.ts index 70d8045..0e3a16c 100644 --- a/ts_web/elements/dees-updater.ts +++ b/ts_web/elements/dees-updater.ts @@ -1,4 +1,12 @@ -import { customElement, DeesElement, type TemplateResult, html, property, type CSSResult, domtools } from '@design.estate/dees-element'; +import { + customElement, + DeesElement, + type TemplateResult, + html, + property, + type CSSResult, + domtools, +} from '@design.estate/dees-element'; import { demoFunc } from './dees-updater.demo.js'; import './dees-windowlayer'; @@ -15,7 +23,9 @@ export class DeesUpdater extends DeesElement { public static demo = demoFunc; public static async createAndShow() { - + const updater = new DeesUpdater(); + document.body.appendChild(updater); + return updater; } @property({ @@ -37,56 +47,64 @@ export class DeesUpdater extends DeesElement { cssManager.defaultStyles, css` .modalContainer { - will-change: transform; - position: relative; - background: ${cssManager.bdTheme('#eeeeeb', '#222')}; - max-width: 800px; - border-radius: 8px; - border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')}; - } + will-change: transform; + position: relative; + background: ${cssManager.bdTheme('#eeeeeb', '#222')}; + max-width: 800px; + border-radius: 8px; + border-top: 1px solid ${cssManager.bdTheme('#eeeeeb', '#333')}; + } - .headingContainer { - display: flex; - justify-content: center; - align-items: center; - padding: 40px 40px; - } + .headingContainer { + display: flex; + justify-content: center; + align-items: center; + padding: 40px 40px; + } - h1 { - margin: none; - font-size: 20px; - color: ${cssManager.bdTheme('#333', '#fff')}; - margin-left: 20px; - font-weight: normal; - } + h1 { + margin: none; + font-size: 20px; + color: ${cssManager.bdTheme('#333', '#fff')}; + margin-left: 20px; + font-weight: normal; + } - .buttonContainer { - display: grid; - grid-template-columns: 50% 50%; - } - ` - ] + .buttonContainer { + display: grid; + grid-template-columns: 50% 50%; + } + `, + ]; public render(): TemplateResult { return html` - +

Updating the application...

+
+ +
More info Changelog
-
- > +
> `; } - private windowLayerClicked() { - + public async destroy() { + this.parentElement.removeChild(this); } + + private windowLayerClicked() {} } diff --git a/ts_web/elements/index.ts b/ts_web/elements/index.ts index af1ad0f..8a56da3 100644 --- a/ts_web/elements/index.ts +++ b/ts_web/elements/index.ts @@ -14,6 +14,7 @@ export * from './dees-input-fileupload.js'; export * from './dees-input-iban.js'; export * from './dees-input-typelist.js'; export * from './dees-input-phone.js'; +export * from './dees-progressbar.js'; export * from './dees-input-quantityselector.js'; export * from './dees-input-radio.js'; export * from './dees-input-text.js';