쪽지쓰기- 보완예정
This commit is contained in:
khk
parent
62f926eae4
commit
351c3a121f
|
|
@ -1,41 +1,29 @@
|
||||||
<mat-card class="mat-elevation-z0 ucap-message-write">
|
<mat-card class="mat-elevation-z0 ucap-message-write">
|
||||||
<form name="messageWriteForm" [formGroup]="messageWriteForm" novalidate>
|
<form name="messageWriteForm" [formGroup]="messageWriteForm" novalidate>
|
||||||
<mat-form-field class="message-title">
|
<div class="add-row">
|
||||||
<input
|
<button
|
||||||
matInput
|
mat-button
|
||||||
formControlName="title"
|
(click)="onClickReceiverList()"
|
||||||
placeholder="{{ 'message.fieldTitle' | translate }}"
|
class="mat-mini-fab mat-button-base mat-accent mat-elevation-z"
|
||||||
/>
|
>
|
||||||
</mat-form-field>
|
<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">
|
<!--<mat-form-field class="message-receiver-list">
|
||||||
<div
|
<perfect-scrollbar>
|
||||||
#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-chip-list #chipList aria-label="receiver selection">
|
<mat-chip-list #chipList aria-label="receiver selection">
|
||||||
<mat-chip
|
<mat-chip
|
||||||
*ngFor="let receiver of receiverList"
|
*ngFor="let receiver of receiverList"
|
||||||
|
|
@ -52,31 +40,80 @@
|
||||||
(click)="onClickReceiverList()"
|
(click)="onClickReceiverList()"
|
||||||
/>
|
/>
|
||||||
</mat-chip-list>
|
</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>
|
<mat-card-actions>
|
||||||
<div class="editor-tools">
|
<!--<div>
|
||||||
<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>
|
|
||||||
<span
|
<span
|
||||||
[class.editor-length-invalid]="
|
[class.editor-length-invalid]="
|
||||||
0 === contentLength || 1000 < contentLength
|
0 === contentLength || 1000 < contentLength
|
||||||
"
|
"
|
||||||
>{{ contentLength }}</span
|
>{{ contentLength }}</span
|
||||||
>/1000
|
>/1000
|
||||||
</div>
|
</div>-->
|
||||||
<div class="editor-actions-spacer"></div>
|
<div class="editor-actions-spacer"></div>
|
||||||
<div class="editor-actions">
|
<div class="editor-actions">
|
||||||
<button
|
<button
|
||||||
|
|
@ -86,8 +123,36 @@
|
||||||
>
|
>
|
||||||
{{ 'common.messages.cancel' | translate }}
|
{{ 'common.messages.cancel' | translate }}
|
||||||
</button>
|
</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()">
|
<button mat-menu-item (click)="onClickSendSchedule()">
|
||||||
<span class="mdi mdi-send-clock"></span
|
<span class="mdi mdi-send-clock"></span
|
||||||
><span>{{ 'message.sendReservation' | translate }}</span>
|
><span>{{ 'message.sendReservation' | translate }}</span>
|
||||||
|
|
@ -121,7 +186,7 @@
|
||||||
class="mat-primary"
|
class="mat-primary"
|
||||||
>
|
>
|
||||||
{{ 'message.sendReservation' | translate }}
|
{{ 'message.sendReservation' | translate }}
|
||||||
</button>
|
</button>-->
|
||||||
</div>
|
</div>
|
||||||
</mat-card-actions>
|
</mat-card-actions>
|
||||||
</form>
|
</form>
|
||||||
|
|
|
||||||
|
|
@ -7,20 +7,8 @@
|
||||||
height: 100px;
|
height: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message-title {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-write-body {
|
.message-write-body {
|
||||||
overflow: auto;
|
|
||||||
height: 270px;
|
|
||||||
|
|
||||||
.ucap-message-write-editor {
|
|
||||||
display: inline-block;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
min-height: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
[contenteditable] {
|
[contenteditable] {
|
||||||
}
|
}
|
||||||
|
|
@ -45,14 +33,98 @@
|
||||||
mat-card-actions {
|
mat-card-actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.editor-tools {
|
|
||||||
padding-left: 0px;
|
|
||||||
}
|
|
||||||
.editor-actions-spacer {
|
.editor-actions-spacer {
|
||||||
flex: 1 1 auto;
|
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