Merge pull request #177 in YR/star-web-components from star-add-time-type to master

* commit '14b7c8a603d28ef544f3a17976f08c7898c6381e':
  TASK: #124025 增加clock-widget 的 type、调整clock-widget
This commit is contained in:
汪昌棋 2022-11-28 09:20:14 +08:00
commit ab3280963a
5 changed files with 290 additions and 102 deletions

View File

@ -79,7 +79,9 @@ export const autoPxStyle: CSSResult = css`
--auto-124px: calc(124px / var(--hostDevicePixelRatio)); --auto-124px: calc(124px / var(--hostDevicePixelRatio));
--auto-128px: calc(128px / var(--hostDevicePixelRatio)); --auto-128px: calc(128px / var(--hostDevicePixelRatio));
--auto-129px: calc(129px / var(--hostDevicePixelRatio)); --auto-129px: calc(129px / var(--hostDevicePixelRatio));
--auto-130px: calc(130px / var(--hostDevicePixelRatio));
--auto-140px: calc(140px / var(--hostDevicePixelRatio)); --auto-140px: calc(140px / var(--hostDevicePixelRatio));
--auto-150px: calc(150px / var(--hostDevicePixelRatio));
--auto-152px: calc(152px / var(--hostDevicePixelRatio)); --auto-152px: calc(152px / var(--hostDevicePixelRatio));
--auto-160px: calc(160px / var(--hostDevicePixelRatio)); --auto-160px: calc(160px / var(--hostDevicePixelRatio));
--auto-164px: calc(164px / var(--hostDevicePixelRatio)); --auto-164px: calc(164px / var(--hostDevicePixelRatio));
@ -111,6 +113,7 @@ export const autoPxStyle: CSSResult = css`
--auto-368px: calc(368px / var(--hostDevicePixelRatio)); --auto-368px: calc(368px / var(--hostDevicePixelRatio));
--auto-370px: calc(370px / var(--hostDevicePixelRatio)); --auto-370px: calc(370px / var(--hostDevicePixelRatio));
--auto-374px: calc(374px / var(--hostDevicePixelRatio)); --auto-374px: calc(374px / var(--hostDevicePixelRatio));
--auto-381px: calc(381px / var(--hostDevicePixelRatio));
--auto-382px: calc(382px / var(--hostDevicePixelRatio)); --auto-382px: calc(382px / var(--hostDevicePixelRatio));
--auto-388px: calc(388px / var(--hostDevicePixelRatio)); --auto-388px: calc(388px / var(--hostDevicePixelRatio));
--auto-396px: calc(396px / var(--hostDevicePixelRatio)); --auto-396px: calc(396px / var(--hostDevicePixelRatio));

View File

