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

replace from ImageComponent to ImageDirective

Browse Source
This commit is contained in:
병준 박 2019-10-25 13:04:21 +09:00
parent 1f60c57239
commit c3fc458b0c
11 changed files with 137 additions and 148 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html
View File

@ -40,7 +40,7 @@
#chatContextMenuTrigger="matMenuTrigger"
[matMenuTriggerFor]="chatContextMenu"
></div>
<mat-menu #chatContextMenu="matMenu" [overlapTrigger]="false">
<mat-menu #chatContextMenu="matMenu" [hasBackdrop]="false">
<ng-template matMenuContent let-roomInfo="roomInfo">
<button mat-menu-item (click)="onSelectedRoom(roomInfo)">
대화방 열기

6
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.html
View File

@ -26,7 +26,7 @@
#groupMenu="matMenu"
xPosition="after"
yPosition="below"
[overlapTrigger]="false"
[hasBackdrop]="false"
>
<button mat-menu-item (click)="onClickGroupMenu('GROUP_NEW')">
<mat-icon>group_add</mat-icon>
@ -92,7 +92,7 @@
#profileContextMenuTrigger="matMenuTrigger"
[matMenuTriggerFor]="profileContextMenu"
></div>
<mat-menu #profileContextMenu="matMenu" [overlapTrigger]="false">
<mat-menu #profileContextMenu="matMenu" [hasBackdrop]="false">
<ng-template matMenuContent let-userInfo="userInfo">
<button
mat-menu-item
@ -155,7 +155,7 @@
#groupContextMenuTrigger="matMenuTrigger"
[matMenuTriggerFor]="groupContextMenu"
></div>
<mat-menu #groupContextMenu="matMenu" [overlapTrigger]="false">
<mat-menu #groupContextMenu="matMenu" [hasBackdrop]="false">
<ng-template matMenuContent let-group="group">
<button mat-menu-item (click)="onClickGroupContextMenu('CHAT', group)">
그룹 대화하기

4
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
View File

@ -41,7 +41,7 @@
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #contactMenu="matMenu">
<mat-menu #contactMenu="matMenu" [hasBackdrop]="false">
<button mat-menu-item (click)="onClickContextMenu('CLOSE_ROOM')">
방닫기
</button>
@ -113,7 +113,7 @@
#messageContextMenuTrigger="matMenuTrigger"
[matMenuTriggerFor]="messageContextMenu"
></div>
<mat-menu #messageContextMenu="matMenu" [overlapTrigger]="false">
<mat-menu #messageContextMenu="matMenu" [hasBackdrop]="false">
<ng-template matMenuContent let-message="message" let-loginRes="loginRes">
<ng-container *ngIf="!isRecalledMessage(message.type)">
<button

18
projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
View File

@ -8,7 +8,6 @@
contact: message.senderSeq !== loginRes.userSeq
}"
>
<ucap-chat-message-box-date-splitter
*ngIf="getDateSplitter(i)"
class="date-splitter"
@ -50,7 +49,10 @@
</ng-container>
</ng-template>
<ng-template #contents>
<div *ngIf="getUserProfile(message.senderSeq) != ''" class="profile-img">
<div
*ngIf="getUserProfile(message.senderSeq) != ''"
class="profile-img"
>
<!-- <img
class="avatar"
style="width: 50px; height: 50px;"
@ -64,13 +66,21 @@
| async
"
/> -->
<ucap-ui-imaage
<img
class="avatar"
style="width: 50px; height: 50px;"
ucapUiImage
[base]="profileImageRoot"
[path]="getUserProfile(message.senderSeq)"
[default]="'assets/images/img_nophoto_50.png'"
/>
<!-- <ucap-ui-imaage
[style]="'width: 50px; height: 50px;'"
[imageClass]="'avatar'"
[base]="profileImageRoot"
[path]="getUserProfile(message.senderSeq)"
[default]="'assets/images/img_nophoto_50.png'"
></ucap-ui-imaage>
></ucap-ui-imaage> -->
</div>
<div class="message-main">

