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