ng-deep 제거
This commit is contained in:
khk
parent
a6e1150cb9
commit
f3ec2412dc
|
|
@ -18,9 +18,6 @@
|
|||
.message-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
::ng-deep .ps__rail-y {
|
||||
left: auto !important;
|
||||
}
|
||||
.message-box {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -1560,7 +1560,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
CreateChatDialogData,
|
||||
CreateChatDialogResult
|
||||
>(CreateChatDialogComponent, {
|
||||
width: '600px',
|
||||
maxWidth: '94vw',
|
||||
maxHeight: '90vh',
|
||||
data: {
|
||||
type: UserSelectDialogType.MessageForward,
|
||||
title: this.translateService.instant('chat.forwardEventTo'),
|
||||
|
|
@ -1765,6 +1766,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
CreateChatDialogData,
|
||||
CreateChatDialogResult
|
||||
>(CreateChatDialogComponent, {
|
||||
maxWidth: '94vw',
|
||||
maxHeight: '90vh',
|
||||
data: {
|
||||
type: UserSelectDialogType.EditChatMember,
|
||||
title: this.translateService.instant('chat.modifyRoomMember'),
|
||||
|
|
@ -1831,6 +1834,8 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
SelectGroupDialogData,
|
||||
SelectGroupDialogResult
|
||||
>(SelectGroupDialogComponent, {
|
||||
maxWidth: '90vw',
|
||||
maxHeight: '94vh',
|
||||
data: {
|
||||
title: this.translateService.instant('chat.addMemberToGroup')
|
||||
}
|
||||
|
|
|
|||
|
|
@ -30,6 +30,8 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
//이용시 주의사항
|
||||
::ng-deep.use-caution {
|
||||
.notice {
|
||||
ol {
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
}
|
||||
|
||||
.dialog-tab-grouplist {
|
||||
height: calc(100% - 140px);
|
||||
height: calc(100% - 130px);
|
||||
width: 100%;
|
||||
.group,
|
||||
.search-result {
|
||||
|
|
@ -64,7 +64,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
::ng-deep .dialog-tab-chatlist {
|
||||
/*::ng-deep .dialog-tab-chatlist {
|
||||
height: 508px;
|
||||
width: 100%;
|
||||
.chat {
|
||||
|
|
@ -82,10 +82,10 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
*/
|
||||
::ng-deep .dialog-tab-orglist {
|
||||
width: 100%;
|
||||
height: calc(100% - 150px);
|
||||
height: calc(100% - 130px);
|
||||
border-bottom: 1px solid #dddddd;
|
||||
position: relative;
|
||||
.oraganization {
|
||||
|
|
@ -95,7 +95,6 @@
|
|||
&-tab {
|
||||
width: 100%;
|
||||
height: calc(100% - 50px);
|
||||
// border-bottom: 1px solid #dddddd;
|
||||
position: relative;
|
||||
&-tree {
|
||||
display: inline-flex;
|
||||
|
|
@ -133,8 +132,8 @@
|
|||
margin-top: 10px;
|
||||
}
|
||||
.mat-chip.mat-standard-chip .mat-chip-remove {
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.confirm-card {
|
||||
.mat-card-content {
|
||||
.content-box {
|
||||
|
|
|
|||
|
|
@ -124,7 +124,8 @@ export class MessageWriteDialogComponent implements OnInit {
|
|||
CreateChatDialogData,
|
||||
CreateChatDialogResult
|
||||
>(CreateChatDialogComponent, {
|
||||
//width: '600px',
|
||||
maxWidth: '94vw',
|
||||
maxHeight: '90vh',
|
||||
data: {
|
||||
type: UserSelectDialogType.EditChatMember,
|
||||
title: this.translateService.instant('message.selectRecipient'),
|
||||
|
|
|
|||
|
|
@ -1,358 +1,15 @@
|
|||
$desktop-l-width: 1440px;
|
||||
$tablet-l-width: 1024px;
|
||||
$tablet-s-width: 768px;
|
||||
$mob-l-width: 640px;
|
||||
|
||||
@mixin tab {
|
||||
@media screen and (max-width: #{$tablet-l-width}), (max-height: #{$tablet-s-width}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
.login {
|
||||
width: 100%;
|
||||
background-size: cover;
|
||||
height: calc(100% - 50px);
|
||||
background: #eaeff1;
|
||||
margin-top: 50px;
|
||||
overflow: hidden;
|
||||
/*background: -webkit-linear-gradient(to top, #93a3af, #eaeff1);
|
||||
background: linear-gradient(to top, #93a3af, #eaeff1);*/
|
||||
|
||||
height: 100%;
|
||||
.login-wrapper {
|
||||
flex: 1 0 auto;
|
||||
background-color: #ffffff;
|
||||
background-size: 100% auto;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
$main: #777;
|
||||
$back: #aaa;
|
||||
$accent: hsl(220, 50%, 40%);
|
||||
|
||||
$sans: 'Open Sans', sans-serif;
|
||||
$heebo: 'Heebo', sans-serif;
|
||||
$hangul: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움';
|
||||
|
||||
$base: 3vh;
|
||||
|
||||
$time: 1800ms;
|
||||
|
||||
$ease-out: cubic-bezier(0.26, 0.005, 0.135, 1);
|
||||
$ease-in-out: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||
|
||||
@mixin word-break-keep {
|
||||
word-break: keep-all;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
&_wrap {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translateX(100%);
|
||||
top: 0%;
|
||||
left: 0;
|
||||
right: auto;
|
||||
overflow: hidden;
|
||||
transition: transform $time/4 $ease-in-out;
|
||||
transform-origin: 0% 50%;
|
||||
transition-delay: $time/4;
|
||||
opacity: 0;
|
||||
&-hacked {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&_back {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-size: auto 100%;
|
||||
background-position: center;
|
||||
background-repeat: none;
|
||||
transition: filter $time/4 $ease-in-out;
|
||||
background-color: #2d3a4a;
|
||||
}
|
||||
|
||||
&_inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0%;
|
||||
background-size: auto 133.3333%;
|
||||
background-position: center;
|
||||
background-repeat: none;
|
||||
transform: scale(0.7);
|
||||
transition: transform $time/4 $ease-in-out, box-shadow $time/4 $ease-in-out,
|
||||
opacity $time/4 step-end;
|
||||
opacity: 0;
|
||||
//box-shadow: 0 $base $base rgba(darken($accent, 50%), 0);
|
||||
padding: $base * 3;
|
||||
box-sizing: border-box;
|
||||
border: 1px solid #ffffff;
|
||||
}
|
||||
&_header {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
width: 40%;
|
||||
height: 20px;
|
||||
justify-content: center;
|
||||
font-size: $base * 0.6;
|
||||
color: #ffffff;
|
||||
.company-name {
|
||||
flex: 0 0 auto;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.h-line {
|
||||
flex: 1 1 auto;
|
||||
align-self: center;
|
||||
height: 2px;
|
||||
border-bottom: 1px solid #ffffff;
|
||||
}
|
||||
}
|
||||
&_content {
|
||||
position: relative;
|
||||
top: 64%;
|
||||
width: 40%;
|
||||
transform: translateY(-50%);
|
||||
color: white;
|
||||
font-family: $hangul;
|
||||
opacity: 0;
|
||||
transition: opacity $time/4;
|
||||
h1 {
|
||||
font-weight: 900;
|
||||
font-size: $base * 1.24;
|
||||
line-height: 1.2;
|
||||
margin-bottom: $base/2;
|
||||
pointer-events: none;
|
||||
text-shadow: 0 $base/8 $base/4 rgba(darken($accent, 50%), 0.1);
|
||||
@include word-break-keep();
|
||||
}
|
||||
p {
|
||||
font-size: $base * 0.64;
|
||||
line-height: $base * 0.9;
|
||||
margin-bottom: $base/2;
|
||||
@include word-break-keep();
|
||||
}
|
||||
}
|
||||
&_link {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
justify-items: center;
|
||||
font-family: $heebo;
|
||||
font-size: 1.2rem;
|
||||
letter-spacing: $base * 0.1;
|
||||
font-weight: 100;
|
||||
display: block;
|
||||
bottom: 10%;
|
||||
color: #ffffff;
|
||||
padding: 10px 60px 10px 30px;
|
||||
border-radius: 100px;
|
||||
color: #00dbed;
|
||||
width: $base * 5;
|
||||
// next버튼 숨김
|
||||
display: none;
|
||||
&:before {
|
||||
content: '';
|
||||
border-top: 1px solid white;
|
||||
border-right: 1px solid white;
|
||||
display: block;
|
||||
width: $base/3;
|
||||
height: $base/3;
|
||||
transform: translateX(0) translateY(-50%) rotate(45deg);
|
||||
position: absolute;
|
||||
font-family: $heebo;
|
||||
font-weight: 100;
|
||||
top: 50%;
|
||||
left: $base * 4;
|
||||
}
|
||||
&:hover {
|
||||
background-color: #134a67;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
&_slide {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
transition: transform $time/3 $ease-in-out;
|
||||
transition-delay: $time/3;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
|
||||
&-active {
|
||||
transform: translatex(0%);
|
||||
z-index: 2;
|
||||
.slider_wrap {
|
||||
transform: translateX(0);
|
||||
transform-origin: 100% 50%;
|
||||
opacity: 1;
|
||||
animation: none;
|
||||
}
|
||||
.slider_back {
|
||||
filter: blur(#{$base * 0.2});
|
||||
transition: filter $time/2 $ease-in-out;
|
||||
transition-delay: $time/2 !important;
|
||||
}
|
||||
.slider_inner {
|
||||
transform: scale(0.7);
|
||||
box-shadow: 0 $base/3 $base * 1 rgba(darken($accent, 50%), 0.2);
|
||||
pointer-events: auto;
|
||||
opacity: 1;
|
||||
transition: transform $time/2 $ease-in-out,
|
||||
box-shadow $time/2 $ease-in-out, opacity 1ms step-end;
|
||||
transition-delay: $time/2;
|
||||
}
|
||||
.slider_content {
|
||||
opacity: 1;
|
||||
transition-delay: $time * 3/4;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.slider_slide-active) .slider_wrap {
|
||||
@keyframes hack {
|
||||
0% {
|
||||
transform: translateX(0);
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(-100vw);
|
||||
opacity: 1;
|
||||
}
|
||||
51% {
|
||||
transform: translateX(-100vw);
|
||||
opacity: 0;
|
||||
}
|
||||
52% {
|
||||
transform: translateX(100vw);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(100vw);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
animation-name: hack;
|
||||
animation-duration: $time/2;
|
||||
animation-delay: $time/4;
|
||||
animation-timing-function: $ease-in-out;
|
||||
}
|
||||
|
||||
&:nth-child(1) .slider_back,
|
||||
&:nth-child(1) .slider_inner {
|
||||
// background-image: url(/assets/images/login/bg_login01.png);
|
||||
//background: #eee;
|
||||
}
|
||||
&:nth-child(2) .slider_back,
|
||||
&:nth-child(2) .slider_inner {
|
||||
// background-image: url(/assets/images/login/bg_login02.png);
|
||||
//background: #aaa;
|
||||
}
|
||||
&:nth-child(3) .slider_back,
|
||||
&:nth-child(3) .slider_inner {
|
||||
// background-image: url(/assets/images/login/bg_login03.png);
|
||||
//background: #888;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .login-form-box {
|
||||
position: absolute;
|
||||
width: 20vw;
|
||||
height: 50%;
|
||||
min-height: 480px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
z-index: 100;
|
||||
@media screen and (max-width: #{$desktop-l-width}) {
|
||||
width: 24vw;
|
||||
min-height: 480px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: #{$tablet-l-width}) {
|
||||
width: 36vw;
|
||||
min-height: 420px;
|
||||
}
|
||||
.mat-form-field-label-wrapper {
|
||||
color: #06b2d6;
|
||||
}
|
||||
/*.mat-form-field {
|
||||
padding-top: 20px;
|
||||
.mat-form-field-wrapper {
|
||||
padding-bottom: 0;
|
||||
.mat-form-field-infix {
|
||||
padding-top: 0;
|
||||
border: 0;
|
||||
}
|
||||
.mat-form-field-label-wrapper {
|
||||
top: -1.4em;
|
||||
}
|
||||
.mat-form-field-underline {
|
||||
bottom: 0;
|
||||
}
|
||||
//min-size 반응형 적용
|
||||
@include tab {
|
||||
.mat-form-field-infix {
|
||||
input {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
}
|
||||
.mat-form-field-label-wrapper {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
.mat-form-field-subscript-wrapper {
|
||||
.mat-error {
|
||||
font-size: 0.8em;
|
||||
}
|
||||
}
|
||||
&.mat-focused,
|
||||
&:not(.mat-form-field-hide-placeholder) {
|
||||
.mat-form-field-label-wrapper {
|
||||
font-size: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.error-container {
|
||||
padding-top: 10px;
|
||||
}*/
|
||||
}
|
||||
@media all and (max-width: 1400px) {
|
||||
.slider {
|
||||
&_content {
|
||||
transform: translateY(-50%);
|
||||
color: white;
|
||||
font-family: $heebo;
|
||||
opacity: 0;
|
||||
transition: opacity $time/4;
|
||||
h1 {
|
||||
font-weight: 900;
|
||||
font-size: $base * 1.2;
|
||||
margin-bottom: $base;
|
||||
}
|
||||
p {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&-active {
|
||||
.slider_inner {
|
||||
transform: scale(0.9);
|
||||
}
|
||||
.login-form-box {
|
||||
width: 300px;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -55,13 +55,13 @@ $lg-red: (
|
|||
50: #ffffff,
|
||||
100: #fff9fc,
|
||||
200: #f1e1e5,
|
||||
/*300: #f06292,*/ 300: #ef4c73,
|
||||
300: #ef4c73,
|
||||
400: #ec407a,
|
||||
500: #ed097e,
|
||||
600: #d81b60,
|
||||
700: #c2185b,
|
||||
800: #ad1457,
|
||||
/*900: #880e4f,*/ 900: #5f2a41,
|
||||
900: #5f2a41,
|
||||
A100: #ff80ab,
|
||||
A200: #ff4081,
|
||||
A400: #ff3399,
|
||||
|
|
@ -291,29 +291,12 @@ $daesang-grey: (
|
|||
.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
|
||||
background-color: mat-color($accent, 700);
|
||||
cursor: pointer;
|
||||
.mat-chip-remove {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.load-container .loader:after {
|
||||
background-color: mat-color($accent, 300);
|
||||
}
|
||||
|
||||
.ps__rail-y {
|
||||
& > .ps__thumb-y {
|
||||
margin-right: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
.cdk-virtual-scroll-orientation-vertical {
|
||||
.cdk-virtual-scroll-content-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
contain: none;
|
||||
}
|
||||
}
|
||||
|
||||
.global-menu {
|
||||
.mat-tab-label[aria-selected='true'] {
|
||||
.mat-tab-label-content {
|
||||
|
|
@ -372,7 +355,7 @@ $daesang-grey: (
|
|||
color: #ffffff;
|
||||
}
|
||||
|
||||
//탭개수에 의한 width 정의
|
||||
//[S]탭개수에 의한 width 정의
|
||||
.mat-tab-group {
|
||||
&.tab_num2 {
|
||||
.mat-tab-label {
|
||||
|
|
@ -394,8 +377,9 @@ $daesang-grey: (
|
|||
border: none;
|
||||
}
|
||||
}
|
||||
//[E]탭개수에 의한 width 정의
|
||||
|
||||
//쪽지 라디오 버튼 정렬
|
||||
//[S]쪽지 라디오 버튼 정렬
|
||||
.message-box {
|
||||
.mat-radio-label {
|
||||
.mat-radio-label-content {
|
||||
|
|
@ -403,10 +387,23 @@ $daesang-grey: (
|
|||
}
|
||||
}
|
||||
}
|
||||
//[E]쪽지 라디오 버튼 정렬
|
||||
|
||||
//[S]mat-tab-group
|
||||
/*mat-tab-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.mat-tab-header {
|
||||
width: 100%;
|
||||
.mat-tab-label-container {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}*/
|
||||
|
||||
mat-tab-group[vertical] {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
.mat-tab-header {
|
||||
border-bottom: none;
|
||||
.mat-tab-labels {
|
||||
|
|
@ -435,6 +432,32 @@ $daesang-grey: (
|
|||
}
|
||||
}
|
||||
|
||||
//설정 general-theme
|
||||
.theme-list {
|
||||
.mat-tab-header {
|
||||
width: 100%;
|
||||
border: none !important;
|
||||
.mat-tab-labels {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex-direction: row !important;
|
||||
.mat-tab-label {
|
||||
width: 140px;
|
||||
height: 120px;
|
||||
&.mat-tab-label-active {
|
||||
opacity: 1;
|
||||
}
|
||||
.mat-tab-label-content {
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//[E]mat-tab-group
|
||||
|
||||
nav[mat-tab-nav-bar][vertical] {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
|
|
@ -466,7 +489,7 @@ $daesang-grey: (
|
|||
}
|
||||
}
|
||||
|
||||
//대화 말풍선 global 적용
|
||||
//[S]대화 말풍선 global 적용
|
||||
.message-row {
|
||||
.message-main {
|
||||
.bubble {
|
||||
|
|
@ -502,8 +525,22 @@ $daesang-grey: (
|
|||
}
|
||||
}
|
||||
}
|
||||
//[E]대화 말풍선 global 적용
|
||||
|
||||
//[s] 번역
|
||||
//[S]스티커
|
||||
.sticker-selector {
|
||||
.mat-tab-header {
|
||||
.mat-tab-label {
|
||||
min-width: 16%;
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
//[E]스티커
|
||||
|
||||
//[S]번역
|
||||
.translationForm {
|
||||
background-color: mat-color($accent, 200, 0.4);
|
||||
.select-language {
|
||||
|
|
@ -531,6 +568,7 @@ $daesang-grey: (
|
|||
.translation-preview {
|
||||
background-color: mat-color($accent, 900, 0.8);
|
||||
}
|
||||
//[E] 번역
|
||||
|
||||
.tree-has-child {
|
||||
li {
|
||||
|
|
|
|||
|
|
@ -159,7 +159,7 @@ $login-max-height: 800px;
|
|||
.policy {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
bottom: 2vh;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
background-color: #58b0b1;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -2,39 +2,39 @@
|
|||
<form name="messageWriteForm" [formGroup]="messageWriteForm" novalidate>
|
||||
<perfect-scrollbar>
|
||||
<div class="write-form">
|
||||
<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">{{
|
||||
'message.addReceiver' | translate
|
||||
}}</span>
|
||||
</button>
|
||||
<span
|
||||
*ngIf="!!receiverList && receiverList.length > 0"
|
||||
class="receiver-sum text-accent-color"
|
||||
>
|
||||
{{
|
||||
'message.countOfReceiver'
|
||||
| translate: { count: receiverList.length }
|
||||
}}
|
||||
</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>
|
||||
<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">{{
|
||||
'message.addReceiver' | translate
|
||||
}}</span>
|
||||
</button>
|
||||
<span
|
||||
*ngIf="!!receiverList && receiverList.length > 0"
|
||||
class="receiver-sum text-accent-color"
|
||||
>
|
||||
{{
|
||||
'message.countOfReceiver'
|
||||
| translate: { count: receiverList.length }
|
||||
}}
|
||||
</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-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
|
||||
|
|
@ -56,65 +56,67 @@
|
|||
</mat-form-field>
|
||||
-->
|
||||
|
||||
<mat-form-field class="message-title">
|
||||
<input
|
||||
matInput
|
||||
#inputTitle
|
||||
formControlName="title"
|
||||
placeholder="{{ 'message.fieldTitle' | translate }}"
|
||||
maxlength="100"
|
||||
/>
|
||||
<mat-hint align="end">{{ inputTitle.value?.length || 0 }}/100</mat-hint>
|
||||
</mat-form-field>
|
||||
<mat-form-field class="message-title">
|
||||
<input
|
||||
matInput
|
||||
#inputTitle
|
||||
formControlName="title"
|
||||
placeholder="{{ 'message.fieldTitle' | translate }}"
|
||||
maxlength="100"
|
||||
/>
|
||||
<mat-hint align="end"
|
||||
>{{ inputTitle.value?.length || 0 }}/100</mat-hint
|
||||
>
|
||||
</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"
|
||||
class="attach-file-list"
|
||||
>
|
||||
<div class="attach-file">
|
||||
<span class="mdi mdi-attachment mdi-18px"> </span>
|
||||
<span class="file-name">{{ oldAttachment.resContent }}</span>
|
||||
<button
|
||||
mat-button
|
||||
class="icon-button"
|
||||
aria-label="기존파일삭제"
|
||||
(click)="onClickDeleteOldAttachment(oldAttachment)"
|
||||
>
|
||||
<i class="mid mdi-18px mdi-delete-outline"></i>
|
||||
</button>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
<mat-list-item
|
||||
*ngFor="let attachment of attachmentList"
|
||||
class="attach-file-list"
|
||||
>
|
||||
<div class="attach-file">
|
||||
<span class="mdi mdi-attachment mdi-18px"> </span
|
||||
><span class="file-name">{{ attachment.name }}</span>
|
||||
<button
|
||||
mat-button
|
||||
class="icon-button"
|
||||
aria-label="파일삭제"
|
||||
(click)="onClickDelelteAttachment(attachment)"
|
||||
>
|
||||
<i class="mid mdi-18px mdi-delete-outline"></i>
|
||||
</button>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
<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"
|
||||
class="attach-file-list"
|
||||
>
|
||||
<div class="attach-file">
|
||||
<span class="mdi mdi-attachment mdi-18px"> </span>
|
||||
<span class="file-name">{{ oldAttachment.resContent }}</span>
|
||||
<button
|
||||
mat-button
|
||||
class="icon-button"
|
||||
aria-label="기존파일삭제"
|
||||
(click)="onClickDeleteOldAttachment(oldAttachment)"
|
||||
>
|
||||
<i class="mid mdi-18px mdi-delete-outline"></i>
|
||||
</button>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
<mat-list-item
|
||||
*ngFor="let attachment of attachmentList"
|
||||
class="attach-file-list"
|
||||
>
|
||||
<div class="attach-file">
|
||||
<span class="mdi mdi-attachment mdi-18px"> </span
|
||||
><span class="file-name">{{ attachment.name }}</span>
|
||||
<button
|
||||
mat-button
|
||||
class="icon-button"
|
||||
aria-label="파일삭제"
|
||||
(click)="onClickDelelteAttachment(attachment)"
|
||||
>
|
||||
<i class="mid mdi-18px mdi-delete-outline"></i>
|
||||
</button>
|
||||
</div>
|
||||
</mat-list-item>
|
||||
</mat-list>
|
||||
</mat-card-content>
|
||||
</div>
|
||||
</div>
|
||||
</perfect-scrollbar>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -18,10 +18,9 @@
|
|||
animationDuration="0ms"
|
||||
(selectedTabChange)="onSelectedTabChange($event)"
|
||||
fxLayout="row"
|
||||
horizontal
|
||||
class="theme-list"
|
||||
>
|
||||
<mat-tab>
|
||||
<mat-tab fxLayout="row" fxFlex="0 0 auto">
|
||||
<ng-template mat-tab-label class="theme-item">
|
||||
<div class="theme-box default-theme"></div>
|
||||
<div class="theme-name">
|
||||
|
|
|
|||
|
|
@ -23,33 +23,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
::ng-deep .theme-list {
|
||||
.mat-tab-header {
|
||||
width: 100%;
|
||||
border: none !important;
|
||||
.mat-tab-labels {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex-direction: row !important;
|
||||
.mat-tab-label {
|
||||
width: 140px;
|
||||
height: 120px;
|
||||
&.mat-tab-label-active {
|
||||
opacity: 1;
|
||||
}
|
||||
.mat-tab-label-content {
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-tab-body-wrapper {
|
||||
border: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
.theme-box {
|
||||
width: 140px;
|
||||
height: 98px;
|
||||
|
|
@ -75,3 +48,6 @@
|
|||
position: relative;
|
||||
padding-top: 10px;
|
||||
}
|
||||
.theme-item {
|
||||
height: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,6 +20,15 @@ body:not(.is-mobile) {
|
|||
border-radius: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.cdk-virtual-scroll-orientation-vertical {
|
||||
.cdk-virtual-scroll-content-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
contain: none;
|
||||
}
|
||||
}
|
||||
|
||||
perfect-scrollbar {
|
||||
.ps-content {
|
||||
position: inherit;
|
||||
|
|
@ -27,3 +36,10 @@ perfect-scrollbar {
|
|||
height: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.ps__rail-y {
|
||||
left: auto !important;
|
||||
& > .ps__thumb-y {
|
||||
margin-right: -2px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,52 +1,15 @@
|
|||
$tablet-l-width: 1024px;
|
||||
$tablet-s-width: 768px;
|
||||
|
||||
::ng-deep .sticker-selector {
|
||||
height: 210px;
|
||||
border-top: 1px solid #cccccc;
|
||||
.mat-tab-header {
|
||||
.mat-tab-label {
|
||||
//padding: 0 10px;
|
||||
min-width: 16%;
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-tab-body-wrapper {
|
||||
height: 150px !important;
|
||||
overflow: auto;
|
||||
}
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
height: 180px;
|
||||
.mat-tab-body-wrapper {
|
||||
height: 130px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-item-box {
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 20px 0;
|
||||
overflow: auto;
|
||||
|
||||
.sticker-item {
|
||||
width: 60px;
|
||||
margin-bottom: 10px;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
.sticker-item-box {
|
||||
.sticker-item {
|
||||
width: 50px;
|
||||
}
|
||||
.sticker-selector {
|
||||
.mat-tab-group {
|
||||
height: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
.selected-sticker {
|
||||
height: 80px;
|
||||
border-top: 1px solid #cccccc;
|
||||
position: relative;
|
||||
padding: 10px 20px;
|
||||
text-align: right;
|
||||
|
|
@ -63,3 +26,27 @@ $tablet-s-width: 768px;
|
|||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
|
||||
.sticker-item-box {
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 20px 0;
|
||||
overflow: auto;
|
||||
height: 150px !important;
|
||||
overflow: auto;
|
||||
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
height: 130px;
|
||||
}
|
||||
|
||||
.sticker-item {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-bottom: 10px;
|
||||
display: inline-flex;
|
||||
cursor: pointer;
|
||||
@media screen and (max-width: #{$tablet-s-width}) {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user