From 921846521ab53fe5c2e86ac76c438bda0401b081 Mon Sep 17 00:00:00 2001 From: richard-loafle <44828666+richard-loafle@users.noreply.github.com> Date: Fri, 8 May 2020 15:31:07 +0900 Subject: [PATCH] ing --- src/app/material.module.ts | 3 +- src/app/pages/account/login.component.scss | 2 +- src/app/pages/common/common.component.html | 22 +- .../pages/common/common.component.stories.ts | 14 +- src/app/pages/common/common.component.ts | 37 +- src/app/pages/common/common.module.ts | 3 - .../pages/common/popup/alert.component.html | 18 + .../pages/common/popup/alert.component.scss | 0 .../common/popup/alert.component.spec.ts | 25 + src/app/pages/common/popup/alert.component.ts | 15 + .../pages/common/popup/confirm.component.html | 26 + .../pages/common/popup/confirm.component.scss | 0 .../common/popup/confirm.component.spec.ts | 25 + .../pages/common/popup/confirm.component.ts | 15 + src/app/pages/common/popup/index.ts | 18 +- .../common/popup/new-chat-info.component.html | 79 ++ .../common/popup/new-chat-info.component.scss | 178 ++++ .../popup/new-chat-info.component.spec.ts | 25 + .../common/popup/new-chat-info.component.ts | 15 + .../common/popup/new-chat.component.html | 119 ++- .../common/popup/new-chat.component.scss | 2 +- .../pages/common/popup/new-chat.component.ts | 2 + .../common/popup/new-group.component.html | 56 +- .../common/popup/new-group.component.scss | 178 ++++ .../common/popup/step-layout.component.html | 18 + .../common/popup/step-layout.component.scss | 0 .../popup/step-layout.component.spec.ts | 25 + .../common/popup/step-layout.component.ts | 15 + .../group/component/user-item.component.html | 36 +- .../group/component/user-item.component.scss | 101 ++ src/app/pages/group/group.component.html | 871 ++++++++++++------ src/app/pages/group/group.component.scss | 833 +++++++++++++++-- .../component/tree.component.html | 2 +- .../pages/organization/organization.module.ts | 11 + src/app/services/dialog.service.ts | 52 -- src/assets/images/bg/bg_profile1.svg | 3 + src/assets/images/bg/bg_profile2.svg | 3 + src/assets/images/bg/bg_profile3.svg | 3 + src/assets/images/bg/bg_profile4.svg | 3 + src/assets/images/bg/bg_profile5.svg | 3 + src/assets/images/ico/btn_lise_chat_a24.svg | 8 + src/assets/images/ico/btn_list_call_a24.svg | 8 + .../images/ico/btn_list_message_a24.svg | 8 + src/assets/images/ico/btn_list_mobile_a24.svg | 19 + src/assets/images/ico/btn_list_vc-a24.svg | 8 + src/assets/images/ico/icon_bot_empty.svg | 17 + src/assets/scss/setting/_variables.scss | 351 ++++++- 47 files changed, 2776 insertions(+), 499 deletions(-) create mode 100644 src/app/pages/common/popup/alert.component.html create mode 100644 src/app/pages/common/popup/alert.component.scss create mode 100644 src/app/pages/common/popup/alert.component.spec.ts create mode 100644 src/app/pages/common/popup/alert.component.ts create mode 100644 src/app/pages/common/popup/confirm.component.html create mode 100644 src/app/pages/common/popup/confirm.component.scss create mode 100644 src/app/pages/common/popup/confirm.component.spec.ts create mode 100644 src/app/pages/common/popup/confirm.component.ts create mode 100644 src/app/pages/common/popup/new-chat-info.component.html create mode 100644 src/app/pages/common/popup/new-chat-info.component.scss create mode 100644 src/app/pages/common/popup/new-chat-info.component.spec.ts create mode 100644 src/app/pages/common/popup/new-chat-info.component.ts create mode 100644 src/app/pages/common/popup/step-layout.component.html create mode 100644 src/app/pages/common/popup/step-layout.component.scss create mode 100644 src/app/pages/common/popup/step-layout.component.spec.ts create mode 100644 src/app/pages/common/popup/step-layout.component.ts create mode 100644 src/app/pages/organization/organization.module.ts delete mode 100644 src/app/services/dialog.service.ts create mode 100644 src/assets/images/bg/bg_profile1.svg create mode 100644 src/assets/images/bg/bg_profile2.svg create mode 100644 src/assets/images/bg/bg_profile3.svg create mode 100644 src/assets/images/bg/bg_profile4.svg create mode 100644 src/assets/images/bg/bg_profile5.svg create mode 100644 src/assets/images/ico/btn_lise_chat_a24.svg create mode 100644 src/assets/images/ico/btn_list_call_a24.svg create mode 100644 src/assets/images/ico/btn_list_message_a24.svg create mode 100644 src/assets/images/ico/btn_list_mobile_a24.svg create mode 100644 src/assets/images/ico/btn_list_vc-a24.svg create mode 100644 src/assets/images/ico/icon_bot_empty.svg diff --git a/src/app/material.module.ts b/src/app/material.module.ts index 1887d5b..1169e5f 100644 --- a/src/app/material.module.ts +++ b/src/app/material.module.ts @@ -66,7 +66,8 @@ const MODULE = [ MatToolbarModule, MatTableModule, MatFormFieldModule, - MatTreeModule + MatTreeModule, + MatStepperModule ]; @NgModule({ diff --git a/src/app/pages/account/login.component.scss b/src/app/pages/account/login.component.scss index 5c10f5c..472d8eb 100644 --- a/src/app/pages/account/login.component.scss +++ b/src/app/pages/account/login.component.scss @@ -294,7 +294,7 @@ $login-bg-h: 100/1080; } &.fir-pass { &::before { - content: 'sync'; + content: 'cached'; } } } diff --git a/src/app/pages/common/common.component.html b/src/app/pages/common/common.component.html index d74e887..bca8014 100644 --- a/src/app/pages/common/common.component.html +++ b/src/app/pages/common/common.component.html @@ -1,12 +1,32 @@

