• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/**
2 * Copyright (C) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15import ConfigData from '../Utils/ConfigData';
16
17/**
18 * Sub-Page Entry Component
19 */
20@Component
21export struct SubEntryComponent {
22  private targetPage: string;
23  private title:string | Resource;
24  @State isTouched:boolean = false;
25  private date: any = null;
26  private deviceId: any = null;
27
28  build() {
29    Navigator({target: this.targetPage}){
30      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems:ItemAlign.Center }) {
31        Row() {
32          Text(this.title)
33            .fontSize($r('app.float.font_16'))
34            .lineHeight($r('app.float.wh_value_22'))
35            .fontColor($r('app.color.font_color_182431'))
36            .fontWeight(FontWeight.Medium)
37            .margin({left: $r('app.float.distance_8')})
38            .textAlign(TextAlign.Start);
39        }
40        Image(('app.media.ic_settings_arrow'))
41          .width($r('app.float.wh_value_12'))
42          .height($r('app.float.wh_value_24'))
43          .margin({right: $r('app.float.distance_8')});
44      }
45      .height(ConfigData.WH_100_100)
46      .width(ConfigData.WH_100_100)
47      .borderRadius($r('app.float.radius_20'))
48      .linearGradient(this.isTouched ? {
49         angle: 90,
50         direction: GradientDirection.Right,
51         colors: [[$r("app.color.DCEAF9"), 0.0], [$r("app.color.FAFAFA"), 1.0]]
52         } : {
53         angle: 90,
54         direction: GradientDirection.Right,
55         colors: [[$r("sys.color.ohos_id_color_foreground_contrary"), 1], [$r("sys.color.ohos_id_color_foreground_contrary"), 1]]})
56      .onTouch((event: TouchEvent) => {
57        if (event.type === TouchType.Down) {
58          this.isTouched = true;
59        }
60        if (event.type === TouchType.Up) {
61          this.isTouched = false;
62        }
63      })
64    }
65    .params( {date: this.date, deviceId: this.deviceId} )
66    .padding($r('app.float.distance_4'))
67    .height($r('app.float.wh_value_56'))
68    .borderRadius($r('app.float.radius_24'))
69    .backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"));
70  }
71}
72
73/**
74 * Sub-Page Entry Component with EndText
75 */
76@Component
77export  struct SubEntryComponentWithEndText {
78  @State isTouched:boolean = false;
79  @Prop endText: string;
80  private targetPage: string;
81  private title: string | Resource;
82
83  build() {
84    Navigator({ target: this.targetPage }) {
85      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
86        Row() {
87          Text(this.title)
88            .fontSize($r('app.float.font_16'))
89            .lineHeight($r('app.float.wh_value_22'))
90            .fontWeight(FontWeight.Medium)
91            .fontColor($r('app.color.font_color_182431'))
92            .margin({left: $r('app.float.distance_8')})
93            .textAlign(TextAlign.Start);
94        }
95
96        Row() {
97          Text(this.endText)
98            .fontSize($r('app.float.font_14'))
99            .lineHeight($r('app.float.wh_value_19'))
100            .fontWeight(FontWeight.Regular)
101            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
102            .margin({right: $r('app.float.distance_4')})
103            .textAlign(TextAlign.End);
104          Image(('app.media.ic_settings_arrow'))
105            .width($r('app.float.wh_value_12'))
106            .height($r('app.float.wh_value_24'))
107            .margin({right: $r('app.float.distance_8')});
108        }
109      }
110      .height(ConfigData.WH_100_100)
111      .width(ConfigData.WH_100_100)
112      .borderRadius($r('app.float.radius_20'))
113      .linearGradient(this.isTouched ? {
114                                         angle: 90,
115                                         direction: GradientDirection.Right,
116                                         colors: [[$r("app.color.DCEAF9"), 0.0], [$r("app.color.FAFAFA"), 1.0]]
117                                       } : {
118                                             angle: 90,
119                                             direction: GradientDirection.Right,
120                                             colors: [[$r("sys.color.ohos_id_color_foreground_contrary"), 1], [$r("sys.color.ohos_id_color_foreground_contrary"), 1]]})
121      .onTouch((event: TouchEvent) => {
122        if (event.type === TouchType.Down) {
123          this.isTouched = true;
124        }
125        if (event.type === TouchType.Up) {
126          this.isTouched = false;
127        }
128      });
129    }
130    .padding($r('app.float.distance_4'))
131    .height($r('app.float.wh_value_56'))
132    .borderRadius($r('app.float.radius_24'))
133    .backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"));
134  }
135}