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

쪽지 리스트 수정

Browse Source
This commit is contained in:
khk 2020-01-13 16:24:38 +09:00
parent 25ad64ce2e
commit 3cfd84bd9a
4 changed files with 119 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.html
View File

@ -143,7 +143,8 @@
<div>
<span class="mdi" [ngClass]="getFileStatusIcon(file)"></span>
<span>{{ file.resContent }}</span>
<span>{{ file.resSize | ucapBytes }}</span>
</div>
<span class="file-size">{{ file.resSize | ucapBytes }}</span>
<a>
<span
class="mdi mdi-download"
@ -151,7 +152,6 @@
(click)="downloadAttachFileSingle(file)"
></span>
</a>
</div>
</li>
</ul>
</div>

38
projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss
View File

@ -109,5 +109,41 @@
.ps {
align-items: flex-start;
}
.attachFile {
border-top: 1px solid #dddddd;
li {
display: flex;
flex-flow: row;
line-height: 2em;
flex: 1 1 auto;
.file-name {
display: inline-flex;
flex-flow: row;
flex: 1 1 auto;
border: 1px solid red;
white-space: nowrap;
word-wrap: normal;
overflow: hidden;
span:last-child {
overflow: hidden;
text-overflow: ellipsis;
display: block;
width: calc(100% - 40px);
}
}
.file-size {
display: inline-flex;
margin-left: auto;
align-self: flex-end;
flex: 0 0 auto;
margin: 0 10px;
}
a {
display: inline-block;
width: 20px;
height: 100%;
}
}
}
}
}
}

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

@ -1,5 +1,5 @@
<!--체크박스 보여줄때는 <div class="list-item checkbox" matRipple> 클래스에 checkbox만 추가-->
<div class="list-item" *ngIf="message" matRipple>
<!--<div class="list-item" *ngIf="message" matRipple>
<dl class="item-default">
<dt>
<mat-icon
@ -34,4 +34,30 @@
</div>
</dd>
</dl>
</div>
</div>-->
<div class="list-item message-list" *ngIf="message" matRipple>
<dl class="item-default">
<dt>
<span class="name">
{{ message.userName }}
<span *ngIf="message.userCount > 1" class="text-accent-color number">
{{
'message.andOthers' | translate: { count: message.userCount - 1 }
}}
</span>
</span>
</dt>
<dd>
<mat-icon *ngIf="!!message.resType && message.resType === ContentType.Image">image</mat-icon>
<mat-icon *ngIf="!!message.resType && message.resType === ContentType.AttachFile">attach_file</mat-icon>
{{ message.title }}
</dd>
</dl>
<div class="date">
<span>{{ message.regDate | ucapDate: 'MM:DD' }}</span>
<span *ngIf="message.type === MessageType.Receive && !message.readYn" class="badge-new bg-warn-darkest">
N
</span>
</div>
</div>

52
projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss
View File

@ -0,0 +1,52 @@
.message-list {
&.list-item {
dl {
display: flex;
flex-flow: column;
flex: 1 1 auto;
width: calc(100% - 80px);
dt {
.name {
font-size: 16px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
white-space: nowrap;
word-wrap: normal;
font-weight: 600;
span {
font-size: 13px;
}
}
}
dd {
color: #777777;
margin-top: 4px;
white-space: nowrap;
word-wrap: normal;
text-overflow: ellipsis;
display: block;
width: 100%;
position: relative;
overflow: hidden;
}
}
.date {
display: flex;
flex-flow: column;
align-self: flex-start;
.badge-new {
border-radius: 50%;
color: #ffffff;
padding: 0;
text-align: center;
align-self: flex-end;
width: 20px;
height: 20px;
font-size: 12px;
margin-top: 4px;
}
}
}
}