popup components

+ - +
+ +
+

Alert & confirm popup

+ + +
diff --git a/src/app/pages/common/common.component.stories.ts b/src/app/pages/common/common.component.stories.ts index 6264368..6740dee 100644 --- a/src/app/pages/common/common.component.stories.ts +++ b/src/app/pages/common/common.component.stories.ts @@ -1,6 +1,7 @@ import { action } from '@storybook/addon-actions'; import { BrowserModule } from '@angular/platform-browser'; import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { ScrollingModule } from '@angular/cdk/scrolling'; import { MaterialModule } from 'src/app/material.module'; import { moduleMetadata } from '@storybook/angular'; @@ -10,15 +11,22 @@ import { NewChatComponent } from './popup/new-chat.component'; import { SettingComponent } from './popup/setting.component'; import { DIALOGS } from './popup'; import { UserItemComponent } from '../group/component/user-item.component'; - +import { TreeComponent } from '../organization/component/tree.component'; +import { ReactiveFormsModule } from '@angular/forms'; export default { title: '99_Common/CommonComponent', component: CommonComponent, decorators: [ moduleMetadata({ - imports: [BrowserModule, BrowserAnimationsModule, MaterialModule], + imports: [ + BrowserModule, + BrowserAnimationsModule, + MaterialModule, + ScrollingModule, + ReactiveFormsModule + ], providers: [], - declarations: [DIALOGS, UserItemComponent], + declarations: [DIALOGS, UserItemComponent, TreeComponent], entryComponents: [DIALOGS] }) ] diff --git a/src/app/pages/common/common.component.ts b/src/app/pages/common/common.component.ts index 72ed099..84a5938 100644 --- a/src/app/pages/common/common.component.ts +++ b/src/app/pages/common/common.component.ts @@ -3,6 +3,10 @@ import { MatDialog } from '@angular/material/dialog'; import { NewChatComponent } from './popup/new-chat.component'; import { NewGroupComponent } from './popup/new-group.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({ selector: 'app-common', @@ -18,22 +22,47 @@ export class CommonComponent implements OnInit { switch (type) { case 'CHAT': this.dialog.open(NewChatComponent, { - width: '850px', + // width: '850px', data: {} }); break; - case 'GROUP': + case 'CHAT_INFO': + this.dialog.open(NewChatInfoComponent, { + // width: '600px', + data: {} + }); + break; + case 'GROUP_INFO': this.dialog.open(NewGroupComponent, { - width: '250px', + // width: '850px', + data: {} + }); + break; + case 'STEP_LAYOUT': + this.dialog.open(StepLayoutComponent, { + // width: '850px', data: {} }); break; case 'SETTING': this.dialog.open(SettingComponent, { - width: '250px', + // width: '250px', data: {} }); break; } } + + openAlert() { + this.dialog.open(AlertComponent, { + // width: '350px', + data: {} + }); + } + openConfirm() { + this.dialog.open(ConfirmComponent, { + // width: '350px', + data: {} + }); + } } diff --git a/src/app/pages/common/common.module.ts b/src/app/pages/common/common.module.ts index 1e775ef..23e4dce 100644 --- a/src/app/pages/common/common.module.ts +++ b/src/app/pages/common/common.module.ts @@ -1,7 +1,4 @@ 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'; const COMPONENT = []; diff --git a/src/app/pages/common/popup/alert.component.html b/src/app/pages/common/popup/alert.component.html new file mode 100644 index 0000000..9041863 --- /dev/null +++ b/src/app/pages/common/popup/alert.component.html @@ -0,0 +1,18 @@ + + + Alert Title + + + +
+ 여기 경고메시지가 들어갑니다. +
+
+ + + +
diff --git a/src/app/pages/common/popup/alert.component.scss b/src/app/pages/common/popup/alert.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/common/popup/alert.component.spec.ts b/src/app/pages/common/popup/alert.component.spec.ts new file mode 100644 index 0000000..3921dd6 --- /dev/null +++ b/src/app/pages/common/popup/alert.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ AlertComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(AlertComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/common/popup/alert.component.ts b/src/app/pages/common/popup/alert.component.ts new file mode 100644 index 0000000..6441bc5 --- /dev/null +++ b/src/app/pages/common/popup/alert.component.ts @@ -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 { + } + +} diff --git a/src/app/pages/common/popup/confirm.component.html b/src/app/pages/common/popup/confirm.component.html new file mode 100644 index 0000000..e3c434c --- /dev/null +++ b/src/app/pages/common/popup/confirm.component.html @@ -0,0 +1,26 @@ + + + Confirm Title + + + +
+ 취소 ? 확인 ? +
+
+ + + + +
diff --git a/src/app/pages/common/popup/confirm.component.scss b/src/app/pages/common/popup/confirm.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/common/popup/confirm.component.spec.ts b/src/app/pages/common/popup/confirm.component.spec.ts new file mode 100644 index 0000000..4ddced9 --- /dev/null +++ b/src/app/pages/common/popup/confirm.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ ConfirmComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(ConfirmComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/common/popup/confirm.component.ts b/src/app/pages/common/popup/confirm.component.ts new file mode 100644 index 0000000..29c0d2c --- /dev/null +++ b/src/app/pages/common/popup/confirm.component.ts @@ -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 { + } + +} diff --git a/src/app/pages/common/popup/index.ts b/src/app/pages/common/popup/index.ts index 43ad88d..7c6b7bf 100644 --- a/src/app/pages/common/popup/index.ts +++ b/src/app/pages/common/popup/index.ts @@ -1,5 +1,21 @@ import { NewGroupComponent } from './new-group.component'; import { NewChatComponent } from './new-chat.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 +]; diff --git a/src/app/pages/common/popup/new-chat-info.component.html b/src/app/pages/common/popup/new-chat-info.component.html new file mode 100644 index 0000000..ba58d2f --- /dev/null +++ b/src/app/pages/common/popup/new-chat-info.component.html @@ -0,0 +1,79 @@ + + + 새로운 대화방 추가 + + + + +
+
+ + + +
+
+
+
+ +
+ + +
diff --git a/src/app/pages/common/popup/new-chat-info.component.scss b/src/app/pages/common/popup/new-chat-info.component.scss new file mode 100644 index 0000000..db16a20 --- /dev/null +++ b/src/app/pages/common/popup/new-chat-info.component.scss @@ -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%; + } + } + } +} diff --git a/src/app/pages/common/popup/new-chat-info.component.spec.ts b/src/app/pages/common/popup/new-chat-info.component.spec.ts new file mode 100644 index 0000000..614f0aa --- /dev/null +++ b/src/app/pages/common/popup/new-chat-info.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ NewChatInfoComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(NewChatInfoComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/common/popup/new-chat-info.component.ts b/src/app/pages/common/popup/new-chat-info.component.ts new file mode 100644 index 0000000..d852c5c --- /dev/null +++ b/src/app/pages/common/popup/new-chat-info.component.ts @@ -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 { + } + +} diff --git a/src/app/pages/common/popup/new-chat.component.html b/src/app/pages/common/popup/new-chat.component.html index 3e40615..27a40de 100644 --- a/src/app/pages/common/popup/new-chat.component.html +++ b/src/app/pages/common/popup/new-chat.component.html @@ -18,10 +18,49 @@ class="mat-card-content-frame" >
- -
- 검색창 + + + + @@ -90,7 +129,16 @@
-
ffffffffff
+
+ + LG CNS +

