diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss index a1758367..236c426b 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/attach-file.component.scss @@ -2,6 +2,7 @@ display: flex; flex-direction: row; padding: 14px; + min-width: 200px; .file-img { display: inline-flex; width: 50px; @@ -102,13 +103,13 @@ height: 100%; } } - &.expired{ - li{ - width:100%; + &.expired { + li { + width: 100%; white-space: nowrap; - color:#999999; + color: #999999; align-items: center; - line-height:40px; + line-height: 40px; } } } diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.ts index 1c089d36..9e889c19 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.ts +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/file.component.ts @@ -51,10 +51,14 @@ export class FileComponent implements OnInit { } onClickFileViewer(fileInfo: FileEventJson) { - this.fileViewer.emit(fileInfo); + if (!this.getExpiredFile()) { + this.fileViewer.emit(fileInfo); + } } onSave(value: string) { - this.save.emit({ fileInfo: this.fileInfo, type: value }); + if (!this.getExpiredFile()) { + this.save.emit({ fileInfo: this.fileInfo, type: value }); + } } } diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.html index 08f637dc..cc124b16 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.html +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.html @@ -1,3 +1,10 @@ -
+
+
+ 기간이 만료된 파일입니다 +
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.scss index b8b6c028..5d3d13e0 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.scss +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.scss @@ -1,7 +1,24 @@ -.bubble-main{ - padding:10px; - img{ - height:140px; - width:auto; +.bubble-main { + padding: 10px; + position: relative; + + img { + height: 140px; + width: auto; } -} \ No newline at end of file + + .expired-text { + position: absolute; + background-color: rgb(255, 255, 255, 0.6); + width: calc(100% - 20px); + height: calc(100% - 20px); + text-align: center; + display: table; + + span { + color: #666666; + display: table-cell; + vertical-align: middle; + } + } +} diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.ts index 0c66d5fa..1416288b 100644 --- a/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.ts +++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/message-box/image.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Input } from '@angular/core'; +import { Component, OnInit, Input, ViewChild, ElementRef } from '@angular/core'; import { NGXLogger } from 'ngx-logger'; import { FileEventJson } from '@ucap-webmessenger/protocol-event'; @@ -13,7 +13,24 @@ export class ImageComponent implements OnInit { @Input() expired = false; + showExpired = false; + constructor(private logger: NGXLogger) {} ngOnInit() {} + + mouseEnter(event: MouseEvent): void { + if (this.expired) { + this.showExpired = true; + } + event.stopPropagation(); + event.preventDefault(); + } + mouseLeave(event: MouseEvent): void { + if (this.expired) { + this.showExpired = false; + } + event.stopPropagation(); + event.preventDefault(); + } }