@ -3,6 +3,7 @@ import {customElement, property} from 'lit/decorators.js'
import clockStyles from './clock-widget-style.js' import clockStyles from './clock-widget-style.js'
import './date/date.js' import './date/date.js'
import './time/time.js' import './time/time.js'
import '../clock/clock.js'
@customElement('clock-widget') @customElement('clock-widget')
export class ClockContainer extends LitElement { export class ClockContainer extends LitElement {
@property({type: String}) name = 'clock-widget' @property({type: String}) name = 'clock-widget'
@ -18,6 +19,27 @@ export class ClockContainer extends LitElement {
} }
render() { render() {
if (this.type == 'vertical') {
return html`
<clock-date date=${this.date}></clock-date>
<clock-time
hourFirst=${this.hourFirst}
hourSecond=${this.hourSecond}
minuteFirst=${this.minuteFirst}
minuteSecond=${this.minuteSecond}
type=${this.type}
></clock-time>
`
} else if (this.type == 'clock') {
return html`
<div
style="width: var(--auto-381px); height: var(--auto-381px);overflow: hidden"
>
<star-clock type="transparent" mode="light"></star-clock>
</div>
<clock-date date=${this.date}></clock-date>
`
} else {
return html` return html`
<clock-time <clock-time
hourFirst=${this.hourFirst} hourFirst=${this.hourFirst}
@ -30,6 +52,7 @@ export class ClockContainer extends LitElement {
` `
} }
} }
}
declare global { declare global {
interface HTMLElementTagNameMap { interface HTMLElementTagNameMap {

View File

@ -13,16 +13,20 @@ export default css`
font-size: var(--auto-128px); font-size: var(--auto-128px);
line-height: var(--auto-128px); line-height: var(--auto-128px);
} }
#vertical {
display: flex;
}
#clock-minute, #clock-minute,
#clock-hour { #clock-hour {
display: flex; display: flex;
} }
#clock-hour div[type='platinic'] { #clock-hour[type='platinic'] {
color: #ffffff;
opacity: 0.67; opacity: 0.67;
padding-inline-end: var(--auto-10px); padding-inline-end: var(--auto-10px);
} }
#clock-minute div[type='platinic'] { #clock-minute[type='platinic'] {
padding-inline-start: var(--auto-10px); padding-inline-start: var(--auto-10px);
/* 主题色/黄金渐变 */ /* 主题色/黄金渐变 */
background: linear-gradient(180deg, #ebc965 0%, #d9aa38 100%); background: linear-gradient(180deg, #ebc965 0%, #d9aa38 100%);
@ -30,12 +34,58 @@ export default css`
background-clip: text; background-clip: text;
} }
/* 默认 */ /* 传统的 */
#clock-line, #clock-line[type='convertional'],
.clock-time[type='convertional'] { .clock-time[type='convertional'] {
font-weight: 400; font-weight: 400;
font-size: var(--auto-116px); font-size: var(--auto-116px);
line-height: var(--auto-116px); line-height: var(--auto-116px);
color: #f0f0f0; color: #f0f0f0;
} }
/* 分隔的 */
#clock-line[type='separate'] {
background: #ffffff;
opacity: 0.6;
width: var(--auto-2px);
height: var(--auto-90px);
margin: 0 var(--auto-24px);
position: relative;
top: var(--auto-50px);
}
.clock-time[type='separate'] {
font-weight: 400;
font-size: var(--auto-160px);
line-height: var(--auto-160px);
color: #f5f5f5;
}
/* 垂直的 */
#vertical[type='vertical'] {
display: flex;
flex-direction: column;
}
.clock-time[type='vertical'] {
font-weight: 600;
width: var(--auto-150px);
font-size: var(--auto-220px);
line-height: var(--auto-220px);
color: #f5f5f5;
}
#clock-minute[type='vertical'] {
position: relative;
bottom: var(--auto-70px);
/* 主题色/黄金渐变 */
background: linear-gradient(180deg, #ebc965 0%, #d9aa38 100%);
-webkit-text-fill-color: transparent;
background-clip: text;
}
#clock-hour[type='vertical'] {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.6) 50%,
rgba(255, 255, 255, 0.01) 100%
);
background-clip: text;
-webkit-text-fill-color: transparent;
}
/* TODO : 翻页的 --- flipping */
` `

View File

@ -16,7 +16,8 @@ class LockScreenClockTimeContainer extends LitElement {
} }
render() { render() {
return html` return html`
<div id="clock-hour"> <div id="vertical" type=${this.type}>
<div id="clock-hour" type=${this.type}>
<div class="clock-time" id="clock-time-hourFirst" type=${this.type}> <div class="clock-time" id="clock-time-hourFirst" type=${this.type}>
${this.hourFirst} ${this.hourFirst}
</div> </div>
@ -27,14 +28,19 @@ class LockScreenClockTimeContainer extends LitElement {
<div id="clock-line" type=${this.type}> <div id="clock-line" type=${this.type}>
${this.type == 'convertional' ? this.line : ''} ${this.type == 'convertional' ? this.line : ''}
</div> </div>
<div id="clock-minute"> <div id="clock-minute" type=${this.type}>
<div class="clock-time" id="clock-time-minuteFirst" type=${this.type}> <div class="clock-time" id="clock-time-minuteFirst" type=${this.type}>
${this.minuteFirst} ${this.minuteFirst}
</div> </div>
<div class="clock-time" id="clock-time-minuteSecond" type=${this.type}> <div
class="clock-time"
id="clock-time-minuteSecond"
type=${this.type}
>
${this.minuteSecond} ${this.minuteSecond}
</div> </div>
</div> </div>
</div>
` `
} }
} }

