ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

1. anchor tag cursor styling.

Browse Source 
2. anchor tag open url for sticker, mass-text and mass-text-detail
3. mass-detail view component added
This commit is contained in:
leejinho 2019-11-20 10:29:49 +09:00
parent 47dbd5d39a
commit 8f81085251
10 changed files with 185 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/index.ts
View File

@ -1,4 +1,9 @@
import { CreateChatDialogComponent } from './create-chat.dialog.component';
import { EditChatRoomDialogComponent } from './edit-chat-room.dialog.component';
import { MassDetailComponent } from './mass-detail.component';
export const DIALOGS = [CreateChatDialogComponent, EditChatRoomDialogComponent];
export const DIALOGS = [
CreateChatDialogComponent,
EditChatRoomDialogComponent,
MassDetailComponent
];

15
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.html Normal file
View File

@ -0,0 +1,15 @@
<mat-card class="confirm-card mat-elevation-z">
<mat-card-header>
<mat-card-title>{{ data.title }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<perfect-scrollbar>
<p [innerHTML]="data.contents | linky" class="contnets"></p>
</perfect-scrollbar>
</mat-card-content>
<mat-card-actions class="button-farm flex-row">
<button mat-stroked-button (click)="onClickConfirm()" class="mat-primary">
confirm
</button>
</mat-card-actions>
</mat-card>

25
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.scss Normal file
View File

@ -0,0 +1,25 @@
::ng-deep .mat-card-header-tex {
margin: 0;
}
.confirm-card {
min-width: 500px;
.mat-card-header {
margin-bottom: 20px;
.mat-card-header-text {
.mat-card-title {
margin: 0 -16px;
}
}
}
.button-farm {
text-align: right;
.mat-primary {
margin-left: 4px;
}
}
}
.contnets {
max-height: 500px;
word-break: break-word;
}

25
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.spec.ts Normal file
View File

@ -0,0 +1,25 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { MassDetailComponent } from './mass-detail.component';
describe('MassDetailComponent', () => {
let component: MassDetailComponent;
let fixture: ComponentFixture<MassDetailComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ MassDetailComponent ]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(MassDetailComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

58
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/mass-detail.component.ts Normal file
View File

@ -0,0 +1,58 @@
import {
Component,
OnInit,
Inject,
ElementRef,
AfterViewInit
} from '@angular/core';
import { MatDialogRef, MAT_DIALOG_DATA } from '@angular/material';
import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
export interface MassDetailDialogData {
title: string;
contents: string;
}
// tslint:disable-next-line: no-empty-interface
export interface MassDetailDialogResult {}
@Component({
selector: 'app-layout-messenger-mass-detail',
templateUrl: './mass-detail.component.html',
styleUrls: ['./mass-detail.component.scss']
})
export class MassDetailComponent implements OnInit, AfterViewInit {
constructor(
public dialogRef: MatDialogRef<
MassDetailDialogData,
MassDetailDialogResult
>,
@Inject(MAT_DIALOG_DATA) public data: MassDetailDialogData,
private elementRef: ElementRef,
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
) {}
ngOnInit() {}
ngAfterViewInit(): void {
if (
!!this.elementRef.nativeElement &&
!!this.elementRef.nativeElement.querySelector('a')
) {
const elements = this.elementRef.nativeElement.querySelectorAll('a');
elements.forEach(element => {
element.addEventListener('click', this.onClickEvent.bind(this));
});
}
}
onClickEvent(event: MouseEvent) {
this.nativeService.openDefaultBrowser(
(event.target as HTMLAnchorElement).text
);
}
onClickConfirm(): void {
this.dialogRef.close();
}
}

27
projects/ucap-webmessenger-app/src/app/store/messenger/chat/effects.ts
View File

@ -26,6 +26,10 @@ import {
AlertDialogData
} from '@ucap-webmessenger/ui';
import { initialState } from '../event';
import {
MassDetailComponent,
MassDetailDialogData
} from '@app/layouts/messenger/dialogs/chat/mass-detail.component';
@Injectable()
export class Effects {
@ -63,21 +67,16 @@ export class Effects {
this.store.dispatch(massTalkDownloadSuccess(res));
const result = this.dialogService.open<
AlertDialogComponent,
AlertDialogData
>(
AlertDialogComponent,
{
width: '100%',
height: '500px',
disableClose: false,
data: {
title: '전체보기',
html: `<pre>` + res.content + `</pre>`
}
MassDetailComponent,
MassDetailDialogData
>(MassDetailComponent, {
disableClose: false,
width: '550px',
data: {
title: 'Detail View',
contents: res.content
}
);
});
} else {
this.store.dispatch(massTalkDownloadFailure({ error: res }));
}

2
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/mass.component.html
View File

@ -1,5 +1,5 @@
<div class="bubble-main">
<span class="content" [innerHTML]="content | linefeedtohtml"></span>
<span class="content" [innerHTML]="content | linefeedtohtml | linky"></span>
<span>
{{ moment(message.sendDate).toDate() | date: 'short' }}
</span>

5
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.html
View File

@ -6,9 +6,6 @@
onerror="this.src='assets/sticker/sticker_default.png'"
/>
</li>
<li
*ngIf="contentJson && contentJson.chat"
[innerHTML]="contentJson.chat | linefeedtohtml"
></li>
<li *ngIf="contents" [innerHTML]="contents | linefeedtohtml | linky"></li>
</ul>
</div>

41
projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/sticker.component.ts
View File

@ -1,28 +1,61 @@
import { Component, OnInit, Input } from '@angular/core';
import {
Component,
OnInit,
Input,
Inject,
ElementRef,
AfterViewInit
} from '@angular/core';
import { Info, StickerEventJson } from '@ucap-webmessenger/protocol-event';
import { NGXLogger } from 'ngx-logger';
import { StickerInfo } from '../../models/sticker-info.json';
import { UCAP_NATIVE_SERVICE, NativeService } from '@ucap-webmessenger/native';
@Component({
selector: 'ucap-chat-message-box-sticker',
templateUrl: './sticker.component.html',
styleUrls: ['./sticker.component.scss']
})
export class StickerComponent implements OnInit {
export class StickerComponent implements OnInit, AfterViewInit {
@Input()
message: Info<StickerEventJson>;
contentJson?: StickerInfo;
contents: string;
stickerUrl?: string;
constructor(private logger: NGXLogger) {}
constructor(
private logger: NGXLogger,
private elementRef: ElementRef,
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
) {}
ngOnInit() {
try {
if (!!this.message.sentMessageJson.file) {
this.stickerUrl = `assets/sticker/sticker_s_${this.message.sentMessageJson.file}.png`;
}
if (!!this.message.sentMessageJson.chat) {
this.contents = this.message.sentMessageJson.chat;
}
} catch (e) {
this.logger.error(e);
}
}
ngAfterViewInit(): void {
if (
!!this.elementRef.nativeElement &&
!!this.elementRef.nativeElement.querySelector('a')
) {
const elements = this.elementRef.nativeElement.querySelectorAll('a');
elements.forEach(element => {
element.addEventListener('click', this.onClickEvent.bind(this));
});
}
}
onClickEvent(event: MouseEvent) {
this.nativeService.openDefaultBrowser(
(event.target as HTMLAnchorElement).text
);
}
}

4
projects/ucap-webmessenger-ui/src/assets/scss/partials/_general.scss
View File

@ -68,3 +68,7 @@ input {
border: none;
padding: 0 16px;
}
a {
cursor: pointer;
}