14
projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html
View File

@ -21,13 +21,20 @@
| async
"
/> -->
<img
class="thumbnail"
ucapUiImage
[base]="profileImageRoot"
[path]="userInfo.profileImageFile"
[default]="'assets/images/img_nophoto_50.png'"
/>
<ucap-ui-imaage
<!-- <ucap-ui-imaage
[imageClass]="'thumbnail'"
[base]="profileImageRoot"
[path]="userInfo.profileImageFile"
[default]="'assets/images/img_nophoto_50.png'"
></ucap-ui-imaage>
></ucap-ui-imaage> -->
</dt>
<dd class="info">
<div class="detail">
@ -46,8 +53,7 @@
>
{{ userInfo.intro }}
</div>
-->
</dd>
--></dd>
</dl>
<mat-checkbox
*ngIf="checkable"

11
projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html
View File

@ -2,12 +2,19 @@
<dl class="item-default">
<dt>
<!-- <img class="thumbnail" /> -->
<ucap-ui-imaage
<img
class="thumbnail"
ucapUiImage
[base]="sessionVerinfo.profileRoot"
[path]="imagePath"
[default]="defaultPath"
/>
<!-- <ucap-ui-imaage
[imageClass]="'thumbnail'"
[base]="sessionVerinfo.profileRoot"
[path]="imagePath"
[default]="defaultPath"
></ucap-ui-imaage>
></ucap-ui-imaage> -->
</dt>
<dd class="info">
<div class="detail">

24
projects/ucap-webmessenger-ui/src/lib/components/image.component.spec.ts
View File

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

94
projects/ucap-webmessenger-ui/src/lib/components/image.component.ts
View File

@ -1,94 +0,0 @@
import { Component, OnInit, Input, ElementRef } from '@angular/core';
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';
import { NGXLogger } from 'ngx-logger';
import { ucapAnimations } from '../animations';
@Component({
selector: 'ucap-ui-imaage',
template: `
<img #imageElement [src]="imageSrc" [style]="baseStyle" [class]="classes" />
`,
animations: ucapAnimations
})
export class ImageComponent implements OnInit {
@Input()
base: string;
@Input()
path: string;
@Input()
validation = true;
@Input()
default: string;
@Input()
set style(style: string) {
this.logger.debug('style', style);
this.baseStyle = style;
}
@Input()
set imageClass(classes: string) {
// if (classes && classes.length) {
// classes.split(' ').forEach((className: string) => {
// this.classList[className] = true;
// });
// this.elementRef.nativeElement.className = '';
// }
this.classes = classes;
}
baseStyle: SafeStyle;
imageSrc: string;
// classList: { [key: string]: boolean } = {};
classes: string;
constructor(
private elementRef: ElementRef<HTMLElement>,
private domSanitizer: DomSanitizer,
private logger: NGXLogger
) {
this.imageSrc = null;
}
ngOnInit() {
if (this.validation) {
if (
!this.base ||
'' === this.base.trim() ||
!this.path ||
'' === this.path.trim()
) {
this.imageSrc = this.default;
}
}
if (!this.imageSrc) {
this.imageSrc = this.default;
const imageUrl = `${this.base}${this.path}`;
const image = new Image();
image.onload = () => {
if ('naturalHeight' in image) {
if (image.naturalHeight + image.naturalWidth === 0) {
image.onerror('naturalHeight');
return;
}
}
if (image.width + image.height === 0) {
image.onerror('width');
return;
}
this.imageSrc = image.src;
};
image.onerror = () => {
this.imageSrc = this.default;
};
image.src = imageUrl;
}
}
}

83
projects/ucap-webmessenger-ui/src/lib/directives/image.directive.ts Normal file
View File

