openkylin
/
ura-components
mirror of https://gitee.com/openkylin/ura-components.git
9
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
parent 3cef40c0eb 14b7c8a603
commit ab3280963a
5 changed files with 290 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/components/base/auto-px-style.ts
View File

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

23
src/components/clock-widget/clock-widget.ts
View File

@ -3,6 +3,7 @@ import {customElement, property} from 'lit/decorators.js'
import clockStyles from './clock-widget-style.js'
import './date/date.js'
import './time/time.js'
import '../clock/clock.js'
@customElement('clock-widget')
export class ClockContainer extends LitElement {
@property({type: String}) name = 'clock-widget'
@ -18,6 +19,27 @@ export class ClockContainer extends LitElement {
}
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`
<clock-time
hourFirst=${this.hourFirst}
@ -30,6 +52,7 @@ export class ClockContainer extends LitElement {
`
}
}
}
declare global {
interface HTMLElementTagNameMap {

58
src/components/clock-widget/time/time-style.ts
View File

@ -13,16 +13,20 @@ export default css`
font-size: var(--auto-128px);
line-height: var(--auto-128px);
}
#vertical {
display: flex;
}
#clock-minute,
#clock-hour {
display: flex;
}
#clock-hour div[type='platinic'] {
#clock-hour[type='platinic'] {
color: #ffffff;
opacity: 0.67;
padding-inline-end: var(--auto-10px);
}
#clock-minute div[type='platinic'] {
#clock-minute[type='platinic'] {
padding-inline-start: var(--auto-10px);
/* 主题色/黄金渐变 */
background: linear-gradient(180deg, #ebc965 0%, #d9aa38 100%);
@ -30,12 +34,58 @@ export default css`
background-clip: text;
}
/* 默认 */
#clock-line,
/* 传统的 */
#clock-line[type='convertional'],
.clock-time[type='convertional'] {
font-weight: 400;
font-size: var(--auto-116px);
line-height: var(--auto-116px);
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 */
`

12
src/components/clock-widget/time/time.ts
View File

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

238
src/test/panels/locked/locked.ts
View File

@ -1,88 +1,194 @@
import {html, LitElement, css} from 'lit'
import {customElement, property} from 'lit/decorators.js'
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')
export class PanelLocked extends LitElement {
@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`
:host {
margin: 0;
padding: 0;
}
.screen {
position: absolute;
height: 100%;
width: 100%;
background-color: rgb(183, 211, 227);
height: 200px;
background-color: pink;
border-radius: 10px;
}
.lock {
box-sizing: border-box;
left: 50%;
transform: translate(-50%);
.clockType {
height: var(--auto-606px);
display: flex;
flex-direction: column;
align-items: center;
}
.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;
.textTop {
width: 100%;
height: 50px;
text-align: center;
color: #4d4d4d;
line-height: 50px;
font-size: 26px;
font-weight: 600;
background-color: skyblue;
border-radius: 10px;
}
.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;
clock-time {
display: flex;
justify-content: center;
}
/* TODO : flipping */
`
render() {
return html`
<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="lockdown lock">
<div class="cylinder-up lock"></div>
@ -90,7 +196,7 @@ export class PanelLocked extends LitElement {
</div>
</div>
<div class="text">已锁定</div>
<div class="try-again">请${this.second}秒后再试</div>
<div class="try-again">请${this.second}秒后再试</div> -->
</div>
`
}