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

src/components/base/auto-px-style.ts

@@ -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));

src/components/clock-widget/clock-widget.ts

@@ -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,16 +19,38 @@ export class ClockContainer extends LitElement {
   }
 
   render() {
-    return html`
+    if (this.type == 'vertical') {
-      <clock-time
+      return html`
-        hourFirst=${this.hourFirst}
+        <clock-date date=${this.date}></clock-date>
-        hourSecond=${this.hourSecond}
+        <clock-time
-        minuteFirst=${this.minuteFirst}
+          hourFirst=${this.hourFirst}
-        minuteSecond=${this.minuteSecond}
+          hourSecond=${this.hourSecond}
-        type=${this.type}
+          minuteFirst=${this.minuteFirst}
-      ></clock-time>
+          minuteSecond=${this.minuteSecond}
-      <clock-date date=${this.date}></clock-date>
+          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}
+          hourSecond=${this.hourSecond}
+          minuteFirst=${this.minuteFirst}
+          minuteSecond=${this.minuteSecond}
+          type=${this.type}
+        ></clock-time>
+        <clock-date date=${this.date}></clock-date>
+      `
+    }
   }
 }
 

src/components/clock-widget/time/time-style.ts

@@ -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 */
 `

src/components/clock-widget/time/time.ts

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

src/test/panels/locked/locked.ts

@@ -1,96 +1,202 @@
 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 {
+    .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;
-      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() {
     return html`
-      <div class="screen">
+
-        <div>
+        <div class="screen">
-          <div class="lockup lock"></div>
+          <div class="textTop">TODO : 翻页的 --- flipping</div>
-          <div class="lockdown lock">
+          <clock-widget
-            <div class="cylinder-up lock"></div>
+            hourFirst=${this.hourFirst}
-            <div class="cylinder-down lock"></div>
+            hourSecond=${this.hourSecond}
-          </div>
+            minuteFirst=${this.minuteFirst}
+            minuteSecond=${this.minuteSecond}
+            type="flipping"
+            date=${this.date}
+            ></clock-widget>
         </div>
-        <div class="text">已锁定</div>
+        <hr />
-        <div class="try-again">请${this.second}秒后再试</div>
+        <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>
+          <div class="cylinder-down lock"></div>
+        </div>
+      </div>
+      <div class="text">已锁定</div>
+      <div class="try-again">请${this.second}秒后再试</div> -->
       </div>
     `
   }