1/*
2 * Copyright (c) 2022-2023 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 */
15
16import router from '@system.router';
17import BackComponent from '../component/backComponent';
18import Log from '../utils/log';
19import CommonController from '../controller/commonController';
20import CommonUtil from '../utils/CommonUtil';
21
22@Extend(Text) function introSetTitleFormat() {
23  .fontColor($r('sys.color.ohos_id_color_text_primary'))
24  .fontSize($r('sys.float.ohos_id_text_size_headline7'))
25  .fontWeight(FontWeight.Bold)
26}
27
28@Extend(Text) function introSetSubtitleFormat() {
29  .fontColor($r('sys.color.ohos_id_color_text_primary'))
30  .fontSize($r('sys.float.ohos_id_text_size_sub_title1'))
31  .fontWeight(FontWeight.Medium)
32}
33
34@Extend(Span) function introSetSpanFormat() {
35  .fontColor($r('sys.color.ohos_id_color_text_secondary'))
36  .fontSize($r('sys.float.ohos_id_text_size_body2'))
37  .fontWeight(FontWeight.Regular)
38}
39
40@Extend(Span) function introSetLinkFormat() {
41  .fontColor($r('sys.color.ohos_id_color_text_hyperlink'))
42  .fontSize($r('sys.float.ohos_id_text_size_body2'))
43  .fontWeight(FontWeight.Medium)
44}
45
46@Entry
47@Component
48struct EnrollIntro {
49  @State readonly TAG: string = 'EnrollIntro';
50  @StorageLink('enrollImageHeight') enrollImageHeight: number = 0;
51  @StorageLink('enrollImageWidth') enrollImageWidth: number = 0;
52  @StorageLink('CONTENT_TYPE_WIDTH') CONTENT_TYPE_WIDTH: number = 0;
53  @StorageLink('BUTTON_TYPE_WIDTH') BUTTON_TYPE_WIDTH: number = 0;
54  private scrollBarColor: string;
55
56  aboutToAppear() {
57    let scrollBarColor = CommonUtil.getColor(getContext(this), $r('sys.color.ohos_id_color_foreground_transparent'));
58    scrollBarColor = CommonUtil.setColorOpacity(scrollBarColor, 0.4);
59    this.scrollBarColor = scrollBarColor;
60  }
61
62  build() {
63      Column() {
64        BackComponent({prevTag:this.TAG})
65
66        Column() {
67          Column() {
68            Scroll() {
69              Column() {
70                Text($r('app.string.face_checker'))
71                  .introSetTitleFormat()
72                  .margin({
73                    top : '12vp',
74                    bottom: '24vp'
75                  })
76                Image(CommonController.getStartViewImage())
77                  .objectFit(ImageFit.Contain)
78                  .width(this.enrollImageWidth)
79                  .height(this.enrollImageHeight)
80                  .margin({
81                    bottom: '24vp'
82                  })
83                Column() {
84                  Text($r('app.string.enroll_face_guide_title'))
85                    .introSetSubtitleFormat()
86                    .margin({
87                      bottom: '8vp'
88                    })
89                  Text() {
90                    Span($r('app.string.face_guide_2d_way'))
91                    .introSetSpanFormat()
92                    Span($r('app.string.face_guide_2d_announce'))
93                    .introSetSpanFormat()
94                    Span($r('app.string.face_guide_2d_announce_link'))
95                    .introSetLinkFormat()
96                    .onClick(() => {
97                      router.push({ uri: 'pages/enrollDeclare' })
98                    })
99                    Span($r('app.string.period'))
100                    .introSetSpanFormat()
101                  }
102                    .textAlign(TextAlign.Center)
103                }
104              }
105            }
106            .scrollBarColor(this.scrollBarColor)
107            .scrollBarWidth('5vp')
108            .margin({ right: '12vp' })
109          }
110            .width(this.CONTENT_TYPE_WIDTH)
111            .flexGrow(1)
112
113          Column() {
114            Button({ type: ButtonType.Capsule, stateEffect: true }) {
115              Text($r('app.string.face_recognition_guide'))
116                .fontSize($r('sys.float.ohos_id_text_size_button1'))
117                .fontColor($r('sys.color.ohos_id_color_foreground_contrary'))
118                .fontWeight(FontWeight.Medium)
119            }
120            .backgroundColor($r('sys.color.ohos_id_color_activated'))
121            .width(this.BUTTON_TYPE_WIDTH)
122            .height('40vp')
123            .onClick(() => {
124              router.replace({ uri: 'pages/enrolling' })
125            })
126            .margin({
127              top: '16vp',
128              bottom: '24vp'
129            })
130          }
131            .width(this.CONTENT_TYPE_WIDTH)
132        }
133        .width('100%')
134        .height('100%')
135        .flexShrink(1)
136        .onAreaChange((_, newArea) => {
137          Log.info(this.TAG, 'new non app bar area :' + JSON.stringify(newArea))
138          CommonController.setNonAppBarDisplaySize(Number(newArea.width), Number(newArea.height))
139          Log.info(this.TAG, 'non app bar area w: ' + newArea.width + ' h: ' + newArea.height)
140        })
141      }
142      .width('100%')
143      .height('100%')
144      .backgroundColor($r('sys.color.ohos_id_color_sub_background'))
145      .onAreaChange((_, newArea) => {
146        Log.info(this.TAG, 'new display area :' + JSON.stringify(newArea))
147        CommonController.setDisplaySize(Number(newArea.width), Number(newArea.height))
148        Log.info(this.TAG, 'total area w: ' + newArea.width + ' h: ' + newArea.height)
149      })
150  }
151
152  onBackPress(): boolean {
153    Log.info(this.TAG, 'onBackPress+');
154    CommonController.routeBack();
155    Log.info(this.TAG, 'onBackPress-');
156    return true;
157  }
158}