diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html index 1cf4897c..2e0d0091 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html @@ -55,7 +55,16 @@ mode="indeterminate" > -
+
비밀 대화방입니다. @@ -73,6 +82,17 @@ > + +
+
+ +
+
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss index 88e6ad83..060dc8a3 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss @@ -44,6 +44,22 @@ background: transparent; overflow: auto; -webkit-overflow-scrolling: touch; + + .file-drop-zone-container { + position: relative; + + .file-drop-zone { + position: absolute; + border: 2px solid gray; + background-color: white; + width: 600px; + height: 150px; + bottom: 0px; + margin: auto; + left: 0px; + right: 0px; + } + } } } } diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts index f0d1e67f..84e0b718 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.ts @@ -88,6 +88,9 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked { isCopyableMessage = isCopyable; isRecallableMessage = isRecallable; + fileDragOver = false; + files: File[]; + constructor( private store: Store, private sessionStorageService: SessionStorageService, @@ -198,6 +201,30 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked { this.logger.debug('fileSave', value); } + onFileDragEnter() { + this.logger.debug('onFileDragEnter'); + this.fileDragOver = true; + } + + onFileDragOver() { + this.logger.debug('onFileDragOver'); + } + + onFileDragLeave() { + this.logger.debug('onFileDragLeave'); + this.fileDragOver = false; + } + + onFileSelected(files: File[]) { + this.logger.debug('onFileSelected', files); + if (!this.files) { + this.files = []; + } + this.files.push(...files); + + this.fileDragOver = false; + } + onContextMenuMessage(params: { event: MouseEvent; message: Info }) { params.event.preventDefault(); params.event.stopPropagation(); diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.html index 68114870..b9d2208d 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.html @@ -1,5 +1,3 @@
-
- slide dashboard -
+
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts index bf70600c..bb2012de 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts @@ -17,6 +17,7 @@ import { MatFormFieldModule } from '@angular/material/form-field'; import { MatInputModule } from '@angular/material/input'; import { DragDropModule } from '@angular/cdk/drag-drop'; +import { OverlayModule } from '@angular/cdk/overlay'; import { UCapUiModule } from '@ucap-webmessenger/ui'; import { UCapUiChatModule } from '@ucap-webmessenger/ui-chat'; @@ -35,6 +36,7 @@ import { ReactiveFormsModule } from '@angular/forms'; FlexLayoutModule, DragDropModule, ReactiveFormsModule, + OverlayModule, MatFormFieldModule, MatInputModule, MatBadgeModule, diff --git a/projects/ucap-webmessenger-app/src/styles.scss b/projects/ucap-webmessenger-app/src/styles.scss index 99c13242..37fc523b 100644 --- a/projects/ucap-webmessenger-app/src/styles.scss +++ b/projects/ucap-webmessenger-app/src/styles.scss @@ -2,3 +2,7 @@ // Import app.theme.scss @import 'app/app.theme'; + +.file-upload-backdrop { + background-color: aqua; +} diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts index 8a48c64f..d5a3bcad 100644 --- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts +++ b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.ts @@ -19,6 +19,7 @@ import { UserInfoF, UserInfoDN } from '@ucap-webmessenger/protocol-query'; +import { NGXLogger } from 'ngx-logger'; @Component({ selector: 'ucap-group-expansion-panel', @@ -57,7 +58,7 @@ export class ExpansionPanelComponent implements OnInit { @ViewChild('groupAccordion', { static: true }) groupAccordion: MatAccordion; - constructor() {} + constructor(private logger: NGXLogger) {} ngOnInit() {} diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html new file mode 100644 index 00000000..5579a119 --- /dev/null +++ b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.html @@ -0,0 +1,21 @@ +
+
+
+ image +
+
{{ file.name }}
+
+ clear +
+
+
diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss new file mode 100644 index 00000000..bc359aa5 --- /dev/null +++ b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.scss @@ -0,0 +1,4 @@ +.ucap-ui-file-upload-queue-container { + width: 100%; + height: 100%; +} diff --git a/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.ts b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.ts new file mode 100644 index 00000000..26dbc2f7 --- /dev/null +++ b/projects/ucap-webmessenger-ui/src/lib/components/file-upload-queue.component.ts @@ -0,0 +1,29 @@ +import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; + +import { NGXLogger } from 'ngx-logger'; + +@Component({ + selector: 'ucap-ui-file-upload-queue', + templateUrl: './file-upload-queue.component.html', + styleUrls: ['./file-upload-queue.component.scss'] +}) +export class FileUploadQueueComponent implements OnInit { + @Output() + filesChange = new EventEmitter(); + @Input() set files(files: File[]) { + this.uploadFiles = files; + } + + uploadFiles: File[]; + + constructor(private logger: NGXLogger) {} + + ngOnInit() {} + + onClickClear(file: File) { + this.uploadFiles = this.uploadFiles.filter(f => { + return f.name !== file.name && f.path !== file.path; + }); + this.filesChange.emit(this.uploadFiles); + } +} diff --git a/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts b/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts new file mode 100644 index 00000000..89130572 --- /dev/null +++ b/projects/ucap-webmessenger-ui/src/lib/directives/file-upload-for.directive.ts @@ -0,0 +1,69 @@ +import { + Directive, + ElementRef, + EventEmitter, + HostListener, + Output +} from '@angular/core'; + +import { NGXLogger } from 'ngx-logger'; + +@Directive({ + selector: 'input[ucapUiFileUploadFor], div[ucapUiFileUploadFor]' +}) +export class FileUploadForDirective { + @Output() + public fileDragEnter: EventEmitter = new EventEmitter(); + + @Output() + public fileDragOver: EventEmitter = new EventEmitter(); + + @Output() + public fileDragLeave: EventEmitter = new EventEmitter(); + + @Output() + public fileSelected: EventEmitter = new EventEmitter(); + + dragOver = false; + + constructor(private elementRef: ElementRef, private logger: NGXLogger) {} + + @HostListener('window:dragenter', ['$event']) + public onDragEnter(event: any): any { + const files = event.dataTransfer.files; + if (!this.dragOver) { + this.fileDragEnter.emit(files); + this.dragOver = true; + } + } + + @HostListener('window:dragover', ['$event']) + public onDragOver(event: any): any { + event.preventDefault(); + } + + @HostListener('window:dragleave', ['$event']) + public onDragLeave(event: any): any { + if (event && event.pageX === 0 && event.pageY === 0) { + this.fileDragLeave.emit(); + this.dragOver = false; + } + } + + @HostListener('change') + public onChange(): any { + const files = this.elementRef.nativeElement.files; + this.fileSelected.emit(files); + this.elementRef.nativeElement.value = ''; + } + + @HostListener('window:drop', ['$event']) + public onDrop(event: any): any { + const files = event.dataTransfer.files; + this.fileSelected.emit(files); + event.preventDefault(); + event.stopPropagation(); + this.elementRef.nativeElement.value = ''; + this.dragOver = false; + } +} diff --git a/projects/ucap-webmessenger-ui/src/lib/pipes/bytes.pipe.ts b/projects/ucap-webmessenger-ui/src/lib/pipes/bytes.pipe.ts new file mode 100644 index 00000000..df6132c5 --- /dev/null +++ b/projects/ucap-webmessenger-ui/src/lib/pipes/bytes.pipe.ts @@ -0,0 +1,20 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +const units = ['bytes', 'KB', 'MB', 'GB', 'TB', 'PB']; + +@Pipe({ name: 'ucapBytes' }) +export class BytesPipe implements PipeTransform { + public transform(bytes: number): string { + if (isNaN(parseFloat('' + bytes)) || !isFinite(bytes)) { + return '-'; + } + if (bytes <= 0) { + return '0'; + } + + const num = Math.floor(Math.log(bytes) / Math.log(1024)); + return ( + (bytes / Math.pow(1024, Math.floor(num))).toFixed(1) + ' ' + units[num] + ); + } +} diff --git a/projects/ucap-webmessenger-ui/src/lib/pipes/image.pipe.ts b/projects/ucap-webmessenger-ui/src/lib/pipes/image.pipe.ts deleted file mode 100644 index 5e20cded..00000000 --- a/projects/ucap-webmessenger-ui/src/lib/pipes/image.pipe.ts +++ /dev/null @@ -1,76 +0,0 @@ -import { PipeTransform, Pipe } from '@angular/core'; -import { of, Observable } from 'rxjs'; -import { NGXLogger } from 'ngx-logger'; -import { HttpClient } from '@angular/common/http'; -import { take, map, catchError, switchMap, tap } from 'rxjs/operators'; - -export interface ImagePipeParameter { - path?: string; - validation?: boolean; - default?: string; -} - -@Pipe({ name: 'ucapUiImaage' }) -export class ImagePipe implements PipeTransform { - constructor(private httpClient: HttpClient, private logger: NGXLogger) {} - - transform( - base: string, - params?: ImagePipeParameter - ): Observable { - params = !!params ? params : {}; - params.validation = !!params.validation ? params.validation : true; - - if (params.validation) { - if ( - !base || - '' === base.trim() || - !params.path || - '' === params.path.trim() - ) { - return of(params.default); - } - } - - const imageUrl = `${base}${params.path}`; - - return new Observable(subscriber => { - subscriber.next(params.default); - - this.httpClient - .get(imageUrl, { responseType: 'blob' }) - .pipe( - take(1), - tap(blob => { - const reader = new FileReader(); - reader.onloadend = ev => { - subscriber.next(reader.result); - }; - reader.readAsDataURL(blob); - }), - catchError(err => { - this.logger.error(err); - return params.default; - }) - ) - .subscribe(); - }); - - return this.httpClient.get(imageUrl, { responseType: 'blob' }).pipe( - take(1), - switchMap(blob => { - return new Observable(subscriber => { - const reader = new FileReader(); - reader.onloadend = ev => { - subscriber.next(reader.result); - }; - reader.readAsDataURL(blob); - }); - }), - catchError(err => { - this.logger.error(err); - return params.default; - }) - ); - } -} diff --git a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts index a3a636df..a9d48c67 100644 --- a/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts +++ b/projects/ucap-webmessenger-ui/src/lib/ucap-ui.module.ts @@ -1,15 +1,19 @@ import { NgModule, ModuleWithProviders } from '@angular/core'; import { CommonModule } from '@angular/common'; +import { FlexLayoutModule } from '@angular/flex-layout'; + import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { MatDialogModule } from '@angular/material/dialog'; +import { MatIconModule } from '@angular/material/icon'; 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]; +const COMPONENTS = [ImageComponent, FileUploadQueueComponent]; import { BottomSheetService } from './services/bottom-sheet.service'; import { ClipboardService } from './services/clipboard.service'; @@ -22,24 +26,29 @@ 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 { ImagePipe } from './pipes/image.pipe'; -const PIPES = [ImagePipe]; +import { BytesPipe } from './pipes/bytes.pipe'; +const PIPES = [BytesPipe]; @NgModule({ imports: [ CommonModule, + FlexLayoutModule, MatButtonModule, MatCardModule, MatDialogModule, + MatIconModule, MatSnackBarModule, DragDropModule ], - exports: [...COMPONENTS, ...PIPES], - declarations: [...COMPONENTS, ...DIALOGS, ...PIPES], + exports: [...COMPONENTS, ...DIRECTIVES, ...PIPES], + declarations: [...COMPONENTS, ...DIALOGS, ...DIRECTIVES, ...PIPES], entryComponents: [...DIALOGS] }) export class UCapUiModule { diff --git a/projects/ucap-webmessenger-ui/src/public-api.ts b/projects/ucap-webmessenger-ui/src/public-api.ts index dc5ec629..0716a842 100644 --- a/projects/ucap-webmessenger-ui/src/public-api.ts +++ b/projects/ucap-webmessenger-ui/src/public-api.ts @@ -7,7 +7,7 @@ export * from './lib/animations'; export * from './lib/dialogs/alert.dialog.component'; export * from './lib/dialogs/confirm.dialog.component'; -export * from './lib/pipes/image.pipe'; +export * from './lib/directives/file-upload-for.directive'; export * from './lib/services/bottom-sheet.service'; export * from './lib/services/clipboard.service';