>

+ DT 사업부 +
+
+
+ +
@@ -98,40 +146,31 @@
- -
- - - 김선규 - clear - - -
- - - - 13 / 21 명 - - - 에러 - - -
+ +
+ + 선택한 대화상대 4 + +
+
+ + + 김선규 + clear + + +
+ +
+ + + + +
diff --git a/src/app/pages/common/popup/new-chat.component.scss b/src/app/pages/common/popup/new-chat.component.scss index 82d2dc5..db16a20 100644 --- a/src/app/pages/common/popup/new-chat.component.scss +++ b/src/app/pages/common/popup/new-chat.component.scss @@ -16,7 +16,7 @@ .container { height: 100%; .container-frame { - height: 530px; + height: 300px; } } } diff --git a/src/app/pages/common/popup/new-chat.component.ts b/src/app/pages/common/popup/new-chat.component.ts index f9c869e..5449b85 100644 --- a/src/app/pages/common/popup/new-chat.component.ts +++ b/src/app/pages/common/popup/new-chat.component.ts @@ -13,6 +13,8 @@ export class NewChatComponent implements OnInit { { name: '김선구2' }, { name: '김선구3' } ]; + searchItemList: any[] = [{ itemName: 'LGCNS' }, { itemName: 'LG' }]; + constructor(@Inject(MAT_DIALOG_DATA) public data: any) {} ngOnInit(): void {} diff --git a/src/app/pages/common/popup/new-group.component.html b/src/app/pages/common/popup/new-group.component.html index aba24d9..aa93638 100644 --- a/src/app/pages/common/popup/new-group.component.html +++ b/src/app/pages/common/popup/new-group.component.html @@ -1 +1,55 @@ -

