ucap/next-ucap-messenger
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

layout is modified

Browse Source
This commit is contained in:
병준 박 2019-09-26 14:38:21 +09:00
parent 8d73524de6
commit 8d8b1e5c47
25 changed files with 262 additions and 353 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.html
View File

@ -12,7 +12,7 @@
class="app-title mt-48 mb-8"
[@animate]="{ value: '*', params: { delay: '100ms', y: '25px' } }"
>
Chat App
M Messenger
</span>
<span
@ -23,12 +23,4 @@
>
Select a contact to start a chat!
</span>
<button
mat-raised-button
fxHide.gt-md
fuseMatSidenavToggler="chat-left-sidenav"
>
Select a contact to start a chat!
</button>
</div>

23
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.scss
View File

@ -0,0 +1,23 @@
:host {
display: flex;
height: 100%;
flex: 1;
.big-circle {
border-radius: 50%;
width: 240px;
height: 240px;
line-height: 240px;
text-align: center;
border: 1px solid;
}
.app-title {
font-weight: 600;
font-size: 32px;
}
.secondary-text {
font-size: 16px;
}
}

70
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html
View File

@ -1,34 +1,36 @@
<mat-tab-group mat-stretch-tabs>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>group</mat-icon>
</ng-template>
<ng-template matTabContent>
<app-layout-chat-left-sidenav-group></app-layout-chat-left-sidenav-group>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>chat</mat-icon>
</ng-template>
<ng-template matTabContent>
<app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>device_hub</mat-icon>
</ng-template>
<ng-template matTabContent>
<app-layout-chat-left-sidenav-organization></app-layout-chat-left-sidenav-organization>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>phone</mat-icon>
</ng-template>
<ng-template matTabContent>
<app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
</ng-template>
</mat-tab>
</mat-tab-group>
<div class="container">
<mat-tab-group mat-stretch-tabs>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>group</mat-icon>
</ng-template>
<ng-template matTabContent>
<app-layout-chat-left-sidenav-group></app-layout-chat-left-sidenav-group>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>chat</mat-icon>
</ng-template>
<ng-template matTabContent>
<app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>device_hub</mat-icon>
</ng-template>
<ng-template matTabContent>
<app-layout-chat-left-sidenav-organization></app-layout-chat-left-sidenav-organization>
</ng-template>
</mat-tab>
<mat-tab>
<ng-template mat-tab-label>
<mat-icon>phone</mat-icon>
</ng-template>
<ng-template matTabContent>
<app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
</ng-template>
</mat-tab>
</mat-tab-group>
</div>

4
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss
View File

@ -0,0 +1,4 @@
::ng-deep .mat-tab-label,
::ng-deep .mat-tab-label-active {
min-width: 0 !important;
}

21
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.html
View File

@ -1,5 +1,5 @@
<!-- CHAT -->
<div class="chat" fxFlex fxLayout="column">
<div class="container" fxFlex fxLayout="column">
<!-- CHAT TOOLBAR -->
<mat-toolbar class="chat-toolbar">
<div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
@ -7,18 +7,13 @@
<!-- RESPONSIVE CHATS BUTTON-->
<button
mat-icon-button
fxHide.gt-md
class="responsive-chats-button mr-16"
fuseMatSidenavToggler="chat-left-sidenav"
aria-label="chats button"
fxHide.gt-md
class="responsive-chats-button"
>
<mat-icon>chat</mat-icon>
</button>
<!-- / RESPONSIVE CHATS BUTTON-->
<!-- CHAT CONTACT-->
<!-- / CHAT CONTACT-->
</div>
<div>
@ -31,11 +26,7 @@
</button>
<mat-menu #contactMenu="matMenu">
<button
mat-menu-item
fuseMatSidenavToggler="chat-right-sidenav"
(click)="selectContact()"
>
<button mat-menu-item (click)="selectContact()">
Contact Info
</button>
</mat-menu>
@ -45,7 +36,7 @@
<!-- / CHAT TOOLBAR -->
<!-- CHAT CONTENT -->
<div id="chat-content" fxFlex="1 1 auto" fusePerfectScrollbar>
<div fxFlex="1 1 auto" class="chat-content">
<!-- CHAT MESSAGES -->
<ucap-chat-messages></ucap-chat-messages>
<!-- CHAT MESSAGES -->
@ -53,7 +44,7 @@
<!-- / CHAT CONTENT -->
<!-- CHAT FOOTER -->
<div class="chat-footer" fxFlex="0 0 auto" fxLayout="column">
<div fxFlex="0 0 auto" fxLayout="column">
<!-- REPLY FORM -->
<ucap-chat-form></ucap-chat-form>
<!-- / REPLY FORM -->

201
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/messages.component.scss
View File

