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