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