Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger
This commit is contained in:
leejinho
commit
bde11c8711
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 551 B After Width: | Height: | Size: 503 B |
Binary file not shown.
|
Before Width: | Height: | Size: 9.9 KiB After Width: | Height: | Size: 6.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 886 B |
Binary file not shown.
|
Before Width: | Height: | Size: 1.5 KiB After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 551 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 999 B |
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
|
|
@ -103,28 +103,51 @@ body.theme-pink-dark {
|
|||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
// Define the primary, accent and warn palettes
|
||||
/*$pink-light-theme-primary-palette: mat-palette($mat-grey,800);
|
||||
$pink-light-theme-accent-palette: mat-palette($lg-red, 400);
|
||||
$pink-light-theme-warn-palette: mat-palette($mat-red);*/
|
||||
$lgRed-light-theme-primary-palette: mat-palette($mat-grey,800);
|
||||
$lgRed-light-theme-accent-palette: mat-palette($lg-red, 400);
|
||||
$lgRed-light-theme-warn-palette: mat-palette($mat-cyan);
|
||||
|
||||
$pink-light-theme-primary-palette: mat-palette($daesang-grey, 900);
|
||||
$pink-light-theme-accent-palette: mat-palette($daesang);
|
||||
$pink-light-theme-warn-palette: mat-palette($mat-orange);
|
||||
|
||||
// Create the Material theme object
|
||||
$pink-light-theme: mat-light-theme(
|
||||
$pink-light-theme-primary-palette,
|
||||
$pink-light-theme-accent-palette,
|
||||
$pink-light-theme-warn-palette
|
||||
$lgRed-light-theme: mat-light-theme(
|
||||
$lgRed-light-theme-primary-palette,
|
||||
$lgRed-light-theme-accent-palette,
|
||||
$lgRed-light-theme-warn-palette
|
||||
);
|
||||
|
||||
// Add ".theme-pink-dark" class to the body to activate this theme.
|
||||
// Class name must start with "theme-" !!!
|
||||
body.theme-lgRed{
|
||||
// Generate the Angular Material theme
|
||||
@include angular-material-theme($lgRed-light-theme);
|
||||
|
||||
// Apply the theme to the user components
|
||||
@include components-theme($lgRed-light-theme);
|
||||
@include ucap-material-theme($lgRed-light-theme);
|
||||
}
|
||||
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
//aqua-blue-daesang
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
$aquaBlue-light-theme-primary-palette: mat-palette($daesang-grey, 900);
|
||||
$aquaBlue-theme-accent-palette: mat-palette($aquaBlue-daesang);
|
||||
$aquaBlue-theme-warn-palette: mat-palette($mat-orange);
|
||||
|
||||
// Create the Material theme object
|
||||
$aquaBlue-light-theme: mat-light-theme(
|
||||
$aquaBlue-light-theme-primary-palette,
|
||||
$aquaBlue-theme-accent-palette,
|
||||
$aquaBlue-theme-warn-palette
|
||||
);
|
||||
|
||||
// Add ".theme-pink-dark" class to the body to activate this theme.
|
||||
// Class name must start with "theme-" !!!
|
||||
body.theme-default {
|
||||
// Generate the Angular Material theme
|
||||
@include angular-material-theme($pink-light-theme);
|
||||
@include angular-material-theme($aquaBlue-light-theme);
|
||||
|
||||
// Apply the theme to the user components
|
||||
@include components-theme($pink-light-theme);
|
||||
@include ucap-material-theme($pink-light-theme);
|
||||
@include components-theme($aquaBlue-light-theme);
|
||||
@include ucap-material-theme($aquaBlue-light-theme);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,36 +5,75 @@
|
|||
<div class="app-layout-native-title-bar-title">UCAP M Messenger</div>
|
||||
<div class="app-layout-native-title-bar-spacer"></div>
|
||||
<div class="app-layout-native-title-bar-link">
|
||||
|
||||
<button mat-icon-button class="button app-layout-native-title-bar-setting">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" alt="환경설정">
|
||||
<button
|
||||
mat-icon-button
|
||||
class="button app-layout-native-title-bar-setting"
|
||||
(click)="onClickSettings()"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="round"
|
||||
alt="환경설정"
|
||||
>
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
<path
|
||||
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z">
|
||||
</path>
|
||||
d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button class="button app-layout-native-title-bar-logout">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="1.5" stroke-linecap="butt" stroke-linejoin="round" alt="로그아웃" class="stroke-warn-color" >
|
||||
<path d="M10 3H6a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h4M16 17l5-5-5-5M19.8 12H9" /></svg>
|
||||
<button
|
||||
mat-icon-button
|
||||
class="button app-layout-native-title-bar-logout"
|
||||
(click)="onClickLogout()"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="18"
|
||||
height="18"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="round"
|
||||
alt="로그아웃"
|
||||
class="stroke-warn-color"
|
||||
>
|
||||
<path
|
||||
d="M10 3H6a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h4M16 17l5-5-5-5M19.8 12H9"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<span class="stroke-bar"></span>
|
||||
|
||||
</div>
|
||||
<div class="app-layout-native-title-bar-actions">
|
||||
|
||||
<button
|
||||
mat-icon-button
|
||||
class="button app-layout-native-title-bar-minimize"
|
||||
(click)="onClickMinimize()"
|
||||
>
|
||||
<!--<mat-icon>minimize</mat-icon>-->
|
||||
<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" alt="창 최소화">
|
||||
<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"
|
||||
alt="창 최소화"
|
||||
>
|
||||
<line x1="5" y1="18" x2="19" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
|
|
@ -45,19 +84,45 @@
|
|||
>
|
||||
<ng-container [ngSwitch]="windowStateChanged$ | async">
|
||||
<!--<mat-icon *ngSwitchCase="WindowState.Maximized">filter_none</mat-icon>-->
|
||||
<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" *ngSwitchCase="WindowState.Maximized" alt="창 이전크기">
|
||||
<path class="st0"
|
||||
d="M15,9.5v7c0,0.8-0.7,1.5-1.5,1.5h-7C5.7,18,5,17.3,5,16.5v-7C5,8.7,5.7,8,6.5,8h7C14.3,8,15,8.7,15,9.5z" />
|
||||
<path class="st0" d="M8.8,6.8V6c0-0.8,0.7-1.5,1.5-1.5H17c0.8,0,1.5,0.7,1.5,1.5v6.8c0,0.8-0.7,1.5-1.5,1.5h-0.8" />
|
||||
<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"
|
||||
*ngSwitchCase="WindowState.Maximized"
|
||||
alt="창 이전크기"
|
||||
>
|
||||
<path
|
||||
class="st0"
|
||||
d="M15,9.5v7c0,0.8-0.7,1.5-1.5,1.5h-7C5.7,18,5,17.3,5,16.5v-7C5,8.7,5.7,8,6.5,8h7C14.3,8,15,8.7,15,9.5z"
|
||||
/>
|
||||
<path
|
||||
class="st0"
|
||||
d="M8.8,6.8V6c0-0.8,0.7-1.5,1.5-1.5H17c0.8,0,1.5,0.7,1.5,1.5v6.8c0,0.8-0.7,1.5-1.5,1.5h-0.8"
|
||||
/>
|
||||
</svg>
|
||||
|
||||
<!--<mat-icon *ngSwitchDefault>crop_din</mat-icon>-->
|
||||
<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" *ngSwitchDefault alt="창크기 최대">
|
||||
<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"
|
||||
*ngSwitchDefault
|
||||
alt="창크기 최대"
|
||||
>
|
||||
<rect x="5" y="5" width="12" height="12" rx="2" ry="2"></rect>
|
||||
</svg>
|
||||
|
||||
</ng-container>
|
||||
</button>
|
||||
<button
|
||||
|
|
@ -66,8 +131,18 @@
|
|||
(click)="onClickClose()"
|
||||
>
|
||||
<!--<mat-icon>close</mat-icon>-->
|
||||
<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" alt="창닫기">
|
||||
<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"
|
||||
alt="창닫기"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -5,6 +5,10 @@ import {
|
|||
WindowState
|
||||
} from '@ucap-webmessenger/native';
|
||||
import { Observable } from 'rxjs';
|
||||
import { Store } from '@ngrx/store';
|
||||
|
||||
import * as AuthenticationStore from '@app/store/account/authentication';
|
||||
import * as SettingsStore from '@app/store/messenger/settings';
|
||||
|
||||
@Component({
|
||||
selector: 'app-layout-native-top-bar',
|
||||
|
|
@ -17,6 +21,7 @@ export class TopBarComponent implements OnInit, OnDestroy {
|
|||
WindowState = WindowState;
|
||||
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
@Inject(UCAP_NATIVE_SERVICE) private nativeService: NativeService
|
||||
) {}
|
||||
|
||||
|
|
@ -37,4 +42,12 @@ export class TopBarComponent implements OnInit, OnDestroy {
|
|||
onClickMaxmize() {
|
||||
this.nativeService.windowMaximize();
|
||||
}
|
||||
|
||||
onClickSettings(): void {
|
||||
this.store.dispatch(SettingsStore.showDialog());
|
||||
}
|
||||
|
||||
onClickLogout(): void {
|
||||
this.store.dispatch(AuthenticationStore.logout());
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,12 +46,12 @@ ol {
|
|||
list-style: none;
|
||||
}
|
||||
$lg-red: (
|
||||
50: #faf3f6,
|
||||
50: #fff9fc,
|
||||
100: #f8bbd0,
|
||||
200: #f48fb1,
|
||||
300: #f06292,
|
||||
400: #ef4c73,
|
||||
/* 400: #ec407a,*/ 500: #ed097e,
|
||||
/*300: #f06292,*/ 300: #ef4c73,
|
||||
400: #ec407a,
|
||||
500: #ed097e,
|
||||
600: #d81b60,
|
||||
700: #c2185b,
|
||||
800: #ad1457,
|
||||
|
|
@ -84,7 +84,7 @@ $lg-red: (
|
|||
)
|
||||
);
|
||||
|
||||
$daesang: (
|
||||
$aquaBlue-daesang: (
|
||||
50: #f9feff,
|
||||
//#e0f7fa,
|
||||
100: #b2ebf2,
|
||||
|
|
@ -173,6 +173,10 @@ $daesang-grey: (
|
|||
$gradient-light: mat-color($accent, G100);
|
||||
|
||||
//basic
|
||||
.bg-primary-darkest {
|
||||
background: mat-color($primary, 900);
|
||||
color: mat-color($primary, default-contrast);
|
||||
}
|
||||
.bg-primary-dark {
|
||||
background: mat-color($primary, 900);
|
||||
color: mat-color($primary, default-contrast);
|
||||
|
|
@ -186,7 +190,7 @@ $daesang-grey: (
|
|||
color: mat-color($primary, default-contrast);
|
||||
}
|
||||
.bg-accent-darkest {
|
||||
background: mat-color($accent, 900);
|
||||
background: mat-color($accent, 800);
|
||||
color: mat-color($primary, default-contrast);
|
||||
}
|
||||
.bg-accent-dark {
|
||||
|
|
@ -209,7 +213,7 @@ $daesang-grey: (
|
|||
color: mat-color($primary);
|
||||
}
|
||||
.text-accent-darkest {
|
||||
color: mat-color($accent, 900);
|
||||
color: mat-color($accent, 800);
|
||||
}
|
||||
.text-accent-color {
|
||||
color: mat-color($accent);
|
||||
|
|
@ -350,7 +354,7 @@ $daesang-grey: (
|
|||
}
|
||||
.profile-img {
|
||||
.responsive-chats-button:last-child {
|
||||
background-color: $gradient-light;
|
||||
background-color: mat-color($accent, B100);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
</mat-form-field>
|
||||
|
||||
<button
|
||||
class="send-message-button bg-accent-darkest"
|
||||
class="send-message-button bg-primary-darkest"
|
||||
mat-icon-button
|
||||
type="submit"
|
||||
aria-label="Send message"
|
||||
|
|
|
|||
|
|
@ -17,22 +17,37 @@
|
|||
<mat-tree-node
|
||||
*matTreeNodeDef="let node"
|
||||
matTreeNodePadding
|
||||
class="mat-tree-last-node"
|
||||
matTreeNodePaddingIndent="20"
|
||||
class="tree-no-child"
|
||||
>
|
||||
<li (click)="onClickNode(node)" matRipple>
|
||||
<div>
|
||||
{{ node.name }}
|
||||
<div class="tree-node-closer-container">
|
||||
<div class="tree-node-closer-top"></div>
|
||||
<div
|
||||
class="tree-node-closer-bottom"
|
||||
[attr.lastNode]="isLastNode(node) ? '' : null"
|
||||
></div>
|
||||
</div>
|
||||
<li (click)="onClickNode(node)" matRipple>
|
||||
<div class="tree-node-body">{{ node.name }}</div>
|
||||
</li>
|
||||
</mat-tree-node>
|
||||
<!-- This is the tree node template for expandable nodes -->
|
||||
<mat-tree-node
|
||||
*matTreeNodeDef="let node; when: hasChild"
|
||||
matTreeNodePadding
|
||||
class="tree-node-frame"
|
||||
matTreeNodePaddingIndent="20"
|
||||
class="tree-has-child"
|
||||
>
|
||||
<div *ngIf="0 !== node.level" class="tree-node-closer-container">
|
||||
<div class="tree-node-closer-top"></div>
|
||||
<div
|
||||
class="tree-node-closer-bottom"
|
||||
[attr.expanded]="treeControl.isExpanded(node) ? '' : null"
|
||||
[attr.lastNode]="isLastNode(node) ? '' : null"
|
||||
></div>
|
||||
</div>
|
||||
<li (click)="onClickNode(node)" matRipple>
|
||||
<div class="path">
|
||||
<div class="tree-node-body">
|
||||
<span class="horizontal-line"></span>
|
||||
<button
|
||||
mat-icon-button
|
||||
|
|
@ -40,23 +55,16 @@
|
|||
matTreeNodeToggle
|
||||
[attr.aria-label]="'toggle ' + node.filename"
|
||||
>
|
||||
<mat-icon class="mat-icon-rtl-mirror">
|
||||
<!-- {{ treeControl.isExpanded(node) ? 'expand_more' : 'chevron_right' }}-->
|
||||
<mat-icon
|
||||
class="tree-node-expand-btn"
|
||||
[@romvoeAdd]="treeControl.isExpanded(node) ? 'remove' : 'add'"
|
||||
>
|
||||
{{ treeControl.isExpanded(node) ? 'remove' : 'add' }}
|
||||
</mat-icon>
|
||||
</button>
|
||||
<span class="dept-name">{{ node.name }}</span>
|
||||
</div>
|
||||
<ul
|
||||
[class.organization-tree-node-invisible]="
|
||||
!treeControl.isExpanded(node)
|
||||
"
|
||||
>
|
||||
<div *ngIf="treeControl.isExpanded(node)" class="boxnone">
|
||||
<div class="vertical-line"></div>
|
||||
<ng-container matTreeNodeOutlet></ng-container>
|
||||
</div>
|
||||
</ul>
|
||||
<!-- <ul class="tree-node-closer"></ul> -->
|
||||
</li>
|
||||
</mat-tree-node>
|
||||
</mat-tree>
|
||||
|
|
|
|||
|
|
@ -1,40 +1,50 @@
|
|||
@charset 'utf-8';
|
||||
.organization-tree {
|
||||
padding: 10px;
|
||||
ul,
|
||||
padding: 5px;
|
||||
|
||||
.tree-node-closer-container {
|
||||
position: relative;
|
||||
// border: 1px dotted grey;
|
||||
// border-width: 0 0 1px 1px;
|
||||
|
||||
.tree-node-closer-top {
|
||||
width: 15px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
border: 1px dotted grey;
|
||||
border-width: 0 0 1px 1px;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
}
|
||||
.tree-node-closer-bottom {
|
||||
width: 15px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
border: 1px dotted grey;
|
||||
border-width: 0 0 1px 1px;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.tree-node-closer-bottom[expanded] {
|
||||
border-width: 0 0 1px 0px;
|
||||
}
|
||||
.tree-node-closer-bottom[lastNode] {
|
||||
border-width: 0 0 1px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
.organization-tree-node-invisible {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
/*.tree-node-frame {
|
||||
li {
|
||||
.path {
|
||||
.horizontal-line {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-tree-node {
|
||||
min-height: 30px;
|
||||
font-size: 13px;
|
||||
padding-left: 20px;
|
||||
margin-top: 4px;
|
||||
&:hover {
|
||||
background-color: #f4f4f4;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
|
||||
}
|
||||
}
|
||||
}*/
|
||||
.organization-tree {
|
||||
.tree-node-frame {
|
||||
// li:last-child {
|
||||
// border-left: 1px solid white;
|
||||
// margin-left: -41px;
|
||||
// }
|
||||
|
||||
.tree-has-child {
|
||||
height: 40px;
|
||||
min-height: 40px;
|
||||
li {
|
||||
|
|
@ -42,84 +52,29 @@
|
|||
align-items: center;
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
|
||||
.tree-node-body {
|
||||
.tree-node-expand-btn {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
.mat-tree-last-node {
|
||||
}
|
||||
}
|
||||
|
||||
.tree-no-child {
|
||||
height: 40px;
|
||||
min-height: 30px;
|
||||
min-height: 40px;
|
||||
font-size: 13px;
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-left: 10px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background-color: #f4f4f4;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
ul .tree-node-frame li .path > .horizontal-line {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.boxnone {
|
||||
position: relative;
|
||||
.vertical-line {
|
||||
background: rgba(189, 189, 189, 0.4);
|
||||
bottom: 6px;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 2px;
|
||||
.tree-node-body {
|
||||
padding-left: 40px;
|
||||
}
|
||||
}
|
||||
.mat-tree-node:last-child {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.path {
|
||||
padding: 6px 4px;
|
||||
+ ul {
|
||||
li:last-chlid {
|
||||
border-bottom: 1px solid #dddddd;
|
||||
}
|
||||
}
|
||||
.horizontal-line {
|
||||
width: 10px;
|
||||
height: 1px;
|
||||
background-color: #dddddd;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
margin-left: -10px;
|
||||
}
|
||||
.mat-icon-button {
|
||||
padding: 0;
|
||||
min-width: 0;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
flex-shrink: 0;
|
||||
line-height: 20px;
|
||||
.mat-icon-rtl-mirror {
|
||||
border: 1px solid #dddddd;
|
||||
padding: 2px;
|
||||
font-size: 14px;
|
||||
min-width: 14px;
|
||||
min-height: 14px;
|
||||
line-height: 14px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
box-shadow: 0 2px 1px rgba(48, 48, 48, 0.2);
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
.dept-name {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,8 @@ import { LoginResponse } from '@ucap-webmessenger/protocol-authentication';
|
|||
import { FlatTreeControl } from '@angular/cdk/tree';
|
||||
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
||||
import { VirtualScrollTreeFlatDataSource } from '@ucap-webmessenger/ui';
|
||||
import { ucapAnimations } from '@ucap-webmessenger/ui';
|
||||
import { trigger, transition, style, animate } from '@angular/animations';
|
||||
|
||||
interface OrganizationNode {
|
||||
deptInfo: DeptInfo;
|
||||
|
|
@ -35,7 +37,19 @@ interface FlatNode {
|
|||
@Component({
|
||||
selector: 'ucap-organization-tree',
|
||||
templateUrl: './tree.component.html',
|
||||
styleUrls: ['./tree.component.scss']
|
||||
styleUrls: ['./tree.component.scss'],
|
||||
animations: [
|
||||
ucapAnimations,
|
||||
trigger('romvoeAdd', [
|
||||
transition('remove <=> add', [
|
||||
style({
|
||||
transform: `rotate(45deg)`,
|
||||
opacity: 0
|
||||
}),
|
||||
animate('.2s 0s ease-out')
|
||||
])
|
||||
])
|
||||
]
|
||||
})
|
||||
export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
|
||||
@Output()
|
||||
|
|
@ -139,6 +153,21 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
|
||||
hasChild = (_: number, node: FlatNode) => node.expandable;
|
||||
|
||||
isLastNode(node: FlatNode): boolean {
|
||||
const i = this.dataSource.expandedDataSubject.value.findIndex(n => {
|
||||
return node.deptInfo.seq === n.deptInfo.seq;
|
||||
});
|
||||
|
||||
if (i === this.dataSource.expandedDataSubject.value.length - 1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (node.level !== this.dataSource.expandedDataSubject.value[i + 1].level) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
onClickNode(node: OrganizationNode) {
|
||||
this.selected.emit(node.deptInfo);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -47,15 +47,21 @@ export const ucapAnimations = [
|
|||
|
||||
transition(
|
||||
'void => 50',
|
||||
query('@*', [stagger('50ms', [animateChild()])], { optional: true })
|
||||
query('@*', [stagger('50ms', [animateChild()])], {
|
||||
optional: true
|
||||
})
|
||||
),
|
||||
transition(
|
||||
'void => 100',
|
||||
query('@*', [stagger('100ms', [animateChild()])], { optional: true })
|
||||
query('@*', [stagger('100ms', [animateChild()])], {
|
||||
optional: true
|
||||
})
|
||||
),
|
||||
transition(
|
||||
'void => 200',
|
||||
query('@*', [stagger('200ms', [animateChild()])], { optional: true })
|
||||
query('@*', [stagger('200ms', [animateChild()])], {
|
||||
optional: true
|
||||
})
|
||||
)
|
||||
]),
|
||||
|
||||
|
|
@ -551,6 +557,24 @@ export const ucapAnimations = [
|
|||
)
|
||||
]),
|
||||
|
||||
trigger('treeToggler', [
|
||||
state(
|
||||
'0, void',
|
||||
style({
|
||||
opacity: 0
|
||||
})
|
||||
),
|
||||
state(
|
||||
'1, *',
|
||||
style({
|
||||
opacity: 1
|
||||
})
|
||||
),
|
||||
transition('1 => 0', animate('300ms ease-out')),
|
||||
transition('0 => 1', animate('300ms ease-in')),
|
||||
transition('void <=> *', animate('300ms ease-in'))
|
||||
]),
|
||||
|
||||
/**
|
||||
* Floating ACtion Button Animation.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@ import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
|||
export class VirtualScrollTreeFlatDataSource<T, F> extends DataSource<F> {
|
||||
private flattenedDataSubject = new BehaviorSubject<F[]>([]);
|
||||
|
||||
private expandedDataSubject = new BehaviorSubject<F[]>([]);
|
||||
expandedDataSubject = new BehaviorSubject<F[]>([]);
|
||||
expandedData$: Observable<F[]>;
|
||||
|
||||
private connectSubject: Subject<F[]>;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user