left section conversion to drawer
This commit is contained in:
leejinho
parent
d00d4d4a54
commit
acd8abed09
|
|
@ -1,4 +1,5 @@
|
|||
import { IntroComponent } from './intro.component';
|
||||
import { LeftNaviComponent } from './left-nav.component';
|
||||
import { LeftSideComponent } from './left-side.component';
|
||||
import { MessagesComponent } from './messages.component';
|
||||
import { RightSideComponent } from './right-side.component';
|
||||
|
|
@ -9,6 +10,7 @@ import { RIGHT_DRAWER_COMPONENTS } from './right-drawer';
|
|||
|
||||
export const COMPONENTS = [
|
||||
IntroComponent,
|
||||
LeftNaviComponent,
|
||||
LeftSideComponent,
|
||||
MessagesComponent,
|
||||
RightSideComponent,
|
||||
|
|
|
|||
|
|
@ -0,0 +1,127 @@
|
|||
<div class="container">
|
||||
<mat-tab-group
|
||||
mat-stretch-tabs
|
||||
animationDuration="0ms"
|
||||
(selectedTabChange)="onSelectedTabChange($event)"
|
||||
class="global-menu"
|
||||
>
|
||||
<mat-tab [aria-label]="MainMenu.Group">
|
||||
<ng-template mat-tab-label>
|
||||
<!--<mat-icon>group</mat-icon>-->
|
||||
<div
|
||||
class="icon-item"
|
||||
matTooltip="{{ 'group.label' | translate }}"
|
||||
matTooltipPosition="after"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab [aria-label]="MainMenu.Chat">
|
||||
<ng-template mat-tab-label>
|
||||
<div
|
||||
class="icon-item"
|
||||
[matBadgeHidden]="badgeChatUnReadCount <= 0"
|
||||
[matBadge]="badgeChatUnReadCount"
|
||||
matBadgeDescription="{{
|
||||
'chat.badgeDescriptionForUnread' | translate
|
||||
}}"
|
||||
matBadgeColor="accent"
|
||||
matBadgePosition="above after"
|
||||
matTooltip="{{ 'chat.label' | translate }}"
|
||||
matTooltipPosition="after"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="bevel"
|
||||
>
|
||||
<path
|
||||
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab [aria-label]="MainMenu.Organization">
|
||||
<ng-template mat-tab-label>
|
||||
<div
|
||||
class="icon-item"
|
||||
matTooltip="{{ 'organization.chart' | translate }}"
|
||||
matTooltipPosition="after"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="bevel"
|
||||
>
|
||||
<circle class="st0" cx="18.4" cy="18.5" r="3" />
|
||||
<circle class="st0" cx="12" cy="5" r="3" />
|
||||
<path class="st0" d="M12.4,10.5h4c1.1,0,2,0.9,2,2v3" />
|
||||
<circle class="st0" cx="6.1" cy="18.5" r="3" />
|
||||
<path class="st0" d="M6.1,15.5v-3c0-1.1,0.9-2,2-2h4" />
|
||||
<line class="st0" x1="12" y1="8" x2="12" y2="9" />
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab [aria-label]="MainMenu.Message">
|
||||
<ng-template mat-tab-label>
|
||||
<div
|
||||
class="icon-item"
|
||||
[matBadgeHidden]="(badgeMessageUnReadCount$ | async) <= 0"
|
||||
[matBadge]="badgeMessageUnReadCount$ | async"
|
||||
matBadgeDescription="{{
|
||||
'message.badgeDescriptionForUnread' | translate
|
||||
}}"
|
||||
matBadgeColor="accent"
|
||||
matBadgePosition="above after"
|
||||
matTooltip="{{ 'message.label' | translate }}"
|
||||
matTooltipPosition="after"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="bevel"
|
||||
>
|
||||
<polygon
|
||||
points="21.368 12.001 3 21.609 3 14 11 12 3 9.794 3 2.394"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
</mat-tab-group>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
::ng-deep .mat-tab-label,
|
||||
::ng-deep .mat-tab-label-active {
|
||||
min-width: 0 !important;
|
||||
}
|
||||
|
||||
::ng-deep .mat-tab-body-wrapper,
|
||||
::ng-deep .mat-tab-body {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
::ng-deep .mat-tab-header {
|
||||
border-bottom: none !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.left-side-tabs-body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
div[id^='tabs'] {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.mat-tab-group {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.myprofile {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
height: 80px;
|
||||
width: 68px;
|
||||
bottom: 10px;
|
||||
color: #ffffff;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
z-index: 1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
::ng-deep .organization-side {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
::ng-deep .global-menu {
|
||||
.mat-tab-label-container {
|
||||
.mat-tab-list {
|
||||
.mat-tab-labels {
|
||||
flex-flow: column;
|
||||
height: 360px;
|
||||
padding-top: 10px;
|
||||
border-bottom: none;
|
||||
.mat-tab-label {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.mat-ink-bar {
|
||||
background-color: none;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.left-group-side {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::ng-deep .mat-tab-label {
|
||||
.mat-tab-label-content {
|
||||
.icon-item {
|
||||
background: var(--white);
|
||||
border-radius: 4px;
|
||||
display: inline-flex;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0, 1);
|
||||
|
||||
svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
stroke: #ffffff;
|
||||
stroke-width: 1.5;
|
||||
stroke-linecap: square;
|
||||
stroke-linejoin: miter;
|
||||
fill: none;
|
||||
}
|
||||
.mat-badge-content {
|
||||
right: -4px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
&[aria-selected='true'] {
|
||||
opacity: 1;
|
||||
.mat-tab-label-content {
|
||||
.icon-item {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .ps {
|
||||
.ps-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { LeftNaviComponent } from './left-nav.component';
|
||||
|
||||
describe('App::Layout::Messenger::LeftNaviComponent', () => {
|
||||
let component: LeftNaviComponent;
|
||||
let fixture: ComponentFixture<LeftNaviComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [LeftNaviComponent]
|
||||
}).compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(LeftNaviComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,116 @@
|
|||
import { UserSelectDialogType } from '../../../types/userselect.dialog.type';
|
||||
import {
|
||||
Component,
|
||||
OnInit,
|
||||
Output,
|
||||
EventEmitter,
|
||||
ViewChildren,
|
||||
QueryList,
|
||||
ElementRef,
|
||||
OnDestroy,
|
||||
ViewChild
|
||||
} from '@angular/core';
|
||||
import { NGXLogger } from 'ngx-logger';
|
||||
import { ucapAnimations, DialogService } from '@ucap-webmessenger/ui';
|
||||
import {
|
||||
CreateChatDialogComponent,
|
||||
CreateChatDialogData,
|
||||
CreateChatDialogResult
|
||||
} from '@app/layouts/messenger/dialogs/chat/create-chat.dialog.component';
|
||||
import { Subscription, Observable, merge } from 'rxjs';
|
||||
import { Store, select } from '@ngrx/store';
|
||||
|
||||
import * as AppStore from '@app/store';
|
||||
import * as ChatStore from '@app/store/messenger/chat';
|
||||
import * as MessageStore from '@app/store/messenger/message';
|
||||
import * as SyncStore from '@app/store/messenger/sync';
|
||||
import * as SettingsStore from '@app/store/messenger/settings';
|
||||
import { UserInfo } from '@ucap-webmessenger/protocol-sync';
|
||||
import {
|
||||
UserInfoSS,
|
||||
UserInfoF,
|
||||
UserInfoDN
|
||||
} from '@ucap-webmessenger/protocol-query';
|
||||
import { MatTabChangeEvent } from '@angular/material';
|
||||
import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
|
||||
import { OpenProfileOptions } from '@ucap-webmessenger/protocol-buddy';
|
||||
import { SessionStorageService } from '@ucap-webmessenger/web-storage';
|
||||
import { VersionInfo2Response } from '@ucap-webmessenger/api-public';
|
||||
import { MessageType } from '@ucap-webmessenger/api-message';
|
||||
import { tap } from 'rxjs/operators';
|
||||
import {
|
||||
MessageWriteDialogComponent,
|
||||
MessageWriteDialogResult,
|
||||
MessageWriteDialogData
|
||||
} from '../dialogs/message/message-write.dialog.component';
|
||||
import {
|
||||
EnvironmentsInfo,
|
||||
KEY_ENVIRONMENTS_INFO,
|
||||
KEY_VER_INFO,
|
||||
MainMenu
|
||||
} from '@app/types';
|
||||
import { MessageBoxComponent } from './left-sidenav/message.component';
|
||||
import { environment } from '../../../../environments/environment';
|
||||
import { TranslateService } from '@ngx-translate/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout-messenger-left-nav',
|
||||
templateUrl: './left-nav.component.html',
|
||||
styleUrls: ['./left-nav.component.scss'],
|
||||
animations: ucapAnimations
|
||||
})
|
||||
export class LeftNaviComponent implements OnInit, OnDestroy {
|
||||
badgeChatUnReadCount: number;
|
||||
badgeChatUnReadCountSubscription: Subscription;
|
||||
badgeMessageUnReadCount$: Observable<number>;
|
||||
badgeMessageInterval: any;
|
||||
|
||||
MainMenu = MainMenu;
|
||||
|
||||
constructor(private store: Store<any>, private logger: NGXLogger) {}
|
||||
|
||||
ngOnInit() {
|
||||
this.badgeChatUnReadCountSubscription = this.store
|
||||
.pipe(
|
||||
select(AppStore.MessengerSelector.SyncSelector.selectChatUnreadCount)
|
||||
)
|
||||
.subscribe(count => {
|
||||
this.badgeChatUnReadCount = count;
|
||||
});
|
||||
|
||||
/** About Message Badge */
|
||||
this.badgeMessageUnReadCount$ = this.store.pipe(
|
||||
select(AppStore.MessengerSelector.MessageSelector.unReadMessageCount)
|
||||
);
|
||||
|
||||
this.getMessageUnreadCount();
|
||||
this.badgeMessageInterval = setInterval(
|
||||
() => this.getMessageUnreadCount(),
|
||||
5 * 60 * 1000
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.badgeChatUnReadCountSubscription) {
|
||||
this.badgeChatUnReadCountSubscription.unsubscribe();
|
||||
}
|
||||
|
||||
if (!!this.badgeMessageInterval) {
|
||||
clearInterval(this.badgeMessageInterval);
|
||||
}
|
||||
|
||||
this.logger.debug('-----------------------LeftNaviComponent ngOnDestroy');
|
||||
}
|
||||
|
||||
onSelectedTabChange(event: MatTabChangeEvent) {
|
||||
this.store.dispatch(
|
||||
SettingsStore.selectedGnbMenuIndex({
|
||||
menuIndex: event.tab.ariaLabel as MainMenu
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
getMessageUnreadCount(): void {
|
||||
this.store.dispatch(MessageStore.retrieveUnreadCount({}));
|
||||
}
|
||||
}
|
||||
|
|
@ -1,167 +1,9 @@
|
|||
<div class="container">
|
||||
<mat-tab-group
|
||||
mat-stretch-tabs
|
||||
animationDuration="0ms"
|
||||
(selectedTabChange)="onSelectedTabChange($event)"
|
||||
class="global-menu"
|
||||
>
|
||||
<mat-tab [aria-label]="MainMenu.Group">
|
||||
<ng-template mat-tab-label>
|
||||
<!--<mat-icon>group</mat-icon>-->
|
||||
<div
|
||||
class="icon-item"
|
||||
matTooltip="{{ 'group.label' | translate }}"
|
||||
matTooltipPosition="after"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||||
<circle cx="12" cy="7" r="4"></circle>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab [aria-label]="MainMenu.Chat">
|
||||
<ng-template mat-tab-label>
|
||||
<div
|
||||
class="icon-item"
|
||||
[matBadgeHidden]="badgeChatUnReadCount <= 0"
|
||||
[matBadge]="badgeChatUnReadCount"
|
||||
matBadgeDescription="{{
|
||||
'chat.badgeDescriptionForUnread' | translate
|
||||
}}"
|
||||
matBadgeColor="accent"
|
||||
matBadgePosition="above after"
|
||||
matTooltip="{{ 'chat.label' | translate }}"
|
||||
matTooltipPosition="after"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="bevel"
|
||||
>
|
||||
<path
|
||||
d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab [aria-label]="MainMenu.Organization">
|
||||
<ng-template mat-tab-label>
|
||||
<!--<mat-icon>device_hub</mat-icon>-->
|
||||
<div
|
||||
class="icon-item"
|
||||
matTooltip="{{ 'organization.chart' | translate }}"
|
||||
matTooltipPosition="after"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="bevel"
|
||||
>
|
||||
<circle class="st0" cx="18.4" cy="18.5" r="3" />
|
||||
<circle class="st0" cx="12" cy="5" r="3" />
|
||||
<path class="st0" d="M12.4,10.5h4c1.1,0,2,0.9,2,2v3" />
|
||||
<circle class="st0" cx="6.1" cy="18.5" r="3" />
|
||||
<path class="st0" d="M6.1,15.5v-3c0-1.1,0.9-2,2-2h4" />
|
||||
<line class="st0" x1="12" y1="8" x2="12" y2="9" />
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
|
||||
<mat-tab [aria-label]="MainMenu.Message">
|
||||
<ng-template mat-tab-label>
|
||||
<!--<mat-icon>device_hub</mat-icon>-->
|
||||
<div
|
||||
class="icon-item"
|
||||
[matBadgeHidden]="(badgeMessageUnReadCount$ | async) <= 0"
|
||||
[matBadge]="badgeMessageUnReadCount$ | async"
|
||||
matBadgeDescription="{{
|
||||
'message.badgeDescriptionForUnread' | translate
|
||||
}}"
|
||||
matBadgeColor="accent"
|
||||
matBadgePosition="above after"
|
||||
matTooltip="{{ 'message.label' | translate }}"
|
||||
matTooltipPosition="after"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="#000000"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="bevel"
|
||||
>
|
||||
<polygon
|
||||
points="21.368 12.001 3 21.609 3 14 11 12 3 9.794 3 2.394"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
|
||||
<!-- <mat-tab [aria-label]="MainMenu.Call">
|
||||
<ng-template mat-tab-label>
|
||||
<div class="icon-item" matTooltip="Call" matTooltipPosition="after">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="24"
|
||||
height="24"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
class="feather feather-phone"
|
||||
>
|
||||
<path
|
||||
class="st0"
|
||||
d="M2,5.8c0.1-0.6,0.3-1.1,0.7-1.6l1.7-1.7C4.7,2.2,5,2.1,5.3,2.1c0.3,0,0.6,0.1,0.8,0.4c0.3,0.3,0.6,0.6,0.9,0.9
|
||||
c0.2,0.2,0.3,0.3,0.5,0.5l1.4,1.4c0.3,0.3,0.4,0.6,0.4,0.9S9.2,6.7,8.9,7C8.8,7.2,8.6,7.3,8.5,7.5C8.1,7.9,7.7,8.3,7.2,8.7
|
||||
c0,0,0,0,0,0C6.8,9.1,6.9,9.5,7,9.7c0,0,0,0,0,0c0.4,0.9,0.9,1.7,1.6,2.6c1.4,1.7,2.9,3,4.5,4.1c0.2,0.1,0.4,0.2,0.6,0.3
|
||||
c0.2,0.1,0.4,0.2,0.5,0.3c0,0,0,0,0.1,0c0.2,0.1,0.3,0.1,0.4,0.1c0.4,0,0.6-0.2,0.7-0.3l1.7-1.7c0.3-0.3,0.6-0.4,0.8-0.4
|
||||
c0.4,0,0.6,0.2,0.8,0.4l2.8,2.8c0.6,0.6,0.6,1.2,0,1.7c-0.2,0.2-0.4,0.4-0.6,0.6c-0.3,0.3-0.7,0.6-1,1c-0.5,0.6-1.2,0.8-2,0.8
|
||||
c-0.1,0-0.2,0-0.2,0c-1.5-0.1-2.9-0.7-4-1.2c-2.9-1.4-5.4-3.4-7.5-5.9C4.5,13,3.3,11.1,2.6,9C2.1,7.7,1.9,6.7,2,5.8z"
|
||||
></path>
|
||||
</svg>
|
||||
</div>
|
||||
</ng-template>
|
||||
</mat-tab> -->
|
||||
</mat-tab-group>
|
||||
|
||||
<div class="left-side-tabs-body">
|
||||
<div
|
||||
#tabs
|
||||
id="tabs-0"
|
||||
class="left-side-tabs-contents"
|
||||
style="display: block;"
|
||||
[style.display]="MainMenu.Group === currentTabLable ? 'block' : 'none'"
|
||||
>
|
||||
<app-layout-chat-left-sidenav-group
|
||||
class="left-group-side"
|
||||
|
|
@ -171,19 +13,17 @@
|
|||
</div>
|
||||
<div
|
||||
#tabs
|
||||
id="tabs-1"
|
||||
class="left-side-tabs-contents"
|
||||
style="display: none;"
|
||||
[style.display]="MainMenu.Chat === currentTabLable ? 'block' : 'none'"
|
||||
>
|
||||
<app-layout-chat-left-sidenav-chat
|
||||
[isVisible]="currentTabLable === MainMenu.Chat"
|
||||
></app-layout-chat-left-sidenav-chat>
|
||||
<app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
|
||||
</div>
|
||||
<div
|
||||
#tabs
|
||||
id="tabs-2"
|
||||
class="left-side-tabs-contents"
|
||||
style="display: none;"
|
||||
[style.display]="
|
||||
MainMenu.Organization === currentTabLable ? 'block' : 'none'
|
||||
"
|
||||
>
|
||||
<app-layout-chat-left-sidenav-organization
|
||||
[selectedUserList]="selectedUserList"
|
||||
|
|
@ -200,9 +40,8 @@
|
|||
</div>
|
||||
<div
|
||||
#tabs
|
||||
id="tabs-3"
|
||||
class="left-side-tabs-contents"
|
||||
style="display: none;"
|
||||
[style.display]="MainMenu.Message === currentTabLable ? 'block' : 'none'"
|
||||
>
|
||||
<app-layout-chat-left-sidenav-message
|
||||
#messageBoxComponent
|
||||
|
|
@ -212,9 +51,8 @@
|
|||
</div>
|
||||
<div
|
||||
#tabs
|
||||
id="tabs-4"
|
||||
class="left-side-tabs-contents"
|
||||
style="display: none;"
|
||||
[style.display]="MainMenu.Call === currentTabLable ? 'block' : 'none'"
|
||||
>
|
||||
<app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
.left-side-tabs-body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
div[id^='tabs'] {
|
||||
div.left-side-tabs-contents {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
|
|
@ -25,6 +25,7 @@
|
|||
|
||||
.container {
|
||||
display: flex;
|
||||
width: 250px;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -45,21 +45,13 @@ import {
|
|||
import {
|
||||
EnvironmentsInfo,
|
||||
KEY_ENVIRONMENTS_INFO,
|
||||
KEY_VER_INFO
|
||||
KEY_VER_INFO,
|
||||
MainMenu
|
||||
} from '@app/types';
|
||||
import { MessageBoxComponent } from './left-sidenav/message.component';
|
||||
import { environment } from '../../../../environments/environment';
|
||||
import { TranslateService, LangChangeEvent } from '@ngx-translate/core';
|
||||
|
||||
export enum MainMenu {
|
||||
Group = 'GROUP',
|
||||
Chat = 'CAHT',
|
||||
Organization = 'ORGANIZATION',
|
||||
Message = 'MESSAGE',
|
||||
Call = 'CALL',
|
||||
Conversation = 'CONVERSATION'
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout-messenger-left-side',
|
||||
templateUrl: './left-side.component.html',
|
||||
|
|
@ -159,6 +151,16 @@ export class LeftSideComponent implements OnInit, OnDestroy {
|
|||
).subscribe(() => {
|
||||
this.setFabInitial(this.currentTabLable);
|
||||
});
|
||||
|
||||
this.loginResSubscription = this.store
|
||||
.pipe(
|
||||
select(AppStore.MessengerSelector.SettingsSelector.gnbMenuIndex),
|
||||
tap(menuIndex => {
|
||||
this.currentTabLable = menuIndex;
|
||||
this.setFabInitial(menuIndex);
|
||||
})
|
||||
)
|
||||
.subscribe();
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
|
|
@ -295,19 +297,6 @@ export class LeftSideComponent implements OnInit, OnDestroy {
|
|||
this.sendSms.emit(calleeNumber);
|
||||
}
|
||||
|
||||
onSelectedTabChange(event: MatTabChangeEvent) {
|
||||
this.setFabInitial(event.tab.ariaLabel);
|
||||
this.currentTabLable = event.tab.ariaLabel;
|
||||
|
||||
this.tabs.forEach(tab => {
|
||||
if (`tabs-${event.index}` === tab.nativeElement.id) {
|
||||
tab.nativeElement.style.display = 'block';
|
||||
} else {
|
||||
tab.nativeElement.style.display = 'none';
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
setFabInitial(type: string) {
|
||||
switch (type) {
|
||||
case MainMenu.Group:
|
||||
|
|
|
|||
|
|
@ -1,62 +1,44 @@
|
|||
<div class="main-container">
|
||||
<as-split
|
||||
unit="pixel"
|
||||
gutterSize="5"
|
||||
useTransition="true"
|
||||
gutterDblClickDuration="300"
|
||||
(dragEnd)="onGutterDragEnd($event)"
|
||||
(gutterDblClick)="onGutterDblClick($event)"
|
||||
>
|
||||
<as-split-area
|
||||
#asSplitLeft
|
||||
[size]="leftSideComponentWidth"
|
||||
minSize="300"
|
||||
maxSize="500"
|
||||
class="split-area"
|
||||
<div class="left-side">
|
||||
<app-layout-messenger-left-nav> </app-layout-messenger-left-nav>
|
||||
</div>
|
||||
|
||||
<mat-drawer-container class="contents" autosize>
|
||||
<mat-drawer #drawer mode="side" opened>
|
||||
<app-layout-messenger-left-side
|
||||
(openProfile)="onClickOpenProfile($event)"
|
||||
(sendCall)="sendClickToCall($event)"
|
||||
(sendSms)="openSms($event)"
|
||||
></app-layout-messenger-left-side>
|
||||
</mat-drawer>
|
||||
<div class="chat-messages">
|
||||
<app-layout-messenger-intro
|
||||
*ngIf="!(this.selectedChat$ | async)"
|
||||
></app-layout-messenger-intro>
|
||||
<!-- <app-layout-messenger-intro
|
||||
*ngIf="!(this.selectedChat$ | async)"
|
||||
></app-layout-messenger-intro> -->
|
||||
<app-layout-messenger-messages
|
||||
*ngIf="!!(this.selectedChat$ | async)"
|
||||
(openProfile)="onClickOpenProfile($event)"
|
||||
(closeRightDrawer)="onCloseRightDrawer()"
|
||||
></app-layout-messenger-messages>
|
||||
</div>
|
||||
<mat-drawer
|
||||
#rightDrawer
|
||||
mode="side"
|
||||
position="end"
|
||||
(openedChange)="onOpenedChange($event)"
|
||||
class="rightDrawer"
|
||||
>
|
||||
<div class="left-side">
|
||||
<app-layout-messenger-left-side
|
||||
(openProfile)="onClickOpenProfile($event)"
|
||||
(sendCall)="sendClickToCall($event)"
|
||||
(sendSms)="openSms($event)"
|
||||
></app-layout-messenger-left-side>
|
||||
</div>
|
||||
</as-split-area>
|
||||
<as-split-area size="*">
|
||||
<mat-drawer-container class="contents" autosize>
|
||||
<!-- <mat-drawer #drawer mode="over">
|
||||
<p>Auto-resizing sidenav</p>
|
||||
</mat-drawer> -->
|
||||
<div class="chat-messages">
|
||||
<app-layout-messenger-intro
|
||||
*ngIf="!(this.selectedChat$ | async)"
|
||||
></app-layout-messenger-intro>
|
||||
<!-- <app-layout-messenger-intro
|
||||
*ngIf="!(this.selectedChat$ | async)"
|
||||
></app-layout-messenger-intro> -->
|
||||
<app-layout-messenger-messages
|
||||
*ngIf="!!(this.selectedChat$ | async)"
|
||||
(openProfile)="onClickOpenProfile($event)"
|
||||
(closeRightDrawer)="onCloseRightDrawer()"
|
||||
></app-layout-messenger-messages>
|
||||
</div>
|
||||
<mat-drawer
|
||||
#rightDrawer
|
||||
mode="side"
|
||||
position="end"
|
||||
(openedChange)="onOpenedChange($event)"
|
||||
class="rightDrawer"
|
||||
>
|
||||
<app-layout-messenger-right-drawer
|
||||
[selectedRightDrawer]="selectedRightDrawer$ | async"
|
||||
(openProfile)="onClickOpenProfile($event)"
|
||||
(closeRightDrawer)="onCloseRightDrawer()"
|
||||
>
|
||||
</app-layout-messenger-right-drawer>
|
||||
</mat-drawer>
|
||||
</mat-drawer-container>
|
||||
</as-split-area>
|
||||
</as-split>
|
||||
<app-layout-messenger-right-drawer
|
||||
[selectedRightDrawer]="selectedRightDrawer$ | async"
|
||||
(openProfile)="onClickOpenProfile($event)"
|
||||
(closeRightDrawer)="onCloseRightDrawer()"
|
||||
>
|
||||
</app-layout-messenger-right-drawer>
|
||||
</mat-drawer>
|
||||
</mat-drawer-container>
|
||||
|
||||
<!-- <div class="right-side">
|
||||
<app-layout-messenger-right-side></app-layout-messenger-right-side>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
import { createAction, props } from '@ngrx/store';
|
||||
import { MainMenu } from '@app/types';
|
||||
|
||||
export const showDialog = createAction('[Messenger::Settings] Show Dialog');
|
||||
|
||||
export const selectedGnbMenuIndex = createAction(
|
||||
'[Messenger::Settings] select Gnb MenuIndex',
|
||||
props<{ menuIndex: MainMenu }>()
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,4 +1,21 @@
|
|||
import { createReducer } from '@ngrx/store';
|
||||
import { createReducer, on } from '@ngrx/store';
|
||||
import { initialState } from './state';
|
||||
import { selectedGnbMenuIndex } from './actions';
|
||||
|
||||
export const reducer = createReducer(initialState);
|
||||
import * as AuthenticationStore from '@app/store/account/authentication';
|
||||
|
||||
export const reducer = createReducer(
|
||||
initialState,
|
||||
on(selectedGnbMenuIndex, (state, action) => {
|
||||
return {
|
||||
...state,
|
||||
gnbMenuIndex: action.menuIndex
|
||||
};
|
||||
}),
|
||||
|
||||
on(AuthenticationStore.logoutInitialize, (state, action) => {
|
||||
return {
|
||||
...initialState
|
||||
};
|
||||
})
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1,11 +1,18 @@
|
|||
import { Selector, createSelector } from '@ngrx/store';
|
||||
import { StatusBulkInfo } from '@ucap-webmessenger/protocol-status';
|
||||
import { EntityState, createEntityAdapter } from '@ngrx/entity';
|
||||
import { MainMenu } from '@app/types';
|
||||
|
||||
export interface State {}
|
||||
export interface State {
|
||||
gnbMenuIndex: MainMenu;
|
||||
}
|
||||
|
||||
export const initialState: State = {};
|
||||
export const initialState: State = {
|
||||
gnbMenuIndex: MainMenu.Group
|
||||
};
|
||||
|
||||
export function selectors<S>(selector: Selector<any, State>) {
|
||||
return {};
|
||||
return {
|
||||
gnbMenuIndex: createSelector(selector, (state: State) => state.gnbMenuIndex)
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ export * from './auth-info.type';
|
|||
export * from './environment.type';
|
||||
export * from './login-info.type';
|
||||
export * from './logout-info.type';
|
||||
export * from './main-menu.type';
|
||||
export * from './userselect.dialog.type';
|
||||
export * from './right-drawer.type';
|
||||
export * from './sticker-info.type';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
export enum MainMenu {
|
||||
Group = 'GROUP',
|
||||
Chat = 'CAHT',
|
||||
Organization = 'ORGANIZATION',
|
||||
Message = 'MESSAGE',
|
||||
Call = 'CALL',
|
||||
Conversation = 'CONVERSATION'
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user