• 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 ComponentConfig from './ComponentConfig';
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
26  build() {
27    Navigator({ target: this.targetPage }) {
28      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
29        Row() {
30          Text(this.title)
31            .fontSize($r('app.float.font_16'))
32            .lineHeight($r('app.float.wh_value_22'))
33            .fontColor($r('app.color.font_color_182431'))
34            .fontWeight(FontWeight.Medium)
35            .margin({ left: $r('app.float.distance_8') })
36            .textAlign(TextAlign.Start);
37        }
38
39        Image('/res/image/ic_settings_arrow.svg')
40          .width($r('app.float.wh_value_12'))
41          .height($r('app.float.wh_value_24'))
42          .margin({ right: $r('app.float.distance_8') })
43          .fillColor($r("sys.color.ohos_id_color_primary"))
44          .opacity($r("app.float.opacity_0_2"))
45      }
46      .height(ComponentConfig.WH_100_100)
47      .width(ComponentConfig.WH_100_100)
48      .borderRadius($r('app.float.radius_20'))
49      .linearGradient(this.isTouched ? {
50                                         angle: 90,
51                                         direction: GradientDirection.Right,
52                                         colors: [[$r("app.color.DCEAF9"), 0.0], [$r("app.color.FAFAFA"), 1.0]]
53                                       } : {
54                                             angle: 90,
55                                             direction: GradientDirection.Right,
56                                             colors: [[$r("sys.color.ohos_id_color_foreground_contrary"), 1], [$r("sys.color.ohos_id_color_foreground_contrary"), 1]]
57                                           })
58      .onTouch((event: TouchEvent) => {
59        if (event.type === TouchType.Down) {
60          this.isTouched = true;
61        }
62        if (event.type === TouchType.Up) {
63          this.isTouched = false;
64        }
65      })
66    }
67    .padding($r('app.float.distance_4'))
68    .height($r('app.float.wh_value_56'))
69    .borderRadius($r('app.float.radius_24'))
70    .backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"));
71  }
72}
73
74
75/**
76 * Sub-Page Entry Component with EndText
77 */
78@Component
79export struct SubEntryComponentWithEndText {
80  @State isTouched: boolean = false;
81  @Prop endText: string;
82  private targetPage: string;
83  private title: string | Resource;
84
85  build() {
86    Navigator({ target: this.targetPage }) {
87      Flex({ justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
88        Row() {
89          Text(this.title)
90            .fontSize($r('app.float.font_16'))
91            .lineHeight($r('app.float.wh_value_22'))
92            .fontWeight(FontWeight.Medium)
93            .fontColor($r('app.color.font_color_182431'))
94            .margin({ left: $r('app.float.distance_8') })
95            .textAlign(TextAlign.Start);
96        }
97
98        Row() {
99          Text(this.endText)
100            .fontSize($r('app.float.font_14'))
101            .lineHeight($r('app.float.wh_value_19'))
102            .fontWeight(FontWeight.Regular)
103            .fontColor($r('sys.color.ohos_id_color_text_secondary'))
104            .margin({ right: $r('app.float.distance_4') })
105            .textAlign(TextAlign.End);
106          Image('/res/image/ic_settings_arrow.svg')
107            .width($r('app.float.wh_value_12'))
108            .height($r('app.float.wh_value_24'))
109            .margin({ right: $r('app.float.distance_8') })
110            .fillColor($r("sys.color.ohos_id_color_primary"))
111            .opacity($r("app.float.opacity_0_2"))
112        }
113      }
114      .height(ComponentConfig.WH_100_100)
115      .width(ComponentConfig.WH_100_100)
116      .borderRadius($r('app.float.radius_20'))
117      .linearGradient(this.isTouched ? {
118                                         angle: 90,
119                                         direction: GradientDirection.Right,
120                                         colors: [[$r("app.color.DCEAF9"), 0.0], [$r("app.color.FAFAFA"), 1.0]]
121                                       } : {
122                                             angle: 90,
123                                             direction: GradientDirection.Right,
124                                             colors: [[$r("sys.color.ohos_id_color_foreground_contrary"), 1], [$r("sys.color.ohos_id_color_foreground_contrary"), 1]]
125                                           })
126      .onTouch((event: TouchEvent) => {
127        if (event.type === TouchType.Down) {
128          this.isTouched = true;
129        }
130        if (event.type === TouchType.Up) {
131          this.isTouched = false;
132        }
133      });
134    }
135    .padding($r('app.float.distance_4'))
136    .height($r('app.float.wh_value_56'))
137    .borderRadius($r('app.float.radius_24'))
138    .backgroundColor($r("sys.color.ohos_id_color_foreground_contrary"));
139  }
140}