@ -1,208 +1,27 @@
:host {
display: flex;
flex: 1 0 auto;
overflow: hidden;
max-width: 100%;
width: 100%;
height: 100%;
flex: 1;
.container {
width: 100%;
height: 100%;
.chat {
.chat-toolbar {
min-height: 64px;
height: 49px;
min-height: 49px;
border-bottom: 1px solid;
.responsive-chats-button {
padding: 0;
}
.chat-contact {
cursor: pointer;
.avatar {
margin-right: 16px;
}
}
}
#chat-content {
.chat-content {
background: transparent;
overflow: auto;
-webkit-overflow-scrolling: touch;
.chat-messages {
position: relative;
padding: 16px 0 40px 40px;
.message-row {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
padding: 0 16px 4px 16px;
.avatar {
position: absolute;
left: -32px;
margin: 0;
}
.bubble {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 12px;
max-width: 100%;
.message {
white-space: pre-wrap;
line-height: 1.2;
}
.time {
position: absolute;
display: none;
width: 100%;
font-size: 11px;
margin-top: 8px;
top: 100%;
left: 0;
white-space: nowrap;
}
}
&.contact {
.bubble {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
.time {
margin-left: 12px;
}
}
&.first-of-group {
.bubble {
border-top-left-radius: 20px;
}
}
&.last-of-group {
.bubble {
border-bottom-left-radius: 20px;
}
}
}
&.me {
padding-left: 40px;
.avatar {
order: 2;
margin: 0 0 0 16px;
}
.bubble {
margin-left: auto;
border-top-left-radius: 20px;
border-bottom-left-radius: 20px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
.time {
justify-content: flex-end;
right: 0;
margin-right: 12px;
}
}
&.first-of-group {
.bubble {
border-top-right-radius: 20px;
}
}
&.last-of-group {
.bubble {
border-bottom-right-radius: 20px;
}
}
}
&.contact + .me,
&.me + .contact {
padding-top: 20px;
margin-top: 20px;
}
&.first-of-group {
.bubble {
border-top-left-radius: 20px;
padding-top: 13px;
}
}
&.last-of-group {
.bubble {
border-bottom-left-radius: 20px;
padding-bottom: 13px;
.time {
display: flex;
}
}
}
}
}
}
.chat-footer {
border-top: 1px solid;
padding: 8px 8px 8px 16px;
.reply-form {
position: relative;
.message-text {
padding: 16px 8px;
.mat-form-field-wrapper {
padding: 0;
.mat-form-field-flex {
padding: 0;
.mat-form-field-infix {
padding: 0;
border: none;
border-radius: 20px;
border: 1px solid;
textarea {
overflow: hidden;
margin: 16px 48px 16px 16px;
width: calc(100% - 64px);
padding: 0;
}
}
}
.mat-form-field-underline {
display: none !important;
}
}
}
.send-message-button {
position: absolute;
right: 16px;
bottom: 21px;
}
}
}
}
}

1
projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-side.component.html
View File

@ -0,0 +1 @@
dd

3
projects/ucap-webmessenger-app/src/app/layouts/messenger/messenger.layout.module.ts
View File

@ -1,6 +1,8 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatTabsModule } from '@angular/material/tabs';
@ -15,6 +17,7 @@ import { COMPONENTS } from './components';
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
MatIconModule,
MatMenuModule,
MatTabsModule,

9
projects/ucap-webmessenger-app/src/app/pages/account/account.page.module.ts
View File

@ -1,6 +1,8 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { UCapUiAccountModule } from '@ucap-webmessenger/ui-account';
import { AppAccountRoutingPageModule } from './account-routing.page.module';
@ -8,7 +10,12 @@ import { AppAccountRoutingPageModule } from './account-routing.page.module';
import { COMPONENTS } from './components';
@NgModule({
imports: [CommonModule, UCapUiAccountModule, AppAccountRoutingPageModule],
imports: [
CommonModule,
FlexLayoutModule,
UCapUiAccountModule,
AppAccountRoutingPageModule
],
declarations: [...COMPONENTS],
entryComponents: []
})

6
projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.html
View File

@ -1,7 +1,7 @@
<div id="login" fxLayout="column">
<div id="login-wrapper" fxLayout="column" fxLayoutAlign="center center">
<div class="login" fxLayout="column">
<div class="login-wrapper" fxLayout="column" fxLayoutAlign="center center">
<ucap-account-login
[companies]="companies"
[companyList]="companyList$ | async"
(login)="onLogin($event)"
></ucap-account-login>
</div>

4
projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.scss
View File

