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/** 16 * Message/MMS viewing page 17 */ 18import router from "@system.router"; 19import emitter from '@ohos.events.emitter'; 20import ConversationController from "./conversationController"; 21import { Receive } from "../../views/receive/receive"; 22import LooseObject from "../../data/LooseObject"; 23import { MoreMenu } from "../../views/MmsMenu"; 24import { MultiSimCardMenu } from '../../views/MultiSimCardMenu'; 25import WantUtil from "../../utils/WantUtil"; 26import { DelConversionDialog } from "../../views/MmsDialogs"; 27import MmsPreferences from "../../utils/MmsPreferences"; 28import common from "../../data/commonData"; 29import simCardService from "../../service/SimCardService" 30 31@Entry 32@Component 33export struct Conversation { 34 @StorageLink('curBp') curBp: string = 'sm' 35 @State mConversationCtrl: ConversationController = ConversationController.getInstance(); 36 @State slotId: number = MmsPreferences.getInstance().getSelectedSlotId(); 37 @State cardImage: boolean = MmsPreferences.getInstance().haveMultiSimCardReady(); 38 private gridColumns: GridRowColumnOption = { sm: 4, md: 8, lg: 12 }; 39 private timeGirdSpan: GridColColumnOption = { sm: 4, md: 8, lg: 12 }; 40 private messageGirdSpan: GridColColumnOption = { sm: 4, md: 6, lg: 8 }; 41 private gridColOffset: GridColColumnOption = { sm: 0, md: 2, lg: 4 }; 42 private gridGutter: string = "24vp"; 43 private dialogGridCount: number = 4; 44 @Provide menuItems: Array<any> = [ 45 { 46 value: $r("app.string.delete"), 47 action: () => { 48 this.mConversationCtrl.longPressMore(0); 49 if(this.mConversationCtrl.mmsList.length == 1) { 50 this.delConversionController.open(); 51 } 52 }, 53 enabled: true 54 }, 55 { 56 value: $r("app.string.msg_pre_call_editor"), 57 action: () => { 58 this.mConversationCtrl.longPressMore(3); 59 }, 60 enabled: true 61 } 62 ]; 63 64 /** Message details dialog box */ 65 dialogController: CustomDialogController = new CustomDialogController({ 66 builder: DetailsDialog({ 67 item: this.mConversationCtrl.mmsList[this.mConversationCtrl.mmsIndex], 68 receiver: this.mConversationCtrl.strContactsName == '' 69 ? this.mConversationCtrl.strContactsNumber : 70 this.mConversationCtrl.strContactsName 71 }), 72 autoCancel: true, 73 alignment: DialogAlignment.Bottom, 74 offset: { dx: 0, dy: $r("app.float.dialog_bottom_margin") }, 75 gridCount: this.dialogGridCount 76 }) 77 delConversionController: CustomDialogController = new CustomDialogController({ 78 builder: DelConversionDialog({ 79 cancel: () => { 80 this.mConversationCtrl.deleteDialogCancel() 81 }, 82 confirm: () => { 83 this.mConversationCtrl.deleteDialogConfirm() 84 }, 85 msg: this.mConversationCtrl.strMsgDeleteDialogTip, 86 }), 87 autoCancel: false, 88 alignment: DialogAlignment.Bottom, 89 offset: { dx: 0, dy: $r("app.float.dialog_bottom_margin") }, 90 gridCount: this.dialogGridCount 91 }); 92 93 aboutToAppear() { 94 this.mConversationCtrl.onInit(); 95 this.mConversationCtrl.onShow(); 96 emitter.on(simCardService.SIM_STATE_CHANGE_EVENT, () => { 97 this.cardImage = MmsPreferences.getInstance().haveMultiSimCardReady(); 98 }); 99 emitter.on(simCardService.SLOTID_CHANGE_EVENT, () => { 100 this.slotId = MmsPreferences.getInstance().getSelectedSlotId(); 101 }); 102 } 103 104 aboutToDisappear() { 105 emitter.off(common.int.EVENT_SIM_STATE_CHANGE); 106 emitter.off(common.int.EVENT_SLOTID_CHANGE); 107 } 108 109 onPageShow() { 110 WantUtil.getWant(); 111 } 112 113 onPageHide() { 114 this.mConversationCtrl.onHide() 115 } 116 117 onBackPress() { 118 return this.mConversationCtrl.onBackPress(); 119 } 120 121 build() { 122 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.SpaceBetween }) { 123 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Start, justifyContent: FlexAlign.Start }) { 124 // <!--Top titleBar--> 125 // New page 126 if (this.mConversationCtrl.isNewMsg) { 127 Row() { 128 Image($rawfile("icon/ic_message_back.svg")) 129 .width("24vp") 130 .height("24vp") 131 .onClick(() => { 132 // Click Return to restore the status of unselected SMs. 133 if (!this.mConversationCtrl.onBackPress()) { 134 router.back(); 135 } 136 }) 137 Row().width($r("app.float.space_16")) 138 Text($r("app.string.new_message")) 139 .fontSize(20) 140 .lineHeight(28) 141 .fontColor($r("sys.color.ohos_id_color_text_primary")) 142 .fontWeight(FontWeight.Bold) 143 } 144 .width("100%") 145 .height(56) 146 .flexShrink(0) 147 .padding({ left: "24vp", right: "24vp" }) 148 .zIndex(2) 149 } 150 // Page for viewing SMS details 151 else { 152 Row() { 153 // Select Status 154 if (this.mConversationCtrl.isSelectStatus) { 155 Row() { 156 Image($rawfile("icon/ic_public_cancel.svg")) 157 .width(24) 158 .height(24) 159 .onClick(() => { 160 // Click Return to restore the status of unselected SMs. 161 this.mConversationCtrl.titleBarCancel() 162 }) 163 Text(this.mConversationCtrl.selectDeleteMsgCount == 0 164 ? $r("app.string.msg_unselected_tip") 165 : $r("app.string.msg_selected_tip", this.mConversationCtrl.selectDeleteMsgCount)) 166 .margin({ left: 16 }) 167 .fontSize(20) 168 .fontColor($r("sys.color.ohos_id_color_text_primary")) 169 .fontWeight(FontWeight.Bold) 170 } 171 .alignItems(VerticalAlign.Center) 172 .width("100%") 173 } 174 // Non-Selected Status 175 else { 176 Row() { 177 Flex({ 178 alignItems: ItemAlign.Center, 179 }) { 180 Row() { 181 Image($rawfile("icon/ic_message_back.svg")) 182 .width(24) 183 .height(24) 184 .margin({ right: 16 }) 185 .onClick(() => { 186 if (!this.mConversationCtrl.onBackPress()) { 187 router.back(); 188 } 189 }) 190 191 if(this.mConversationCtrl.strContactsName === '' || 192 this.mConversationCtrl.photoFirstName === "-1") { 193 Image($rawfile("icon/ic_user_portrait.svg")) 194 .objectFit(ImageFit.Fill) 195 .width(40) 196 .height(40) 197 .clip(new Circle({ width: 40, height: 40 })) 198 .backgroundColor(this.mConversationCtrl.portraitColor) 199 .onClick(() => { 200 this.mConversationCtrl.titleBarAvatar(); 201 }) 202 } else { 203 Text(this.mConversationCtrl.photoFirstName) 204 .fontSize($r("sys.float.ohos_id_text_size_headline8")) 205 .fontWeight(FontWeight.Medium) 206 .fontColor(Color.White) 207 .height("40vp") 208 .width("40vp") 209 .textAlign(TextAlign.Center) 210 .clip(new Circle({ width: "40vp", height: "40vp" })) 211 .backgroundColor(this.mConversationCtrl.portraitColor) 212 .onClick(() => { 213 this.mConversationCtrl.titleBarAvatar(); 214 }) 215 } 216 } 217 .flexBasis(80) 218 Column() { 219 Flex({ 220 direction: FlexDirection.Column, 221 justifyContent: FlexAlign.Center, 222 alignItems: ItemAlign.Start 223 }) { 224 if (this.mConversationCtrl.contactsNum > 1) { 225 Text(this.mConversationCtrl.strContactsName) 226 .maxLines(1) 227 .textOverflow({ overflow: TextOverflow.Ellipsis }) 228 .fontSize(20) 229 .fontColor($r("sys.color.ohos_id_color_text_primary")) 230 .fontWeight(FontWeight.Medium) 231 Text($r("app.string.members", this.mConversationCtrl.contactsNum)) 232 .maxLines(1) 233 .textOverflow({ overflow: TextOverflow.Ellipsis }) 234 .fontSize(20) 235 .fontColor($r("sys.color.ohos_id_color_text_tertiary")) 236 .fontWeight(FontWeight.Medium) 237 } else if (this.mConversationCtrl.strContactsName == '' || 238 this.mConversationCtrl.strContactsName == null) { 239 Text(this.mConversationCtrl.strContactsNumberFormat) 240 .maxLines(1) 241 .textOverflow({ overflow: TextOverflow.Ellipsis }) 242 .fontSize(20) 243 .fontColor($r("sys.color.ohos_id_color_text_primary")) 244 .fontWeight(FontWeight.Medium) 245 } else { 246 Text(this.mConversationCtrl.strContactsName) 247 .maxLines(1) 248 .textOverflow({ overflow: TextOverflow.Ellipsis }) 249 .fontSize(20) 250 .fontColor($r("sys.color.ohos_id_color_text_primary")) 251 .fontWeight(FontWeight.Medium) 252 .lineHeight(28) 253 if (this.mConversationCtrl.strContactsName !== 254 this.mConversationCtrl.strContactsNumberFormat) { 255 Text(this.mConversationCtrl.strContactsNumberFormat) 256 .maxLines(1) 257 .textOverflow({ overflow: TextOverflow.Ellipsis }) 258 .fontSize(20) 259 .fontColor($r("sys.color.ohos_id_color_text_tertiary")) 260 .lineHeight(19) 261 .fontWeight(FontWeight.Medium) 262 } 263 } 264 } 265 } 266 .flexGrow(1) 267 .flexShrink(1) 268 .alignItems(HorizontalAlign.Start) 269 .padding({ left: 12, right: 16 }) 270 .margin({left: this.mConversationCtrl.strContactsNumberFormat.length > 17 ? 25 : 0}) 271 272 Row() { 273 Image($rawfile("icon/ic_message_phone.svg")) 274 .width(24) 275 .height(24) 276 .onClick(() => { 277 this.mConversationCtrl.clickCall(); 278 }) 279 Blank().width($r("app.float.space_16")) 280 Column() { 281 MoreMenu() 282 } 283 } 284 .flexShrink(0) 285 }.height("100%") 286 } 287 .width("100%") 288 } 289 } 290 .height(56) 291 .constraintSize({ minHeight: 56 }) 292 .padding({ left: 24, right: 24 }) 293 .zIndex(2) 294 } 295 // <!--Middle Content Area--> 296 Row() { 297 // New Message Content 298 if (this.mConversationCtrl.isNewMsg) { 299 Row() { 300 Receive({ mConversationController: $mConversationCtrl }) 301 }.margin({ top: $r("app.float.new_message_margin_top") }) 302 } 303 // SMS message content 304 // <!--Information List--> 305 if (!this.mConversationCtrl.isNewMsg) { 306 List({ space: 10, initialIndex: this.mConversationCtrl.mmsList.length - 1, scroller: this.mConversationCtrl.scroller }) { 307 ForEach(this.mConversationCtrl.mmsList, (item, index) => { 308 ListItem() { 309 Row() { 310 GridRow({ columns: this.gridColumns, gutter: this.gridGutter }) { 311 // <!--Information Sending Item--> 312 if (!item.isReceive && !item.isDraft) { 313 GridCol({ span: this.timeGirdSpan}) { 314 Flex({ 315 direction: FlexDirection.Column, 316 justifyContent: FlexAlign.Center, 317 alignItems: ItemAlign.Center 318 }) { 319 // SMS/MMS 320 if (index == 0) { 321 Text($r("app.string.msg_note_mms")) 322 .fontSize(12) 323 .lineHeight(16) 324 .fontColor($r("sys.color.ohos_id_color_text_secondary")) 325 .margin({ bottom: 2 }) 326 } 327 // Time 328 if (item.dateShow) { 329 Text() { 330 Span(item.date) 331 .fontSize(12) 332 .fontColor($r("sys.color.ohos_id_color_text_secondary")) 333 Span(item.week) 334 .fontSize(12) 335 .fontColor($r("sys.color.ohos_id_color_text_secondary")) 336 }.lineHeight(16).margin({ bottom: 8 }) 337 } 338 }.width("100%") 339 } 340 GridCol({ span: this.messageGirdSpan, offset: this.gridColOffset }) { 341 Flex({ 342 direction: FlexDirection.Column, 343 justifyContent: FlexAlign.Center, 344 alignItems: ItemAlign.Center 345 }) { 346 Flex({ 347 justifyContent: FlexAlign.Center, 348 alignItems: ItemAlign.Start 349 }) { 350 Column() { 351 Flex({ 352 justifyContent: FlexAlign.End, 353 alignItems: ItemAlign.End 354 }) { 355 // <!--Text--> 356 Flex({ 357 justifyContent: FlexAlign.End, 358 alignItems: ItemAlign.End 359 }) { 360 // <!--Sending failed icon--> 361 if (!item.isMsm && 362 ((this.mConversationCtrl.contactsNum == 1 && 363 item.sendStatus == 2) || 364 (this.mConversationCtrl.contactsNum > 1 && 365 item.failuresNumber > 0 && 366 item.completeNumber == 367 this.mConversationCtrl.contactsNum))) { 368 Row() { 369 Image($rawfile("icon/ic_send_fail.svg")) 370 .width(20) 371 .height(20) 372 .objectFit(ImageFit.Fill) 373 } 374 .margin({ right: 8 }) 375 .padding({ top: 9 }) 376 } 377 // Message Bubble 378 bubbleText({ 379 conversationCtrl: $mConversationCtrl, 380 bubbleTextBorderRadius: [4, 24], 381 bubbleTextDirection: "right", 382 content: item.content, 383 bubbleTextBackgroundColor: $r("app.color.sender_bubble"), 384 isShowMsgLongMenu: item.isShowMsgLongMenu, 385 itemIndex: index, 386 delConversionController: this.delConversionController 387 }) 388 .constraintSize({maxWidth: 284}) 389 } 390 } 391 // <!--Sending time and sending status--> 392 Flex({ 393 alignItems: ItemAlign.Center, 394 justifyContent: FlexAlign.End 395 }) { 396 if (this.mConversationCtrl.contactsNum == 1 && 397 item.sendStatus != 1) { 398 Text(item.time) 399 .textAlign(TextAlign.Start) 400 .fontSize(10) 401 .lineHeight(13) 402 .fontColor($r("sys.color.ohos_id_color_text_secondary")) 403 .margin({ top: 8, right: 5 }) 404 } 405 // Card 1 or Card 2 406 if (this.cardImage) { 407 Image(item.subId == 0 ? 408 $rawfile("icon/icon_mms_sim_1.svg") : 409 $rawfile("icon/icon_mms_sim_2.svg")) 410 .width(10) 411 .height(10) 412 .margin({ top: 8, right: 5 }) 413 } 414 // Locked 415 if (item.isLock) { 416 Image($rawfile("icon/msg_lock.svg")) 417 .width(10) 418 .height(10) 419 .margin({ top: 8, right: 5 }) 420 } 421 Text($r("app.string.messageSendFailed")) 422 .textAlign(TextAlign.Start) 423 .fontSize(10) 424 .lineHeight(13) 425 .margin({ top: 8 }) 426 .fontColor($r("sys.color.ohos_id_color_warning")) 427 .visibility(item.sendStatus == 2 ? 428 Visibility.Visible : Visibility.None) 429 Text($r("app.string.messageSending")) 430 .textAlign(TextAlign.Start) 431 .fontSize(10) 432 .fontColor($r("sys.color.ohos_id_color_text_secondary")) 433 .lineHeight(13) 434 .margin({ top: 8 }) 435 .visibility(item.sendStatus == 1 ? 436 Visibility.Visible : Visibility.None) 437 Text($r("app.string.messageDeliver")) 438 .textAlign(TextAlign.Start) 439 .fontSize(10) 440 .fontColor($r("sys.color.ohos_id_color_text_secondary")) 441 .lineHeight(13) 442 .margin({ top: 8 }) 443 .visibility(item.sendStatus == 0 ? 444 Visibility.Visible : Visibility.None) 445 }.width("100%").margin({ right: 12 }) 446 } 447 .width("100%") 448 .alignItems(HorizontalAlign.End) 449 // Sender's avatar, which is available only for group messages. 450 Flex({ direction: FlexDirection.Column, 451 justifyContent: FlexAlign.Start, 452 alignItems: ItemAlign.Center }) { 453 Image($rawfile("icon/user_avatar_full_fill.svg")) 454 .width(30) 455 .height(30) 456 } 457 .width(50) 458 .height(30) 459 .visibility(this.mConversationCtrl.contactsNum > 1 ? 460 Visibility.Visible : Visibility.None) 461 } 462 } 463 .width("100%") 464 } 465 } 466 // <!--Information receiving item--> 467 else if (item.isReceive) { 468 GridCol({ span: this.timeGirdSpan}) { 469 // <!--Information receiving item--> 470 Flex({ 471 direction: FlexDirection.Column, 472 justifyContent: FlexAlign.Center, 473 alignItems: ItemAlign.Center 474 }) { 475 // SMS/MMS 476 if (index == 0) { 477 Text($r("app.string.msg_note_mms")) 478 .fontSize(12) 479 .lineHeight(16) 480 .fontColor($r("sys.color.ohos_id_color_text_secondary")) 481 .margin({ bottom: 2 }) 482 } 483 // Time 484 if (item.dateShow) { 485 Text() { 486 Span(item.date) 487 .fontSize(12) 488 .fontColor($r("sys.color.ohos_id_color_text_secondary")) 489 Span(item.week) 490 .fontSize(12) 491 .fontColor($r("sys.color.ohos_id_color_text_secondary")) 492 }.lineHeight(16).margin({ bottom: 8 }) 493 } 494 }.width("100%") 495 } 496 GridCol({ span: this.messageGirdSpan }) { 497 Flex({ 498 direction: FlexDirection.Column, 499 justifyContent: FlexAlign.Center, 500 alignItems: ItemAlign.Center 501 }) { 502 Flex({ 503 justifyContent: FlexAlign.Center, 504 alignItems: ItemAlign.Start 505 }) { 506 Column() { 507 Flex({ 508 alignItems: ItemAlign.Start, 509 justifyContent: FlexAlign.Start 510 }) { 511 // Message Bubble 512 bubbleText({ 513 conversationCtrl: $mConversationCtrl, 514 bubbleTextBorderRadius: [4, 24], 515 bubbleTextDirection: "left", 516 content: item.content, 517 bubbleTextBackgroundColor: $r("sys.color.ohos_id_color_card_bg"), 518 isShowMsgLongMenu: item.isShowMsgLongMenu, 519 itemIndex: index, 520 delConversionController: this.delConversionController 521 }) 522 .constraintSize({maxWidth: 284}) 523 } 524 // <!--Sending time and sending status--> 525 Flex({ 526 alignItems: ItemAlign.Center, 527 justifyContent: FlexAlign.Start 528 }) { 529 Text(item.time) 530 .textAlign(TextAlign.Start) 531 .fontSize(10) 532 .lineHeight(13) 533 .fontColor($r("sys.color.ohos_id_color_text_secondary")) 534 .margin({ top: 8, right: 5 }) 535 // Card 1 or Card 2 536 if (this.cardImage) { 537 Image(item.subId == 0 ? 538 $rawfile("icon/icon_mms_sim_1.svg") : 539 $rawfile("icon/icon_mms_sim_2.svg")) 540 .width(10) 541 .height(10) 542 .margin({ top: 8, left: 5 }) 543 } 544 // Locked 545 if (item.isLock) { 546 Image($rawfile("icon/msg_lock.svg")) 547 .width(10) 548 .height(10) 549 .margin({ top: 8, left: 5 }) 550 } 551 }.width("70%").margin({ left: 12 }) 552 } 553 .width("100%") 554 .alignItems(HorizontalAlign.Start) 555 } 556 }.width("100%") 557 } 558 } 559 }.layoutWeight(1) 560 if (this.mConversationCtrl.isSelectStatus) { 561 Row() { 562 Toggle({ 563 type: ToggleType.Checkbox, 564 isOn: item.isCbChecked 565 }) 566 .selectedColor($r("sys.color.ohos_id_color_activated")) 567 .width(24) 568 .height(24) 569 .onChange(((isOn: boolean) => { 570 this.mConversationCtrl.listCheckBoxChange(index, isOn) 571 })) 572 } 573 .margin({ left: 4 }) 574 .width(48) 575 .height(48) 576 } 577 } 578 .padding(this.curBp === 'sm' ? { left: 16, right: 16 } : { left: 24, right: 24}) 579 .width('100%') 580 .alignItems(VerticalAlign.Center) 581 }.onClick(() => { 582 if (this.mConversationCtrl.isSelectStatus) { 583 this.mConversationCtrl.listCheckBoxChange(index,!item.isCbChecked) 584 } 585 }) 586 .padding(index == this.mConversationCtrl.mmsList.length - 1 ? { bottom: 20 } : null) 587 }, item => JSON.stringify(item)) 588 } 589 .listDirection(Axis.Vertical) // Arrange Direction 590 .edgeEffect(EdgeEffect.Spring) // Sliding to the edge has no effect 591 .width("100%") 592 .margin({ top: 16 }) 593 } 594 } 595 .width("100%") 596 .flexBasis("auto") 597 .flexShrink(1) 598 } 599 .width("100%") 600 // Input box at the bottom 601 Flex({ direction: FlexDirection.Row, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Start }) { 602 // More options at the bottom 603 if (this.mConversationCtrl.isSelectStatus && !this.mConversationCtrl.hasDetailDelete) { 604 /** The Info button is checked at the bottom. */ 605 Flex({ 606 direction: FlexDirection.Row, 607 alignItems: ItemAlign.Center, 608 justifyContent: FlexAlign.SpaceBetween 609 }) { 610 /** Delete */ 611 Column() { 612 Image($rawfile("icon/ic_public_delete.svg")) 613 .width(24) 614 .height(24) 615 Text($r("app.string.delete")) 616 .fontSize(10) 617 .margin({ top: 3}) 618 .lineHeight(14) 619 .fontWeight(FontWeight.Medium) 620 .fontColor($r("sys.color.ohos_id_color_text_primary")) 621 }.width("25%").opacity(this.mConversationCtrl.selectDeleteMsgCount == 0 ? 0.4 : 1) 622 .onClick(() => { 623 if (this.mConversationCtrl.selectDeleteMsgCount != 0) { 624 this.mConversationCtrl.clickGroupDelete(); 625 this.delConversionController.open(); 626 } 627 }) 628 /** Forwarding */ 629 // Column() { 630 // Image($rawfile("icon/ic_transfer.svg")) 631 // .width(24) 632 // .height(24) 633 // Text($r("app.string.msg_transmit")) { 634 // 635 // }.fontSize(10).margin({ top: 3 }) 636 // .fontColor($r("sys.color.ohos_id_color_text_primary")) 637 // .fontWeight(FontWeight.Medium) 638 // .lineHeight(14) 639 // }.width("25%").opacity(this.mConversationCtrl.selectDeleteMsgCount == 0 ? 0.4 : 1) 640 // .onClick(() => { 641 // 642 // }) 643 /** Favorites */ 644 // Column() { 645 // Image($rawfile("icon/ic_msg_favorite_m.svg")) 646 // .width(24) 647 // .height(24) 648 // Text($r("app.string.msg_star")) { 649 // 650 // }.fontSize(10).margin({ top: 3 }) 651 // .fontColor($r("sys.color.ohos_id_color_text_primary")) 652 // .fontWeight(FontWeight.Medium) 653 // .lineHeight(14) 654 // }.width("25%").opacity(this.mConversationCtrl.selectDeleteMsgCount == 0 ? 0.4 : 1) 655 // .onClick(() => { 656 // 657 // }) 658 /** Select All */ 659 Column() { 660 Image(this.mConversationCtrl.isMessageCheckAll ? $rawfile("icon/ic_select_all_filled.svg") 661 : $rawfile("icon/ic_select_all.svg")) 662 .width(24) 663 .height(24) 664 Text(this.mConversationCtrl.isMessageCheckAll ? $r("app.string.msg_deselect_all") 665 : $r("app.string.msg_select_all")) { 666 } 667 .fontSize(10) 668 .margin({ top: 3 }) 669 .lineHeight(14) 670 .fontWeight(FontWeight.Medium) 671 .fontColor(this.mConversationCtrl.isMessageCheckAll ? 672 $r("sys.color.ohos_id_color_subtab_text_on") : $r("sys.color.ohos_id_color_text_primary")) 673 }.width("25%") 674 .onClick(() => { 675 this.mConversationCtrl.clickGroupCheckAll() 676 }) 677 /** more */ 678 Column() { 679 Image($rawfile("icon/ic_message_more1.svg")) 680 .width(24) 681 .height(24) 682 Text($r("app.string.more")) { 683 }.fontSize(10).margin({ top: 3 }) 684 .lineHeight(14) 685 .fontWeight(FontWeight.Medium) 686 .fontColor($r("sys.color.ohos_id_color_text_primary")) 687 } 688 .width("25%") 689 .enabled(this.mConversationCtrl.selectDeleteMsgCount == 1 ? true : false) 690 // @ts-ignore 691 .bindMenu(this.MenuBuilder) 692 } 693 .width("100%") 694 .height(56) 695 } 696 // <!--Bottom Send Bar--> 697 if (!this.mConversationCtrl.isSelectStatus) { 698 Flex({ alignItems: ItemAlign.End, justifyContent: FlexAlign.Center }) { 699 // <!--Left More and Full Screen Display--> 700 Row() { 701 Image($rawfile("icon/msg_add.svg")) 702 .onClick(() => { 703 704 }) 705 .width(24) 706 .height(24) 707 .visibility(Visibility.Visible) 708 .opacity(0.3) 709 Blank().width(16) 710 Row() { 711 if (this.cardImage) { 712 MultiSimCardMenu({ 713 slotId: this.slotId 714 }) 715 } 716 Row() { 717 TextArea({ 718 placeholder: $r("app.string.msg_note_mms"), 719 text: this.mConversationCtrl.textValue 720 }) 721 .placeholderColor($r("sys.color.ohos_id_color_text_hint")) 722 .caretColor($r("sys.color.ohos_id_color_focused_outline")) 723 .backgroundColor($r("sys.color.ohos_id_color_background_transparent")) 724 .onChange(value => { 725 this.mConversationCtrl.changeValue(value); 726 }) 727 .padding({left: 0, right: this.cardImage ? 42 : 0}) 728 .borderRadius(0) 729 .fontSize(16) 730 }.constraintSize({ minHeight: 40 }) 731 } 732 .backgroundColor($r("sys.color.ohos_id_color_text_field_sub_bg")) 733 .padding({ left: 8, right: 8}) 734 .borderRadius(20) 735 .width('100%') 736 .layoutWeight(1) 737 Image($rawfile("icon/ic_message_emoji.svg")) 738 .width(24) 739 .height(24) 740 .margin({left:16}) 741 .visibility(Visibility.Visible) 742 .opacity(0.3) 743 // <!--send--> 744 Image(this.mConversationCtrl.canSendMessage ? $rawfile("icon/ic_message_send_filled.svg") 745 : $rawfile("icon/ic_message_send.svg")) 746 .onClick(() => { 747 // Click Send. 748 this.mConversationCtrl.send(); 749 }) 750 .width(24) 751 .height(24) 752 .margin({left:16}) 753 }.width("100%") 754 } 755 .constraintSize({ minHeight: 56 }) 756 .width("100%").padding({ bottom: 8, top: 8 }) 757 } 758 } 759 .width("100%") 760 .padding({ 761 left: this.mConversationCtrl.isSelectStatus && !this.mConversationCtrl.hasDetailDelete ? 0 : 762 $r("app.float.space_24"), 763 right: this.mConversationCtrl.isSelectStatus && !this.mConversationCtrl.hasDetailDelete ? 0 : 764 $r("app.float.bottom_send_bar_padding_right") 765 }) 766 .clip(new Rect({ 767 width: "100%", 768 height: "100%", 769 radius: this.mConversationCtrl.isSelectStatus ? [] : [[20, 20], [20, 20], [0, 0], [0, 0]] 770 })) 771 .backgroundColor(this.mConversationCtrl.isSelectStatus && !this.mConversationCtrl.hasDetailDelete ? 772 null : $r("sys.color.ohos_id_color_toolbar_bg")) 773 } 774 .backgroundColor($r("sys.color.ohos_id_color_sub_background")) 775 .width("100%") 776 .height("100%") 777 } 778 779 @Builder MenuBuilder() { 780 Column() { 781 Row() { 782 Text($r("app.string.query_details")) 783 .lineHeight(22) 784 .fontSize(16) 785 .fontColor($r("sys.color.ohos_id_color_text_primary")) 786 .margin({ left: 16, top: 13, bottom: 13 }) 787 } 788 .width("100%") 789 .height(48) 790 .onClick(()=>{ 791 this.dialogController.open() 792 this.mConversationCtrl.isSelectStatus = !this.mConversationCtrl.isSelectStatus 793 this.mConversationCtrl.isMessageCheckAll = false 794 this.mConversationCtrl.cancleCheckedAll() 795 }) 796 797 if (this.mConversationCtrl.hasReport) { 798 Divider() 799 .margin({ left: 16, right: 16 }) 800 .strokeWidth(0.5) 801 .color($r("sys.color.ohos_id_color_list_separator")) 802 803 Row() { 804 Text($r("app.string.query_report")) 805 .lineHeight(22) 806 .fontSize(16) 807 .fontColor($r("sys.color.ohos_id_color_text_primary")) 808 .margin({ left: 16, top: 13, bottom: 13 }) 809 }.height(48) 810 .onClick(() => { 811 this.mConversationCtrl.moreSelected(6) 812 }) 813 } 814 }.borderRadius(24) 815 .width(145) 816 .alignItems(HorizontalAlign.Start) 817 } 818} 819 820@CustomDialog 821struct DetailsDialog { 822 controller: CustomDialogController 823 item: LooseObject 824 receiver: string 825 826 build() { 827 Column() { 828 Text($r("app.string.msgDetails")) 829 .fontSize(20) 830 .lineHeight(28) 831 .fontColor($r("sys.color.ohos_id_color_text_primary")) 832 .fontWeight(FontWeight.Bold) 833 .fontFamily("HarmonyHeiTi") 834 .margin({ top: 14, bottom: 14 }) 835 Text() { 836 Span($r("app.string.type")).fontSize(16) 837 Span($r("app.string.sms")).fontSize(16) 838 } 839 .fontSize(16) 840 .fontColor($r("sys.color.ohos_id_color_text_primary")) 841 .margin({ bottom: 4 }) 842 .fontFamily("HarmonyHeiTi") 843 844 Text() { 845 Span(this.item.isReceive ? $r("app.string.sender") : $r("app.string.putAddresser")).fontSize(16) 846 Span(this.receiver).fontSize(16) 847 } 848 .fontSize(16) 849 .fontColor($r("sys.color.ohos_id_color_text_primary")) 850 .margin({ bottom: 4 }) 851 .fontFamily("HarmonyHeiTi") 852 853 Text() { 854 Span($r("app.string.sendTime")).fontSize(16) 855 Span(this.item.fullDate ).fontSize(16) 856 Span(this.item.timeOfSms ).fontSize(16) 857 } 858 .fontSize(16) 859 .fontColor($r("sys.color.ohos_id_color_text_primary")) 860 .margin({ bottom: 8 }) 861 .fontFamily("HarmonyHeiTi") 862 863 Flex({ justifyContent: FlexAlign.Center }) { 864 Button() { 865 Text($r("app.string.msg_know")) 866 .fontFamily("HarmonyHeiTi") 867 .fontWeight(FontWeight.Medium) 868 .fontSize(16) 869 .fontColor($r("sys.color.ohos_id_color_floating_button_bg_normal")) 870 } 871 .width(200) 872 .backgroundColor(Color.Transparent) 873 .margin({top: 5}) 874 .onClick(() => { 875 this.controller.close() 876 }) 877 }.height(40) 878 } 879 .borderRadius(24) 880 .padding({ left: 24, right: 24, bottom: 16 }) 881 .alignItems(HorizontalAlign.Start) 882 } 883} 884 885// Custom Chat Bubble 886@Component 887struct bubbleText { 888 @Link conversationCtrl: ConversationController; 889 private delConversionController: any; 890 private bubbleTextBorderRadius: Array<number>; // Fillet size, two parameters in total 891 private bubbleTextDirection: string; // left: upper left corner right: upper right corner 892 private content: string; // Bubble Display Content 893 private bubbleTextBackgroundColor: Resource | string; // Bubble background color 894 private isShowMsgLongMenu: boolean; 895 private itemIndex: number; 896 @State showMenu: boolean = false 897 898 aboutToAppear() { 899 this.showMenu = this.isShowMsgLongMenu 900 } 901 902 @Builder MenuBuilder() { 903 Row() { 904 Button($r("app.string.msg_transmit")) 905 .fontSize(14) 906 .fontColor($r("sys.color.ohos_id_color_text_primary")) 907 .backgroundColor($r("sys.color.ohos_id_color_dialog_bg")) 908 .onClick(() => { 909 this.conversationCtrl.longPressSelected(1) 910 this.showMenu = false 911 }) 912 Button($r("app.string.delete")) 913 .fontSize(14) 914 .fontColor($r("sys.color.ohos_id_color_text_primary")) 915 .backgroundColor($r("sys.color.ohos_id_color_dialog_bg")) 916 .onClick(() => { 917 this.conversationCtrl.longPressSelected(2) 918 this.showMenu = false 919 this.delConversionController.open(); 920 }) 921 Button($r("app.string.more")) 922 .fontSize(14) 923 .fontColor($r("sys.color.ohos_id_color_text_primary")) 924 .backgroundColor($r("sys.color.ohos_id_color_dialog_bg")) 925 .onClick(() => { 926 this.conversationCtrl.longPressSelected(4) 927 this.showMenu = false 928 }) 929 } 930 .height(40) 931 .borderRadius(20) 932 .backgroundColor($r("sys.color.ohos_id_color_dialog_bg")) 933 } 934 935 build() { 936 Row() { 937 Text(this.content) 938 .onDragStart(() => {}) 939 .fontSize(16) 940 .lineHeight(21) 941 .padding({ left: 12, right: 12, top: 8, bottom: 8 }) 942 .fontColor($r("sys.color.ohos_id_color_text_primary")) 943 } 944 .backgroundColor(this.bubbleTextBackgroundColor) 945 .borderRadius(this.bubbleTextDirection == "right" ? 946 { topLeft: this.bubbleTextBorderRadius[1], topRight: this.bubbleTextBorderRadius[0], 947 bottomLeft: this.bubbleTextBorderRadius[1], bottomRight: this.bubbleTextBorderRadius[1] }: 948 { topLeft: this.bubbleTextBorderRadius[0], topRight: this.bubbleTextBorderRadius[1], 949 bottomLeft: this.bubbleTextBorderRadius[1], bottomRight: this.bubbleTextBorderRadius[1] }) 950 .flexBasis("auto") 951 .gesture( 952 LongPressGesture({ repeat: false, duration: 500 }) 953 //Touch and hold the action will be triggered continuously. 954 .onAction(() => { 955 if (!this.conversationCtrl.isSelectStatus) { 956 this.conversationCtrl.mmsListLongPress(this.itemIndex) 957 this.showMenu = true 958 } 959 }) 960 ) 961 .bindPopup(this.showMenu, { 962 builder: this.MenuBuilder, 963 placement: this.bubbleTextDirection == "left" ? Placement.TopRight : Placement.TopLeft, 964 maskColor: $r("sys.color.ohos_id_color_mask_thin"), 965 popupColor: $r("sys.color.ohos_id_color_background_transparent"), 966 enableArrow: false, 967 onStateChange: (e) => { 968 if (!e.isVisible) { 969 this.showMenu = false 970 } 971 } 972 }) 973 } 974}
