쪽지- view수정중
This commit is contained in:
khk
parent
1eda1df54f
commit
54c493d2af
|
|
@ -126,3 +126,12 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.char-search {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background-color: #ffffff;
|
||||
padding: 20px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,11 +9,66 @@
|
|||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<mat-drawer-container autosize [hasBackdrop]="true">
|
||||
<div fxFlex fxLayout="column" fxLayoutAlign=" stretch">
|
||||
<div class="title">
|
||||
<mat-drawer-container
|
||||
autosize
|
||||
[hasBackdrop]="true"
|
||||
class="message-container"
|
||||
>
|
||||
<div
|
||||
fxFlex
|
||||
fxLayout="column"
|
||||
fxLayoutAlign=" stretch"
|
||||
class="message-info"
|
||||
>
|
||||
<div class="profile">
|
||||
<span class="profile-img-mask">
|
||||
<img />
|
||||
</span>
|
||||
<span
|
||||
*ngIf="messageInfo.type === MessageType.Receive"
|
||||
class="people sender bg-accent-color"
|
||||
alt="보낸사람"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line class="st0" x1="5.8" y1="14.2" x2="14.2" y2="5.8" />
|
||||
<polyline class="st0" points="5.8,5.8 14.2,5.8 14.2,14.2 " />
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
*ngIf="messageInfo.type !== MessageType.Receive"
|
||||
class="people receiver bg-accent-color"
|
||||
alt="받는사람"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line class="st0" x1="14.2" y1="5.8" x2="5.8" y2="14.2" />
|
||||
<polyline class="st0" points="14.2,14.2 5.8,14.2 5.8,5.8 " />
|
||||
</svg>
|
||||
</span>
|
||||
<span class="name">{{ getSendReceiverNames() }}</span>
|
||||
</div>
|
||||
<div class="title text-accent-darkest">
|
||||
{{ messageInfo.title }}
|
||||
<span>
|
||||
<span class="btn-menu ">
|
||||
<button
|
||||
mat-icon-button
|
||||
aria-label="message menu"
|
||||
|
|
@ -26,49 +81,33 @@
|
|||
</button>
|
||||
</span>
|
||||
</div>
|
||||
<div class="info">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="date">
|
||||
<span
|
||||
*ngIf="messageInfo.type === MessageType.Receive"
|
||||
class="label"
|
||||
>보낸사람</span
|
||||
>
|
||||
<span
|
||||
*ngIf="messageInfo.type !== MessageType.Receive"
|
||||
class="label"
|
||||
>받는사람</span
|
||||
>
|
||||
<span>{{ getSendReceiverNames() }}</span>
|
||||
</li>
|
||||
<li>
|
||||
<span
|
||||
*ngIf="messageInfo.type === MessageType.Receive"
|
||||
class="label"
|
||||
class="label bg-warn-color "
|
||||
>받은시간</span
|
||||
>
|
||||
<span *ngIf="messageInfo.type === MessageType.Send" class="label"
|
||||
<span
|
||||
*ngIf="messageInfo.type === MessageType.Send"
|
||||
class="label bg-warn-color "
|
||||
>보낸시간</span
|
||||
>
|
||||
<span
|
||||
*ngIf="messageInfo.type === MessageType.Reservation"
|
||||
class="label"
|
||||
class="label bg-warn-color "
|
||||
>발송예정시간</span
|
||||
>
|
||||
<span *ngIf="messageInfo.type !== MessageType.Reservation">{{
|
||||
messageInfo.regDate | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
|
||||
}}</span>
|
||||
<span *ngIf="messageInfo.type === MessageType.Reservation">{{
|
||||
messageInfo.reservationTime
|
||||
| ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
|
||||
messageInfo.reservationTime | ucapDate: 'YYYY.MM.DD (ddd) a hh:mm'
|
||||
}}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<perfect-scrollbar>
|
||||
<div class="contents">
|
||||
<ul>
|
||||
<li *ngFor="let cont of contents">
|
||||
<li *ngFor="let cont of contents" class="message-contents">
|
||||
<pre *ngIf="cont.resType === ContentType.Text">{{
|
||||
cont.resContent
|
||||
}}</pre>
|
||||
|
|
|
|||
|
|
@ -19,9 +19,95 @@
|
|||
|
||||
.contents {
|
||||
height: 380px;
|
||||
.message-contents {
|
||||
pre {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
word-break: break-word;
|
||||
font-size: 0.98em;
|
||||
color: #444444;
|
||||
}
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
max-width: 250px;
|
||||
max-height: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .message-container {
|
||||
background-color: #ffffff !important;
|
||||
.message-info {
|
||||
.profile {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding-bottom: 20px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
.profile-img-mask {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
.people {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
margin-left: -10px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
text-indent: -1000000px;
|
||||
align-self: flex-end;
|
||||
border-radius: 50%;
|
||||
&.receiver,
|
||||
&.sender {
|
||||
svg {
|
||||
stroke: #ffffff;
|
||||
}
|
||||
}
|
||||
&.sender {
|
||||
}
|
||||
}
|
||||
.name {
|
||||
font-size: 16px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
padding: 10px 0 6px;
|
||||
line-height: 24px;
|
||||
color: #222222;
|
||||
.btn-menu {
|
||||
margin-left: auto;
|
||||
color: #333333;
|
||||
}
|
||||
}
|
||||
.date {
|
||||
font-size: 13px;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: center;
|
||||
padding-bottom: 14px;
|
||||
|
||||
.label {
|
||||
border-radius: 14px;
|
||||
padding: 2px 10px;
|
||||
margin-right: 10px;
|
||||
font-size: 12px;
|
||||
color: #ffffff;
|
||||
line-height: 20px;
|
||||
}
|
||||
}
|
||||
.ps {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -212,6 +212,12 @@ $daesang-grey: (
|
|||
background: mat-color($accent);
|
||||
color: mat-color($accent, default-contrast);
|
||||
}
|
||||
.bg-warn-color {
|
||||
background-color: mat-color($warn, 300);
|
||||
}
|
||||
.bg-warn-darkest {
|
||||
background-color: mat-color($warn, 600);
|
||||
}
|
||||
.text-primary-color {
|
||||
color: mat-color($primary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div fxFlex fxLayout="row">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="input">
|
||||
<div fxFlex fxLayout="row" class="chatroom-search">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="input search-form">
|
||||
<form [formGroup]="fgSearch" class="w-100-p">
|
||||
<mat-form-field floatLabel="never">
|
||||
<input
|
||||
|
|
@ -21,10 +21,10 @@
|
|||
<mat-icon>close</mat-icon>
|
||||
</button>
|
||||
</mat-form-field>
|
||||
{{ curIndex }} / {{ totalCount }}
|
||||
<span class="text-amount">{{ curIndex }} / {{ totalCount }}</span>
|
||||
</form>
|
||||
</div>
|
||||
<div class="btn">
|
||||
<div class="btns">
|
||||
<button mat-stroked-button (click)="onClickSearchAndPrev()">
|
||||
<span class="mdi mdi-arrow-up-bold-box-outline mid-18px"></span>
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
.chatroom-search {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
.search-form {
|
||||
flex-flow: row;
|
||||
flex: 1 1 auto;
|
||||
form {
|
||||
display: flex;
|
||||
.mat-form-field {
|
||||
width: 100%;
|
||||
flex-flow: row;
|
||||
flex: 1 1 auto;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.text-amount {
|
||||
display: inline-flex;
|
||||
width: 80px;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.btns {
|
||||
display: flex;
|
||||
flex: 0 0 0%;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user