ing
This commit is contained in:
richard-loafle
parent
b7111951df
commit
921846521a
|
|
@ -66,7 +66,8 @@ const MODULE = [
|
||||||
MatToolbarModule,
|
MatToolbarModule,
|
||||||
MatTableModule,
|
MatTableModule,
|
||||||
MatFormFieldModule,
|
MatFormFieldModule,
|
||||||
MatTreeModule
|
MatTreeModule,
|
||||||
|
MatStepperModule
|
||||||
];
|
];
|
||||||
|
|
||||||
@NgModule({
|
@NgModule({
|
||||||
|
|
|
||||||
|
|
@ -294,7 +294,7 @@ $login-bg-h: 100/1080;
|
||||||
}
|
}
|
||||||
&.fir-pass {
|
&.fir-pass {
|
||||||
&::before {
|
&::before {
|
||||||
content: 'sync';
|
content: 'cached';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,32 @@
|
||||||
<div>
|
<div>
|
||||||
<h3>popup components</h3>
|
<h3>popup components</h3>
|
||||||
<button mat-stroked-button color="primary" (click)="openDialog('CHAT')">
|
<button mat-stroked-button color="primary" (click)="openDialog('CHAT')">
|
||||||
|
Select-User
|
||||||
|
</button>
|
||||||
|
<button mat-stroked-button color="primary" (click)="openDialog('CHAT_INFO')">
|
||||||
New-Chat
|
New-Chat
|
||||||
</button>
|
</button>
|
||||||
<button mat-stroked-button color="primary" (click)="openDialog('GROUP')">
|
<button mat-stroked-button color="primary" (click)="openDialog('GROUP_INFO')">
|
||||||
New-Group
|
New-Group
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
mat-stroked-button
|
||||||
|
color="primary"
|
||||||
|
(click)="openDialog('STEP_LAYOUT')"
|
||||||
|
>
|
||||||
|
Step-Layout
|
||||||
|
</button>
|
||||||
<button mat-stroked-button color="primary" (click)="openDialog('SETTING')">
|
<button mat-stroked-button color="primary" (click)="openDialog('SETTING')">
|
||||||
Setting
|
Setting
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h3>Alert & confirm popup</h3>
|
||||||
|
<button mat-stroked-button color="primary" (click)="openAlert()">
|
||||||
|
Alert
|
||||||
|
</button>
|
||||||
|
<button mat-stroked-button color="primary" (click)="openConfirm()">
|
||||||
|
Confirm
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,7 @@
|
||||||
import { action } from '@storybook/addon-actions';
|
import { action } from '@storybook/addon-actions';
|
||||||
import { BrowserModule } from '@angular/platform-browser';
|
import { BrowserModule } from '@angular/platform-browser';
|
||||||
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
|
||||||
|
import { ScrollingModule } from '@angular/cdk/scrolling';
|
||||||
|
|
||||||
import { MaterialModule } from 'src/app/material.module';
|
import { MaterialModule } from 'src/app/material.module';
|
||||||
import { moduleMetadata } from '@storybook/angular';
|
import { moduleMetadata } from '@storybook/angular';
|
||||||
|
|
@ -10,15 +11,22 @@ import { NewChatComponent } from './popup/new-chat.component';
|
||||||
import { SettingComponent } from './popup/setting.component';
|
import { SettingComponent } from './popup/setting.component';
|
||||||
import { DIALOGS } from './popup';
|
import { DIALOGS } from './popup';
|
||||||
import { UserItemComponent } from '../group/component/user-item.component';
|
import { UserItemComponent } from '../group/component/user-item.component';
|
||||||
|
import { TreeComponent } from '../organization/component/tree.component';
|
||||||
|
import { ReactiveFormsModule } from '@angular/forms';
|
||||||
export default {
|
export default {
|
||||||
title: '99_Common/CommonComponent',
|
title: '99_Common/CommonComponent',
|
||||||
component: CommonComponent,
|
component: CommonComponent,
|
||||||
decorators: [
|
decorators: [
|
||||||
moduleMetadata({
|
moduleMetadata({
|
||||||
imports: [BrowserModule, BrowserAnimationsModule, MaterialModule],
|
imports: [
|
||||||
|
BrowserModule,
|
||||||
|
BrowserAnimationsModule,
|
||||||
|
MaterialModule,
|
||||||
|
ScrollingModule,
|
||||||
|
ReactiveFormsModule
|
||||||
|
],
|
||||||
providers: [],
|
providers: [],
|
||||||
declarations: [DIALOGS, UserItemComponent],
|
declarations: [DIALOGS, UserItemComponent, TreeComponent],
|
||||||
entryComponents: [DIALOGS]
|
entryComponents: [DIALOGS]
|
||||||
})
|
})
|
||||||
]
|
]
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,10 @@ import { MatDialog } from '@angular/material/dialog';
|
||||||
import { NewChatComponent } from './popup/new-chat.component';
|
import { NewChatComponent } from './popup/new-chat.component';
|
||||||
import { NewGroupComponent } from './popup/new-group.component';
|
import { NewGroupComponent } from './popup/new-group.component';
|
||||||
import { SettingComponent } from './popup/setting.component';
|
import { SettingComponent } from './popup/setting.component';
|
||||||
|
import { NewChatInfoComponent } from './popup/new-chat-info.component';
|
||||||
|
import { StepLayoutComponent } from './popup/step-layout.component';
|
||||||
|
import { AlertComponent } from './popup/alert.component';
|
||||||
|
import { ConfirmComponent } from './popup/confirm.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-common',
|
selector: 'app-common',
|
||||||
|
|
@ -18,22 +22,47 @@ export class CommonComponent implements OnInit {
|
||||||
switch (type) {
|
switch (type) {
|
||||||
case 'CHAT':
|
case 'CHAT':
|
||||||
this.dialog.open(NewChatComponent, {
|
this.dialog.open(NewChatComponent, {
|
||||||
width: '850px',
|
// width: '850px',
|
||||||
data: {}
|
data: {}
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 'GROUP':
|
case 'CHAT_INFO':
|
||||||
|
this.dialog.open(NewChatInfoComponent, {
|
||||||
|
// width: '600px',
|
||||||
|
data: {}
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'GROUP_INFO':
|
||||||
this.dialog.open(NewGroupComponent, {
|
this.dialog.open(NewGroupComponent, {
|
||||||
width: '250px',
|
// width: '850px',
|
||||||
|
data: {}
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'STEP_LAYOUT':
|
||||||
|
this.dialog.open(StepLayoutComponent, {
|
||||||
|
// width: '850px',
|
||||||
data: {}
|
data: {}
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
case 'SETTING':
|
case 'SETTING':
|
||||||
this.dialog.open(SettingComponent, {
|
this.dialog.open(SettingComponent, {
|
||||||
width: '250px',
|
// width: '250px',
|
||||||
data: {}
|
data: {}
|
||||||
});
|
});
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
openAlert() {
|
||||||
|
this.dialog.open(AlertComponent, {
|
||||||
|
// width: '350px',
|
||||||
|
data: {}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
openConfirm() {
|
||||||
|
this.dialog.open(ConfirmComponent, {
|
||||||
|
// width: '350px',
|
||||||
|
data: {}
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,4 @@
|
||||||
import { NgModule } from '@angular/core';
|
import { NgModule } from '@angular/core';
|
||||||
import { NewGroupComponent } from './popup/new-group.component';
|
|
||||||
import { NewChatComponent } from './popup/new-chat.component';
|
|
||||||
import { SettingComponent } from './popup/setting.component';
|
|
||||||
import { DIALOGS } from './popup';
|
import { DIALOGS } from './popup';
|
||||||
|
|
||||||
const COMPONENT = [];
|
const COMPONENT = [];
|
||||||
|
|
|
||||||
18
src/app/pages/common/popup/alert.component.html
Normal file
18
src/app/pages/common/popup/alert.component.html
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<mat-card class="confirm-card mat-elevation-z">
|
||||||
|
<mat-card-header>
|
||||||
|
<mat-card-title>Alert Title</mat-card-title>
|
||||||
|
<button class="icon-button btn-dialog-close" (click)="onClickConfirm()">
|
||||||
|
<i class="mdi mdi-window-close"></i>
|
||||||
|
</button>
|
||||||
|
</mat-card-header>
|
||||||
|
<mat-card-content>
|
||||||
|
<div #messageContainer class="notice">
|
||||||
|
여기 경고메시지가 들어갑니다.
|
||||||
|
</div>
|
||||||
|
</mat-card-content>
|
||||||
|
<mat-card-actions class="button-form flex-row">
|
||||||
|
<button mat-stroked-button class="mat-primary">
|
||||||
|
확인
|
||||||
|
</button>
|
||||||
|
</mat-card-actions>
|
||||||
|
</mat-card>
|
||||||
0
src/app/pages/common/popup/alert.component.scss
Normal file
0
src/app/pages/common/popup/alert.component.scss
Normal file
25
src/app/pages/common/popup/alert.component.spec.ts
Normal file
25
src/app/pages/common/popup/alert.component.spec.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { AlertComponent } from './alert.component';
|
||||||
|
|
||||||
|
describe('AlertComponent', () => {
|
||||||
|
let component: AlertComponent;
|
||||||
|
let fixture: ComponentFixture<AlertComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ AlertComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(AlertComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
15
src/app/pages/common/popup/alert.component.ts
Normal file
15
src/app/pages/common/popup/alert.component.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-alert',
|
||||||
|
templateUrl: './alert.component.html',
|
||||||
|
styleUrls: ['./alert.component.scss']
|
||||||
|
})
|
||||||
|
export class AlertComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
26
src/app/pages/common/popup/confirm.component.html
Normal file
26
src/app/pages/common/popup/confirm.component.html
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
<mat-card class="confirm-card mat-elevation-z">
|
||||||
|
<mat-card-header
|
||||||
|
cdkDrag
|
||||||
|
cdkDragRootElement=".cdk-overlay-pane"
|
||||||
|
cdkDragHandle
|
||||||
|
class="card-header"
|
||||||
|
>
|
||||||
|
<mat-card-title>Confirm Title</mat-card-title>
|
||||||
|
<button class="icon-button btn-dialog-close" (click)="onClickChoice(false)">
|
||||||
|
<i class="mdi mdi-window-close"></i>
|
||||||
|
</button>
|
||||||
|
</mat-card-header>
|
||||||
|
<mat-card-content>
|
||||||
|
<div #messageContainer class="notice">
|
||||||
|
취소 ? 확인 ?
|
||||||
|
</div>
|
||||||
|
</mat-card-content>
|
||||||
|
<mat-card-actions class="button-form flex-row">
|
||||||
|
<button mat-stroked-button class="mat-primary">
|
||||||
|
아니요
|
||||||
|
</button>
|
||||||
|
<button mat-flat-button class="mat-primary">
|
||||||
|
예
|
||||||
|
</button>
|
||||||
|
</mat-card-actions>
|
||||||
|
</mat-card>
|
||||||
0
src/app/pages/common/popup/confirm.component.scss
Normal file
0
src/app/pages/common/popup/confirm.component.scss
Normal file
25
src/app/pages/common/popup/confirm.component.spec.ts
Normal file
25
src/app/pages/common/popup/confirm.component.spec.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { ConfirmComponent } from './confirm.component';
|
||||||
|
|
||||||
|
describe('ConfirmComponent', () => {
|
||||||
|
let component: ConfirmComponent;
|
||||||
|
let fixture: ComponentFixture<ConfirmComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ ConfirmComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(ConfirmComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
15
src/app/pages/common/popup/confirm.component.ts
Normal file
15
src/app/pages/common/popup/confirm.component.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-confirm',
|
||||||
|
templateUrl: './confirm.component.html',
|
||||||
|
styleUrls: ['./confirm.component.scss']
|
||||||
|
})
|
||||||
|
export class ConfirmComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,21 @@
|
||||||
import { NewGroupComponent } from './new-group.component';
|
import { NewGroupComponent } from './new-group.component';
|
||||||
import { NewChatComponent } from './new-chat.component';
|
import { NewChatComponent } from './new-chat.component';
|
||||||
import { SettingComponent } from './setting.component';
|
import { SettingComponent } from './setting.component';
|
||||||
|
import { NewChatInfoComponent } from './new-chat-info.component';
|
||||||
|
|
||||||
export const DIALOGS = [NewGroupComponent, NewChatComponent, SettingComponent];
|
import { StepLayoutComponent } from './step-layout.component';
|
||||||
|
|
||||||
|
import { AlertComponent } from './alert.component';
|
||||||
|
import { ConfirmComponent } from './confirm.component';
|
||||||
|
|
||||||
|
export const DIALOGS = [
|
||||||
|
NewGroupComponent,
|
||||||
|
NewChatComponent,
|
||||||
|
SettingComponent,
|
||||||
|
NewChatInfoComponent,
|
||||||
|
|
||||||
|
StepLayoutComponent,
|
||||||
|
|
||||||
|
AlertComponent,
|
||||||
|
ConfirmComponent
|
||||||
|
];
|
||||||
|
|
|
||||||
79
src/app/pages/common/popup/new-chat-info.component.html
Normal file
79
src/app/pages/common/popup/new-chat-info.component.html
Normal file
|
|
@ -0,0 +1,79 @@
|
||||||
|
<mat-card class="confirm-card mat-elevation-z dialog-creat-chat">
|
||||||
|
<mat-card-header>
|
||||||
|
<mat-card-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle
|
||||||
|
>새로운 대화방 추가</mat-card-title
|
||||||
|
>
|
||||||
|
<button class="icon-button btn-dialog-close">
|
||||||
|
<i class="mdi mdi-window-close"></i>
|
||||||
|
</button>
|
||||||
|
</mat-card-header>
|
||||||
|
|
||||||
|
<mat-card-content>
|
||||||
|
<div
|
||||||
|
fxLayout="column"
|
||||||
|
fxLayout.xs="column"
|
||||||
|
fxLayoutAlign="center"
|
||||||
|
fxLayoutGap="10px"
|
||||||
|
fxLayoutGap.xs="0"
|
||||||
|
class="mat-card-content-frame"
|
||||||
|
>
|
||||||
|
<div fxFlex class="container">
|
||||||
|
<!-- search start-->
|
||||||
|
<div fxLayout="column" fxFlex="1 1 auto" class="ingegrated-search">
|
||||||
|
<div class="org-search-container">
|
||||||
|
<h4>대화방 유형</h4>
|
||||||
|
<ul>
|
||||||
|
<li>
|
||||||
|
<mat-checkbox>
|
||||||
|
<h3>일반 대화방</h3>
|
||||||
|
<span><strong>300명까지</strong> 참여가 가능합니다.</span>
|
||||||
|
</mat-checkbox>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<mat-checkbox>
|
||||||
|
<h3>대규모 대화방</h3>
|
||||||
|
<span><strong>1000명까지</strong> 참여가 가능합니다.</span>
|
||||||
|
</mat-checkbox>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<mat-checkbox>
|
||||||
|
<h3>비밀 대화방</h3>
|
||||||
|
<span
|
||||||
|
><strong>타이머 설정 시</strong> 대화 내용이 자동 삭제
|
||||||
|
됩니다.</span
|
||||||
|
>
|
||||||
|
</mat-checkbox>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="org-search-container">
|
||||||
|
<h4>대화방 이름</h4>
|
||||||
|
<mat-form-field hintLabel="※ 특수문자는 -,_만 사용할 수 있습니다">
|
||||||
|
<input
|
||||||
|
matInput
|
||||||
|
#input
|
||||||
|
maxlength="20"
|
||||||
|
placeholder="대화방명을 입력하세요"
|
||||||
|
formControlName="groupName"
|
||||||
|
/>
|
||||||
|
<mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint>
|
||||||
|
<mat-error *ngIf="true">
|
||||||
|
금지단어[-,_]
|
||||||
|
</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- search end-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</mat-card-content>
|
||||||
|
</mat-card>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button mat-stroked-button (click)="onClickChoice(false)" class="mat-primary">
|
||||||
|
취소
|
||||||
|
</button>
|
||||||
|
<button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
|
||||||
|
다음
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
178
src/app/pages/common/popup/new-chat-info.component.scss
Normal file
178
src/app/pages/common/popup/new-chat-info.component.scss
Normal file
|
|
@ -0,0 +1,178 @@
|
||||||
|
.dialog-creat-chat {
|
||||||
|
height: 100%;
|
||||||
|
& > .mat-card-header {
|
||||||
|
.btn-dialog-close {
|
||||||
|
font-size: 20px;
|
||||||
|
display: flex;
|
||||||
|
margin-left: auto;
|
||||||
|
align-self: flex-start;
|
||||||
|
color: #444444;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > .mat-card-content {
|
||||||
|
position: relative;
|
||||||
|
.mat-card-content-frame {
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
.container {
|
||||||
|
height: 100%;
|
||||||
|
.container-frame {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//그룹이름 폼 있는 경우
|
||||||
|
.newgroup-form {
|
||||||
|
height: 70px;
|
||||||
|
& + .mat-card-content-frame {
|
||||||
|
height: calc(100% - 120px);
|
||||||
|
.container {
|
||||||
|
.mat-tab-frame {
|
||||||
|
.mat-tab-group {
|
||||||
|
& > .mat-tab-body {
|
||||||
|
height: 380px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > .mat-tab-body-wrapper {
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
.mat-tag-body {
|
||||||
|
& > .dialog-tab-orglist {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-tab-grouplist {
|
||||||
|
height: calc(100% - 130px);
|
||||||
|
width: 100%;
|
||||||
|
.group,
|
||||||
|
.search-result {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
&-expansion {
|
||||||
|
.list-item {
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-list-item {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*::ng-deep .dialog-tab-chatlist {
|
||||||
|
height: 508px;
|
||||||
|
width: 100%;
|
||||||
|
.chat {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.chat.checkbox {
|
||||||
|
& > .list-item {
|
||||||
|
padding: 0 10px;
|
||||||
|
.item-default {
|
||||||
|
width: calc(100% - 30px);
|
||||||
|
}
|
||||||
|
.mat-badge {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
::ng-deep .dialog-tab-orglist {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 130px);
|
||||||
|
border-bottom: 1px solid #dddddd;
|
||||||
|
position: relative;
|
||||||
|
.oraganization {
|
||||||
|
.ps__rail-y {
|
||||||
|
left: auto !important;
|
||||||
|
}
|
||||||
|
&-tab {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
position: relative;
|
||||||
|
&-tree {
|
||||||
|
display: inline-flex;
|
||||||
|
width: 50%;
|
||||||
|
height: 100% !important;
|
||||||
|
border-right: 1px solid #dddddd;
|
||||||
|
overflow: auto;
|
||||||
|
.tab-tree-frame {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.select-list {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 50%;
|
||||||
|
height: 100% !important;
|
||||||
|
overflow: auto;
|
||||||
|
.search-list {
|
||||||
|
overflow: auto;
|
||||||
|
height: calc(100% - 40px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-chip {
|
||||||
|
height: 100px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #dddddd;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.mat-chip.mat-standard-chip .mat-chip-remove {
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-card {
|
||||||
|
.mat-card-content {
|
||||||
|
.content-box {
|
||||||
|
flex-direction: column;
|
||||||
|
flex-flow: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.button-form {
|
||||||
|
text-align: right;
|
||||||
|
.mat-primary {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*::ng-deep .dialog-creat-chat {
|
||||||
|
& > .mat-tab-body-wrapper {
|
||||||
|
.mat-tab-body {
|
||||||
|
height: 380px;
|
||||||
|
&:nth-child(3) {
|
||||||
|
height: 480px;
|
||||||
|
}
|
||||||
|
.mat-tab-body-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
.mat-card-content {
|
||||||
|
.mat-card-content-frame {
|
||||||
|
height: 100%;
|
||||||
|
.container {
|
||||||
|
height: 100%;
|
||||||
|
.mat-tab-group {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
25
src/app/pages/common/popup/new-chat-info.component.spec.ts
Normal file
25
src/app/pages/common/popup/new-chat-info.component.spec.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { NewChatInfoComponent } from './new-chat-info.component';
|
||||||
|
|
||||||
|
describe('NewChatInfoComponent', () => {
|
||||||
|
let component: NewChatInfoComponent;
|
||||||
|
let fixture: ComponentFixture<NewChatInfoComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ NewChatInfoComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(NewChatInfoComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
15
src/app/pages/common/popup/new-chat-info.component.ts
Normal file
15
src/app/pages/common/popup/new-chat-info.component.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-new-chat-info',
|
||||||
|
templateUrl: './new-chat-info.component.html',
|
||||||
|
styleUrls: ['./new-chat-info.component.scss']
|
||||||
|
})
|
||||||
|
export class NewChatInfoComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -18,10 +18,49 @@
|
||||||
class="mat-card-content-frame"
|
class="mat-card-content-frame"
|
||||||
>
|
>
|
||||||
<div fxFlex class="container">
|
<div fxFlex class="container">
|
||||||
<!-- search-->
|
<!-- search start-->
|
||||||
<div>
|
<div fxLayout="column" fxFlex="1 1 auto" class="ingegrated-search">
|
||||||
검색창
|
<div class="org-search-container">
|
||||||
|
<mat-form-field class="example-full-width" appearance="none">
|
||||||
|
<mat-select placeholder="전체">
|
||||||
|
<mat-option
|
||||||
|
*ngFor="let searchItem of searchItemList"
|
||||||
|
[value]="searchItem"
|
||||||
|
>
|
||||||
|
{{ searchItem.itemName }}
|
||||||
|
</mat-option>
|
||||||
|
</mat-select>
|
||||||
|
</mat-form-field>
|
||||||
|
<mat-form-field>
|
||||||
|
<input matInput placeholder="이름, 부서명, 전화번호, 이메일" />
|
||||||
|
<button
|
||||||
|
mat-icon-button
|
||||||
|
*ngIf="true"
|
||||||
|
class="icon-button font-accent-color"
|
||||||
|
aria-label="Clear"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="butt"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||||
|
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||||
|
</svg>
|
||||||
|
<!-- <mat-icon>close</mat-icon> -->
|
||||||
|
<!-- <i class="mdi mdi-close">X</i> -->
|
||||||
|
</button>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- search end-->
|
||||||
|
|
||||||
<mat-tab-group mat-stretch-tabs>
|
<mat-tab-group mat-stretch-tabs>
|
||||||
<!--그룹-->
|
<!--그룹-->
|
||||||
<mat-tab>
|
<mat-tab>
|
||||||
|
|
@ -90,7 +129,16 @@
|
||||||
</ng-template>
|
</ng-template>
|
||||||
<div fxFlexFill>
|
<div fxFlexFill>
|
||||||
<div class="mat-tab-frame dialog-tab-grouplist">
|
<div class="mat-tab-frame dialog-tab-grouplist">
|
||||||
<div><!-- group -->ffffffffff</div>
|
<div>
|
||||||
|
<mat-chip-list aria-label="Fish selection">
|
||||||
|
<mat-chip color="primary" selected>LG CNS</mat-chip>
|
||||||
|
<p>></p>
|
||||||
|
<mat-chip color="accent" selected>DT 사업부</mat-chip>
|
||||||
|
</mat-chip-list>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<app-tree> </app-tree>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</mat-tab>
|
</mat-tab>
|
||||||
|
|
@ -98,40 +146,31 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</mat-card-content>
|
</mat-card-content>
|
||||||
<ng-template #selectedUserListTemplate>
|
|
||||||
<div class="list-chip">
|
|
||||||
<mat-chip-list aria-label="User selection">
|
|
||||||
<mat-chip *ngFor="let userInfo of selectedUserList" [selected]="true">
|
|
||||||
김선규
|
|
||||||
<mat-icon matChipRemove *ngIf="true">clear</mat-icon>
|
|
||||||
</mat-chip>
|
|
||||||
</mat-chip-list>
|
|
||||||
</div>
|
|
||||||
<ng-container
|
|
||||||
*ngIf="
|
|
||||||
data.type === UserSelectDialogType.NewChat;
|
|
||||||
then newchatcount;
|
|
||||||
else defaultcount
|
|
||||||
"
|
|
||||||
></ng-container>
|
|
||||||
<ng-template #newchatcount>
|
|
||||||
<span
|
|
||||||
[ngClass]="
|
|
||||||
selectedUserList.length >=
|
|
||||||
environment.productConfig.CommonSetting.maxChatRoomUser
|
|
||||||
? 'text-warn-color'
|
|
||||||
: ''
|
|
||||||
"
|
|
||||||
>
|
|
||||||
13 / 21 명
|
|
||||||
</span>
|
|
||||||
<span
|
|
||||||
class="text-warn-color"
|
|
||||||
style="float: right;"
|
|
||||||
*ngIf="selectedUserList.length >= 50"
|
|
||||||
>
|
|
||||||
에러
|
|
||||||
</span>
|
|
||||||
</ng-template>
|
|
||||||
</ng-template>
|
|
||||||
</mat-card>
|
</mat-card>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class="text-warn-color">
|
||||||
|
선택한 대화상대 4
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="list-chip">
|
||||||
|
<mat-chip-list aria-label="User selection">
|
||||||
|
<mat-chip *ngFor="let userInfo of selectedUserList" [selected]="true">
|
||||||
|
김선규
|
||||||
|
<mat-icon matChipRemove *ngIf="true">clear</mat-icon>
|
||||||
|
</mat-chip>
|
||||||
|
</mat-chip-list>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button mat-stroked-button (click)="onClickChoice(false)" class="mat-primary">
|
||||||
|
취소
|
||||||
|
</button>
|
||||||
|
<button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
|
||||||
|
완료
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
|
||||||
|
그룹지정 후 완료
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@
|
||||||
.container {
|
.container {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
.container-frame {
|
.container-frame {
|
||||||
height: 530px;
|
height: 300px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -13,6 +13,8 @@ export class NewChatComponent implements OnInit {
|
||||||
{ name: '김선구2' },
|
{ name: '김선구2' },
|
||||||
{ name: '김선구3' }
|
{ name: '김선구3' }
|
||||||
];
|
];
|
||||||
|
searchItemList: any[] = [{ itemName: 'LGCNS' }, { itemName: 'LG' }];
|
||||||
|
|
||||||
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
|
constructor(@Inject(MAT_DIALOG_DATA) public data: any) {}
|
||||||
|
|
||||||
ngOnInit(): void {}
|
ngOnInit(): void {}
|
||||||
|
|
|
||||||
|
|
@ -1 +1,55 @@
|
||||||
<p>new-group works!</p>
|
<mat-card class="confirm-card mat-elevation-z dialog-creat-chat">
|
||||||
|
<mat-card-header>
|
||||||
|
<mat-card-title cdkDrag cdkDragRootElement=".cdk-overlay-pane" cdkDragHandle
|
||||||
|
>새 그룹 추가</mat-card-title
|
||||||
|
>
|
||||||
|
<button class="icon-button btn-dialog-close">
|
||||||
|
<i class="mdi mdi-window-close"></i>
|
||||||
|
</button>
|
||||||
|
</mat-card-header>
|
||||||
|
|
||||||
|
<mat-card-content>
|
||||||
|
<div
|
||||||
|
fxLayout="column"
|
||||||
|
fxLayout.xs="column"
|
||||||
|
fxLayoutAlign="center"
|
||||||
|
fxLayoutGap="10px"
|
||||||
|
fxLayoutGap.xs="0"
|
||||||
|
class="mat-card-content-frame"
|
||||||
|
>
|
||||||
|
<div fxFlex class="container">
|
||||||
|
<!-- search start-->
|
||||||
|
<div fxLayout="column" fxFlex="1 1 auto" class="ingegrated-search">
|
||||||
|
<div class="org-search-container">
|
||||||
|
<mat-form-field hintLabel="※ 특수문자는 -,_만 사용할 수 있습니다">
|
||||||
|
<input
|
||||||
|
matInput
|
||||||
|
#input
|
||||||
|
maxlength="20"
|
||||||
|
placeholder="그룹 이름을 입력하세요"
|
||||||
|
formControlName="groupName"
|
||||||
|
/>
|
||||||
|
<mat-hint align="end">{{ input.value?.length || 0 }}/20</mat-hint>
|
||||||
|
<mat-error *ngIf="true">
|
||||||
|
금지단어[-,_]
|
||||||
|
</mat-error>
|
||||||
|
<mat-error *ngIf="true">
|
||||||
|
이미 존재하는 그룹명입니다.
|
||||||
|
</mat-error>
|
||||||
|
</mat-form-field>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- search end-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</mat-card-content>
|
||||||
|
</mat-card>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button mat-stroked-button (click)="onClickChoice(false)" class="mat-primary">
|
||||||
|
취소
|
||||||
|
</button>
|
||||||
|
<button mat-flat-button (click)="onClickChoice(true)" class="mat-primary">
|
||||||
|
다음
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,178 @@
|
||||||
|
.dialog-creat-chat {
|
||||||
|
height: 100%;
|
||||||
|
& > .mat-card-header {
|
||||||
|
.btn-dialog-close {
|
||||||
|
font-size: 20px;
|
||||||
|
display: flex;
|
||||||
|
margin-left: auto;
|
||||||
|
align-self: flex-start;
|
||||||
|
color: #444444;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > .mat-card-content {
|
||||||
|
position: relative;
|
||||||
|
.mat-card-content-frame {
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
.container {
|
||||||
|
height: 100%;
|
||||||
|
.container-frame {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//그룹이름 폼 있는 경우
|
||||||
|
.newgroup-form {
|
||||||
|
height: 70px;
|
||||||
|
& + .mat-card-content-frame {
|
||||||
|
height: calc(100% - 120px);
|
||||||
|
.container {
|
||||||
|
.mat-tab-frame {
|
||||||
|
.mat-tab-group {
|
||||||
|
& > .mat-tab-body {
|
||||||
|
height: 380px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
& > .mat-tab-body-wrapper {
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
.mat-tag-body {
|
||||||
|
& > .dialog-tab-orglist {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dialog-tab-grouplist {
|
||||||
|
height: calc(100% - 130px);
|
||||||
|
width: 100%;
|
||||||
|
.group,
|
||||||
|
.search-result {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
&-expansion {
|
||||||
|
.list-item {
|
||||||
|
height: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&-list-item {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*::ng-deep .dialog-tab-chatlist {
|
||||||
|
height: 508px;
|
||||||
|
width: 100%;
|
||||||
|
.chat {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.chat.checkbox {
|
||||||
|
& > .list-item {
|
||||||
|
padding: 0 10px;
|
||||||
|
.item-default {
|
||||||
|
width: calc(100% - 30px);
|
||||||
|
}
|
||||||
|
.mat-badge {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
::ng-deep .dialog-tab-orglist {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 130px);
|
||||||
|
border-bottom: 1px solid #dddddd;
|
||||||
|
position: relative;
|
||||||
|
.oraganization {
|
||||||
|
.ps__rail-y {
|
||||||
|
left: auto !important;
|
||||||
|
}
|
||||||
|
&-tab {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
position: relative;
|
||||||
|
&-tree {
|
||||||
|
display: inline-flex;
|
||||||
|
width: 50%;
|
||||||
|
height: 100% !important;
|
||||||
|
border-right: 1px solid #dddddd;
|
||||||
|
overflow: auto;
|
||||||
|
.tab-tree-frame {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.select-list {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 50%;
|
||||||
|
height: 100% !important;
|
||||||
|
overflow: auto;
|
||||||
|
.search-list {
|
||||||
|
overflow: auto;
|
||||||
|
height: calc(100% - 40px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-chip {
|
||||||
|
height: 100px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #dddddd;
|
||||||
|
overflow: auto;
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
.mat-chip.mat-standard-chip .mat-chip-remove {
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-card {
|
||||||
|
.mat-card-content {
|
||||||
|
.content-box {
|
||||||
|
flex-direction: column;
|
||||||
|
flex-flow: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.button-form {
|
||||||
|
text-align: right;
|
||||||
|
.mat-primary {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*::ng-deep .dialog-creat-chat {
|
||||||
|
& > .mat-tab-body-wrapper {
|
||||||
|
.mat-tab-body {
|
||||||
|
height: 380px;
|
||||||
|
&:nth-child(3) {
|
||||||
|
height: 480px;
|
||||||
|
}
|
||||||
|
.mat-tab-body-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
*/
|
||||||
|
|
||||||
|
.mat-card-content {
|
||||||
|
.mat-card-content-frame {
|
||||||
|
height: 100%;
|
||||||
|
.container {
|
||||||
|
height: 100%;
|
||||||
|
.mat-tab-group {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
18
src/app/pages/common/popup/step-layout.component.html
Normal file
18
src/app/pages/common/popup/step-layout.component.html
Normal file
|
|
@ -0,0 +1,18 @@
|
||||||
|
<mat-horizontal-stepper [linear]="isLinear" #stepper>
|
||||||
|
<mat-step>
|
||||||
|
<ng-template matStepLabel>Group Info</ng-template>
|
||||||
|
<app-new-group></app-new-group>
|
||||||
|
</mat-step>
|
||||||
|
<mat-step>
|
||||||
|
<ng-template matStepLabel>Add Group Users</ng-template>
|
||||||
|
<app-new-chat></app-new-chat>
|
||||||
|
</mat-step>
|
||||||
|
<mat-step>
|
||||||
|
<ng-template matStepLabel>Done</ng-template>
|
||||||
|
<p>You are now done.</p>
|
||||||
|
<div>
|
||||||
|
<button mat-button matStepperPrevious>Back</button>
|
||||||
|
<button mat-button (click)="stepper.reset()">Reset</button>
|
||||||
|
</div>
|
||||||
|
</mat-step>
|
||||||
|
</mat-horizontal-stepper>
|
||||||
25
src/app/pages/common/popup/step-layout.component.spec.ts
Normal file
25
src/app/pages/common/popup/step-layout.component.spec.ts
Normal file
|
|
@ -0,0 +1,25 @@
|
||||||
|
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { StepLayoutComponent } from './step-layout.component';
|
||||||
|
|
||||||
|
describe('StepLayoutComponent', () => {
|
||||||
|
let component: StepLayoutComponent;
|
||||||
|
let fixture: ComponentFixture<StepLayoutComponent>;
|
||||||
|
|
||||||
|
beforeEach(async(() => {
|
||||||
|
TestBed.configureTestingModule({
|
||||||
|
declarations: [ StepLayoutComponent ]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
}));
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
fixture = TestBed.createComponent(StepLayoutComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
15
src/app/pages/common/popup/step-layout.component.ts
Normal file
15
src/app/pages/common/popup/step-layout.component.ts
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import { Component, OnInit } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-step-layout',
|
||||||
|
templateUrl: './step-layout.component.html',
|
||||||
|
styleUrls: ['./step-layout.component.scss']
|
||||||
|
})
|
||||||
|
export class StepLayoutComponent implements OnInit {
|
||||||
|
|
||||||
|
constructor() { }
|
||||||
|
|
||||||
|
ngOnInit(): void {
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -1,19 +1,31 @@
|
||||||
<div class="user-list">
|
<div class="user-list line-top">
|
||||||
<span class="presence">bullet</span>
|
<div class="user-profile-info">
|
||||||
<div class="profileImage">
|
<div class="user-profile-thumb mobile-ing">
|
||||||
ProfileImage
|
<!-- 모바일이 온라인일 경우 + mobile-ing -->
|
||||||
</div>
|
<span class="presence other-business">다른용무</span>
|
||||||
<div class="userInfo">
|
<!-- 기본값:온라인, +offline:오프라인, +absence:부재중, +other-business:다른용무 -->
|
||||||
<div>
|
<div class="profileImage">
|
||||||
<div class="name">홍길동</div>
|
<img
|
||||||
<div class="grade">대리</div>
|
src="https://material.angular.io/assets/img/examples/shiba2.jpg"
|
||||||
|
style="width: 36px; height: 36px;"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="deptName">
|
<div class="userInfo">
|
||||||
영업팀
|
<div class="user-n-g">
|
||||||
|
<div class="name">홍길동</div>
|
||||||
|
<div class="grade">대리</div>
|
||||||
|
</div>
|
||||||
|
<div class="deptName">
|
||||||
|
영업팀
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="intro">
|
<div class="intro">
|
||||||
맑은 산속 옹달샘 누가와서 먹나요??
|
<p>
|
||||||
|
맑은 산속 옹달샘 누가와서 먹나요?? 토끼가 새벽에 와서 빨빨랑 먹지요 토끼가
|
||||||
|
새벽에 와서 빨빨랑 먹지요.
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div *ngIf="check">
|
<div *ngIf="check">
|
||||||
<mat-checkbox></mat-checkbox>
|
<mat-checkbox></mat-checkbox>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
@charset 'UTF-8';
|
||||||
|
|
||||||
|
@import '../../../../assets/scss/components.scss';
|
||||||
|
|
||||||
|
.user-list {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 16px;
|
||||||
|
height: 70px;
|
||||||
|
align-items: center;
|
||||||
|
&.line-top {
|
||||||
|
border-top: 1px solid $gray-rec;
|
||||||
|
}
|
||||||
|
.user-profile-info {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-grow: 2.3;
|
||||||
|
.user-profile-thumb {
|
||||||
|
@include profile-avatar-default(
|
||||||
|
0 5px 5px 0,
|
||||||
|
8,
|
||||||
|
$green,
|
||||||
|
18px
|
||||||
|
); //오른 아래 공간, 모바일 온라인 아이콘 크기, 모바일 아이콘 색, 모바일 아이콘 bg크기
|
||||||
|
.presence {
|
||||||
|
//PC 상태
|
||||||
|
@include presence-state(8px); //원크기
|
||||||
|
}
|
||||||
|
.profileImage {
|
||||||
|
@include avatar-img(36px, 2px); //아바타 크기, 왼쪽공간
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.userInfo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: flex-start;
|
||||||
|
padding-left: 16px;
|
||||||
|
.user-n-g {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row-reverse nowrap;
|
||||||
|
align-items: flex-end;
|
||||||
|
height: 22px;
|
||||||
|
.name {
|
||||||
|
font: {
|
||||||
|
size: 16px;
|
||||||
|
weight: 600;
|
||||||
|
}
|
||||||
|
color: $gray-re21;
|
||||||
|
order: 1;
|
||||||
|
-ms-flex-order: 1;
|
||||||
|
}
|
||||||
|
.grade {
|
||||||
|
font: {
|
||||||
|
size: 13px;
|
||||||
|
}
|
||||||
|
color: $gray-re70;
|
||||||
|
margin-left: 4px;
|
||||||
|
order: 0;
|
||||||
|
-ms-flex-order: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.deptName {
|
||||||
|
font-size: 12px;
|
||||||
|
color: $gray-re6;
|
||||||
|
line-height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.intro {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
flex-basis: 35%;
|
||||||
|
flex-grow: 0;
|
||||||
|
align-items: baseline;
|
||||||
|
p {
|
||||||
|
font-size: 11px;
|
||||||
|
line-height: 1.4;
|
||||||
|
display: block;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
content: 'chat';
|
||||||
|
@include font-family-ico(12, center, $lipstick);
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
line-height: 12px;
|
||||||
|
margin-right: 4.8px;
|
||||||
|
position: relative;
|
||||||
|
top: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -4,61 +4,104 @@
|
||||||
|
|
||||||
.container {
|
.container {
|
||||||
@extend %clearfix;
|
@extend %clearfix;
|
||||||
@extend %guideline; //Guide Line
|
background-color: $grayf7-a;
|
||||||
background-color: $gray-ref0;
|
min-width: calc(100% - 60px);
|
||||||
width: 100%;
|
height: calc(100vh - 40px);
|
||||||
min-height: 100%;
|
margin-bottom: 40px;
|
||||||
.gnb,
|
padding-left: 60px;
|
||||||
.menu-container {
|
.gnb {
|
||||||
float: left;
|
position: fixed;
|
||||||
|
z-index: 5;
|
||||||
.list-section {
|
top: 0;
|
||||||
margin-top: 50px;
|
left: 0;
|
||||||
}
|
width: 60px;
|
||||||
}
|
}
|
||||||
|
.menu-container {
|
||||||
.contents-main {
|
display: flex;
|
||||||
@extend %clearfix;
|
flex-direction: column;
|
||||||
height: calc(100vh - 122px);
|
height: 100%;
|
||||||
.mainProfile {
|
//width: calc(100% - 370px); //Default Size
|
||||||
float: left;
|
.contents {
|
||||||
height: 600px;
|
min-height: 100%;
|
||||||
}
|
}
|
||||||
|
.list-section {
|
||||||
.info {
|
//min-height: calc(100% - 50px);
|
||||||
.allim {
|
display: flex;
|
||||||
.allimList {
|
flex-flow: column;
|
||||||
.allim-card {
|
align-content: flex-start;
|
||||||
display: inline-block;
|
background-color: #f1f2f6;
|
||||||
|
.title-section {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: column;
|
||||||
|
background-color: $white;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
position: fixed;
|
||||||
|
z-index: 10;
|
||||||
|
top: 50px;
|
||||||
|
width: 370px;
|
||||||
|
.title {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 9px 0 17px;
|
||||||
|
background-color: $white;
|
||||||
|
align-items: center;
|
||||||
|
flex-basis: 50px;
|
||||||
|
h3 {
|
||||||
|
@include font-family-txt(18, left, $lipstick);
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.btn-box {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.search-area {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row nowrap;
|
||||||
|
margin: 0 15px 0 17px;
|
||||||
|
width: calc(100% - 32px);
|
||||||
|
border: 1px solid $lipstick;
|
||||||
|
background-color: $white;
|
||||||
|
.search-selec-box {
|
||||||
|
@include selecCtrl(40px, 12px);
|
||||||
|
flex-basis: 150px;
|
||||||
|
}
|
||||||
|
.search-in-box {
|
||||||
|
@include matinputCtrl(
|
||||||
|
0,
|
||||||
|
0,
|
||||||
|
auto,
|
||||||
|
auto,
|
||||||
|
40px
|
||||||
|
); //$bdw: 1px, $bdr: 0, $maxw, $minw, $inputH
|
||||||
|
}
|
||||||
|
.btn-ico-search {
|
||||||
|
@include matbtnCtrl(40px, 40px, 0, 20px);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.myProfile {
|
||||||
|
border-bottom: 1px solid $gray-rec;
|
||||||
|
background-color: #f7f8fa;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
.list {
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer {
|
|
||||||
@extend %clearfix;
|
|
||||||
height: 40px;
|
|
||||||
width: 100%;
|
|
||||||
@extend %guideline; //Guide Line
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.gnb {
|
.gnb {
|
||||||
@extend %guideline; //Guide Line
|
|
||||||
background-color: $gray-ref0;
|
background-color: $gray-ref0;
|
||||||
width: 60px;
|
width: 60px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
.lgucap-logo {
|
justify-content: flex-start;
|
||||||
display: block;
|
border-right: 1px solid rgba(204, 204, 204, 0.8);
|
||||||
width: 32px;
|
.img-logo {
|
||||||
height: 32px;
|
margin: 9px 0 5px;
|
||||||
background: url(../../../assets/images/logo_140.png) no-repeat 50% 0;
|
|
||||||
background-size: 32px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.left-container {
|
.left-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
width: calc(100% - 28px);
|
width: calc(100% - 28px);
|
||||||
|
|
@ -68,10 +111,9 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: $gray-ref0;
|
background-color: $gray-ref0;
|
||||||
}
|
}
|
||||||
|
|
||||||
::ng-deep .global-menu {
|
::ng-deep .global-menu {
|
||||||
display: flex;
|
//display: flex;
|
||||||
flex-direction: row;
|
//flex-direction: row;
|
||||||
.mat-tab-header {
|
.mat-tab-header {
|
||||||
border-bottom: none !important;
|
border-bottom: none !important;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
@ -79,10 +121,10 @@
|
||||||
.mat-tab-label-container {
|
.mat-tab-label-container {
|
||||||
.mat-tab-list {
|
.mat-tab-list {
|
||||||
.mat-tab-labels {
|
.mat-tab-labels {
|
||||||
@extend %clearfix;
|
display: flex;
|
||||||
flex-flow: column;
|
flex-flow: column;
|
||||||
height: 100vh;
|
justify-content: space-around;
|
||||||
padding-top: 10px;
|
height: 272px;
|
||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
|
|
||||||
.mat-tab-label {
|
.mat-tab-label {
|
||||||
|
|
@ -98,25 +140,87 @@
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
transform: scale(0.9);
|
//transform: scale(0.9);
|
||||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1);
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1);
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
width: 24px;
|
//width: 24px;
|
||||||
height: 24px;
|
//height: 24px;
|
||||||
stroke: #ffffff;
|
stroke: $gray-re9;
|
||||||
stroke-width: 1.5;
|
stroke-width: 2;
|
||||||
stroke-linecap: square;
|
stroke-linecap: square;
|
||||||
stroke-linejoin: miter;
|
stroke-linejoin: miter;
|
||||||
fill: none;
|
fill: none;
|
||||||
|
g {
|
||||||
|
&#icon_gnb_organiztion_g32 {
|
||||||
|
.prefix__cls-1,
|
||||||
|
.prefix__cls-4 {
|
||||||
|
fill: none;
|
||||||
|
}
|
||||||
|
.prefix__cls-1 {
|
||||||
|
stroke: #999;
|
||||||
|
stroke-width: 2px;
|
||||||
|
}
|
||||||
|
.prefix__cls-3 {
|
||||||
|
stroke: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&#icon_gnb_message_g32 {
|
||||||
|
.prefix__cls-1 {
|
||||||
|
fill: none;
|
||||||
|
stroke: #999;
|
||||||
|
stroke-width: 2px;
|
||||||
|
stroke-linejoin: round;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.mat-badge-content {
|
.mat-badge-content {
|
||||||
right: -4px !important;
|
right: -9px !important;
|
||||||
|
border: 1px solid #ffbf2a;
|
||||||
|
//width: 24px;
|
||||||
|
//height: 24px;
|
||||||
|
box-sizing: content-box;
|
||||||
|
top: -10px !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.mat-tab-label-active {
|
&.mat-tab-label-active {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
|
svg {
|
||||||
|
stroke: #fff !important;
|
||||||
|
g {
|
||||||
|
&#prefix_23,
|
||||||
|
&#icon_gnb_chat_g32,
|
||||||
|
&#icon_gnb_call_g32 {
|
||||||
|
path {
|
||||||
|
&:nth-child(2) {
|
||||||
|
fill: #fff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&#icon_gnb_organiztion_g32 {
|
||||||
|
.prefix__cls-1 {
|
||||||
|
stroke: #fff !important;
|
||||||
|
}
|
||||||
|
path {
|
||||||
|
&:nth-last-of-type(2) {
|
||||||
|
stroke: #fff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&#icon_gnb_message_g32 {
|
||||||
|
.prefix__cls-1 {
|
||||||
|
stroke: #fff !important;
|
||||||
|
}
|
||||||
|
path {
|
||||||
|
&:nth-child(3) {
|
||||||
|
stroke: #fff !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
&[aria-selected='true'] {
|
&[aria-selected='true'] {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
|
|
@ -143,43 +247,624 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-container {
|
.menu-container {
|
||||||
@extend %clearfix;
|
width: 100%;
|
||||||
@extend %guideline2; //Guide Line2
|
display: flex;
|
||||||
width: calc(100% - 71px);
|
align-content: stretch;
|
||||||
@extend %height100vh;
|
align-items: stretch;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
.m-messenger-area {
|
.contents {
|
||||||
width: 400px;
|
display: flex;
|
||||||
padding-top: 50px;
|
flex-grow: 1;
|
||||||
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.6);
|
.example-container {
|
||||||
.m-messenger-tit {
|
width: 100%;
|
||||||
width: 400px;
|
background-color: $grayf7-a;
|
||||||
height: 50px;
|
.m-messenger-area {
|
||||||
position: fixed;
|
width: 371px;
|
||||||
top: 0;
|
display: inline-flex;
|
||||||
|
padding-top: 50px;
|
||||||
|
box-shadow: 1px 0 2px rgba(0, 0, 0, 0.3);
|
||||||
|
overflow-x: hidden;
|
||||||
|
.mat-drawer-inner-container {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.m-messenger-toolbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
z-index: 5;
|
||||||
|
width: 370px;
|
||||||
|
height: 50px;
|
||||||
|
background-color: $white;
|
||||||
|
.txt-m-messenger {
|
||||||
|
font: {
|
||||||
|
size: 13px;
|
||||||
|
color: $gray-re70;
|
||||||
|
}
|
||||||
|
line-height: 15px;
|
||||||
|
padding: 25px 0 0 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.contents-main-area {
|
||||||
|
width: auto;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 50px;
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
@include custom-scrollbar();
|
||||||
|
.contents-main-box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: calc(100% - 18px);
|
||||||
|
min-width: 450px;
|
||||||
|
height: 100%;
|
||||||
|
.contents-main-toolbar {
|
||||||
|
//Main Toolbar ///////////////////
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
margin-left: -18px;
|
||||||
|
z-index: 5;
|
||||||
|
height: 50px;
|
||||||
|
width: calc(100% - 45px);
|
||||||
|
background-color: transparent;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
flex-grow: 1;
|
||||||
|
font-size: 12px;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-left: 30px;
|
||||||
|
min-width: 450px;
|
||||||
|
.toolbar-info-area {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
align-items: center;
|
||||||
|
&.date-info {
|
||||||
|
@include font-family($font-light);
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 12px;
|
||||||
|
color: $gray-re70;
|
||||||
|
span {
|
||||||
|
width: 54px;
|
||||||
|
height: 16px;
|
||||||
|
border-radius: 30px;
|
||||||
|
border: solid 1px $lipstick;
|
||||||
|
background-color: #ffffff;
|
||||||
|
font-size: 11px;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: $lipstick;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.toolbar-ctrl {
|
||||||
|
flex-flow: row-reverse;
|
||||||
|
.topbar-search {
|
||||||
|
order: 2;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.my-profile {
|
||||||
|
height: 30px;
|
||||||
|
margin-right: 20px;
|
||||||
|
order: 1;
|
||||||
|
//profile /////////////
|
||||||
|
.user-profile-thumb {
|
||||||
|
@include profile-avatar-default(
|
||||||
|
0 0 0 0,
|
||||||
|
8,
|
||||||
|
$green,
|
||||||
|
18px
|
||||||
|
); //오른 아래 공간, 모바일 온라인 아이콘 크기, 모바일 아이콘 색, 모바일 아이콘 bg크기
|
||||||
|
.presence {
|
||||||
|
//PC 상태
|
||||||
|
@include presence-state(10px); //원크기
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
.profileImage {
|
||||||
|
@include avatar-img(30px, 0); //아바타 크기, 왼쪽공간
|
||||||
|
}
|
||||||
|
}
|
||||||
|
///// profile//
|
||||||
|
}
|
||||||
|
.app-layout-native-title-bar-actions {
|
||||||
|
order: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
///////////////////Main Toolbar//
|
||||||
|
}
|
||||||
|
.contents-main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
.subtitle {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
height: 50px;
|
||||||
|
padding-left: 12px;
|
||||||
|
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.16);
|
||||||
|
@include font-family($font-light);
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 2.73;
|
||||||
|
color: $gray-re4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Footer/////////////////////////////////
|
||||||
.footer {
|
.footer {
|
||||||
@extend %clearfix;
|
position: fixed;
|
||||||
div {
|
bottom: 0;
|
||||||
display: inline-block;
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex: 0 40px;
|
||||||
|
width: calc(100% - 60px);
|
||||||
|
height: 40px;
|
||||||
|
border-top: 1px solid $line-color-gray01;
|
||||||
|
background-color: $white;
|
||||||
|
.foot-info {
|
||||||
|
display: flex;
|
||||||
|
flex-grow: 1;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 12px;
|
||||||
|
color: $gray-re70;
|
||||||
|
@include font-family($font-light);
|
||||||
|
font-weight: 600;
|
||||||
|
&.version-info {
|
||||||
|
.var-txt {
|
||||||
|
padding-left: 8px;
|
||||||
|
color: $gray-re70;
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
width: 1px;
|
||||||
|
height: 10px;
|
||||||
|
display: inline-block;
|
||||||
|
background-color: #d4d4d4;
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
&:first-of-type {
|
||||||
|
&::before {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.new-var {
|
||||||
|
color: $brown;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.help-info {
|
||||||
|
flex-flow: row-reverse;
|
||||||
|
padding-right: 33px;
|
||||||
|
span {
|
||||||
|
color: $lipstick;
|
||||||
|
}
|
||||||
|
em {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
///////////////////////////////////// Footer//
|
||||||
|
|
||||||
.left-drawer-toggle {
|
.left-drawer-toggle {
|
||||||
position: absolute;
|
position: sticky;
|
||||||
top: calc(50% - 30px);
|
top: calc(50% - 35px);
|
||||||
left: -4px;
|
left: 0;
|
||||||
border: 1px solid #dddddd;
|
border: 1px solid #d4d4d4;
|
||||||
|
border-top-width: 2px;
|
||||||
|
border-left: 0;
|
||||||
background-color: #ffffff !important;
|
background-color: #ffffff !important;
|
||||||
width: 24px;
|
@include font-family-ico(6, center, $gray-re6);
|
||||||
height: 60px;
|
width: 18px;
|
||||||
|
height: 70px;
|
||||||
border-radius: 0 8px 8px 0;
|
border-radius: 0 8px 8px 0;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
justify-items: center;
|
align-items: center;
|
||||||
font-size: 1.8em;
|
font-size: 1.8em;
|
||||||
z-index: inherit;
|
z-index: inherit;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Contents Group//////////////////////////
|
||||||
|
.contents-group {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 0 30px 38px;
|
||||||
|
margin-left: -18px;
|
||||||
|
@include screen(mid) {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.mainProfile {
|
||||||
|
display: flex;
|
||||||
|
flex: 0 0 650px;
|
||||||
|
min-height: 100%;
|
||||||
|
min-width: 450px;
|
||||||
|
@include screen(mid) {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
//margin: 30px;
|
||||||
|
background-image: url(../../../assets/images/bg/bg_profile1.svg),
|
||||||
|
url(../../../assets/images/bg/bg_profile2.svg),
|
||||||
|
url(../../../assets/images/bg/bg_profile3.svg),
|
||||||
|
url(../../../assets/images/bg/bg_profile4.svg),
|
||||||
|
url(../../../assets/images/bg/bg_profile5.svg), $bg-linear-gradient;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: -213px -223px, 433px 95px, 489px 72px, 433px 517px,
|
||||||
|
335px 634px, 0 0;
|
||||||
|
.profile-card-box {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 60px 8.7%;
|
||||||
|
width: 100%;
|
||||||
|
.user-profile-info {
|
||||||
|
display: inline-flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
// Profile thumb//////////////////
|
||||||
|
.user-profile-thumb {
|
||||||
|
@include profile-avatar-default(
|
||||||
|
10px 0 0,
|
||||||
|
18.6,
|
||||||
|
$green,
|
||||||
|
30px
|
||||||
|
); //오른 아래 공간, 모바일 온라인 아이콘 크기, 모바일 아이콘 색, 모바일 아이콘 bg크기
|
||||||
|
padding: 10px 0 0;
|
||||||
|
margin-left: -14px;
|
||||||
|
align-self: start;
|
||||||
|
.presence {
|
||||||
|
//PC 상태
|
||||||
|
@include presence-state(14px); //원크기
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
.profileImage {
|
||||||
|
@include avatar-img(128px, 0); //아바타 크기, 왼쪽공간
|
||||||
|
border: 3px solid $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//////////////////Profile thumb //
|
||||||
|
}
|
||||||
|
.userInfo {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: center;
|
||||||
|
padding-left: 38px;
|
||||||
|
.user-n-g {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: row-reverse nowrap;
|
||||||
|
align-items: flex-end;
|
||||||
|
height: 44px;
|
||||||
|
.name {
|
||||||
|
font: {
|
||||||
|
size: 26px;
|
||||||
|
weight: 600;
|
||||||
|
}
|
||||||
|
color: $gray-re20;
|
||||||
|
order: 1;
|
||||||
|
-ms-flex-order: 1;
|
||||||
|
}
|
||||||
|
.grade {
|
||||||
|
font: {
|
||||||
|
size: 18px;
|
||||||
|
}
|
||||||
|
color: #f1f1f1;
|
||||||
|
margin-left: 6px;
|
||||||
|
order: 0;
|
||||||
|
-ms-flex-order: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.deptName {
|
||||||
|
font-size: 22px;
|
||||||
|
color: $white;
|
||||||
|
line-height: 25px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.nickName {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
margin-top: 18px;
|
||||||
|
align-items: center;
|
||||||
|
.nickName-info {
|
||||||
|
padding: 0 16px;
|
||||||
|
height: 30px;
|
||||||
|
line-height: 30px;
|
||||||
|
border-radius: 15px;
|
||||||
|
border: solid 1px #fc5182;
|
||||||
|
background-color: rgba(255, 255, 255, 0.95);
|
||||||
|
color: $gray-re9;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.address-txt {
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 21px;
|
||||||
|
color: $gray-re3;
|
||||||
|
margin-top: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.btn-partner-set {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 0 25px;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.8);
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.8);
|
||||||
|
height: 70px;
|
||||||
|
margin-top: 30px;
|
||||||
|
img {
|
||||||
|
vertical-align: top;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.user-profile-info-list {
|
||||||
|
margin-top: 60px;
|
||||||
|
ul {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
height: 250px;
|
||||||
|
li {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $brown;
|
||||||
|
span {
|
||||||
|
width: 100px;
|
||||||
|
height: 34px;
|
||||||
|
border-radius: 18px;
|
||||||
|
border: solid 1px #f8f9fd;
|
||||||
|
background-color: #aaa0a5;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: $white;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
///////////////////////////////////////////////////////////////////////////////// 제거
|
||||||
|
.profile-card {
|
||||||
|
//mat-card
|
||||||
|
width: 100%;
|
||||||
|
background-color: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
.profileImage {
|
||||||
|
width: 126px;
|
||||||
|
height: 126px;
|
||||||
|
border-radius: 50%;
|
||||||
|
border: 3px solid $white;
|
||||||
|
box-sizing: border-box;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
img {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/////////////////////////////////////////////////////////////////////////////////////
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-grow: 1.354;
|
||||||
|
margin-left: 30px;
|
||||||
|
overflow: hidden;
|
||||||
|
justify-content: space-between;
|
||||||
|
min-width: 450px;
|
||||||
|
@include screen(mid) {
|
||||||
|
overflow: visible;
|
||||||
|
margin-left: 0;
|
||||||
|
padding: 30px 0;
|
||||||
|
}
|
||||||
|
.bookmark {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
.chatlist {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-top: 15px;
|
||||||
|
.chatlist-con {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 10px;
|
||||||
|
position: relative;
|
||||||
|
min-height: 70px;
|
||||||
|
&:after {
|
||||||
|
content: '';
|
||||||
|
width: calc(100% - 66px);
|
||||||
|
height: 1px;
|
||||||
|
background-color: $gray-rec;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
// Profile thumb//////////////////
|
||||||
|
.user-profile-thumb {
|
||||||
|
@include profile-avatar-default(
|
||||||
|
0,
|
||||||
|
18.6,
|
||||||
|
$green,
|
||||||
|
30px
|
||||||
|
); //오른 아래 공간, 모바일 온라인 아이콘 크기, 모바일 아이콘 색, 모바일 아이콘 bg크기
|
||||||
|
flex-basis: 46px;
|
||||||
|
.profileImage {
|
||||||
|
@include avatar-img(46px, 0); //아바타 크기, 왼쪽공간
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//////////////////Profile thumb //
|
||||||
|
.chat-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 70px;
|
||||||
|
flex-grow: 1;
|
||||||
|
padding-left: 20px;
|
||||||
|
.roomName {
|
||||||
|
font: {
|
||||||
|
size: 16px;
|
||||||
|
weight: 600;
|
||||||
|
}
|
||||||
|
color: #333;
|
||||||
|
line-height: 21px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
height: 21px;
|
||||||
|
}
|
||||||
|
.lastMessage {
|
||||||
|
font: {
|
||||||
|
size: 12px;
|
||||||
|
}
|
||||||
|
color: $gray-re70;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-top: 8px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.subInfo {
|
||||||
|
color: $gray-re9;
|
||||||
|
line-height: 15px;
|
||||||
|
align-self: flex-start;
|
||||||
|
padding: 12px 0 0 12px;
|
||||||
|
.mat-badge-content {
|
||||||
|
right: 0 !important;
|
||||||
|
border: 1px solid #ffbf2a;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
line-height: 20px;
|
||||||
|
box-sizing: content-box;
|
||||||
|
top: 23px !important;
|
||||||
|
background-color: #ffbf2a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.allim {
|
||||||
|
overflow-x: auto;
|
||||||
|
@include custom-scrollbar();
|
||||||
|
padding-bottom: 10px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
.allimList {
|
||||||
|
margin-top: 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
|
.allim-card {
|
||||||
|
flex: 1 0 200px;
|
||||||
|
padding: 27px 17px 0;
|
||||||
|
min-width: 200px;
|
||||||
|
height: 240px;
|
||||||
|
border: solid 1px #d4d4d4;
|
||||||
|
border-bottom-width: 2px;
|
||||||
|
background-color: #ffffff;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 0;
|
||||||
|
margin-left: 16px;
|
||||||
|
&:first-of-type {
|
||||||
|
margin-left: 0;
|
||||||
|
}
|
||||||
|
.mat-card-header {
|
||||||
|
.allim-header-image {
|
||||||
|
background-size: cover;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.allim-con-title {
|
||||||
|
display: block;
|
||||||
|
height: 36px;
|
||||||
|
line-height: 36px;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $gray-re3;
|
||||||
|
border-bottom: 1px solid #d4d4d4;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.allim-contents {
|
||||||
|
display: block;
|
||||||
|
font-size: 12px;
|
||||||
|
color: $gray-re70;
|
||||||
|
line-height: 1.67;
|
||||||
|
margin: 12px 0 22px;
|
||||||
|
max-height: 43px;
|
||||||
|
height: 43px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
.btn-more {
|
||||||
|
width: 100%;
|
||||||
|
height: 40px;
|
||||||
|
border-top: 1px solid #d4d4d4;
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 600;
|
||||||
|
color: $gray-re9;
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.banner-box {
|
||||||
|
width: 100%;
|
||||||
|
height: 74px;
|
||||||
|
@extend %guideline;
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Common
|
||||||
|
// Sub title
|
||||||
|
.subtitle2 {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: flex-start;
|
||||||
|
height: 35px;
|
||||||
|
@include font-family(LG Smart Light, normal);
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 24px;
|
||||||
|
color: $lipstick;
|
||||||
|
&.not-first-subtit {
|
||||||
|
margin-top: 48px;
|
||||||
|
}
|
||||||
|
&::before {
|
||||||
|
content: '';
|
||||||
|
width: 25px;
|
||||||
|
height: 4px;
|
||||||
|
display: flex;
|
||||||
|
background-color: $lipstick;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
////////////////////////// Contents Group//
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,7 @@
|
||||||
itemSize="36"
|
itemSize="36"
|
||||||
perfectScrollbar
|
perfectScrollbar
|
||||||
fxFlexFill
|
fxFlexFill
|
||||||
style="height: 400px;"
|
style="height: 200px;"
|
||||||
>
|
>
|
||||||
<ng-container
|
<ng-container
|
||||||
*cdkVirtualFor="let node of dataSource.expandedData$"
|
*cdkVirtualFor="let node of dataSource.expandedData$"
|
||||||
|
|
|
||||||
11
src/app/pages/organization/organization.module.ts
Normal file
11
src/app/pages/organization/organization.module.ts
Normal file
|
|
@ -0,0 +1,11 @@
|
||||||
|
import { NgModule } from '@angular/core';
|
||||||
|
import { TreeComponent } from './component/tree.component';
|
||||||
|
import { DetailTableComponent } from './component/detail-table.component';
|
||||||
|
|
||||||
|
const COMPONENT = [TreeComponent, DetailTableComponent];
|
||||||
|
|
||||||
|
@NgModule({
|
||||||
|
exports: [...COMPONENT],
|
||||||
|
declarations: [...COMPONENT]
|
||||||
|
})
|
||||||
|
export class OrganizationModule {}
|
||||||
|
|
@ -1,52 +0,0 @@
|
||||||
import { TemplateRef, Injectable } from '@angular/core';
|
|
||||||
import { ComponentType } from '@angular/cdk/portal';
|
|
||||||
import {
|
|
||||||
MatDialog,
|
|
||||||
MatDialogConfig,
|
|
||||||
MatDialogRef
|
|
||||||
} from '@angular/material/dialog';
|
|
||||||
|
|
||||||
import { of } from 'rxjs';
|
|
||||||
import { take, map, catchError } from 'rxjs/operators';
|
|
||||||
|
|
||||||
@Injectable({
|
|
||||||
providedIn: 'root'
|
|
||||||
})
|
|
||||||
export class DialogService {
|
|
||||||
constructor(private matDialog: MatDialog) {}
|
|
||||||
|
|
||||||
public open<T, D = any, R = any>(
|
|
||||||
componentOrTemplateRef: ComponentType<T> | TemplateRef<T>,
|
|
||||||
config?: MatDialogConfig<D>
|
|
||||||
): Promise<R> {
|
|
||||||
return new Promise<R>((resolve, reject) => {
|
|
||||||
config = { ...config, autoFocus: false };
|
|
||||||
|
|
||||||
const dialogRef = this.matDialog.open<T, D, R>(
|
|
||||||
componentOrTemplateRef,
|
|
||||||
config
|
|
||||||
);
|
|
||||||
|
|
||||||
dialogRef
|
|
||||||
.afterClosed()
|
|
||||||
.pipe(
|
|
||||||
take(1),
|
|
||||||
map(result => {
|
|
||||||
return resolve(result);
|
|
||||||
}),
|
|
||||||
catchError(err => {
|
|
||||||
return of(reject(err));
|
|
||||||
})
|
|
||||||
)
|
|
||||||
.subscribe();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
getDialogById(id: string): MatDialogRef<any, any> {
|
|
||||||
return this.matDialog.getDialogById(id);
|
|
||||||
}
|
|
||||||
|
|
||||||
closeAll() {
|
|
||||||
this.matDialog.closeAll();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
3
src/assets/images/bg/bg_profile1.svg
Normal file
3
src/assets/images/bg/bg_profile1.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="440" height="440" viewBox="0 0 440 440">
|
||||||
|
<circle id="cirdle-tr1" cx="220" cy="220" r="220" data-name="cirdle-tr1" style="fill:rgba(241,241,241,.12)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 209 B |
3
src/assets/images/bg/bg_profile2.svg
Normal file
3
src/assets/images/bg/bg_profile2.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="91.014" height="89.944" viewBox="0 0 91.014 89.944">
|
||||||
|
<ellipse id="cirdle-tr2" cx="45.507" cy="44.972" data-name="cirdle-tr2" rx="45.507" ry="44.972" style="fill:rgba(255,255,255,.08)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 244 B |
3
src/assets/images/bg/bg_profile3.svg
Normal file
3
src/assets/images/bg/bg_profile3.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="34.814" height="34.404" viewBox="0 0 34.814 34.404">
|
||||||
|
<ellipse id="cirdle-tr3" cx="17.407" cy="17.202" data-name="cirdle-tr13" rx="17.407" ry="17.202" style="fill:rgba(255,255,255,.16)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 245 B |
3
src/assets/images/bg/bg_profile4.svg
Normal file
3
src/assets/images/bg/bg_profile4.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="304.288" height="300.681" viewBox="0 0 304.288 300.681">
|
||||||
|
<ellipse id="cirdle-tr4" cx="152.144" cy="150.341" data-name="cirdle-tr4" rx="152.144" ry="150.341" style="fill:rgba(255,255,255,.06)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 252 B |
3
src/assets/images/bg/bg_profile5.svg
Normal file
3
src/assets/images/bg/bg_profile5.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="413.12" height="408.261" viewBox="0 0 413.12 408.261">
|
||||||
|
<ellipse id="cirdle-tr5" cx="206.56" cy="204.131" data-name="cirdle-tr5" rx="206.56" ry="204.131" style="fill:rgba(255,255,255,.08)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 248 B |
8
src/assets/images/ico/btn_lise_chat_a24.svg
Normal file
8
src/assets/images/ico/btn_lise_chat_a24.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="prefix__btn_lise_chat_a24" width="40" height="40" viewBox="0 0 40 40">
|
||||||
|
<g id="prefix__타원_656" data-name="타원 656" style="fill:#fef2f2">
|
||||||
|
<path d="M20 39.5c-2.633 0-5.186-.516-7.59-1.532-2.322-.982-4.408-2.388-6.199-4.18-1.79-1.79-3.197-3.876-4.179-6.198C1.016 25.186.5 22.633.5 20s.516-5.186 1.532-7.59c.982-2.322 2.388-4.408 4.18-6.199 1.79-1.79 3.876-3.197 6.198-4.179C14.814 1.016 17.367.5 20 .5s5.186.516 7.59 1.532c2.322.982 4.408 2.388 6.199 4.18 1.79 1.79 3.197 3.876 4.179 6.198C38.984 14.814 39.5 17.367 39.5 20s-.516 5.186-1.532 7.59c-.982 2.322-2.388 4.408-4.18 6.199-1.79 1.79-3.876 3.197-6.198 4.179C25.186 38.984 22.633 39.5 20 39.5z" style="stroke:none"/>
|
||||||
|
<path d="M20 1c-2.565 0-5.054.502-7.395 1.493-2.263.957-4.295 2.327-6.04 4.072s-3.115 3.777-4.072 6.04C1.503 14.946 1 17.435 1 20c0 2.565.502 5.054 1.493 7.395.957 2.263 2.327 4.295 4.072 6.04s3.777 3.115 6.04 4.072C14.946 38.497 17.435 39 20 39c2.565 0 5.054-.502 7.395-1.493 2.263-.957 4.295-2.327 6.04-4.072s3.115-3.777 4.072-6.04C38.497 25.054 39 22.565 39 20c0-2.565-.502-5.054-1.493-7.395-.957-2.263-2.327-4.295-4.072-6.04s-3.777-3.115-6.04-4.072C25.054 1.503 22.565 1 20 1m0-1c11.046 0 20 8.954 20 20s-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0z" style="fill:#fc4b7f;stroke:none"/>
|
||||||
|
</g>
|
||||||
|
<path id="prefix__다각형_2" d="M101.994 678.08a1.2 1.2 0 0 1-1.138-1.579l2.127-6.381a11.4 11.4 0 0 1 10.386-16.04h.626a11.378 11.378 0 0 1 10.8 10.734v.666a11.4 11.4 0 0 1-16.039 10.411l-6.381 2.127a1.19 1.19 0 0 1-.381.062z" data-name="다각형 2" transform="translate(-93.193 -646.48)" style="fill:rgba(248,127,163,.6)"/>
|
||||||
|
<path id="prefix__다각형_2_복사_6" d="M101.994 678.08a1.2 1.2 0 0 1-1.138-1.579l2.127-6.381a11.4 11.4 0 0 1 10.386-16.04h.626a11.377 11.377 0 0 1 10.8 10.734v.666a11.4 11.4 0 0 1-16.039 10.411l-6.381 2.127a1.184 1.184 0 0 1-.381.062zm11.377-21.6a8.994 8.994 0 0 0-8.026 13.018 1.2 1.2 0 0 1 .068.921l-1.521 4.563 4.563-1.521a1.193 1.193 0 0 1 .921.067 8.4 8.4 0 0 0 4.015.951 9.013 9.013 0 0 0 9-9v-.6a8.953 8.953 0 0 0-8.466-8.4h-.534z" data-name="다각형 2 복사 6" transform="translate(-93.193 -646.48)" style="fill:rgba(228,47,102,.5)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
8
src/assets/images/ico/btn_list_call_a24.svg
Normal file
8
src/assets/images/ico/btn_list_call_a24.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="prefix__btn_list_call_a24" width="40" height="40" viewBox="0 0 40 40">
|
||||||
|
<g id="prefix__타원_656_복사_4" data-name="타원 656 복사 4" style="fill:#fff3f3;stroke:#fc4b7f;stroke-linejoin:round">
|
||||||
|
<circle cx="20" cy="20" r="20" style="stroke:none"/>
|
||||||
|
<circle cx="20" cy="20" r="19.5" style="fill:none"/>
|
||||||
|
</g>
|
||||||
|
<path id="prefix__다각형_2_복사" d="M388.359 852.08c-.086 0-.181 0-.276-.013a22.941 22.941 0 0 1-9.957-3.533 22.575 22.575 0 0 1-6.908-6.9 22.838 22.838 0 0 1-3.531-9.961 3.284 3.284 0 0 1 2.978-3.583c.1-.009.2-.013.294-.013h3.321a3.294 3.294 0 0 1 3.247 2.825 13.021 13.021 0 0 0 .709 2.845 3.287 3.287 0 0 1-.742 3.462l-.79.79a16.454 16.454 0 0 0 5.028 5.019l.787-.786a3.3 3.3 0 0 1 3.475-.742 13.085 13.085 0 0 0 2.838.7 3.288 3.288 0 0 1 2.84 3.32v3.27a3.286 3.286 0 0 1-3.277 3.292z" data-name="다각형 2 복사" transform="translate(-358.954 -819.598)" style="fill:rgba(255,156,186,.6)"/>
|
||||||
|
<path id="prefix__다각형_2_복사_10" d="M388.359 852.08c-.086 0-.181 0-.276-.013a22.941 22.941 0 0 1-9.957-3.533 22.575 22.575 0 0 1-6.908-6.9 22.838 22.838 0 0 1-3.531-9.961 3.284 3.284 0 0 1 2.978-3.583c.1-.009.2-.013.294-.013h3.321a3.294 3.294 0 0 1 3.247 2.825 13.021 13.021 0 0 0 .709 2.845 3.287 3.287 0 0 1-.742 3.462l-.79.79a16.454 16.454 0 0 0 5.028 5.019l.787-.786a3.3 3.3 0 0 1 3.475-.742 13.085 13.085 0 0 0 2.838.7 3.288 3.288 0 0 1 2.84 3.32v3.27a3.286 3.286 0 0 1-3.277 3.292zm-14.089-21.811h-3.311a1.141 1.141 0 0 0-.839.394 1.084 1.084 0 0 0-.25.8 20.623 20.623 0 0 0 3.194 8.993 20.407 20.407 0 0 0 6.246 6.238 20.734 20.734 0 0 0 8.993 3.2.993.993 0 0 0 .858-.322 1.082 1.082 0 0 0 .318-.774v-3.317a1.094 1.094 0 0 0-.943-1.11 15.2 15.2 0 0 1-3.31-.823 1.1 1.1 0 0 0-1.16.244l-1.389 1.386a1.1 1.1 0 0 1-1.317.177 18.629 18.629 0 0 1-6.99-6.977 1.093 1.093 0 0 1 .178-1.315l1.393-1.39a1.093 1.093 0 0 0 .242-1.151 15.168 15.168 0 0 1-.828-3.317 1.1 1.1 0 0 0-1.085-.936z" data-name="다각형 2 복사 10" transform="translate(-358.954 -819.598)" style="fill:rgba(228,47,102,.5)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.0 KiB |
8
src/assets/images/ico/btn_list_message_a24.svg
Normal file
8
src/assets/images/ico/btn_list_message_a24.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="prefix__btn_list_message_a24" width="40" height="40" viewBox="0 0 40 40">
|
||||||
|
<g id="prefix__타원_656_복사" data-name="타원 656 복사" style="fill:#fff3f3">
|
||||||
|
<path d="M20 39.5c-2.633 0-5.186-.516-7.59-1.532-2.322-.982-4.408-2.388-6.199-4.18-1.79-1.79-3.197-3.876-4.179-6.198C1.016 25.186.5 22.633.5 20s.516-5.186 1.532-7.59c.982-2.322 2.388-4.408 4.18-6.199 1.79-1.79 3.876-3.197 6.198-4.179C14.814 1.016 17.367.5 20 .5s5.186.516 7.59 1.532c2.322.982 4.408 2.388 6.199 4.18 1.79 1.79 3.197 3.876 4.179 6.198C38.984 14.814 39.5 17.367 39.5 20s-.516 5.186-1.532 7.59c-.982 2.322-2.388 4.408-4.18 6.199-1.79 1.79-3.876 3.197-6.198 4.179C25.186 38.984 22.633 39.5 20 39.5z" style="stroke:none"/>
|
||||||
|
<path d="M20 1c-2.565 0-5.054.502-7.395 1.493-2.263.957-4.295 2.327-6.04 4.072s-3.115 3.777-4.072 6.04C1.503 14.946 1 17.435 1 20c0 2.565.502 5.054 1.493 7.395.957 2.263 2.327 4.295 4.072 6.04s3.777 3.115 6.04 4.072C14.946 38.497 17.435 39 20 39c2.565 0 5.054-.502 7.395-1.493 2.263-.957 4.295-2.327 6.04-4.072s3.115-3.777 4.072-6.04C38.497 25.054 39 22.565 39 20c0-2.565-.502-5.054-1.493-7.395-.957-2.263-2.327-4.295-4.072-6.04s-3.777-3.115-6.04-4.072C25.054 1.503 22.565 1 20 1m0-1c11.046 0 20 8.954 20 20s-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0z" style="fill:#fc4b7f;stroke:none"/>
|
||||||
|
</g>
|
||||||
|
<path id="prefix__다각형_2_복사_4" d="M15.272 24a1.089 1.089 0 0 1-1-.648l-4.194-9.434-9.43-4.193A1.091 1.091 0 0 1 .73 7.7L22.549.061A1.1 1.1 0 0 1 23 0H23.04a1.089 1.089 0 0 1 .306.084l.025.016h.009l.014.007.016.008h.007a1.081 1.081 0 0 1 .263.194l.02.028v.006l.011.012.006.007.013.015.011.013a1.089 1.089 0 0 1 .259.795v.038a1.1 1.1 0 0 1-.053.229L16.3 23.27a1.093 1.093 0 0 1-.985.73z" data-name="다각형 2 복사 4" transform="translate(6.242 7.821)" style="fill:rgba(248,127,163,.6)"/>
|
||||||
|
<path id="prefix__다각형_2_복사_7" d="M15.272 24a1.089 1.089 0 0 1-1-.648l-4.194-9.434-9.43-4.193A1.091 1.091 0 0 1 .73 7.7L22.549.061A1.1 1.1 0 0 1 23 0H23.04a1.089 1.089 0 0 1 .306.084l.025.016h.009l.014.007.016.008h.007a1.081 1.081 0 0 1 .263.194l.02.028v.006l.011.012.006.007.013.015.011.013a1.089 1.089 0 0 1 .259.795v.038a1.1 1.1 0 0 1-.053.229L16.3 23.27a1.093 1.093 0 0 1-.985.73zm-.121-4.047L20.3 5.243l-8.09 8.089zm-11.1-11.1l6.619 2.942L18.758 3.7z" data-name="다각형 2 복사 7" transform="translate(6.242 7.821)" style="fill:rgba(228,47,102,.5)"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.4 KiB |
19
src/assets/images/ico/btn_list_mobile_a24.svg
Normal file
19
src/assets/images/ico/btn_list_mobile_a24.svg
Normal file
|
|
@ -0,0 +1,19 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="prefix__btn_list_mobile_a24" width="40" height="40" viewBox="0 0 40 40">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.prefix__cls-3{fill:none;stroke:rgba(228,47,102,.5);stroke-linecap:square;stroke-linejoin:round;stroke-width:1.4px}.prefix__cls-4{stroke:none}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<g id="prefix__타원_656_복사" data-name="타원 656 복사" style="fill:#fff3f3">
|
||||||
|
<path d="M20 39.5c-2.633 0-5.186-.516-7.59-1.532-2.322-.982-4.408-2.388-6.199-4.18-1.79-1.79-3.197-3.876-4.179-6.198C1.016 25.186.5 22.633.5 20s.516-5.186 1.532-7.59c.982-2.322 2.388-4.408 4.18-6.199 1.79-1.79 3.876-3.197 6.198-4.179C14.814 1.016 17.367.5 20 .5s5.186.516 7.59 1.532c2.322.982 4.408 2.388 6.199 4.18 1.79 1.79 3.197 3.876 4.179 6.198C38.984 14.814 39.5 17.367 39.5 20s-.516 5.186-1.532 7.59c-.982 2.322-2.388 4.408-4.18 6.199-1.79 1.79-3.876 3.197-6.198 4.179C25.186 38.984 22.633 39.5 20 39.5z" class="prefix__cls-4"/>
|
||||||
|
<path d="M20 1c-2.565 0-5.054.502-7.395 1.493-2.263.957-4.295 2.327-6.04 4.072s-3.115 3.777-4.072 6.04C1.503 14.946 1 17.435 1 20c0 2.565.502 5.054 1.493 7.395.957 2.263 2.327 4.295 4.072 6.04s3.777 3.115 6.04 4.072C14.946 38.497 17.435 39 20 39c2.565 0 5.054-.502 7.395-1.493 2.263-.957 4.295-2.327 6.04-4.072s3.115-3.777 4.072-6.04C38.497 25.054 39 22.565 39 20c0-2.565-.502-5.054-1.493-7.395-.957-2.263-2.327-4.295-4.072-6.04s-3.777-3.115-6.04-4.072C25.054 1.503 22.565 1 20 1m0-1c11.046 0 20 8.954 20 20s-8.954 20-20 20S0 31.046 0 20 8.954 0 20 0z" style="fill:#fc4b7f;stroke:none"/>
|
||||||
|
</g>
|
||||||
|
<rect id="prefix__사각형_59" width="18" height="24" data-name="사각형 59" rx="2" transform="translate(11 8)" style="fill:rgba(248,127,163,.6)"/>
|
||||||
|
<g id="prefix__smartphone_1_" data-name="smartphone (1)" transform="translate(11 8)">
|
||||||
|
<g id="prefix__사각형_58" class="prefix__cls-3" data-name="사각형 58">
|
||||||
|
<rect width="18" height="24" class="prefix__cls-4" rx="2"/>
|
||||||
|
<rect width="16.6" height="22.6" x=".7" y=".7" rx="1.3" style="fill:none"/>
|
||||||
|
</g>
|
||||||
|
<path id="prefix__선_27" d="M0 0L0.008 0" class="prefix__cls-3" data-name="선 27" transform="translate(9.035 20.87)"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2.2 KiB |
8
src/assets/images/ico/btn_list_vc-a24.svg
Normal file
8
src/assets/images/ico/btn_list_vc-a24.svg
Normal file
|
|
@ -0,0 +1,8 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" id="prefix__btn_list_vc-a24" width="40" height="40" viewBox="0 0 40 40">
|
||||||
|
<g id="prefix__타원_656_복사_5" data-name="타원 656 복사 5" style="fill:#fff3f3;stroke:#fc4b7f;stroke-linejoin:round">
|
||||||
|
<circle cx="20" cy="20" r="20" style="stroke:none"/>
|
||||||
|
<circle cx="20" cy="20" r="19.5" style="fill:none"/>
|
||||||
|
</g>
|
||||||
|
<path id="prefix__다각형_2_복사_2" d="M3.375 20A3.58 3.58 0 0 1 0 16.25V3.75A3.581 3.581 0 0 1 3.375 0H15.75a3.582 3.582 0 0 1 3.375 3.75v3.821l6.1-4.838a1.032 1.032 0 0 1 1.169-.094A1.272 1.272 0 0 1 27 3.75v12.5a1.272 1.272 0 0 1-.61 1.113 1.033 1.033 0 0 1-1.169-.1l-6.1-4.837v3.82A3.581 3.581 0 0 1 15.75 20z" data-name="다각형 2 복사 2" transform="translate(7 10)" style="fill:rgba(248,127,163,.6)"/>
|
||||||
|
<path id="prefix__다각형_2_복사_8" d="M3.375 20A3.58 3.58 0 0 1 0 16.25V3.75A3.581 3.581 0 0 1 3.375 0H15.75a3.582 3.582 0 0 1 3.375 3.75v3.821l6.1-4.838a1.032 1.032 0 0 1 1.169-.094A1.272 1.272 0 0 1 27 3.75v12.5a1.272 1.272 0 0 1-.61 1.113 1.033 1.033 0 0 1-1.169-.1l-6.1-4.837v3.82A3.581 3.581 0 0 1 15.75 20zM2.25 3.75v12.5a1.193 1.193 0 0 0 1.125 1.25H15.75a1.193 1.193 0 0 0 1.125-1.25V3.75A1.194 1.194 0 0 0 15.75 2.5H3.375A1.194 1.194 0 0 0 2.25 3.75zM19.935 10l4.815 3.822V6.18z" data-name="다각형 2 복사 8" transform="translate(7 10)" style="fill:#e42f66;opacity:.502"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.4 KiB |
17
src/assets/images/ico/icon_bot_empty.svg
Normal file
17
src/assets/images/ico/icon_bot_empty.svg
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
|
||||||
|
<defs>
|
||||||
|
<style>
|
||||||
|
.prefix__cls-3{fill:#c5c5c5}
|
||||||
|
</style>
|
||||||
|
</defs>
|
||||||
|
<g id="prefix__icon_bot_empty" transform="translate(-23 -29)">
|
||||||
|
<g id="prefix__icon-no-message">
|
||||||
|
<path id="prefix__패스_255" d="M0 0h50v50H0z" data-name="패스 255" transform="translate(23 29)" style="fill:none"/>
|
||||||
|
<g id="prefix__그룹_32" data-name="그룹 32" transform="translate(-2.068 4)">
|
||||||
|
<path id="prefix__사각형_721" d="M31.161 71a2.1 2.1 0 0 1-1.986-2.765l3.71-11.166a19.971 19.971 0 0 1 9.271-25.958A19.657 19.657 0 0 1 51 29h1.092a19.877 19.877 0 0 1 18.834 18.784v1.166a19.866 19.866 0 0 1-27.972 18.219l-11.131 3.722a2.057 2.057 0 0 1-.662.109zm19.845-37.8a15.472 15.472 0 0 0-6.969 1.664 15.754 15.754 0 0 0-7.031 21.118 2.109 2.109 0 0 1 .118 1.612L34.47 65.58l7.96-2.662a2.075 2.075 0 0 1 1.607.117 14.612 14.612 0 0 0 7 1.665 15.757 15.757 0 0 0 15.7-15.744V47.9a15.643 15.643 0 0 0-14.76-14.7h-.931z" data-name="사각형 721" style="fill:rgba(153,153,153,.51)"/>
|
||||||
|
<path id="prefix__모서리가_둥근_직사각형_724" d="M50.5 37a2.266 2.266 0 0 1 2.5 1.912L50.5 50 48 38.912A2.266 2.266 0 0 1 50.5 37z" class="prefix__cls-3" data-name="모서리가 둥근 직사각형 724" transform="translate(0 2)"/>
|
||||||
|
<circle id="prefix__모서리가_둥근_직사각형_725" cx="3" cy="3" r="3" class="prefix__cls-3" data-name="모서리가 둥근 직사각형 725" transform="translate(48 53)"/>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 1.6 KiB |
|
|
@ -11,6 +11,7 @@ $line-height-base: 1.5 !default;
|
||||||
// Color
|
// Color
|
||||||
$black: #000 !default;
|
$black: #000 !default;
|
||||||
$white: #ffffff !default;
|
$white: #ffffff !default;
|
||||||
|
$grayf7-a: #f7f8fa !default;
|
||||||
$grayf3-5: #f3f4f5 !default;
|
$grayf3-5: #f3f4f5 !default;
|
||||||
$gray-ref0: #f0f0f0 !default;
|
$gray-ref0: #f0f0f0 !default;
|
||||||
$gray-re20: #202020 !default;
|
$gray-re20: #202020 !default;
|
||||||
|
|
@ -21,6 +22,7 @@ $gray-re4a: #4a4a4a !default;
|
||||||
$gray-re6: #666666 !default;
|
$gray-re6: #666666 !default;
|
||||||
$gray-re70: #707070 !default;
|
$gray-re70: #707070 !default;
|
||||||
$gray-re9: #999999 !default;
|
$gray-re9: #999999 !default;
|
||||||
|
$gray-rec: #cccccc !default;
|
||||||
|
|
||||||
$brown: #7f5360 !default;
|
$brown: #7f5360 !default;
|
||||||
|
|
||||||
|
|
@ -29,14 +31,20 @@ $dirty-purple: #5c575a !default;
|
||||||
$rose-pink: #f0828c !default;
|
$rose-pink: #f0828c !default;
|
||||||
$warm-pink: #fd578a !default;
|
$warm-pink: #fd578a !default;
|
||||||
|
|
||||||
|
$green: #20af9a;
|
||||||
|
$red-absence: #f95050;
|
||||||
|
$yellow-other: #fecd0d;
|
||||||
|
|
||||||
// text-color
|
// text-color
|
||||||
$txt-color01: $gray-re6;
|
$txt-color01: $gray-re6;
|
||||||
|
|
||||||
// Line Color
|
// Line Color
|
||||||
|
$line-color-gray01: #d4d4d4;
|
||||||
|
|
||||||
// Bg Color
|
// Bg Color
|
||||||
$body-bg: $white !default;
|
$body-bg: $white !default;
|
||||||
$bg-gray: $grayf3-5;
|
$bg-gray: $grayf3-5;
|
||||||
|
$bg-linear-gradient: linear-gradient(57deg, #ffe1ba 13%, #f5878c 87%);
|
||||||
|
|
||||||
// Design size
|
// Design size
|
||||||
|
|
||||||
|
|
@ -68,11 +76,14 @@ $min-xl: 1200;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
%blind {
|
||||||
|
font: 0/0 '돋움', dotum;
|
||||||
|
}
|
||||||
%guideline {
|
%guideline {
|
||||||
//border: 1px dashed red;
|
border: 1px dashed red;
|
||||||
}
|
}
|
||||||
%guideline2 {
|
%guideline2 {
|
||||||
//border: 1px dotted blue;
|
border: 1px dotted blue;
|
||||||
}
|
}
|
||||||
%height100vh {
|
%height100vh {
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
|
|
@ -94,6 +105,22 @@ $min-xl: 1200;
|
||||||
}
|
}
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
@mixin font-family-ico($fontSize: 24, $txtAlign: center, $txtColor: $black) {
|
||||||
|
font-family: 'material Icons';
|
||||||
|
font-size: $fontSize + px;
|
||||||
|
text-align: $txtAlign;
|
||||||
|
color: $txtColor;
|
||||||
|
}
|
||||||
|
@mixin font-family-txt(
|
||||||
|
$textSize: 12,
|
||||||
|
$textAlign: left,
|
||||||
|
$textColor: $gray-re70
|
||||||
|
) {
|
||||||
|
font-family: '나눔고딕, Malgun Gothic, 맑은고딕, Arial, Muli, Helvetica Neue, Arial, sans-serif';
|
||||||
|
font-size: $textSize + px;
|
||||||
|
text-align: $textAlign;
|
||||||
|
color: $textColor;
|
||||||
|
}
|
||||||
|
|
||||||
// Screen
|
// Screen
|
||||||
@mixin screen($size, $type: max, $pixels: false) {
|
@mixin screen($size, $type: max, $pixels: false) {
|
||||||
|
|
@ -148,8 +175,9 @@ $lg-red: (
|
||||||
100: #fff9fc,
|
100: #fff9fc,
|
||||||
200: #f1e1e5,
|
200: #f1e1e5,
|
||||||
300: #ef4c73,
|
300: #ef4c73,
|
||||||
400: #ec407a,
|
400: #ffbf2a,
|
||||||
500: #ed097e,
|
//#ec407a
|
||||||
|
500: #ed097e,
|
||||||
600: #d81b60,
|
600: #d81b60,
|
||||||
700: #c2185b,
|
700: #c2185b,
|
||||||
800: #ad1457,
|
800: #ad1457,
|
||||||
|
|
@ -303,11 +331,6 @@ $lg-red: (
|
||||||
color: mat-color($accent, B100);
|
color: mat-color($accent, B100);
|
||||||
}
|
}
|
||||||
|
|
||||||
.mat-badge-accent .mat-badge-content,
|
|
||||||
.weblink .mat-badge-content {
|
|
||||||
background-color: mat-color($warn, 400);
|
|
||||||
}
|
|
||||||
|
|
||||||
.mat-tab-group.mat-primary .mat-ink-bar,
|
.mat-tab-group.mat-primary .mat-ink-bar,
|
||||||
body.theme-default .mat-tab-nav-bar.mat-primary .mat-ink-bar {
|
body.theme-default .mat-tab-nav-bar.mat-primary .mat-ink-bar {
|
||||||
background-color: mat-color($accent, 500);
|
background-color: mat-color($accent, 500);
|
||||||
|
|
@ -349,7 +372,7 @@ $lg-red: (
|
||||||
padding: $pixels-amount;
|
padding: $pixels-amount;
|
||||||
border-top: $pixels-amount;
|
border-top: $pixels-amount;
|
||||||
}
|
}
|
||||||
////login input
|
//login input... ////////////////////
|
||||||
.idpass-type {
|
.idpass-type {
|
||||||
.mat-form-field-empty {
|
.mat-form-field-empty {
|
||||||
&.mat-form-field-label {
|
&.mat-form-field-label {
|
||||||
|
|
@ -372,7 +395,54 @@ $lg-red: (
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//////////
|
// input
|
||||||
|
.inputtype {
|
||||||
|
.mat-form-field-empty {
|
||||||
|
&.mat-form-field-label {
|
||||||
|
top: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mat-form-field-can-float {
|
||||||
|
&.mat-form-field-should-float {
|
||||||
|
.mat-form-field-label {
|
||||||
|
top: 11px;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mat-form-field {
|
||||||
|
&.mat-focused {
|
||||||
|
.mat-form-field-label {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mat-form-field-wrapper {
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//////////////////// login input...//
|
||||||
|
//panel /////////////////////////////
|
||||||
|
.panelType {
|
||||||
|
@include matpanelCtrl(60px, 0 0 0 0, 1, 0);
|
||||||
|
}
|
||||||
|
///////////////////////////// panel//
|
||||||
|
//btn //////////////////////////////
|
||||||
|
.btnType {
|
||||||
|
.mat-fab .mat-button-wrapper {
|
||||||
|
padding: 16px 0;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 24px;
|
||||||
|
.mat-icon {
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
display: inline-block;
|
||||||
|
fill: currentColor;
|
||||||
|
height: 24px;
|
||||||
|
width: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
////////////////////////////// btn//
|
||||||
|
|
||||||
.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
|
.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
|
||||||
height: 34px;
|
height: 34px;
|
||||||
|
|
@ -642,43 +712,252 @@ $lg-red: (
|
||||||
background-color: mat-color($accent, B100);
|
background-color: mat-color($accent, B100);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
///////////////////////////////////////////////////
|
/////////2020
|
||||||
/////////////
|
//color
|
||||||
// Select
|
.color-white {
|
||||||
@mixin selecCtrl($selec-height, $selec-width) {
|
color: $white;
|
||||||
.mat-select-value {
|
|
||||||
height: $selec-height + px;
|
|
||||||
line-height: $selec-height + px;
|
|
||||||
}
|
}
|
||||||
.mat-form-field {
|
//mat layout
|
||||||
height: $selec-height + px;
|
.mat-drawer-opened {
|
||||||
|
.mat-drawer-inner-container {
|
||||||
|
height: calc(100% - 102px);
|
||||||
|
overflow: auto;
|
||||||
|
margin-top: 102px;
|
||||||
|
@include custom-scrollbar();
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.mat-form-field-appearance-legacy .mat-form-field-wrapper {
|
.mat-drawer-opened + div + .contents-main-area {
|
||||||
height: $selec-height + px;
|
.contents-main-box {
|
||||||
|
.contents-main-toolbar {
|
||||||
|
width: calc(100% - 420px) !important;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.mat-form-field-appearance-legacy .mat-form-field-wrapper {
|
//mat dadge
|
||||||
padding-bottom: 0;
|
.mat-badge-accent .mat-badge-content,
|
||||||
|
.weblink .mat-badge-content {
|
||||||
|
background-color: mat-color($warn, 400);
|
||||||
}
|
}
|
||||||
.mat-form-field-flex {
|
//mat-card
|
||||||
height: $selec-height + px;
|
.allim-card {
|
||||||
|
.mat-card-header {
|
||||||
|
.mat-card-header-text {
|
||||||
|
margin: 0 0 0 10px;
|
||||||
|
.mat-card-title {
|
||||||
|
line-height: 21px;
|
||||||
|
@include font-family(LG Smart Light, normal);
|
||||||
|
font-size: 16px !important;
|
||||||
|
font-weight: bold;
|
||||||
|
color: $brown;
|
||||||
|
margin-bottom: 3px;
|
||||||
|
}
|
||||||
|
.mat-card-subtitle {
|
||||||
|
line-height: 14px;
|
||||||
|
@include font-family(LG Smart Light, normal);
|
||||||
|
font-size: 12px;
|
||||||
|
color: $gray-re9;
|
||||||
|
margin-top: 0;
|
||||||
|
margin-bottom: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mat-card-content {
|
||||||
|
border-top: solid 1px #d4d4d4;
|
||||||
|
margin-bottom: 0;
|
||||||
|
min-height: 114px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
color: #d4d4d4;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
& > .mat-card-actions:last-child {
|
||||||
|
margin-left: -17px;
|
||||||
|
margin-right: -17px;
|
||||||
|
margin-bottom: 0 !important;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
///////////////////////////////////////////////////MIXIN
|
||||||
|
/////////////
|
||||||
|
// Select
|
||||||
|
@mixin selecCtrl($selec-height, $selec-pwidth) {
|
||||||
|
height: $selec-height;
|
||||||
|
line-height: $selec-height;
|
||||||
|
padding: 0 $selec-pwidth;
|
||||||
|
}
|
||||||
|
|
||||||
//input
|
//input
|
||||||
@mixin matinputCtrl($selec-height, $selec-width) {
|
@mixin matinputCtrl($bdw: 1px, $bdr: 0, $maxw, $minw, $inputH) {
|
||||||
.mat-form-field-appearance-legacy {
|
border: $bdw solid #cccccc;
|
||||||
.mat-form-field-infix {
|
border-radius: $bdr + px;
|
||||||
padding: 0;
|
width: 100%;
|
||||||
border-top: 0;
|
max-width: $maxw;
|
||||||
width: $selec-width + px;
|
min-width: $minw;
|
||||||
|
height: $inputH;
|
||||||
|
line-height: $inputH;
|
||||||
|
background-color: $white;
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
|
||||||
|
// btn
|
||||||
|
@mixin matbtnCtrl($btnw, $btnh, $btnbdr, $btnlineH) {
|
||||||
|
min-width: $btnw;
|
||||||
|
height: $btnh;
|
||||||
|
border-radius: $btnbdr;
|
||||||
|
line-height: $btnlineH;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
// panel
|
||||||
|
@mixin matpanelCtrl($panelh-h, $panelBody-p, $matcon-o: 0, $matindicator-o: 1) {
|
||||||
|
&.mat-expansion-panel-spacing {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
.mat-expansion-panel-header {
|
||||||
|
height: $panelh-h !important;
|
||||||
|
padding: 0 17px;
|
||||||
|
font-size: 12px !important;
|
||||||
|
.mat-content {
|
||||||
|
align-items: center;
|
||||||
|
order: $matcon-o;
|
||||||
|
@if $matcon-o == 1 {
|
||||||
|
margin-left: 18px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
margin-left: 6px;
|
||||||
|
font-size: 13px;
|
||||||
|
strong {
|
||||||
|
color: $lipstick;
|
||||||
|
}
|
||||||
|
&.mat-button-wrapper {
|
||||||
|
font-size: 24px;
|
||||||
|
vertical-align: bottom;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mat-expansion-indicator {
|
||||||
|
align-items: center;
|
||||||
|
order: $matindicator-o;
|
||||||
|
&:after {
|
||||||
|
vertical-align: super;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.mat-form-field-appearance-legacy {
|
.mat-expansion-panel-content {
|
||||||
.mat-form-field-underline {
|
.mat-expansion-panel-body {
|
||||||
display: none;
|
padding: $panelBody-p;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//profile avatar
|
||||||
|
@mixin profile-avatar-default(
|
||||||
|
$mobile-on: 0 5px 5px 0,
|
||||||
|
$mico-size: 8,
|
||||||
|
$mico-color: $green,
|
||||||
|
$mico-bg: 18px
|
||||||
|
) {
|
||||||
|
//기본설정
|
||||||
|
display: inline-flex;
|
||||||
|
position: relative;
|
||||||
|
&.mobile-ing {
|
||||||
|
padding: $mobile-on;
|
||||||
|
&:after {
|
||||||
|
@include font-family-ico($mico-size, center, $mico-color);
|
||||||
|
content: 'smartphone';
|
||||||
|
display: block;
|
||||||
|
width: $mico-bg;
|
||||||
|
height: $mico-bg;
|
||||||
|
line-height: $mico-bg;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: $white;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
@mixin presence-state($circle-size: 8px) {
|
||||||
|
//pc상태설정
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
width: $circle-size;
|
||||||
|
height: $circle-size;
|
||||||
|
border-radius: 50%;
|
||||||
|
background-color: $green;
|
||||||
|
@extend %blind;
|
||||||
|
&.offline {
|
||||||
|
background-color: $gray-rec;
|
||||||
|
}
|
||||||
|
&.absence {
|
||||||
|
background-color: $red-absence;
|
||||||
|
}
|
||||||
|
&.other-business {
|
||||||
|
background-color: $yellow-other;
|
||||||
|
}
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
@mixin avatar-img($avatar-size: 36px, $avatar-left: 0) {
|
||||||
|
//아바타 이미지 설정
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
width: $avatar-size;
|
||||||
|
height: $avatar-size;
|
||||||
|
margin-left: $avatar-left;
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
|
||||||
|
// scrollbar
|
||||||
|
@mixin custom-scrollbar() {
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
padding: 1px;
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #999;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
background-color: $white;
|
||||||
|
border-radius: 4px;
|
||||||
|
box-shadow: inset 0px 0px 2px $white;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin no-scrollbar() {
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::-webkit-scrollbar-track {
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
/////////////
|
/////////////
|
||||||
////////////////////////////////////////////////////////
|
////////////////////////////////////////////////////////
|
||||||
|
|
||||||
|
// etc//////////////////////////////////////////////////
|
||||||
|
.myProfile {
|
||||||
|
.user-list {
|
||||||
|
&.line-top {
|
||||||
|
border-top: none !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
//////////////////////////////////////////////////etc //
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user