View File

@ -1,88 +1,194 @@
import {html, LitElement, css} from 'lit' import {html, LitElement, css} from 'lit'
import {customElement, property} from 'lit/decorators.js' import {customElement, property} from 'lit/decorators.js'
import '../icon/icon' import '../icon/icon'
import '/home/duanzhijiang/WORKING_DIRECTORY/gaia/star-web-components/src/components/clock-widget/date/date.js'
import '/home/duanzhijiang/WORKING_DIRECTORY/gaia/star-web-components/src/components/clock-widget/time/time.js'
import '/home/duanzhijiang/WORKING_DIRECTORY/gaia/star-web-components/src/components/clock-widget/clock-widget.js'
import '/home/duanzhijiang/WORKING_DIRECTORY/gaia/star-web-components/src/components/clock/clock'
@customElement('panel-locked') @customElement('panel-locked')
export class PanelLocked extends LitElement { export class PanelLocked extends LitElement {
@property({type: Number}) second = 30 @property({type: Number}) second = 30
@property({type: String}) type = 'platinic'
@property({type: String}) hourFirst = '1'
@property({type: String}) hourSecond = '2'
@property({type: String}) minuteFirst = '3'
@property({type: String}) minuteSecond = '4'
@property({type: String}) date = '7月21日 周四 上午'
// static styles = css`
// .screen {
// position: absolute;
// height: 100%;
// width: 100%;
// background-color: rgb(183, 211, 227);
// }
// .lock {
// box-sizing: border-box;
// left: 50%;
// transform: translate(-50%);
// }
// .lockup {
// position: absolute;
// width: 27px;
// height: 24px;
// top: 405px;
// border: 5px solid #6f7a89;
// border-radius: 50% 50% 0 0;
// }
// .lockdown {
// position: absolute;
// width: 39px;
// height: 25px;
// top: 424px;
// background: #6f7a89;
// border-radius: 3px 3px 6px 6px;
// }
// .cylinder-up {
// position: relative;
// top: 7.5px;
// width: 6px;
// height: 6px;
// background: #d9d9d9;
// border-radius: 50%;
// }
// .cylinder-down {
// position: relative;
// top: 6.5px;
// width: 2px;
// height: 4.5px;
// background: #d9d9d9;
// border-radius: 0 0 1px 1px;
// }
// .text {
// position: absolute;
// width: 135px;
// height: 45px;
// left: calc(50% - 135px / 2);
// top: calc(50% - 45px / 2 + 11.75px);
// font-family: 'OPPOSans';
// font-style: normal;
// font-weight: 400;
// font-size: 45px;
// line-height: 45px;
// text-align: center;
// color: #4d4d4d;
// }
// .try-again {
// position: absolute;
// width: 125.5px;
// height: 26.5px;
// left: calc(50% - 125.5px / 2 + 1px);
// top: calc(50% - 26.5px / 2 + 67.5px);
// font-family: 'OPPOSans';
// font-style: normal;
// font-weight: 400;
// font-size: 20px;
// line-height: 26.5px;
// color: #292929;
// }
// `
static styles = css` static styles = css`
:host {
margin: 0;
padding: 0;
}
.screen { .screen {
position: absolute;
height: 100%;
width: 100%; width: 100%;
background-color: rgb(183, 211, 227); height: 200px;
background-color: pink;
border-radius: 10px;
} }
.lock { .clockType {
box-sizing: border-box; height: var(--auto-606px);
left: 50%; display: flex;
transform: translate(-50%); flex-direction: column;
align-items: center;
} }
.textTop {
.lockup { width: 100%;
position: absolute; height: 50px;
width: 27px;
height: 24px;
top: 405px;
border: 5px solid #6f7a89;
border-radius: 50% 50% 0 0;
}
.lockdown {
position: absolute;
width: 39px;
height: 25px;
top: 424px;
background: #6f7a89;
border-radius: 3px 3px 6px 6px;
}
.cylinder-up {
position: relative;
top: 7.5px;
width: 6px;
height: 6px;
background: #d9d9d9;
border-radius: 50%;
}
.cylinder-down {
position: relative;
top: 6.5px;
width: 2px;
height: 4.5px;
background: #d9d9d9;
border-radius: 0 0 1px 1px;
}
.text {
position: absolute;
width: 135px;
height: 45px;
left: calc(50% - 135px / 2);
top: calc(50% - 45px / 2 + 11.75px);
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
font-size: 45px;
line-height: 45px;
text-align: center; text-align: center;
color: #4d4d4d; line-height: 50px;
font-size: 26px;
font-weight: 600;
background-color: skyblue;
border-radius: 10px;
} }
.try-again { clock-time {
position: absolute; display: flex;
width: 125.5px; justify-content: center;
height: 26.5px;
left: calc(50% - 125.5px / 2 + 1px);
top: calc(50% - 26.5px / 2 + 67.5px);
font-family: 'OPPOSans';
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 26.5px;
color: #292929;
} }
/* TODO : flipping */
` `
render() { render() {
return html` return html`
<div class="screen"> <div class="screen">
<div> <div class="textTop">TODO : 翻页的 --- flipping</div>
<clock-widget
hourFirst=${this.hourFirst}
hourSecond=${this.hourSecond}
minuteFirst=${this.minuteFirst}
minuteSecond=${this.minuteSecond}
type="flipping"
date=${this.date}
></clock-widget>
</div>
<hr />
<div class="screen">
<div class="textTop"> --- separate</div>
<clock-widget hourFirst="2"
hourSecond="1"
minuteFirst="0"
minuteSecond="7"
type="separate"
date=${this.date}
></clock-widget>
</div>
<hr />
<div class="screen">
<div class="textTop"> --- platinic</div>
<clock-widget
hourFirst="1"
hourSecond="5"
minuteFirst="0"
minuteSecond="8"
type="platinic"
date=${this.date}
></clock-widget>
</div>
<hr />
<div class="screen">
<div class="textTop"> --- convertional</div>
<clock-widget
hourFirst=${this.hourFirst}
hourSecond=${this.hourSecond}
minuteFirst=${this.minuteFirst}
minuteSecond=${this.minuteSecond}
type="convertional"
date=${this.date}></clock-widget>
</div>
<hr />
<div class="screen" style="height:var(--auto-606px)">
<div class="textTop"> --- vertical</div>
<clock-widget
hourFirst="0"
hourSecond="8"
minuteFirst="2"
minuteSecond="0"
type="vertical"
date=${this.date}
></clock-widget>
</div>
<hr />
<div class="screen clockType" ;>
<div class="textTop"> --- clock</div>
<clock-widget type="clock" date=${this.date}></clock-widget>
</div>
<!-- <div>
<div class="lockup lock"></div> <div class="lockup lock"></div>
<div class="lockdown lock"> <div class="lockdown lock">
<div class="cylinder-up lock"></div> <div class="cylinder-up lock"></div>
@ -90,7 +196,7 @@ export class PanelLocked extends LitElement {
</div> </div>
</div> </div>
<div class="text"></div> <div class="text"></div>
<div class="try-again">${this.second}</div> <div class="try-again">${this.second}</div> -->
</div> </div>
` `
} }