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 Constants from '../utils/constant'; 17import { GrantDialogViewState } from '../../ServiceExtAbility/GrantDialogViewState'; 18 19@Extend(Button)function locationButton() { 20 .backgroundColor($r('sys.color.ohos_id_color_dialog_bg')) 21 .fontWeight(FontWeight.Medium) 22 .fontSize(Constants.TEXT_SMALLER_FONT_SIZE) 23 .height(Constants.LOCATION_BUTTON_HEIGHT) 24 .borderRadius(Constants.LOCATION_BUTTON_RADIUS) 25} 26 27@Component 28export struct LocationCanvas { 29 @Link viewState: GrantDialogViewState; 30 31 build() { 32 Column() { 33 Image($r('app.media.img_location_map')) 34 .opacity($r('app.float.opacity_location')) 35 .width(Constants.FULL_WIDTH) 36 .height(Constants.FULL_HEIGHT) 37 .scale({ 38 x: ( 39 (this.viewState.locationFlag == Constants.LOCATION_UPGRADE) || 40 (this.viewState.locationFlag == Constants.LOCATION_BOTH_PRECISE) 41 ) 42 ? Constants.LOCATION_CANVAS_ZOOM_SCALE : Constants.LOCATION_CANVAS_INITIAL_SCALE, 43 y: ( 44 (this.viewState.locationFlag == Constants.LOCATION_UPGRADE) || 45 (this.viewState.locationFlag == Constants.LOCATION_BOTH_PRECISE) 46 ) 47 ? Constants.LOCATION_CANVAS_ZOOM_SCALE : Constants.LOCATION_CANVAS_INITIAL_SCALE 48 }) 49 .animation({ 50 duration: Constants.LOCATION_ANIMATION_DURATION, // Animation duration 51 curve: Curve.Smooth, // The animation curve 52 playMode: PlayMode.Normal // The animation mode 53 }) 54 Image($r('app.media.ic_public_gps_filled')) 55 .fillColor($r('sys.color.brand')) 56 .width(Constants.LOCATION_ICON_WIDTH) 57 .height(Constants.LOCATION_ICON_HEIGHT) 58 .position({ x: Constants.LOCATION_ICON_POSITION_X, y: Constants.LOCATION_ICON_POSITION_Y }) 59 .opacity( 60 ( 61 (this.viewState.locationFlag == Constants.LOCATION_UPGRADE) || 62 (this.viewState.locationFlag == Constants.LOCATION_BOTH_PRECISE) 63 ) ? 1 : 0 64 ) 65 .scale({ 66 x: ( 67 (this.viewState.locationFlag == Constants.LOCATION_UPGRADE) || 68 (this.viewState.locationFlag == Constants.LOCATION_BOTH_PRECISE) 69 ) ? 1 : 0.8, 70 y: ( 71 (this.viewState.locationFlag == Constants.LOCATION_UPGRADE) || 72 (this.viewState.locationFlag == Constants.LOCATION_BOTH_PRECISE) 73 ) ? 1 : 0.8 74 }) 75 .animation({ 76 duration: Constants.LOCATION_ANIMATION_DURATION / 2, // Animation duration 77 delay: this.viewState.locationFlag == Constants.LOCATION_BOTH_PRECISE ? 78 (Constants.LOCATION_ANIMATION_DURATION / 2) : 0, 79 curve: Curve.Smooth, // The animation curve 80 playMode: PlayMode.Normal // The animation mode 81 }) 82 Circle({ width: Constants.LOCATION_CIRCLE_DIA, height: Constants.LOCATION_CIRCLE_DIA }) 83 .position({ x: Constants.LOCATION_CIRCLE_POSITION_X, y: Constants.LOCATION_CIRCLE_POSITION_Y }) 84 .fill($r('app.color.location_circle_color')) 85 .fillOpacity(Constants.LOCATION_CIRCLE_OPACITY) 86 .stroke($r('app.color.location_circle_color')) 87 .scale({ 88 x: ( 89 (this.viewState.locationFlag == Constants.LOCATION_UPGRADE) || 90 (this.viewState.locationFlag == Constants.LOCATION_BOTH_PRECISE) 91 ) ? 0 : 1, 92 y: ( 93 (this.viewState.locationFlag == Constants.LOCATION_UPGRADE) || 94 (this.viewState.locationFlag == Constants.LOCATION_BOTH_PRECISE) 95 ) ? 0 : 1 96 }) 97 .animation({ 98 duration: Constants.LOCATION_ANIMATION_DURATION, // Animation duration 99 curve: Curve.Smooth, // The animation curve 100 playMode: PlayMode.Normal // The animation mode 101 }) 102 Row() { 103 if (this.viewState.locationFlag == Constants.LOCATION_BOTH_PRECISE) { 104 Button($r('app.string.precise_location_on')) 105 .locationButton() 106 .fontColor($r('sys.color.font_emphasize')) 107 .onClick(() => { this.viewState.locationFlag = Constants.LOCATION_BOTH_FUZZY }) 108 } 109 if (this.viewState.locationFlag == Constants.LOCATION_BOTH_FUZZY) { 110 Button($r('app.string.precise_location_off')) 111 .locationButton() 112 .fontColor($r('sys.color.font_secondary')) 113 .onClick(() => { this.viewState.locationFlag = Constants.LOCATION_BOTH_PRECISE }) 114 } 115 }.position({ x: 0, y: 0 }) 116 .width(Constants.FULL_WIDTH) 117 .height(Constants.FULL_HEIGHT) 118 .alignItems(VerticalAlign.Top) 119 .justifyContent(FlexAlign.Center) 120 .padding({ top: Constants.LOCATION_BUTTON_POSITION_Y }) 121 }.width(Constants.FULL_WIDTH) 122 .height(Constants.LOCATION_CANVAS_HEIGHT) 123 .margin({ top: Constants.LOCATION_CANVAS_MARGIN_TOP, bottom: Constants.LOCATION_CANVAS_MARGIN_BOTTOM }) 124 .clip(true) 125 } 126} 127