next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.html

171 lines
5.8 KiB
HTML
Raw Normal View History

2019-09-26 05:38:21 +00:00
<div class="container">
<mat-tab-group
mat-stretch-tabs
animationDuration="0ms"
(selectedTabChange)="onSelectedTabChange($event)"
class="global-menu"
>
<mat-tab [aria-label]="MainMenu.Group">
2019-09-26 05:38:21 +00:00
<ng-template mat-tab-label>
2019-11-07 23:58:22 +00:00
<!--<mat-icon>group</mat-icon>-->
<div class="icon-item">
2019-11-12 09:54:21 +00:00
<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"
>
2019-11-07 23:58:22 +00:00
<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>
2019-09-26 05:38:21 +00:00
</ng-template>
</mat-tab>
<mat-tab [aria-label]="MainMenu.Chat">
2019-09-26 05:38:21 +00:00
<ng-template mat-tab-label>
2019-11-07 23:58:22 +00:00
<!--<mat-icon
2019-10-18 03:49:23 +00:00
[matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
[matBadge]="badgeChatUnReadCount$ | async"
matBadgeDescription="확인하지 않은 메시지가 있습니다."
matBadgeColor="accent"
matBadgePosition="above after"
>chat</mat-icon
2019-11-07 23:58:22 +00:00
>-->
2019-11-12 09:54:21 +00:00
<div
class="icon-item"
[matBadgeHidden]="(badgeChatUnReadCount$ | async) <= 0"
2019-11-07 23:58:22 +00:00
[matBadge]="badgeChatUnReadCount$ | async"
matBadgeDescription="확인하지 않은 메시지가 있습니다."
matBadgeColor="accent"
2019-11-12 09:54:21 +00:00
matBadgePosition="above 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"
>
2019-11-07 23:58:22 +00:00
<path
2019-11-12 09:54:21 +00:00
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>
2019-11-07 23:58:22 +00:00
</svg>
</div>
2019-09-26 05:38:21 +00:00
</ng-template>
</mat-tab>
<mat-tab [aria-label]="MainMenu.Organization">
2019-09-26 05:38:21 +00:00
<ng-template mat-tab-label>
2019-11-07 23:58:22 +00:00
<!--<mat-icon>device_hub</mat-icon>-->
<div class="icon-item">
2019-11-12 09:54:21 +00:00
<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"
>
2019-11-07 23:58:22 +00:00
<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>
2019-09-26 05:38:21 +00:00
</ng-template>
</mat-tab>
<mat-tab [aria-label]="MainMenu.Call">
2019-09-26 05:38:21 +00:00
<ng-template mat-tab-label>
2019-11-07 23:58:22 +00:00
<!--<mat-icon>phone</mat-icon>-->
<div class="icon-item">
2019-11-12 09:54:21 +00:00
<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"
2019-11-07 23:58:22 +00:00
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
2019-11-12 09:54:21 +00:00
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>
2019-11-07 23:58:22 +00:00
</svg>
</div>
2019-09-26 05:38:21 +00:00
</ng-template>
</mat-tab>
</mat-tab-group>
2019-11-15 04:20:01 +00:00
<div class="left-side-tabs-body">
2019-11-18 00:22:36 +00:00
<div
#tabs
id="tabs-0"
class="left-side-tabs-contents"
style="display: block;"
>
2019-11-15 04:20:01 +00:00
<app-layout-chat-left-sidenav-group
class="left-group-side"
(newGroupAndMember)="onClickNewGroupAndMember()"
(openProfile)="onClickOpenProfile($event)"
></app-layout-chat-left-sidenav-group>
</div>
2019-11-18 00:22:36 +00:00
<div
#tabs
id="tabs-1"
class="left-side-tabs-contents"
style="display: none;"
>
2019-11-15 04:20:01 +00:00
<app-layout-chat-left-sidenav-chat></app-layout-chat-left-sidenav-chat>
</div>
2019-11-18 00:22:36 +00:00
<div
#tabs
id="tabs-2"
class="left-side-tabs-contents"
style="display: none;"
>
2019-11-15 04:20:01 +00:00
<app-layout-chat-left-sidenav-organization
[selectedUserList]="selectedUserList"
(checkAllUser)="onCheckAllUser($event)"
(checkUser)="onCheckUser($event)"
class="organization-side"
></app-layout-chat-left-sidenav-organization>
</div>
2019-11-18 00:22:36 +00:00
<div
#tabs
id="tabs-3"
class="left-side-tabs-contents"
style="display: none;"
>
2019-11-15 04:20:01 +00:00
<app-layout-chat-left-sidenav-call></app-layout-chat-left-sidenav-call>
</div>
</div>
2019-11-05 04:45:30 +00:00
<ucap-float-action-button
*ngIf="fabButtonShow"
2019-10-30 09:18:35 +00:00
[fabButtons]="fabButtons"
(buttonClick)="onClickFab($event)"
2019-11-05 04:45:30 +00:00
></ucap-float-action-button>
2019-09-26 05:38:21 +00:00
</div>