Skip to content

Commit

Permalink
Merge pull request #392 from kaogeek/dev-coffee
Browse files Browse the repository at this point in the history
[UI] ถ้าส่งรูปใหญ่มาก Chat UI หน้า Chat จะ พัง #381
  • Loading branch information
chaluckabs authored Dec 9, 2021
2 parents 5f16184 + 7d38d68 commit 949fa49
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -197,7 +197,6 @@ export class StoryPage extends AbstractPage implements OnInit {
}

public clickToUser(data: any) {
console.log('data', data);
window.open('/page/' + data._id, '_blank');
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,8 @@
*ngIf="((item.senderType === 'PAGE' && (asPage !== undefined && asPage !== null && asPage !== '')) || (item.senderType === 'USER' && (asPage === undefined || asPage === null || asPage === ''))); else elseSenderType">
<div class="page-message">
<div class="talking-m">
<div [class.hide]="item.chatMessage.messageType !== 'INFO' && item.chatMessage.messageType !== 'FULFILLMENT_CASE_CONFIRM'" class="talking-time">
<div [class.hide]="item.chatMessage.messageType !== 'INFO' && item.chatMessage.messageType !== 'FULFILLMENT_CASE_CONFIRM'"
class="talking-time">
<span class="material-icons" *ngIf="item.chatMessage.isRead">
done
</span>
Expand Down Expand Up @@ -101,7 +102,8 @@
<ng-template #elseChatMessage>
<ng-container
*ngIf="((item.chatMessage.filePath !== null && item.chatMessage.filePath !== undefined) && (item.chatMessage.videoURL === null || item.chatMessage.videoURL === undefined)); else elseChatMedia">
<div class="talking-media">
<div class="talking-media"
(click)="showDialogGallery(apiBaseURL+item.chatMessage.filePath+'/image')">
<img src="{{apiBaseURL+item.chatMessage.filePath+'/image'}}">
</div>
</ng-container>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import { ValidBase64ImageUtil } from '../../../utils/ValidBase64ImageUtil';
import { environment } from '../../../../environments/environment';
import { AbstractPage } from '../../pages/AbstractPage';
import { TooltipProfile } from '../tooltip/TooltipProfile.component';
import Glightbox from 'glightbox';

const PAGE_NAME: string = 'ChatMessage';
const REFRESH_LIST_CASE = 'authen.listcase';
Expand Down Expand Up @@ -207,6 +208,24 @@ export class ChatMessage extends AbstractPage implements OnInit {
this.chatMessage.nativeElement.value = '';
}

public showDialogGallery(imageGallery) {
console.log('imageGallery', imageGallery);
var lightbox = Glightbox();
let arrayImage = []
arrayImage.push({
href: imageGallery,
type: 'image' // Type is only required if GlIghtbox fails to know what kind of content should display
})

lightbox.setElements(arrayImage);
lightbox.openAt(0);
lightbox.on('open', (target) => {
});
lightbox.on('close', (target) => {
lightbox.destroy();
});
}

public onFileSelected(event) {
let files = event.target.files;

Expand Down
14 changes: 14 additions & 0 deletions web-spanboon/src/styles/components/shares/chat/ChatMessage.scss
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,13 @@
// img {
// width: 200px;
// }
.talking-media {
width: 250px;
cursor: zoom-in;
> img {
width: 100%;
}
}

a {
> .donator {
Expand Down Expand Up @@ -188,6 +195,13 @@
flex-direction: row;
justify-content: flex-end;
// margin: 15px 15px 20px 20px;
.talking-media {
width: 250px;
cursor: zoom-in;
> img {
width: 100%;
}
}

> .talking-time {
flex: 0 0 auto;
Expand Down

0 comments on commit 949fa49

Please sign in to comment.