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