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 */
15
16import GlobalResourceManager from '@ohos/utils/src/main/ets/default/baseUtil/GlobalResourceManager'
17import FolderData from '@ohos/utils/src/main/ets/default/model/databaseModel/FolderData'
18import FolderUtil from '@ohos/utils/src/main/ets/default/baseUtil/FolderUtil'
19import NoteData from '@ohos/utils/src/main/ets/default/model/databaseModel/NoteData'
20import NoteUtil from '@ohos/utils/src/main/ets/default/baseUtil/NoteUtil'
21import { circleColorArray, fontColorArray, SysDefFolderUuid, DeleteFileType, FolderType, LogUtil } from '@ohos/utils'
22import inputMethod from '@ohos.inputMethod'
23
24const TAG = "CusDialogComp"
25
26@CustomDialog
27export struct NewOrEditFolderDialog {
28  newOrEditFolderDialogCtl: CustomDialogController
29  confirm: (color: string, name: string) => void
30  @State inputName: string = ""
31  private oriInputName: string = ""
32  private oriSelectedColor: string = ""
33  private editFolderUuid: string = ""
34  private dialogType: number = 0 // 0表示新建文件夹  1表示修改文件夹
35  @State isExisted: boolean = false
36  @StorageLink('AllFolderArray') AllFolderArray: FolderData[] = AppStorage.Link('AllFolderArray')
37  @Consume('SelectedColor') selectedColor: string
38
39  build() {
40    Column() {
41      Text(this.dialogType == 0 ? $r("app.string.createFolder") : $r("app.string.editFolder"))
42        .fontSize(20)
43        .height(56)
44        .margin({ left: 24 })
45        .fontWeight(FontWeight.Medium)
46      // folder color choose
47      Flex({ wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween }) {
48        ForEach(circleColorArray, (colorStr: string) => {
49          ColorCircleComp({ circleColor: colorStr })
50        }, colorStr => colorStr)
51      }.margin({ bottom: 12, left: 24, right: 24 })
52      // folder name input
53      Flex({ wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween }) {
54        Image($r("app.media.folder"))
55          .objectFit(ImageFit.Fill)
56          .width(24)
57          .height(24)
58          .flexShrink(0)
59          .fillColor(this.selectedColor)
60        TextInput({ text: this.inputName, placeholder: $r("app.string.input_placeholder") })
61          .placeholderFont({ size: 18 })
62          .maxLength(20)
63          .borderRadius(15)
64          .backgroundColor($r("app.color.New_folder_input_box_color"))
65          .width('100%')
66          .padding({ left: 12, bottom: -12 })
67          .onChange((value: string) => {
68            this.inputName = value
69            FolderUtil.duplicateDetection(this.inputName, this.AllFolderArray).then(result => {
70              this.isExisted = result
71            })
72          })
73          .restoreId(1)
74      }.margin({ bottom: 4, left: 24, right: 24 })
75
76      Divider()
77        .height(1)
78        .margin({ left: 64, right: 24 })
79        .color((this.isExisted && this.inputName != this.oriInputName) ? $r("app.color.category_already_exist_divider_color") : $r("app.color.divider_color_182431"))
80      if (this.isExisted && this.inputName != this.oriInputName) {
81        Text($r("app.string.category_already_exist"))
82          .fontSize(10)
83          .margin({ left: 64, top: 4 })
84          .fontColor($r("app.color.category_already_exist_font_color"))
85          .visibility((this.isExisted && this.inputName != this.oriInputName) ? Visibility.Visible : Visibility.None)
86      } else {
87        Column() {
88        }
89        .height(16)
90        .width("100%")
91      }
92
93      // button group
94      Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
95        Text($r("app.string.cancel"))
96          .fontSize(18)
97          .textAlign(TextAlign.Center)
98          .fontColor($r("app.color.button_color_f86d05"))
99          .width('48%')
100          .onClick(() => {
101            this.newOrEditFolderDialogCtl.close()
102            inputMethod.getController().stopInputSession();
103          })
104        Divider()
105          .vertical(true)
106          .height(15)
107          .strokeWidth(1)
108          .color($r("app.color.divider_color_e4e4e4"))
109        Text($r("app.string.save"))
110          .opacity(this.inputName == ""
111                   || (this.oriSelectedColor == this.selectedColor && this.inputName == this.oriInputName && this.dialogType == 1)
112                   || (this.isExisted && this.dialogType == 0)
113                   || (this.isExisted && this.dialogType == 1 && this.inputName != this.oriInputName) ? 0.4 : 1)
114          .enabled(this.inputName == ""
115                   || (this.oriSelectedColor == this.selectedColor && this.inputName == this.oriInputName && this.dialogType == 1)
116                   || (this.isExisted && this.dialogType == 0)
117                   || (this.isExisted && this.dialogType == 1 && this.inputName != this.oriInputName) ? false : true)
118          .fontSize(18)
119          .textAlign(TextAlign.Center)
120          .fontColor($r("app.color.button_color_f86d05"))
121          .width('48%')
122          .onClick(() => {
123            this.newOrEditFolderDialogCtl.close()
124            if (this.inputName.replace(/\s+/g, '') == '') {
125              return
126            } else {
127              this.confirm(this.selectedColor, this.inputName)
128            }
129            inputMethod.getController().stopInputSession();
130          })
131      }.width('100%')
132      .margin({ top: 21, bottom: 25 })
133    }
134    .width(336)
135    .borderRadius(36)
136    .backgroundColor($r("app.color.create_folder_bg_color"))
137    .alignItems(HorizontalAlign.Start)
138    .margin({ bottom: 16, left: 12, right: 12 })
139  }
140
141  aboutToAppear(): void {
142    var currentFolder: FolderData = FolderUtil.getFolderData(this.AllFolderArray, this.editFolderUuid) // 获取当前选中的文件夹
143    if (currentFolder == null) {
144      return
145    }
146    if (currentFolder.folder_type == FolderType.CusDef) {
147      this.inputName = currentFolder.name
148      this.oriInputName = this.inputName
149      this.oriSelectedColor = currentFolder.color
150    } else {
151      GlobalResourceManager.getStringByResource(FolderUtil.getFolderText(currentFolder)).then(result => {
152        this.inputName = result
153        this.oriInputName = this.inputName
154        this.oriSelectedColor = currentFolder.color
155      })
156    }
157  }
158}
159
160@Component
161struct ColorCircleComp {
162  private circleColor: string
163  @Consume('SelectedColor') selectedColor: string
164
165  build() {
166    Stack({ alignContent: Alignment.Center }) {
167      Circle({ width: 24, height: 24 })
168        .fill(this.circleColor)
169      Circle({ width: 12, height: 12 })
170        .fill($r("app.color.color_ffffff"))
171        .visibility(this.circleColor == this.selectedColor ? Visibility.Visible : Visibility.None)
172    }.onClick(() => {
173      try {
174        this.selectedColor = this.circleColor
175      } catch (error) {
176        LogUtil.error(TAG, "selectedColor error: ", error.toString());
177      }
178    })
179  }
180}
181
182@CustomDialog
183export struct DeleteDialog {
184  @StorageLink('CheckedNoteArray') CheckedNoteArray: NoteData[] = []
185  @StorageLink('AllNoteArray') AllNoteArray: NoteData[] = AppStorage.Link('AllNoteArray')
186  @StorageLink('AllFolderArray') AllFolderArray: FolderData[] = AppStorage.Link('AllFolderArray')
187  @Consume('SelectedNoteData') selectedNoteData: NoteData
188  @Consume('SelectedFolderData') selectedFolderData: FolderData
189  private multiSelect: boolean = false
190  private deleteFileType = DeleteFileType.NoteData
191  noteDataDeleteDialogCtl: CustomDialogController
192  onConfirm: () => void
193
194  build() {
195    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.SpaceBetween }) {
196      Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
197        if (this.deleteFileType == DeleteFileType.FolderData) {
198          Text($r("app.string.delete_tips"))
199            .fontSize(14)
200            .textAlign(TextAlign.Center)
201            .maxLines(1)
202        } else {
203          Text(this.selectedFolderData.uuid == SysDefFolderUuid.RecentDeletes ? $r("app.string.deleteNoteComplete") : $r("app.string.deleteNote"))
204            .fontSize(14)
205            .textAlign(TextAlign.Center)
206            .maxLines(1)
207            .visibility(this.multiSelect == false || this.selectedFolderData.uuid == SysDefFolderUuid.RecentDeletes ? Visibility.Visible : Visibility.None)
208          if (this.CheckedNoteArray.length ==
209          NoteUtil.getNoteDataArray(this.AllNoteArray, this.selectedFolderData.uuid).length) {
210            Text($r("app.string.deleteAllNote"))
211              .fontSize(14)
212              .textAlign(TextAlign.Center)
213              .maxLines(1)
214              .visibility(this.multiSelect == false || this.selectedFolderData.uuid == SysDefFolderUuid.RecentDeletes ? Visibility.None : Visibility.Visible)
215          } else if (this.CheckedNoteArray.length > 1) {
216            Text($r("app.string.deletePartNote", this.CheckedNoteArray.length))
217              .fontSize(14)
218              .textAlign(TextAlign.Center)
219              .maxLines(1)
220              .visibility(this.multiSelect == false || this.selectedFolderData.uuid == SysDefFolderUuid.RecentDeletes ? Visibility.None : Visibility.Visible)
221          } else {
222            Text($r("app.string.deleteNote"))
223              .fontSize(14)
224              .textAlign(TextAlign.Center)
225              .maxLines(1)
226              .visibility(this.multiSelect == false || this.selectedFolderData.uuid == SysDefFolderUuid.RecentDeletes ? Visibility.None : Visibility.Visible)
227          }
228        }
229      }
230      .width(288)
231      .height(28.5)
232
233      Flex({ justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
234        Text($r("app.string.cancel"))
235          .fontSize(16)
236          .fontColor($r("app.color.button_color_f86d05"))
237          .textAlign(TextAlign.Center)
238          .maxLines(1)
239          .width('50%')
240          .height('100%')
241          .onClick(() => {
242            this.noteDataDeleteDialogCtl.close()
243          })
244        Divider()
245          .vertical(true)
246          .strokeWidth(1)
247          .color($r("app.color.divider_color_e4e4e4"))
248          .height(40)
249        Text($r("app.string.delete"))
250          .fontSize(16)
251          .fontColor($r("app.color.delete_color_fa2a2d"))
252          .textAlign(TextAlign.Center)
253          .maxLines(1)
254          .width('50%')
255          .height('100%')
256          .onClick(() => {
257            this.noteDataDeleteDialogCtl.close()
258            this.onConfirm()
259          })
260      }
261      .width('100%')
262      .height('50%')
263    }
264    .width(336)
265    .height(117)
266    .borderRadius(36)
267    .padding({ top: 24, bottom: 16, left: 16, right: 16 })
268    .backgroundColor($r("app.color.delete_note_bg_color"))
269    .margin({ bottom: 16, left: 12, right: 12 })
270  }
271}
272
273@Component
274struct NoteDataMoveItemComp {
275  @StorageLink('CheckedNoteArray') CheckedNoteArray: NoteData[] = []
276  @StorageLink('AllFolderArray') AllFolderArray: FolderData[] = []
277  private folderItem: FolderData
278  dividerShow: boolean = true
279
280  build() {
281    Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.NoWrap }) {
282      Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.NoWrap }) {
283        Image(FolderUtil.getFolderIcon(this.folderItem!.uuid))
284          .objectFit(ImageFit.Fill)
285          .width(24)
286          .height(24)
287          .flexShrink(0)
288          .fillColor(FolderUtil.getFolderIconColor(this.AllFolderArray, this.folderItem!.uuid, false))
289      }
290      .width(24)
291
292      Column() {
293        Flex({ alignItems: ItemAlign.Center, wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween }) {
294          Text(FolderUtil.getFolderText(this.folderItem!))
295            .fontSize(16)
296            .textAlign(TextAlign.Center)
297            .maxLines(1)
298            .textOverflow({ overflow: TextOverflow.Ellipsis })
299            .flexShrink(1)
300            .fontWeight(FontWeight.Medium)
301          Image((FolderUtil.getCommonFolder(this.AllFolderArray, this.CheckedNoteArray) == null
302            || FolderUtil.getCommonFolder(this.AllFolderArray, this.CheckedNoteArray) != this.folderItem!) ? $r("app.media.foldMove_unselect") : $r("app.media.foldMove_select"))
303            .objectFit(ImageFit.Fill)
304            .width(24)
305            .height(24)
306            .flexShrink(0)
307        }
308        .width(248)
309        .height(55)
310
311        if (this.dividerShow) {
312          Divider()
313            .color($r("app.color.divider_color_e4e4e4"))
314            .strokeWidth(1)
315        }
316
317      }
318      .padding({ left: 16 })
319    }
320    .width(288)
321    .height(56)
322    .visibility(FolderUtil.isFolderMoveIn(this.folderItem!) ? Visibility.Visible : Visibility.None)
323  }
324}
325
326@CustomDialog
327export struct NoteDataMoveDialog {
328  noteDataMoveDialogCtl: CustomDialogController
329  onConfirm: (folderUuid: string) => void
330  NoteDataMoveArray: FolderData[]
331  @StorageLink('AllFolderArray') AllFolderArray: FolderData[] = []
332
333  aboutToAppear() {
334    this.NoteDataMoveArray = this.AllFolderArray.slice(2, this.AllFolderArray.length);
335    if (this.AllFolderArray[1] === undefined || this.AllFolderArray[1] === null) {
336      LogUtil.info(TAG, "this AllFolderArray[1] undefined")
337      return
338    }
339    this.NoteDataMoveArray.push(this.AllFolderArray[1]);
340  }
341
342  build() {
343    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, wrap: FlexWrap.NoWrap }) {
344      Flex({ alignItems: ItemAlign.Center }) {
345        Text($r("app.string.chooseFolder"))
346          .fontSize(20)
347          .fontWeight(600)
348          .fontWeight(FontWeight.Medium)
349      }.height(56)
350      .width(288)
351
352      List() {
353        if (this.NoteDataMoveArray !== undefined && this.NoteDataMoveArray !== null && this.NoteDataMoveArray !== []) {
354          ForEach(this.NoteDataMoveArray.slice(0, this.NoteDataMoveArray.length - 1), (item) => {
355            ListItem() {
356              NoteDataMoveItemComp({ folderItem: item })
357            }
358            .onClick(() => {
359              this.noteDataMoveDialogCtl.close()
360              this.onConfirm(item.uuid)
361            })
362          }, noteItem => noteItem.uuid)
363        }
364        ListItem() {
365          NoteDataMoveItemComp({
366            folderItem: this.NoteDataMoveArray[this.NoteDataMoveArray.length - 1],
367            dividerShow: false
368          })
369        }
370        .onClick(() => {
371          this.noteDataMoveDialogCtl.close()
372          this.onConfirm(this.NoteDataMoveArray[this.NoteDataMoveArray.length - 1].uuid)
373        })
374      }.listDirection(Axis.Vertical)
375      .edgeEffect(EdgeEffect.Spring)
376      .height(this.AllFolderArray.length > 12 ? 504 : (this.AllFolderArray.length - 3) * 56)
377
378      Flex({ alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
379        Text($r("app.string.cancel"))
380          .fontSize(16)
381          .fontColor($r("app.color.button_color_f86d05"))
382          .onClick(() => {
383            this.noteDataMoveDialogCtl.close()
384          })
385      }.height(56)
386      .width(288)
387    }
388    .width(336)
389    .borderRadius(36)
390    .height(this.AllFolderArray.length > 12 ? 616 : (this.AllFolderArray.length - 1) * 56)
391    .padding({ left: 24, right: 24 })
392    .backgroundColor($r("app.color.choose_folder_bg_color"))
393    .margin({ bottom: 16, left: 12, right: 12 })
394  }
395}
396
397let inSetValue = AppStorage.Link('inSetValue')
398
399@CustomDialog
400export struct EditContentDialog {
401  editContentDialogCtl: CustomDialogController
402  confirm: (excuteJs: string) => void
403  @State selectFontColor: string = fontColorArray[0]
404  @Consume('SelectedNoteData') selectedNoteData: NoteData
405  private circleColor: string
406  private fontSize: number
407
408  aboutToAppear() {
409    this.confirm("javascript:RICH_EDITOR.getFontSizes()")
410  }
411
412  build() {
413    Row() {
414      Column() {
415        Row({ space: 70 }) {
416          Button({ type: ButtonType.Normal }) {
417            Image($r('app.media.action_bold'))
418              .height(24)
419              .width(24)
420              .onClick(() => {
421                this.confirm("javascript:RICH_EDITOR.setBold()")
422              })
423          }.width(42)
424          .height(42)
425          .borderRadius(8)
426          .backgroundColor($r('app.color.color_ffffff'))
427
428          Button({ type: ButtonType.Normal }) {
429            Image($r('app.media.format_italic'))
430              .height(24)
431              .width(24)
432              .onClick(() => {
433                this.confirm("javascript:RICH_EDITOR.setItalic()")
434              })
435          }.width(42)
436          .height(42)
437          .borderRadius(8)
438          .backgroundColor($r('app.color.color_ffffff'))
439
440          Button({ type: ButtonType.Normal }) {
441            Image($r('app.media.underline'))
442              .height(24)
443              .width(24)
444              .onClick(() => {
445                this.confirm("javascript:RICH_EDITOR.setUnderline()")
446              })
447          }.width(42)
448          .height(42)
449          .borderRadius(8)
450          .backgroundColor($r('app.color.color_ffffff'))
451
452          Button({ type: ButtonType.Normal }) {
453            Image($r('app.media.left_justify'))
454              .height(24)
455              .width(24)
456              .onClick(() => {
457                this.confirm("javascript:RICH_EDITOR.setJustifyLeft()")
458              })
459          }.width(42)
460          .height(42)
461          .borderRadius(8)
462          .backgroundColor($r('app.color.color_ffffff'))
463
464          Button({ type: ButtonType.Normal }) {
465            Image($r('app.media.mid_justify'))
466              .height(24)
467              .width(24)
468              .onClick(() => {
469                this.confirm("javascript:RICH_EDITOR.setJustifyCenter()")
470              })
471          }.width(42)
472          .height(42)
473          .borderRadius(8)
474          .backgroundColor($r('app.color.color_ffffff'))
475
476          Button({ type: ButtonType.Normal }) {
477            Image($r('app.media.right_justify'))
478              .height(24)
479              .width(24)
480              .onClick(() => {
481                this.confirm("javascript:RICH_EDITOR.setJustifyRight()")
482              })
483          }.width(42)
484          .height(42)
485          .borderRadius(8)
486          .backgroundColor($r('app.color.color_ffffff'))
487        }
488        .alignItems(VerticalAlign.Bottom)
489        .padding({ bottom: 2 })
490        .height(71)
491
492        Divider()
493          .vertical(false)
494          .color($r("app.color.divider_color_e4e4e4"))
495
496        Row({ space: 70 }) {
497          Button({ type: ButtonType.Normal }) {
498            Image($r('app.media.suojin'))
499              .height(24)
500              .width(24)
501              .onClick(() => {
502                this.confirm("javascript:RICH_EDITOR.setIndent()")
503              })
504          }.width(42)
505          .height(42)
506          .borderRadius(8)
507          .backgroundColor($r('app.color.color_ffffff'))
508
509          Button({ type: ButtonType.Normal }) {
510            Image($r('app.media.suojin_back'))
511              .height(24)
512              .width(24)
513              .responseRegion({ x: -15.0, y: -15.0, width: 54, height: 54 })
514              .onClick(() => {
515                this.confirm("javascript:RICH_EDITOR.setOutdent()")
516              })
517          }.width(42)
518          .height(42)
519          .borderRadius(8)
520          .backgroundColor($r('app.color.color_ffffff'))
521
522          Button({ type: ButtonType.Normal }) {
523            Image($r("app.media.format_menulist_number"))
524              .height(24)
525              .width(24)
526              .onClick(() => {
527                this.confirm("javascript:RICH_EDITOR.setNumbers()")
528              })
529          }.width(42)
530          .height(42)
531          .borderRadius(8)
532          .backgroundColor($r('app.color.color_ffffff'))
533
534          Button({ type: ButtonType.Normal }) {
535            Image($r("app.media.format_menulist_alphabet"))
536              .height(24)
537              .width(24)
538              .onClick(() => {
539                this.confirm("javascript:RICH_EDITOR.setABC()")
540              })
541          }.width(42)
542          .height(42)
543          .borderRadius(8)
544          .backgroundColor($r('app.color.color_ffffff'))
545
546          Button({ type: ButtonType.Normal }) {
547            Image($r('app.media.format_menubullte2'))
548              .height(24)
549              .width(24)
550              .onClick(() => {
551                this.confirm("javascript:RICH_EDITOR.setBullets()")
552              })
553          }.width(42)
554          .height(42)
555          .borderRadius(8)
556          .backgroundColor($r('app.color.color_ffffff'))
557
558          Button({ type: ButtonType.Normal }) {
559            Image($r('app.media.format_menubullte1'))
560              .height(24)
561              .width(24)
562              .onClick(() => {
563                this.confirm("javascript:RICH_EDITOR.setSquare()")
564              })
565          }.width(42)
566          .height(42)
567          .borderRadius(8)
568          .backgroundColor($r('app.color.color_ffffff'))
569        }
570        .alignItems(VerticalAlign.Top)
571        .padding({ top: 2 })
572        .height(56)
573      }
574      .width('50%')
575      .padding({ left: 24, right: 24 })
576      .height(128)
577
578      Divider()
579        .vertical(true)
580        .height(128)
581        .color($r("app.color.divider_color_e4e4e4"))
582        .margin({ top: 4, bottom: 4 })
583
584      Column() {
585        Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap, justifyContent: FlexAlign.End }) {
586          Image($r('app.media.cross'))
587            .height(16)
588            .width(16)
589            .margin({ top: 8 })
590            .opacity(0.6)
591            .fillColor('#99182431')
592            .onClick(() => {
593              this.editContentDialogCtl.close()
594            })
595        }
596        .height(36)
597
598        Row() {
599          Flex({ wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween }) {
600            ForEach(fontColorArray, (colorStr: string) => {
601              Stack({ alignContent: Alignment.Center }) {
602                Circle({ width: 24, height: 24 })
603                  .fill(colorStr)
604                Circle({ width: 12, height: 12 })
605                  .fill($r("app.color.color_ffffff"))
606                  .visibility(colorStr == this.selectFontColor ? Visibility.Visible : Visibility.None)
607              }.onClick(() => {
608                this.selectFontColor = colorStr
609                this.confirm("javascript:RICH_EDITOR.setTextColor('" + this.selectFontColor + "')")
610              })
611            }, colorStr => colorStr)
612          }.padding({ bottom: 11 })
613        }
614        .alignItems(VerticalAlign.Top)
615        .height(35)
616
617        Divider()
618          .vertical(false)
619          .color($r("app.color.divider_color_e4e4e4"))
620
621        Row({ space: 15 }) {
622          Image($r('app.media.font_small'))
623            .height(24)
624            .width(24)
625            .margin({ top: 8 })
626          Slider({
627            value: this.selectedNoteData.slider_value,
628            min: 0,
629            max: 16,
630            step: 4,
631            style: SliderStyle.InSet
632          })
633            .blockColor($r("app.color.color_ffffff"))
634            .trackColor($r("app.color.divider_color_e4e4e4"))
635            .selectedColor($r("app.color.text_color_f86d05"))
636            .showSteps(false)
637            .showTips(false)
638            .onChange((value: number, mode: SliderChangeMode) => {
639              this.selectedNoteData.slider_value = value
640              this.fontSize = value + 12
641              this.confirm("javascript:RICH_EDITOR.execFontSize('" + this.fontSize + "')")
642              LogUtil.info(TAG, 'value:' + value + 'mode:' + mode.toString())
643            })
644            .width('88%')
645          Image($r('app.media.font_large'))
646            .height(24)
647            .width(24)
648            .margin({ top: 7 })
649        }
650        .alignItems(VerticalAlign.Top)
651        .padding({ top: 5 })
652        .height(56)
653      }
654      .width('50%')
655      .height(128)
656      .padding({ left: 24, right: 24 })
657    }
658    .width('100%')
659    .height(128)
660    .backgroundColor($r("app.color.color_ffffff"))
661    .borderRadius(36)
662  }
663}
664
665@CustomDialog
666export struct EditTitleDialog {
667  editTitleDialog: CustomDialogController
668  confirm: (newTitle: string) => void
669  @State inputName: string = ""
670  @State isEquivalentVal: boolean = true
671
672  build() {
673    Column() {
674      Text($r("app.string.editNoteTitle"))
675        .fontSize(20)
676        .height(56)
677        .margin({ left: 24 })
678
679      // title input
680      Flex({ wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween }) {
681        TextInput({ text: this.inputName, placeholder: $r("app.string.input_placeholder") })
682          .placeholderFont({ size: 18 })
683          .maxLength(20)
684          .borderRadius(15)
685          .backgroundColor($r("app.color.title_input_bg_color"))
686          .width('90%')
687          .onChange((value: string) => {
688            if (this.inputName == value) {
689              this.isEquivalentVal = true
690            } else {
691              this.isEquivalentVal = false
692            }
693            this.inputName = value
694          })
695          .restoreId(2)
696      }.margin({ bottom: 4, left: 24, right: 24 })
697
698
699      // button group
700      Flex({ wrap: FlexWrap.Wrap, justifyContent: FlexAlign.SpaceBetween }) {
701        Text($r("app.string.cancel"))
702          .fontSize(18)
703          .textAlign(TextAlign.Center)
704          .fontColor($r("app.color.button_color_419fff"))
705          .width('48%')
706          .onClick(() => {
707            this.editTitleDialog.close()
708            inputMethod.getController().stopInputSession();
709          })
710        Divider()
711          .vertical(true)
712          .height(15)
713          .strokeWidth(1)
714          .color($r("app.color.divider_color_e4e4e4"))
715        Text($r("app.string.save"))
716          .opacity(this.isEquivalentVal ? 0.4 : 1)
717          .enabled(this.isEquivalentVal ? false : true)
718          .fontSize(18)
719          .textAlign(TextAlign.Center)
720          .fontColor($r("app.color.button_color_419fff"))
721          .width('48%')
722          .onClick(() => {
723            this.editTitleDialog.close()
724            inputMethod.getController().stopInputSession();
725            if (this.inputName.replace(/\s+/g, '') == '') {
726              return
727            } else {
728              this.confirm(this.inputName)
729            }
730          })
731      }.width('100%')
732      .margin({ top: 21, bottom: 25 })
733    }
734    .width(336)
735    .borderRadius(36)
736    .backgroundColor($r("app.color.Edit_title_bg_color"))
737    .alignItems(HorizontalAlign.Start)
738    .margin({ bottom: 16, left: 12, right: 12 })
739  }
740}
741
742@CustomDialog
743export struct EditContentDialogPortrait {
744  editContentDialogCtl: CustomDialogController;
745  confirm: (excuteJs: string) => void
746  @State selectFontColor: string = fontColorArray[0]
747  @Consume('SelectedNoteData') selectedNoteData: NoteData
748  private circleColor: string
749  private fontSize: number
750
751  aboutToAppear() {
752    try {
753      this.confirm("javascript:RICH_EDITOR.getFontSizes()");
754      LogUtil.info(TAG, `runJavaScript success.`);
755    } catch (error) {
756      LogUtil.error(TAG, `runJavaScript failed.code:${JSON.stringify(error.code)},message:${JSON.stringify(error.message)}`);
757    }
758  }
759
760  build() {
761    Column() {
762      Flex({ direction: FlexDirection.Row, wrap: FlexWrap.NoWrap,
763        justifyContent: FlexAlign.SpaceBetween, alignItems: ItemAlign.Center }) {
764        Text($r("app.string.style")).margin({ top: 8 })
765          .fontSize(14).fontColor($r("app.color.font_stylecolor_AD182431"))
766
767        Image($r('app.media.cross'))
768          .height(16)
769          .width(16)
770          .margin({ top: 8 })
771          .fillColor($r("app.color.font_stylecolor_AD182431"))
772          .onClick(() => {
773            this.editContentDialogCtl.close()
774          })
775      }
776      .height(48)
777      .padding({ left: 24, right: 24 })
778
779
780      Row({ space: 16 }) {
781        Button({ type: ButtonType.Normal }) {
782          Image($r('app.media.action_bold'))
783            .height(24)
784            .width(24)
785            .onClick(() => {
786              this.confirm("javascript:RICH_EDITOR.setBold()")
787            })
788        }.width(42)
789        .height(42)
790        .borderRadius(8)
791        .backgroundColor($r('app.color.color_ffffff'))
792
793        Button({ type: ButtonType.Normal }) {
794          Image($r('app.media.format_italic'))
795            .height(24)
796            .width(24)
797            .onClick(() => {
798              this.confirm("javascript:RICH_EDITOR.setItalic()")
799            })
800        }.width(42)
801        .height(42)
802        .borderRadius(8)
803        .backgroundColor($r('app.color.color_ffffff'))
804
805        Button({ type: ButtonType.Normal }) {
806          Image($r('app.media.underline'))
807            .height(24)
808            .width(24)
809            .onClick(() => {
810              this.confirm("javascript:RICH_EDITOR.setUnderline()")
811            })
812        }.width(42)
813        .height(42)
814        .borderRadius(8)
815        .backgroundColor($r('app.color.color_ffffff'))
816
817        Button({ type: ButtonType.Normal }) {
818          Image($r('app.media.right_justify'))
819            .height(24)
820            .width(24)
821            .onClick(() => {
822              this.confirm("javascript:RICH_EDITOR.setJustifyRight()")
823            })
824        }.width(42)
825        .height(42)
826        .borderRadius(8)
827        .backgroundColor($r('app.color.color_ffffff'))
828
829        Button({ type: ButtonType.Normal }) {
830          Image($r('app.media.mid_justify'))
831            .height(24)
832            .width(24)
833            .onClick(() => {
834              this.confirm("javascript:RICH_EDITOR.setJustifyCenter()")
835            })
836        }.width(42)
837        .height(42)
838        .borderRadius(8)
839        .backgroundColor($r('app.color.color_ffffff'))
840
841        Button({ type: ButtonType.Normal }) {
842          Image($r('app.media.left_justify'))
843            .height(24)
844            .width(24)
845            .onClick(() => {
846              this.confirm("javascript:RICH_EDITOR.setJustifyLeft()")
847            })
848        }.width(42)
849        .height(42)
850        .borderRadius(8)
851        .backgroundColor($r('app.color.color_ffffff'))
852      }
853      .height(48)
854
855      Divider().vertical(false).color($r("app.color.divider_color_e4e4e4"))
856
857      Row({ space: 16 }) {
858
859        Button({ type: ButtonType.Normal }) {
860          Image($r('app.media.suojin'))
861            .height(24)
862            .width(24)
863            .onClick(() => {
864              this.confirm("javascript:RICH_EDITOR.setIndent()")
865            })
866        }.width(42)
867        .height(42)
868        .borderRadius(8)
869        .backgroundColor($r('app.color.color_ffffff'))
870
871        Button({ type: ButtonType.Normal }) {
872          Image($r('app.media.suojin_back'))
873            .height(24)
874            .width(24)
875            .responseRegion({ x: -15.0, y: -15.0, width: 54, height: 54 })
876            .onClick(() => {
877              this.confirm("javascript:RICH_EDITOR.setOutdent()")
878            })
879        }.width(42)
880        .height(42)
881        .borderRadius(8)
882        .backgroundColor($r('app.color.color_ffffff'))
883
884        Button({ type: ButtonType.Normal }) {
885          Image($r("app.media.format_menulist_number"))
886            .height(24)
887            .width(24)
888            .onClick(() => {
889              this.confirm("javascript:RICH_EDITOR.setNumbers()")
890            })
891        }.width(42)
892        .height(42)
893        .borderRadius(8)
894        .backgroundColor($r('app.color.color_ffffff'))
895
896        Button({ type: ButtonType.Normal }) {
897          Image($r("app.media.format_menulist_alphabet"))
898            .height(24)
899            .width(24)
900            .onClick(() => {
901              this.confirm("javascript:RICH_EDITOR.setABC()")
902            })
903        }.width(42)
904        .height(42)
905        .borderRadius(8)
906        .backgroundColor($r('app.color.color_ffffff'))
907
908        Button({ type: ButtonType.Normal }) {
909          Image($r('app.media.format_menubullte2'))
910            .height(24)
911            .width(24)
912            .onClick(() => {
913              this.confirm("javascript:RICH_EDITOR.setBullets()")
914            })
915        }.width(42)
916        .height(42)
917        .borderRadius(8)
918        .backgroundColor($r('app.color.color_ffffff'))
919
920        Button({ type: ButtonType.Normal }) {
921          Image($r('app.media.format_menubullte1'))
922            .height(24)
923            .width(24)
924            .onClick(() => {
925              this.confirm("javascript:RICH_EDITOR.setSquare()")
926            })
927        }.width(42)
928        .height(42)
929        .borderRadius(8)
930        .backgroundColor($r('app.color.color_ffffff'))
931      }
932      .height(48)
933
934      Divider().vertical(false).color($r("app.color.divider_color_e4e4e4"))
935
936      Row() {
937        Flex({ wrap: FlexWrap.NoWrap, justifyContent: FlexAlign.SpaceBetween }) {
938          ForEach(fontColorArray, (colorStr: string) => {
939            Stack({ alignContent: Alignment.Center }) {
940              Circle({ width: 24, height: 24 }).fill(colorStr)
941              Circle({ width: 12, height: 12 }).fill($r("app.color.color_ffffff"))
942                .visibility(colorStr == this.selectFontColor ? Visibility.Visible : Visibility.None)
943            }.onClick(() => {
944              this.selectFontColor = colorStr
945              this.confirm("javascript:RICH_EDITOR.setTextColor('" + this.selectFontColor + "')")
946            })
947          }, colorStr => colorStr)
948        }
949      }
950      .height(48)
951      .padding({ left: 24, right: 24 })
952
953      Divider().vertical(false).color($r("app.color.divider_color_e4e4e4"))
954
955      Row({ space: 10 }) {
956        Image($r('app.media.font_small')).height(24).width(24).margin({ top: 8 })
957        Slider({
958          value: this.selectedNoteData.slider_value,
959          min: 0,
960          max: 16,
961          step: 4,
962          style: SliderStyle.InSet
963        })
964          .blockColor($r("app.color.color_ffffff"))
965          .trackColor($r("app.color.divider_color_e4e4e4"))
966          .selectedColor($r("app.color.text_color_f86d05"))
967          .showSteps(false)
968          .showTips(false)
969          .onChange((value: number, mode: SliderChangeMode) => {
970            this.selectedNoteData.slider_value = value
971            this.fontSize = value + 12
972            this.confirm("javascript:RICH_EDITOR.execFontSize('" + this.fontSize + "')")
973            LogUtil.info(TAG, 'value:' + value + 'mode:' + mode.toString())
974          })
975          .width('79%')
976        Image($r('app.media.font_large')).height(24).width(24).margin({ top: 7 })
977      }
978      .alignItems(VerticalAlign.Top)
979      .padding({ top: 5 })
980      .height(72)
981      .padding({ left: 24, right: 24 })
982    }
983    .width(360)
984    .height(266)
985    .backgroundColor($r("app.color.color_ffffff"))
986    .borderRadius(36)
987  }
988}