@ -0,0 +1,83 @@
import {
Directive,
ElementRef,
EventEmitter,
Output,
Input,
AfterViewInit,
OnInit,
HostListener
} from '@angular/core';
import { NGXLogger } from 'ngx-logger';
@Directive({
selector: 'img[ucapUiImage]'
})
export class ImageDirective implements OnInit, AfterViewInit {
@Input()
base: string;
@Input()
path: string;
@Input()
validation = true;
@Input()
default: string;
@Output()
loaded = new EventEmitter<string>();
imageSrc: string;
constructor(
private elementRef: ElementRef<HTMLImageElement>,
private logger: NGXLogger
) {}
ngOnInit(): void {
if (this.validation) {
if (
!this.base ||
'' === this.base.trim() ||
!this.path ||
'' === this.path.trim()
) {
this.imageSrc = this.default;
}
}
}
ngAfterViewInit(): void {
if (this.imageSrc === this.default) {
this.elementRef.nativeElement.src = this.default;
this.loaded.emit(this.elementRef.nativeElement.src);
} else {
this.elementRef.nativeElement.src = this.default;
const imageUrl = `${this.base}${this.path}`;
const image = new Image();
image.onload = () => {
if ('naturalHeight' in image) {
if (image.naturalHeight + image.naturalWidth === 0) {
image.onerror('naturalHeight');
return;
}
}
if (image.width + image.height === 0) {
image.onerror('width');
return;
}
this.elementRef.nativeElement.src = image.src;
this.loaded.emit(this.elementRef.nativeElement.src);
};
image.onerror = () => {
this.elementRef.nativeElement.src = this.default;
this.loaded.emit(this.elementRef.nativeElement.src);
};
image.src = imageUrl;
}
}
}

25
projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts
View File

@ -12,13 +12,24 @@ import { MatSnackBarModule } from '@angular/material/snack-bar';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { FileUploadQueueComponent } from './components/file-upload-queue.component';
import { ImageComponent } from './components/image.component';
const COMPONENTS = [ImageComponent, FileUploadQueueComponent];
import { BottomSheetService } from './services/bottom-sheet.service';
import { ClipboardService } from './services/clipboard.service';
import { DialogService } from './services/dialog.service';
import { SnackBarService } from './services/snack-bar.service';
import { FileUploadForDirective } from './directives/file-upload-for.directive';
import { ImageDirective } from './directives/image.directive';
import { AlertDialogComponent } from './dialogs/alert.dialog.component';
import { ConfirmDialogComponent } from './dialogs/confirm.dialog.component';
import { BytesPipe } from './pipes/bytes.pipe';
const COMPONENTS = [FileUploadQueueComponent];
const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent];
const DIRECTIVES = [FileUploadForDirective, ImageDirective];
const PIPES = [BytesPipe];
const SERVICES = [
BottomSheetService,
ClipboardService,
@ -26,16 +37,6 @@ const SERVICES = [
SnackBarService
];
import { FileUploadForDirective } from './directives/file-upload-for.directive';
const DIRECTIVES = [FileUploadForDirective];
import { AlertDialogComponent } from './dialogs/alert.dialog.component';
import { ConfirmDialogComponent } from './dialogs/confirm.dialog.component';
const DIALOGS = [AlertDialogComponent, ConfirmDialogComponent];
import { BytesPipe } from './pipes/bytes.pipe';
const PIPES = [BytesPipe];
@NgModule({
imports: [
CommonModule,

2
projects/ucap-webmessenger-ui/src/public-api.ts
View File

@ -5,12 +5,12 @@
export * from './lib/animations';
export * from './lib/components/file-upload-queue.component';
export * from './lib/components/image.component';
export * from './lib/dialogs/alert.dialog.component';
export * from './lib/dialogs/confirm.dialog.component';
export * from './lib/directives/file-upload-for.directive';
export * from './lib/directives/image.directive';
export * from './lib/services/bottom-sheet.service';
export * from './lib/services/clipboard.service';