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 { BroadCast } from '../../utils/BroadCast'; 17import { ColumnSize, ScreenManager } from '../../model/common/ScreenManager'; 18import { BroadCastConstants } from '../../model/common/BroadCastConstants'; 19import { Constants } from '../../model/common/Constants'; 20 21@Observed 22export class SaveDialogCallback { 23 saveAsNewCallback: Function = (): void => {}; 24 replaceOriginalCallback: Function = (): void => {}; 25} 26 27@Extend(Text) function buttonTextExtend() { 28 .fontSize($r('sys.float.ohos_id_text_size_button1')) 29 .fontColor($r('app.color.color_control_highlight')) 30 .textAlign(TextAlign.Center) 31 .fontWeight(FontWeight.Medium) 32} 33 34@Extend(Button) function verticalButtonExtend(isPcDevice: boolean) { 35 .width('100%') 36 .height($r('app.float.details_dialog_button_height')) 37 .borderRadius($r('sys.float.ohos_id_corner_radius_button')) 38 .backgroundColor(isPcDevice ? $r('sys.color.ohos_id_color_button_normal') : $r('app.color.transparent')) 39} 40 41@CustomDialog 42export struct SaveDialog { 43 @StorageLink('isHorizontal') isHorizontal: boolean = ScreenManager.getInstance().isHorizontal(); 44 @StorageLink('isSidebar') isSidebar: boolean = ScreenManager.getInstance().isSidebar(); 45 @StorageLink('leftBlank') leftBlank: number[] 46 = [0, ScreenManager.getInstance().getStatusBarHeight(), 0, ScreenManager.getInstance().getNaviBarHeight()]; 47 @Consume broadCast: BroadCast; 48 @Consume saveDialogCallback: SaveDialogCallback; 49 controller?: CustomDialogController; 50 readonly buttonWidth: number = 100 / 3; 51 private isPcDevice: boolean = AppStorage.get<string>('deviceType') === Constants.PC_DEVICE_TYPE; 52 53 @Builder horizontalThreeButtons() { 54 Stack({ alignContent: Alignment.Top }) { 55 Row() { 56 Column() { 57 Button() { 58 Text($r('app.string.save_dialog_cancel_text')) 59 .width('100%') 60 .buttonTextExtend() 61 } 62 .key('Cancel') 63 .margin({ left: $r('app.float.dialog_double_buttons_margin_left') }) 64 .backgroundColor($r('app.color.transparent')) 65 .height($r('app.float.details_dialog_button_height')) 66 .onClick(() => { 67 this.controller?.close(); 68 }) 69 }.width(`${this.buttonWidth}%`) 70 71 Column() { 72 Button() { 73 Text($r('app.string.save_dialog_overwrite_text')) 74 .width('100%') 75 .buttonTextExtend() 76 } 77 .key('Replace') 78 .margin({ 79 left: $r('app.float.dialog_double_buttons_margin_left'), 80 right: $r('app.float.dialog_double_buttons_margin_right') 81 }) 82 .backgroundColor($r('app.color.transparent')) 83 .height($r('app.float.details_dialog_button_height')) 84 .onClick(() => { 85 this.broadCast.emit(BroadCastConstants.SHOW_EDIT_SAVE_PROGRESS_DIALOG, []); 86 this.controller?.close(); 87 this.saveDialogCallback && this.saveDialogCallback.replaceOriginalCallback() 88 }) 89 }.width(`${this.buttonWidth}%`) 90 91 Column() { 92 Button() { 93 Text($r('app.string.save_dialog_save_text')) 94 .width('100%') 95 .buttonTextExtend() 96 } 97 .key('SaveAsNew') 98 .margin({ 99 right: $r('app.float.dialog_double_buttons_margin_right') 100 }) 101 .backgroundColor($r('app.color.transparent')) 102 .height($r('app.float.details_dialog_button_height')) 103 .onClick(() => { 104 this.controller?.close(); 105 this.broadCast.emit(BroadCastConstants.SHOW_EDIT_SAVE_PROGRESS_DIALOG, []); 106 this.saveDialogCallback && this.saveDialogCallback.saveAsNewCallback() 107 }) 108 }.width(`${this.buttonWidth}%`) 109 }.margin({ 110 left: $r('app.float.dialog_button_indent_margin'), 111 right: $r('app.float.dialog_button_indent_margin') 112 }) 113 } 114 .width('100%') 115 .height($r('app.float.details_dialog_button_area_height')) 116 } 117 118 @Builder verticalThreeButtons() { 119 Column() { 120 Column() { 121 Button() { 122 Text($r('app.string.save_dialog_save_text')) 123 .buttonTextExtend() 124 } 125 .key('SaveAsNew') 126 .verticalButtonExtend(this.isPcDevice) 127 .margin({ bottom: $r('app.float.vertical_three_buttons_margin_bottom') }) 128 .onClick(() => { 129 this.controller?.close(); 130 this.broadCast.emit(BroadCastConstants.SHOW_EDIT_SAVE_PROGRESS_DIALOG, []); 131 this.saveDialogCallback && this.saveDialogCallback.saveAsNewCallback() 132 }) 133 }.width('100%') 134 135 Column() { 136 Button() { 137 Text($r('app.string.save_dialog_overwrite_text')) 138 .buttonTextExtend() 139 } 140 .key('Replace') 141 .verticalButtonExtend(this.isPcDevice) 142 .margin({ bottom: $r('app.float.vertical_three_buttons_margin_bottom') }) 143 .onClick(() => { 144 this.broadCast.emit(BroadCastConstants.SHOW_EDIT_SAVE_PROGRESS_DIALOG, []); 145 this.controller?.close(); 146 this.saveDialogCallback && this.saveDialogCallback.replaceOriginalCallback() 147 }) 148 } 149 150 Column() { 151 Button() { 152 Text($r('app.string.save_dialog_cancel_text')) 153 .buttonTextExtend() 154 } 155 .key('Cancel') 156 .verticalButtonExtend(this.isPcDevice) 157 .onClick(() => { 158 this.controller?.close(); 159 }) 160 }.width('100%') 161 } 162 .margin({ 163 right: $r('app.float.image_save_dialog_button_margin'), 164 left: $r('app.float.image_save_dialog_button_margin'), 165 bottom: this.isPcDevice ? $r('app.float.pc_image_save_dialog_button_margin_bottom') : $r('app.float.image_save_dialog_button_margin_bottom'), 166 }) 167 } 168 169 build() { 170 Column() { 171 Text($r('app.string.save_dialog_title_text')) 172 .fontSize($r('sys.float.ohos_id_text_size_dialog_tittle')) 173 .fontColor($r('sys.color.ohos_id_color_text_primary')) 174 .fontWeight(FontWeight.Medium) 175 .height($r('app.float.title_default')) 176 .padding({ left: $r('app.float.dialog_content_margin'), right: $r('app.float.dialog_content_margin') }) 177 178 Text($r('app.string.save_dialog_context_text')) 179 .fontSize($r('sys.float.ohos_id_text_size_body1')) 180 .fontColor($r('sys.color.ohos_id_color_text_primary')) 181 .fontWeight(FontWeight.Regular) 182 .margin({ bottom: $r('sys.float.ohos_id_elements_margin_vertical_l') }) 183 .padding({ left: $r('app.float.dialog_content_margin'), right: $r('app.float.dialog_content_margin') }) 184 185 this.verticalThreeButtons() 186 } 187 .alignItems(HorizontalAlign.Start) 188 .width(this.isPcDevice ? $r('app.float.pc_dialog_width') : ScreenManager.getInstance() 189 .getColumnsWidth(ColumnSize.COLUMN_FOUR)) 190 .backgroundColor($r('app.color.white')) 191 .borderRadius($r('sys.float.ohos_id_corner_radius_dialog')) 192 .margin({ 193 right: $r('app.float.dialog_content_margin'), 194 left: $r('app.float.dialog_content_margin'), 195 bottom: this.isHorizontal || this.isSidebar ? 0 : Constants.DIALOG_BOTTOM_OFFSET + this.leftBlank[3] 196 }) 197 .shadow({ 198 radius: $r('app.float.dialog_defult_shadow_m_radio'), 199 color: $r('app.color.dialog_defult_shadow_m_color'), 200 offsetX: $r('app.float.dialog_defult_shadow_m_offsetX'), 201 offsetY: $r('app.float.dialog_defult_shadow_m_offsetY') 202 }) 203 } 204} 205