TASK: #103602 添加状态栏组件
This commit is contained in:
wurou
parent
758831ab40
commit
dadb4e5b15
|
|
@ -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`
|
||||
<div class="inner">
|
||||
<div class="time">
|
||||
<div id="time"></div>
|
||||
<div id="date"></div>
|
||||
</div>
|
||||
<div class="icons">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
|
|
@ -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`
|
||||
<star-status-bar>
|
||||
<div data-icon="wifi-4"></div>
|
||||
<div data-icon="battery-10"></div>
|
||||
<div data-icon="bluetooth"></div>
|
||||
</star-status-bar>
|
||||
`
|
||||
}
|
||||
|
||||
static styles = css`
|
||||
star-status-bar {
|
||||
width: 1200px;
|
||||
height: 48px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'panel-status-bar': PanelStatusBar
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue