쪽지쓰기- 보완예정
This commit is contained in:
khk
parent
62f926eae4
commit
351c3a121f
|
|
@ -1,41 +1,29 @@
|
|||
<mat-card class="mat-elevation-z0 ucap-message-write">
|
||||
<form name="messageWriteForm" [formGroup]="messageWriteForm" novalidate>
|
||||
<mat-form-field class="message-title">
|
||||
<input
|
||||
matInput
|
||||
formControlName="title"
|
||||
placeholder="{{ 'message.fieldTitle' | translate }}"
|
||||
/>
|
||||
</mat-form-field>
|
||||
<div class="add-row">
|
||||
<button
|
||||
mat-button
|
||||
(click)="onClickReceiverList()"
|
||||
class="mat-mini-fab mat-button-base mat-accent mat-elevation-z"
|
||||
>
|
||||
<mat-icon>add</mat-icon>
|
||||
<span class="mat-fab__label">수신자 추가</span>
|
||||
</button>
|
||||
<span class="receiver-sum text-accent-color">총 수신자 OO명</span>
|
||||
</div>
|
||||
<mat-chip-list #chipList aria-label="receiver selection">
|
||||
<mat-chip
|
||||
*ngFor="let receiver of receiverList"
|
||||
removable="true"
|
||||
(removed)="onRemovedReceiver(receiver)"
|
||||
>
|
||||
{{ receiver.name }}
|
||||
<span matChipRemove class="mdi mdi-close"></span>
|
||||
</mat-chip>
|
||||
</mat-chip-list>
|
||||
|
||||
<mat-card-content class="message-write-body">
|
||||
<div
|
||||
#editor
|
||||
class="ucap-message-write-editor"
|
||||
contenteditable="true"
|
||||
(paste)="onPasteEditor($event)"
|
||||
(input)="onInputEditor()"
|
||||
></div>
|
||||
<input type="file" #fileInput style="display: none" multiple />
|
||||
<mat-list>
|
||||
<mat-list-item *ngFor="let oldAttachment of oldAttachmentList">
|
||||
{{ oldAttachment.resContent }}
|
||||
<button
|
||||
mat-button
|
||||
aria-label="이미지삭제"
|
||||
(click)="onClickDeleteOldAttachment(oldAttachment)"
|
||||
>
|
||||
<span class="mdi mdi-delete"></span>
|
||||
</button>
|
||||
</mat-list-item>
|
||||
<mat-list-item *ngFor="let attachment of attachmentList">
|
||||
{{ attachment.name }}
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
|
||||
<perfect-scrollbar>
|
||||
<mat-form-field class="message-receiver-list">
|
||||
<!--<mat-form-field class="message-receiver-list">
|
||||
<perfect-scrollbar>
|
||||
<mat-chip-list #chipList aria-label="receiver selection">
|
||||
<mat-chip
|
||||
*ngFor="let receiver of receiverList"
|
||||
|
|
@ -52,31 +40,80 @@
|
|||
(click)="onClickReceiverList()"
|
||||
/>
|
||||
</mat-chip-list>
|
||||
</mat-form-field>
|
||||
</perfect-scrollbar>
|
||||
</perfect-scrollbar>
|
||||
</mat-form-field>
|
||||
-->
|
||||
|
||||
<mat-form-field class="message-title">
|
||||
<input
|
||||
matInput
|
||||
formControlName="title"
|
||||
placeholder="{{ 'message.fieldTitle' | translate }}"
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<div class="message-content">
|
||||
<mat-card-content class="message-write-body">
|
||||
<div
|
||||
#editor
|
||||
class="ucap-message-write-editor"
|
||||
contenteditable="true"
|
||||
(paste)="onPasteEditor($event)"
|
||||
(input)="onInputEditor()"
|
||||
></div>
|
||||
<input type="file" #fileInput style="display: none" multiple />
|
||||
<mat-list>
|
||||
<mat-list-item *ngFor="let oldAttachment of oldAttachmentList">
|
||||
{{ oldAttachment.resContent }}
|
||||
<button
|
||||
mat-button
|
||||
aria-label="이미지삭제"
|
||||
(click)="onClickDeleteOldAttachment(oldAttachment)"
|
||||
>
|
||||
<span class="mdi mdi-delete"></span>
|
||||
</button>
|
||||
</mat-list-item>
|
||||
<mat-list-item *ngFor="let attachment of attachmentList">
|
||||
{{ attachment.name }}
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
<div class="message-option">
|
||||
<div class="editor-tools">
|
||||
<button
|
||||
mat-icon-button
|
||||
aria-label="이미지"
|
||||
(click)="onClickImage()"
|
||||
>
|
||||
<span class="mdi mdi-camera mdi-24px"></span>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
aria-label="첨부파일"
|
||||
(click)="onClickAttachment()"
|
||||
>
|
||||
<span class="mdi mdi-attachment mdi-rotate-90 mdi-24px"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="length">
|
||||
<span
|
||||
[class.editor-length-invalid]="
|
||||
0 === contentLength || 1000 < contentLength
|
||||
"
|
||||
>{{ contentLength }}</span
|
||||
>/1000
|
||||
</div>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
<mat-card-actions>
|
||||
<div class="editor-tools">
|
||||
<button mat-icon-button aria-label="이미지" (click)="onClickImage()">
|
||||
<span class="mdi mdi-camera mdi-24px"></span>
|
||||
</button>
|
||||
<button
|
||||
mat-icon-button
|
||||
aria-label="첨부파일"
|
||||
(click)="onClickAttachment()"
|
||||
>
|
||||
<span class="mdi mdi-attachment mdi-rotate-90 mdi-24px"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="editor-actions-spacer"></div>
|
||||
<div>
|
||||
<!--<div>
|
||||
<span
|
||||
[class.editor-length-invalid]="
|
||||
0 === contentLength || 1000 < contentLength
|
||||
"
|
||||
>{{ contentLength }}</span
|
||||
>/1000
|
||||
</div>
|
||||
</div>-->
|
||||
<div class="editor-actions-spacer"></div>
|
||||
<div class="editor-actions">
|
||||
<button
|
||||
|
|
@ -86,8 +123,36 @@
|
|||
>
|
||||
{{ 'common.messages.cancel' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-flat-button
|
||||
(click)="onClickSend()"
|
||||
[disabled]="
|
||||
messageWriteForm.invalid ||
|
||||
!receiverList ||
|
||||
0 === receiverList.length ||
|
||||
0 === contentLength ||
|
||||
1000 < contentLength
|
||||
"
|
||||
class="mat-primary"
|
||||
>
|
||||
{{ 'message.sendTo' | translate }}
|
||||
</button>
|
||||
<button
|
||||
mat-flat-button
|
||||
(click)="onClickSendSchedule()"
|
||||
[disabled]="
|
||||
messageWriteForm.invalid ||
|
||||
!receiverList ||
|
||||
0 === receiverList.length ||
|
||||
0 === contentLength ||
|
||||
1000 < contentLength
|
||||
"
|
||||
class="mat-primary"
|
||||
>
|
||||
{{ 'message.sendReservation' | translate }}
|
||||
</button>
|
||||
|
||||
<mat-menu #appMenu="matMenu" yPosition="above">
|
||||
<!-- <mat-menu #appMenu="matMenu" yPosition="above">
|
||||
<button mat-menu-item (click)="onClickSendSchedule()">
|
||||
<span class="mdi mdi-send-clock"></span
|
||||
><span>{{ 'message.sendReservation' | translate }}</span>
|
||||
|
|
@ -121,7 +186,7 @@
|
|||
class="mat-primary"
|
||||
>
|
||||
{{ 'message.sendReservation' | translate }}
|
||||
</button>
|
||||
</button>-->
|
||||
</div>
|
||||
</mat-card-actions>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -7,20 +7,8 @@
|
|||
height: 100px;
|
||||
}
|
||||
|
||||
.message-title {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.message-write-body {
|
||||
overflow: auto;
|
||||
height: 270px;
|
||||
|
||||
.ucap-message-write-editor {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 250px;
|
||||
}
|
||||
|
||||
[contenteditable] {
|
||||
}
|
||||
|
|
@ -45,14 +33,98 @@
|
|||
mat-card-actions {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
||||
.editor-tools {
|
||||
padding-left: 0px;
|
||||
}
|
||||
.editor-actions-spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.editor-actions {
|
||||
}
|
||||
}
|
||||
|
||||
.message-content {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
.message-receiver-list {
|
||||
position: relative;
|
||||
width: 30%;
|
||||
height: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.message-write-body {
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
flex-flow: column;
|
||||
margin: 0;
|
||||
.ucap-message-write-editor {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
height: 280px;
|
||||
overflow: auto;
|
||||
}
|
||||
.message-option {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
flex: 1 1 auto;
|
||||
height: 40px;
|
||||
.editor-tools {
|
||||
}
|
||||
.length {
|
||||
margin-left: auto;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-card-actions {
|
||||
margin: 0 0 20px;
|
||||
border-top: 1px solid #dddddd;
|
||||
.editor-actions {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
justify-content: space-between;
|
||||
margin-left: auto;
|
||||
button {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .ucap-message-write {
|
||||
padding: 0;
|
||||
.add-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-bottom: 10px;
|
||||
margin-bottom: 10px;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
.mat-mini-fab {
|
||||
.mat-button-wrapper {
|
||||
padding: 0;
|
||||
.mat-icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
.mat-fab__label {
|
||||
color: #212121;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.receiver-sum {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
.mat-chip-list {
|
||||
.mat-chip-list-wrapper {
|
||||
max-height: 100px;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
.message-title {
|
||||
width: 100%;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user