만료된 파일 클릭시 뷰어 오픈 안되도록 수정.

This commit is contained in:
leejinho 2019-12-04 12:16:16 +09:00
parent 8dbd747f16
commit ac54b20021
5 changed files with 61 additions and 15 deletions

View File

@ -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;
}
}
}

View File

@ -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 });
}
}
}

View File

@ -1,3 +1,10 @@
<div class="bubble-main">
<div
class="bubble-main"
(mouseenter)="mouseEnter($event)"
(mouseleave)="mouseLeave($event)"
>
<div *ngIf="showExpired" class="expired-text">
<span>기간이 만료된 파일입니다</span>
</div>
<img [src]="fileInfo.thumbUrl" />
</div>

View File

@ -1,7 +1,24 @@
.bubble-main{
padding:10px;
img{
height:140px;
width:auto;
.bubble-main {
padding: 10px;
position: relative;
img {
height: 140px;
width: auto;
}
}
.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;
}
}
}

View File

@ -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();
}
}