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 callTabletPage from './dialer/DialerTablet'; 16import contactPage from './contacts/ContactList'; 17import callPage from './phone/dialer/Dialer'; 18import IndexPresenter from '../presenter/IndexPresenter'; 19import { HiLog } from '../../../../../common/src/main/ets/util/HiLog'; 20import { PermissionManager } from '../../../../../common/src/main/ets/permission/PermissionManager'; 21import DialerPresenter from '../presenter/dialer/DialerPresenter'; 22import call from '@ohos.telephony.call'; 23import ContactListPresenter from '../presenter/contact/ContactListPresenter'; 24import CallRecordPresenter from '../presenter/dialer/callRecord/CallRecordPresenter'; 25import device from '@system.device'; 26 27const TAG = 'Index '; 28 29let storage = LocalStorage.GetShared() 30 31@Entry(storage) 32@Component 33struct Index { 34 private controller: TabsController = new TabsController(); 35 @State mPermissionManager: PermissionManager = PermissionManager.getInstance(); 36 @State @Watch("onIndexChanged") mIndexPresenter: IndexPresenter = IndexPresenter.getInstance(); 37 mDialerPresenter: DialerPresenter = DialerPresenter.getInstance(); 38 @State bottomTabIndex: number = call.hasVoiceCapability() ? 0 : 1; 39 @LocalStorageProp('breakpoint') curBp: string = 'sm'; 40 41 onIndexChanged(): void { 42 HiLog.i(TAG, "uriTabIndex change:" + JSON.stringify(this.mIndexPresenter.tabsIndex)); 43 this.controller.changeIndex(this.mIndexPresenter.tabsIndex); 44 this.bottomTabIndex = this.mIndexPresenter.tabsIndex; 45 this.mDialerPresenter.editPhoneNumber(this.mIndexPresenter.editPhoneNumber); 46 } 47 48 pageTransition() { 49 PageTransitionEnter({ duration: 100 }) 50 PageTransitionExit({ duration: 100 }) 51 } 52 53 onPageShow() { 54 this.mIndexPresenter.onPageShow(); 55 } 56 57 aboutToAppear() { 58 this.mPermissionManager.initPermissions(); 59 this.mIndexPresenter.aboutToAppear(); 60 this.getInfo(); 61 } 62 63 aboutToDisappear() { 64 this.mIndexPresenter.aboutToDisappear(); 65 } 66 67 getInfo() { 68 device.getInfo({ 69 success: function (data) { 70 AppStorage.SetOrCreate("windowHeight", data.windowHeight / data.screenDensity) 71 }, 72 fail: function (data, code) { 73 HiLog.i(TAG, 'Failed to obtain device information. Error code:' + code + '; Error information: ' + data); 74 }, 75 }); 76 } 77 78 build() { 79 Column() { 80 if (this.mPermissionManager.isAllPermissionsGranted()) { 81 Flex({ 82 direction: this.curBp === 'lg' ? FlexDirection.Row : FlexDirection.Column, 83 alignItems: ItemAlign.Start, 84 justifyContent: FlexAlign.Start 85 }) { 86 if (this.curBp === 'lg') { 87 Column() { 88 TabBars({ controller: this.controller, bottomTabIndex: $bottomTabIndex }) 89 } 90 .height('100%') 91 .zIndex(3) 92 } 93 Column() { 94 Tabs({ 95 barPosition: this.curBp === 'lg' ? BarPosition.Start : BarPosition.End, 96 index: this.bottomTabIndex, 97 controller: this.controller 98 }) { 99 if (this.curBp !== 'lg') { 100 TabContent() { 101 callPage() 102 } 103 } else { 104 TabContent() { 105 callTabletPage() 106 } 107 } 108 TabContent() { 109 contactPage() 110 } 111 } 112 .width('100%') 113 .vertical(false) 114 .barMode(BarMode.Fixed) 115 .barWidth(0) 116 .barHeight(0) 117 .scrollable(false) 118 .animationDuration(0) 119 120 } 121 .layoutWeight(this.curBp === 'lg' ? 1 : 0) 122 .flexShrink(this.curBp === 'lg' ? 0 : 1) 123 .height(this.curBp === 'lg' ? '100%' : null) 124 .width(this.curBp === 'lg' ? 0 : '100%') 125 126 if (this.curBp !== 'lg') { 127 Column() { 128 TabBars({ controller: this.controller, bottomTabIndex: $bottomTabIndex }) 129 } 130 .backgroundColor($r("sys.color.ohos_id_color_sub_background")) 131 .width('100%') 132 .height($r("app.float.id_item_height_large")) 133 .flexShrink(0) 134 } 135 } 136 .backgroundColor($r("sys.color.ohos_fa_sub_background")) 137 .width('100%') 138 .height('100%') 139 } 140 } 141 .width('100%') 142 .height('100%') 143 } 144} 145 146@Component 147struct TabBars { 148 private tabSrc: number[] = [0, 1]; 149 private controller: TabsController; 150 @Link bottomTabIndex: number; 151 @State mIndexPresenter: IndexPresenter = IndexPresenter.getInstance() 152 @LocalStorageProp('breakpoint') curBp: string = 'sm' 153 154 build() { 155 Flex({ 156 direction: this.curBp === 'lg' ? FlexDirection.Column : FlexDirection.Row, 157 alignItems: ItemAlign.Center, 158 justifyContent: FlexAlign.Center 159 }) { 160 ForEach(this.tabSrc, item => { 161 if (!((!call.hasVoiceCapability()) && item === 0)) { 162 Column() { 163 Column() { 164 Image(this.mIndexPresenter.getTabSrc(this.bottomTabIndex, item)) 165 .objectFit(ImageFit.Contain) 166 .width($r("app.float.id_card_image_small")) 167 .height($r("app.float.id_card_image_small")) 168 .fillColor(this.mIndexPresenter.getTabTextColor(this.bottomTabIndex, item)) 169 Text(this.mIndexPresenter.getTabText(this.bottomTabIndex, item)) 170 .fontWeight(FontWeight.Medium) 171 .margin(this.curBp === 'lg' ? 172 { top: $r("app.float.id_card_margin_mid") } : {}) 173 .fontSize($r("sys.float.ohos_id_text_size_caption")) 174 .fontColor(this.mIndexPresenter.getTabTextColor(this.bottomTabIndex, item)) 175 } 176 .onClick(() => { 177 if (this.bottomTabIndex != item) { 178 this.controller.changeIndex(item); 179 this.bottomTabIndex = item; 180 this.mIndexPresenter.tabsIndex = item; 181 if (item == 0) { 182 ContactListPresenter.getInstance().onPageHide(); 183 CallRecordPresenter.getInstance().onPageShow(); 184 } else if (item == 1) { 185 CallRecordPresenter.getInstance().onPageHide(); 186 ContactListPresenter.getInstance().onPageShow(); 187 } 188 } 189 }) 190 .width($r("app.float.id_card_image_mid")) 191 .height($r("app.float.id_card_image_mid")) 192 } 193 .justifyContent(FlexAlign.Center) 194 .height(this.curBp === 'lg' ? 195 '130vp' : $r("app.float.id_item_height_large")) 196 .layoutWeight(this.curBp === 'lg' ? 0 : 1) 197 } 198 }, item => item.toString()) 199 } 200 .width(this.curBp === 'lg' ? 201 '96vp' : '100%') 202 .height(this.curBp === 'lg' ? 203 '100%' : $r("app.float.id_item_height_large")) 204 .padding(this.curBp === 'lg' ? 205 { left: $r("app.float.id_card_margin_max"), right: $r("app.float.id_card_margin_max") } : {}) 206 } 207}