• 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 */
15
16import { ScreenManager } from '../model/common/ScreenManager';
17import { Constants } from '../model/common/Constants';
18import { Log } from '../utils/Log';
19
20const TAG: string = 'common_NoPhotoComponent';
21
22@Component
23export struct NoPhotoComponent {
24  title: Resource;
25
26  // set an initial value temporarily, later change to 0.
27  @State offSetY: number = Constants.EMPTY_PAGE_DEFAULT_OFFSET;
28  @StorageLink('isHorizontal') isHorizontal: boolean = ScreenManager.getInstance().isHorizontal();
29  @StorageLink('isSidebar') isSidebar: boolean = ScreenManager.getInstance().isSidebar();
30  @StorageLink('leftBlank') leftBlank: [number, number, number, number]
31    = [0, ScreenManager.getInstance().getStatusBarHeight(), 0, ScreenManager.getInstance().getNaviBarHeight()];
32  @State bigScreen: boolean = false;
33
34  aboutToAppear(): void {
35    Log.info(TAG, `aboutToAppear`);
36    this.updateImageLayout = this.updateImageLayout.bind(this);
37    ScreenManager.getInstance().on(ScreenManager.ON_WIN_SIZE_CHANGED, this.updateImageLayout);
38    this.updateImageLayout();
39  }
40
41  aboutToDisappear(): void {
42    Log.info(TAG, 'aboutToDisappear');
43    ScreenManager.getInstance().off(ScreenManager.ON_WIN_SIZE_CHANGED, this.updateImageLayout);
44    this.updateImageLayout = null;
45  }
46
47  build() {
48    Flex({
49      direction: FlexDirection.Column,
50      justifyContent: FlexAlign.Start,
51      alignItems: ItemAlign.Center
52    }) {
53      Column() {
54        Image($r('app.media.no_image_icon'))
55          .height(this.bigScreen ? $r('app.float.empty_page_picture_size_large') : $r('app.float.empty_page_picture_size'))
56          .width(this.bigScreen ? $r('app.float.empty_page_picture_size_large') : $r('app.float.empty_page_picture_size'))
57          .margin({
58            bottom: $r('sys.float.ohos_id_elements_margin_vertical_m'),
59          })
60        Text(this.title)
61          .fontSize($r('sys.float.ohos_id_text_size_body2'))
62          .fontFamily($r('app.string.id_text_font_family_regular'))
63          .fontColor($r('app.color.tertiary_title_text_color'))
64      }
65      .width('100%')
66      .offset({ x: 0, y: this.offSetY })
67      .padding({ left: $r('app.float.max_padding_start'), right: $r('app.float.max_padding_start') })
68    }
69    .width('100%')
70  }
71
72  private updateImageLayout(): void {
73    this.bigScreen = Math.min(ScreenManager.getInstance().getWinHeight(), ScreenManager.getInstance()
74      .getWinWidth()) > Constants.BIG_SCREEN_WIDTH
75    let halfImageHeight = this.bigScreen ? Constants.BIG_EMPTY_ICON_SIZE / 2 : Constants.SMALL_EMPTY_ICON_SIZE / 2
76    let screenHeight = ScreenManager.getInstance().getWinHeight() - this.leftBlank[1] - this.leftBlank[3]
77    if (this.isHorizontal) {
78      if (this.isSidebar) {
79        // Pad landscape
80        this.offSetY = screenHeight / Constants.NUMBER_2 - halfImageHeight - Constants.ActionBarHeight;
81      } else {
82        // Phone landscape
83        this.offSetY = (screenHeight - Constants.ActionBarHeight) / Constants.NUMBER_2 - halfImageHeight;
84      }
85    } else {
86      // Phone vertical screen
87      this.offSetY = screenHeight * Constants.EMPTY_PAGE_OFFSET_RADIO -
88      Constants.ActionBarHeight - halfImageHeight;
89    }
90    Log.info(TAG, `isHorizontal: ${this.isHorizontal}, offSetY: ${this.offSetY}, bigScreen: ${this.bigScreen}`);
91  }
92}