new-group works!

+ + + 새 그룹 추가 + + + + +
+
+ + + +
+
+
+
+ +
+ + +
diff --git a/src/app/pages/common/popup/new-group.component.scss b/src/app/pages/common/popup/new-group.component.scss index e69de29..db16a20 100644 --- a/src/app/pages/common/popup/new-group.component.scss +++ b/src/app/pages/common/popup/new-group.component.scss @@ -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%; + } + } + } +} diff --git a/src/app/pages/common/popup/step-layout.component.html b/src/app/pages/common/popup/step-layout.component.html new file mode 100644 index 0000000..676e4b5 --- /dev/null +++ b/src/app/pages/common/popup/step-layout.component.html @@ -0,0 +1,18 @@ + + + Group Info + + + + Add Group Users + + + + Done +

You are now done.

+
+ + +
+
+
diff --git a/src/app/pages/common/popup/step-layout.component.scss b/src/app/pages/common/popup/step-layout.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/pages/common/popup/step-layout.component.spec.ts b/src/app/pages/common/popup/step-layout.component.spec.ts new file mode 100644 index 0000000..334022e --- /dev/null +++ b/src/app/pages/common/popup/step-layout.component.spec.ts @@ -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; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [ StepLayoutComponent ] + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(StepLayoutComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/pages/common/popup/step-layout.component.ts b/src/app/pages/common/popup/step-layout.component.ts new file mode 100644 index 0000000..e2976f6 --- /dev/null +++ b/src/app/pages/common/popup/step-layout.component.ts @@ -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 { + } + +} diff --git a/src/app/pages/group/component/user-item.component.html b/src/app/pages/group/component/user-item.component.html index d2757b1..ebe56a2 100644 --- a/src/app/pages/group/component/user-item.component.html +++ b/src/app/pages/group/component/user-item.component.html @@ -1,19 +1,31 @@ -
- bullet -
- ProfileImage -
-
-
-
홍길동
-
대리
+
+