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 { ScreenManager } from '../model/common/ScreenManager'; 17import { Constants } from '../model/common/Constants'; 18import { Log } from '../utils/Log'; 19 20const IMAGE_SCREEN_RATIO = 0.8 21const TAG: string = 'common_NoPhotoIndexComponent'; 22 23@Component 24export struct NoPhotoIndexComponent { 25 index: number; 26 hasBarSpace: boolean; 27 28 // set an initial value temporarily, later change to 0. 29 @State imageSize: number = 0; 30 private reSizeFunc = this.reSizeLayout.bind(this); 31 32 aboutToAppear(): void { 33 Log.info(TAG, 'aboutToAppear'); 34 ScreenManager.getInstance().on(ScreenManager.ON_WIN_SIZE_CHANGED, this.reSizeFunc); 35 this.updateImageSize(); 36 } 37 38 reSizeLayout() { 39 this.updateImageSize(); 40 } 41 42 aboutToDisappear(): void { 43 Log.info(TAG, 'aboutToDisappear'); 44 ScreenManager.getInstance().off(ScreenManager.ON_WIN_SIZE_CHANGED, this.reSizeFunc); 45 this.reSizeFunc = null; 46 } 47 48 updateImageSize() { 49 let winWidth = ScreenManager.getInstance().getWinWidth(); 50 let winHeightHalf = ScreenManager.getInstance().getWinHeight() / 2; 51 this.imageSize 52 = (winWidth < winHeightHalf) ? (winWidth * IMAGE_SCREEN_RATIO) : (winHeightHalf * IMAGE_SCREEN_RATIO) 53 Log.info(TAG, `window size: ${winWidth}, ${winHeightHalf} ,size = ${this.imageSize} index:${this.index}`); 54 } 55 56 build() { 57 Row() { 58 Column() { 59 Image((this.index == Constants.TIMELINE_PAGE_INDEX) ? $r('app.media.photo_empty') : $r('app.media.album_empty')) 60 .height(this.imageSize) 61 .width(this.imageSize) 62 .margin({ 63 bottom: $r('app.float.image_margin_horizontal'), 64 }) 65 .key('EmptyPhotoOrAlbumIco') 66 .onError(() => { 67 Log.info(TAG, `image show error index:${this.index}`); 68 }) 69 if (Constants.DISTRIBUTED_ALBUM_PAGE_INDEX == this.index) { 70 Text($r('app.string.no_distributed_photo_head_title_album')) 71 .fontSize($r('sys.float.ohos_id_text_size_headline8')) 72 .fontFamily($r('app.string.id_text_font_family_regular')) 73 .fontColor($r('sys.color.ohos_id_color_text_primary')) 74 .margin({ 75 left: $r('app.float.max_padding_start'), 76 right: $r('app.float.max_padding_start'), 77 bottom: $r('sys.float.ohos_id_text_paragraph_margin_s'), 78 }) 79 .key('EmptyPhotoOrAlbumText') 80 } else { 81 Text((this.index == Constants.TIMELINE_PAGE_INDEX) ? $r('app.string.no_photo_head_title_timeline') 82 : $r('app.string.no_photo_head_title_album')) 83 .fontSize($r('sys.float.ohos_id_text_size_headline8')) 84 .fontFamily($r('app.string.id_text_font_family_medium')) 85 .fontColor($r('sys.color.ohos_id_color_text_primary')) 86 .margin({ 87 left: $r('app.float.max_padding_start'), 88 right: $r('app.float.max_padding_start'), 89 bottom: $r('sys.float.ohos_id_text_paragraph_margin_s'), 90 }) 91 .key('EmptyPhotoOrAlbumHeadTitle') 92 Text((this.index == Constants.TIMELINE_PAGE_INDEX) ? $r('app.string.no_photo_sub_title_timeline') 93 : $r('app.string.no_photo_sub_title_album')) 94 .fontSize($r('sys.float.ohos_id_text_size_body2')) 95 .fontFamily($r('app.string.id_text_font_family_regular')) 96 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 97 .margin({ 98 left: $r('app.float.max_padding_start'), 99 right: $r('app.float.max_padding_start'), 100 bottom: $r('sys.float.ohos_id_text_paragraph_margin_s'), 101 }) 102 .key('EmptyPhotoOrAlbumSubTitle') 103 } 104 } 105 .width('100%') 106 .margin({ top: this.hasBarSpace ? $r('app.float.appbar_none_img_height') : $r('app.float.appbar_zero_height') }) 107 } 108 .width('100%') 109 .height('100%') 110 .alignItems(VerticalAlign.Top) 111 .justifyContent(FlexAlign.Start) 112 } 113}