From dadb4e5b15ca34441ea9fca1d1eb7d8f97716a63 Mon Sep 17 00:00:00 2001 From: wurou Date: Wed, 21 Sep 2022 19:46:34 +0800 Subject: [PATCH 1/2] =?UTF-8?q?TASK:=20#103602=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=A0=8F=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/status-bar/status-bar.ts | 193 +++++++++++++++++++++++ src/test/panels/status-bar/status-bar.ts | 29 ++++ 2 files changed, 222 insertions(+) create mode 100644 src/components/status-bar/status-bar.ts create mode 100644 src/test/panels/status-bar/status-bar.ts diff --git a/src/components/status-bar/status-bar.ts b/src/components/status-bar/status-bar.ts new file mode 100644 index 0000000..997a80c --- /dev/null +++ b/src/components/status-bar/status-bar.ts @@ -0,0 +1,193 @@ +import { html, css, LitElement } from 'lit' +import { customElement, query, state, queryAssignedElements } from 'lit/decorators.js' + +@customElement('star-status-bar') +export class StarStatusBar extends LitElement { + @state() updateTimeTimeout!: number; + @state() updateDateTimeout!: number; + @query('.icons') icons!: HTMLDivElement; + @query('#time') time!: HTMLDivElement; + @query('#date') date!: HTMLDivElement; + @queryAssignedElements({flatten: true}) slotElements!: HTMLSlotElement[]; + + render() { + return html` +
+
+
+
+
+
+ +
+
+ `; + } + + static styles = css` + :host { + width: inherit; + height: inherit; + } + + .inner { + width: inherit; + height: inherit; + display: flex; + align-items: center; + justify-content: space-between; + } + + .time { + height: 20px; + width: 203px; + margin-left: 48px; + display: flex; + font-family: 'OPPOSans'; + font-style: normal; + font-weight: 400; + font-size: 20px; + line-height: 20px; + color: #F0F0F0; + } + + #time { + margin-right: 10px; + } + + .icons { + height: 36px; + display: flex; + margin-right: 48px; + width: 76px; + justify-content: space-between; + } + + .icons > ::slotted(*)::before { + width: 36px; + height: 36px; + line-height: 36px; + text-align: center; + vertical-align: middle; + content: attr(data-icon); + font-size: 36px; + font-family: gaia-icons; + font-style: normal; + text-rendering: optimizelegibility; + font-weight: 500; + } + ` + + firstUpdated() { + this.icons.style.width = 40 * this.slotElements.length - 4 + "px"; + this.autoUpdateDateTime(); + } + + autoUpdateDateTime() { + window.clearTimeout(this.updateDateTimeout); + window.clearTimeout(this.updateTimeTimeout); + this.autoUpdateDate(); + this.autoUpdateTime(); + } + + autoUpdateTime() { + var d = new Date(); + this.time.innerHTML = this.formatTime(d); + let self = this; + var remainMillisecond = (60 - d.getSeconds()) * 1000; + this.updateTimeTimeout = window.setTimeout(() => { + self.autoUpdateTime(); + }, remainMillisecond); + } + + autoUpdateDate() { + var d = new Date(); + this.date.innerHTML = this.formatDate(d) + " " + this.getWeekDay(); + let remainMillisecond = (24 - d.getHours()) * 3600 * 1000 - + d.getMinutes() * 60 * 1000 - d.getMilliseconds(); + let self = this; + this.updateDateTimeout = window.setTimeout( + function updateDateTimeout() { + self.autoUpdateDate(); + }, remainMillisecond); + } + + getWeekDay() { + var d = new Date(); + let daynumber = d.getDay(); + let day = ""; + switch (daynumber) { + case 0: + day = "周日"; + break; + case 1: + day = "周一"; + break; + case 2: + day = "周二"; + break; + case 3: + day = "周三"; + break; + case 4: + day = "周四"; + break; + case 5: + day = "周五"; + break; + case 6: + day = "周六"; + break; + } + return day; + } + + formatDate(d: Date | string, iso?: boolean) { + if (d instanceof Date) { + if (iso) { + let date = d.toISOString(); // Thu Oct 07 2021 07:45:18 GMT+0800 + date = date.split("T")[0]; + return date; + } else { + return d.toLocaleString(navigator.languages as string[], { + // year: 'numeric', + month: 'long', + day: '2-digit', + }); + } + } else { + return d; + } + } + + formatTime(d: Date | string, iso?: boolean) { + if (d instanceof Date) { + if (iso) { + let time = d.toLocaleTimeString(); + time = time.split(" ")[0]; + if (time.indexOf(":") === 1) { + time = `0${time}`; + } + return time; + } else { + return d.toLocaleString(navigator.languages as string[], { + // hour12: (navigator as any).mozHour12, + hour12: false, + hour: "numeric", + minute: "numeric", + }); + } + } else { + if (d.indexOf(":") == 1) { + d = "0" + d; + } + return d; + } + } +} + +declare global { + interface HTMLElementTagNameMap { + 'star-status-bar': StarStatusBar + } +} \ No newline at end of file diff --git a/src/test/panels/status-bar/status-bar.ts b/src/test/panels/status-bar/status-bar.ts new file mode 100644 index 0000000..1f46dfa --- /dev/null +++ b/src/test/panels/status-bar/status-bar.ts @@ -0,0 +1,29 @@ +import {html, css, LitElement} from 'lit' +import {customElement} from 'lit/decorators.js' +import '../../../components/status-bar/status-bar'; +@customElement('panel-status-bar') +export class PanelStatusBar extends LitElement { + + render() { + return html` + +
+
+
+ + ` + } + + static styles = css` + star-status-bar { + width: 1200px; + height: 48px; + } + `; +} + +declare global { + interface HTMLElementTagNameMap { + 'panel-status-bar': PanelStatusBar + } +} From 6e7817737f9213b86367c68b3ac34bb9fec7f3b7 Mon Sep 17 00:00:00 2001 From: wurou Date: Thu, 22 Sep 2022 20:09:18 +0800 Subject: [PATCH 2/2] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=85=8D=E7=BD=AE?= =?UTF-8?q?=E6=96=87=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/status-bar/index.ts | 1 + src/components/status-bar/package.json | 22 ++++++++++++++++++++++ src/components/status-bar/tsconfig.json | 8 ++++++++ 3 files changed, 31 insertions(+) create mode 100644 src/components/status-bar/index.ts create mode 100644 src/components/status-bar/package.json create mode 100644 src/components/status-bar/tsconfig.json diff --git a/src/components/status-bar/index.ts b/src/components/status-bar/index.ts new file mode 100644 index 0000000..c24e4b2 --- /dev/null +++ b/src/components/status-bar/index.ts @@ -0,0 +1 @@ +export * from './status-bar.js' diff --git a/src/components/status-bar/package.json b/src/components/status-bar/package.json new file mode 100644 index 0000000..fb6a36d --- /dev/null +++ b/src/components/status-bar/package.json @@ -0,0 +1,22 @@ +{ + "name": "@star-web-components/status-bar", + "version": "0.0.1", + "description": "", + "type": "module", + "main": "./index.js", + "module": "./index.js", + "exports": { + ".": { + "default": "./index.js" + }, + "./index": { + "default": "./index.js" + }, + "./status-bar.js": { + "default": "./status-bar.js" + }, + "./package.json": "./package.json" + }, + "author": "", + "license": "ISC" +} diff --git a/src/components/status-bar/tsconfig.json b/src/components/status-bar/tsconfig.json new file mode 100644 index 0000000..4ba3e2c --- /dev/null +++ b/src/components/status-bar/tsconfig.json @@ -0,0 +1,8 @@ +{ + "extends": "../../../tsconfig.json", + "compilerOptions": { + "composite": true, + "rootDir": "../../" + }, + "include": ["*.ts"] +}