@ -1,8 +1,8 @@
#login {
.login {
width: 100%;
background-size: cover;
#login-wrapper {
.login-wrapper {
flex: 1 0 auto;
padding: 32px;
}

40
projects/ucap-webmessenger-app/src/app/pages/account/components/login.page.component.ts
View File

@ -1,16 +1,13 @@
import { Component, OnInit } from '@angular/core';
import { take, map } from 'rxjs/operators';
import { Store, select } from '@ngrx/store';
import { Store } from '@ngrx/store';
import { Company } from '@ucap-webmessenger/api-external';
import {
ExternalApiService,
CompanyListResponse,
Company
} from '@ucap-webmessenger/api-external';
import * as AuthenticationStore from '../../../store/account/authentication';
import * as AppStore from '@app/store';
import * as AuthenticationStore from '@app/store/account/authentication';
import * as CompanyStore from '@app/store/setting/company';
import { Observable } from 'rxjs';
@Component({
selector: 'app-page-account-login',
@ -18,23 +15,20 @@ import * as AuthenticationStore from '../../../store/account/authentication';
styleUrls: ['./login.page.component.scss']
})
export class LoginPageComponent implements OnInit {
companies: Company[];
companyList$: Observable<Company[]>;
constructor(
private externalApiService: ExternalApiService,
private store: Store<any>
) {}
constructor(private store: Store<any>) {}
ngOnInit(): void {
this.externalApiService
.companyList({ companyGroupCode: 'LG' })
.pipe(
take(1),
map((res: CompanyListResponse) => {
this.companies = res.companyList;
})
)
.subscribe();
this.store.dispatch(
CompanyStore.companyList({
companyGroupCode: 'LG'
})
);
this.companyList$ = this.store.pipe(
select(AppStore.SettingSelector.CompanySelector.companyList)
);
}
onLogin(value: {

38
projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.html
View File

@ -1,28 +1,16 @@
<div class="container">
<!-- TOP BACKGROUND -->
<div></div>
<!-- / TOP BACKGROUND -->
<!-- CENTER -->
<div>
<!-- CONTENT CARD -->
<div>
<div class="left-side">
<app-layout-messenger-left-side></app-layout-messenger-left-side>
</div>
<div>
<app-layout-messenger-intro
*ngIf="!selectedChat"
></app-layout-messenger-intro>
<app-layout-messenger-messages
*ngIf="selectedChat"
></app-layout-messenger-messages>
</div>
<div class="right-side">
<app-layout-messenger-right-side></app-layout-messenger-right-side>
</div>
</div>
<!-- / CONTENT CARD -->
<div class="left-side">
<app-layout-messenger-left-side></app-layout-messenger-left-side>
</div>
<div class="contents">
<app-layout-messenger-intro
*ngIf="!selectedChat"
></app-layout-messenger-intro>
<app-layout-messenger-messages
*ngIf="selectedChat"
></app-layout-messenger-messages>
</div>
<div class="right-side">
<app-layout-messenger-right-side></app-layout-messenger-right-side>
</div>
<!-- / CENTER -->
</div>

25
projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss
View File

@ -1,12 +1,19 @@
.container {
width: 100%;
height: auto !important;
}
height: 100%;
.left-side {
width: 300px;
}
.right-side {
width: 70px;
.left-side {
float: left;
width: 300px;
height: 100%;
}
.contents {
float: left;
width: calc(100% - 360px);
height: 100%;
}
.right-side {
float: left;
width: 60px;
height: 100%;
}
}

3
projects/ucap-webmessenger-app/src/app/pages/messenger/messenger.page.module.ts
View File

@ -1,6 +1,8 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MatSidenavModule } from '@angular/material/sidenav';
import { AppMessengerLayoutModule } from '@app/layouts/messenger/messenger.layout.module';
@ -12,6 +14,7 @@ import { COMPONENTS } from './components';
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
MatSidenavModule,
AppMessengerLayoutModule,
AppMessengerRoutingPageModule

21
projects/ucap-webmessenger-app/src/app/store/setting/company/actions.ts Normal file
View File

@ -0,0 +1,21 @@
import { createAction, props } from '@ngrx/store';
import {
CompanyListRequest,
CompanyListResponse
} from '@ucap-webmessenger/api-external';
export const companyList = createAction(
'[Setting::Company] companyList',
props<CompanyListRequest>()
);
export const companyListSuccess = createAction(
'[Setting::Company] companyList Success',
props<CompanyListResponse>()
);
export const companyListFailure = createAction(
'[Setting::Company] companyList Failure',
props<{ error: any }>()
);

41
projects/ucap-webmessenger-app/src/app/store/setting/company/effects.ts Normal file
View File

@ -0,0 +1,41 @@
import { Injectable } from '@angular/core';
import { Actions, ofType, createEffect } from '@ngrx/effects';
import { of } from 'rxjs';
import { catchError, exhaustMap, map, tap } from 'rxjs/operators';
import { StatusCode } from '@ucap-webmessenger/api';
import { NGXLogger } from 'ngx-logger';
import { companyList, companyListSuccess, companyListFailure } from './actions';
import { ExternalApiService } from '@ucap-webmessenger/api-external';
@Injectable()
export class Effects {
fetch$ = createEffect(() =>
this.actions$.pipe(
ofType(companyList),
map(action => action),
exhaustMap(req =>
this.externalApiService.companyList(req).pipe(
map(res => {
if (res.statusCode === StatusCode.Success) {
return companyListSuccess(res);
} else {
return companyListFailure({ error: 'Failed' });
}
}),
catchError(error => of(companyListFailure({ error })))
)
)
)
);
constructor(
private actions$: Actions,
private externalApiService: ExternalApiService,
private logger: NGXLogger
) {}
}

4
projects/ucap-webmessenger-app/src/app/store/setting/company/index.ts Normal file
View File

@ -0,0 +1,4 @@
export * from './actions';
export * from './effects';
export * from './reducers';
export * from './state';

13
projects/ucap-webmessenger-app/src/app/store/setting/company/reducers.ts Normal file
View File

@ -0,0 +1,13 @@
import { createReducer, on } from '@ngrx/store';
import { initialState } from './state';
import { companyListSuccess } from './actions';
export const reducer = createReducer(
initialState,
on(companyListSuccess, (state, action) => {
return {
...state,
companyList: action.companyList
};
})
);

19
projects/ucap-webmessenger-app/src/app/store/setting/company/state.ts Normal file
View File

@ -0,0 +1,19 @@
import { Selector, createSelector } from '@ngrx/store';
import { Company } from '@ucap-webmessenger/api-external';
export interface State {
companyList: Company[] | null;
}
export const initialState: State = {
companyList: null
};
export function selectors<S>(selector: Selector<any, State>) {
return {
companyList: createSelector(
selector,
(state: State) => state.companyList
)
};
}

10
projects/ucap-webmessenger-app/src/app/store/setting/index.ts
View File

@ -1,12 +1,14 @@
import { Type } from '@angular/core';
import { Action, combineReducers, Selector, createSelector } from '@ngrx/store';
import * as CompanyStore from './company';
import * as InitStore from './init';
import * as OptionStore from './option';
import * as QueryStore from './query';
import * as VersionInfoStore from './version-info';
export interface State {
company: CompanyStore.State;
init: InitStore.State;
option: OptionStore.State;
query: QueryStore.State;
@ -14,6 +16,7 @@ export interface State {
}
export const effects: Type<any>[] = [
CompanyStore.Effects,
InitStore.Effects,
OptionStore.Effects,
QueryStore.Effects,
@ -22,6 +25,7 @@ export const effects: Type<any>[] = [
export function reducers(state: State | undefined, action: Action) {
return combineReducers({
company: CompanyStore.reducer,
init: InitStore.reducer,
option: OptionStore.reducer,
query: QueryStore.reducer,
@ -31,6 +35,12 @@ export function reducers(state: State | undefined, action: Action) {
export function selectors<S>(selector: Selector<any, State>) {
return {
CompanySelector: CompanyStore.selectors(
createSelector(
selector,
(state: State) => state.company
)
),
InitSelector: InitStore.selectors(
createSelector(
selector,

2
projects/ucap-webmessenger-ui-account/src/lib/components/login.component.html
View File

@ -6,7 +6,7 @@
<mat-label>Company</mat-label>
<mat-select formControlName="companyCode" required>
<mat-option
*ngFor="let company of companies"
*ngFor="let company of companyList"
[value]="company.companyCode"
>{{ company.companyName }}</mat-option
>

2
projects/ucap-webmessenger-ui-account/src/lib/components/login.component.ts
View File

@ -17,7 +17,7 @@ import { Company } from '@ucap-webmessenger/api-external';
})
export class LoginComponent implements OnInit {
@Input()
companies?: Company[];
companyList?: Company[];
@Output()
login = new EventEmitter<{

2
projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html
View File

@ -1,5 +1,5 @@
<div
class="chat-form"
class="container"
fxFlex="0 0 auto"
fxLayout="row"
fxLayoutAlign="center center"

43
projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss
View File

@ -1,39 +1,6 @@
.chat-form {
position: relative;
.message-text {
padding: 16px 8px;
.mat-form-field-wrapper {
padding: 0;
.mat-form-field-flex {
padding: 0;
.mat-form-field-infix {
padding: 0;
border: none;
border-radius: 20px;
border: 1px solid;
textarea {
overflow: hidden;
margin: 16px 48px 16px 16px;
width: calc(100% - 64px);
padding: 0;
}
}
}
.mat-form-field-underline {
display: none !important;
}
}
}
.send-message-button {
position: absolute;
right: 16px;
bottom: 21px;
}
.container {
display: flex;
width: 100%;
height: 100%;
flex: 1;
}