Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger
This commit is contained in:
leejinho
commit
0bc6968e98
|
|
@ -46,9 +46,12 @@
|
|||
</ucap-group-expansion-panel>
|
||||
</div>
|
||||
<div [style.display]="isShowSearch ? 'block' : 'none'" class="search-result">
|
||||
<div *ngIf="searchProcessing">
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
<div style="position: relative;">
|
||||
<div *ngIf="searchProcessing" style="position: absolute; width: 100%;">
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-num">
|
||||
검색결과<span class="text-accent-color"
|
||||
>({{ searchUserInfos.length }}명)</span
|
||||
|
|
@ -93,16 +96,36 @@
|
|||
</button>
|
||||
<button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_MORE')">
|
||||
<!--<mat-icon>expand_more</mat-icon>-->
|
||||
<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">
|
||||
<path d="M6 9l6 6 6-6" /></svg>
|
||||
<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"
|
||||
>
|
||||
<path d="M6 9l6 6 6-6" />
|
||||
</svg>
|
||||
<span>그룹 전체 열기</span>
|
||||
</button>
|
||||
<button mat-menu-item (click)="onClickGroupMenu('GROUP_EXPAND_LESS')">
|
||||
<!--<mat-icon>expand_less</mat-icon>-->
|
||||
<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">
|
||||
<path d="M18 15l-6-6-6 6" /></svg>
|
||||
<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"
|
||||
>
|
||||
<path d="M18 15l-6-6-6 6" />
|
||||
</svg>
|
||||
<span>그룹 전체 닫기</span>
|
||||
</button>
|
||||
<!-- <button mat-menu-item (click)="onClickGroupMenu('GROUP_SAVE')">
|
||||
|
|
|
|||
|
|
@ -41,8 +41,13 @@
|
|||
</mat-checkbox>
|
||||
</dd>
|
||||
</dl>
|
||||
<div *ngIf="selectedDepartmentProcessing">
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
<div style="position: relative;">
|
||||
<div
|
||||
*ngIf="selectedDepartmentProcessing"
|
||||
style="position: absolute; width: 100%;"
|
||||
>
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
<div *ngIf="!isShowSearch" class="search-list">
|
||||
<cdk-virtual-scroll-viewport
|
||||
|
|
|
|||
|
|
@ -142,10 +142,14 @@
|
|||
</div>
|
||||
</mat-toolbar>
|
||||
<!-- / CHAT TOOLBAR -->
|
||||
<mat-progress-bar
|
||||
*ngIf="eventListProcessing$ | async"
|
||||
mode="indeterminate"
|
||||
></mat-progress-bar>
|
||||
<div style="position: relative;">
|
||||
<div
|
||||
*ngIf="eventListProcessing$ | async"
|
||||
style="position: absolute; width: 100%;"
|
||||
>
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CHAT CONTENT -->
|
||||
<div
|
||||
fxFlex="1 1 auto"
|
||||
|
|
|
|||
|
|
@ -24,8 +24,8 @@
|
|||
}
|
||||
.chat-toolbar {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
min-height: 80px;
|
||||
height: 70px;
|
||||
min-height: 70px;
|
||||
align-items: center;
|
||||
background-color: #ffffff !important;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
|
|
|
|||
|
|
@ -93,9 +93,15 @@
|
|||
[style.display]="isShowSearch ? 'block' : 'none'"
|
||||
class="search-result"
|
||||
>
|
||||
<div *ngIf="searchProcessing">
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
<div style="position: relative;">
|
||||
<div
|
||||
*ngIf="searchProcessing"
|
||||
style="position: absolute; width: 100%;"
|
||||
>
|
||||
<mat-progress-bar mode="indeterminate"></mat-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="result-num">
|
||||
검색결과
|
||||
<span class="text-accent-color"
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div fxFlex class="setting-tab">
|
||||
<mat-tab-group animationDuration="0ms" vertical>
|
||||
<mat-tab-group animationDuration="0ms">
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<span class="mdi mdi-settings"></span>
|
||||
|
|
|
|||
|
|
@ -25,11 +25,30 @@
|
|||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.mat-tab-body-wrapper {
|
||||
border-left: 1px solid #dddddd;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 0 0 10px 10px;
|
||||
.mat-tab-group {
|
||||
flex-direction: row;
|
||||
.mat-tab-header {
|
||||
width: 160px;
|
||||
.mat-tab-labels {
|
||||
flex-direction: column;
|
||||
.mat-tab-label {
|
||||
padding: 0 10px;
|
||||
align-content: flex-start;
|
||||
text-align: left;
|
||||
align-items: self-start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.mat-ink-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-tab-body-wrapper {
|
||||
border-left: 1px solid #dddddd;
|
||||
position: relative;
|
||||
height: 100%;
|
||||
padding: 0 0 10px 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -51,6 +70,8 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
.mat-tab-header {
|
||||
width: 160px;
|
||||
flex-flow: column;
|
||||
.mat-tab-label-container {
|
||||
.mat-tab-list {
|
||||
.mat-tab-labels {
|
||||
|
|
|
|||
|
|
@ -320,7 +320,7 @@ $daesang-grey: (
|
|||
|
||||
mat-tab-group[vertical] {
|
||||
display: flex;
|
||||
flex-direction: row !important;
|
||||
flex-direction: row;
|
||||
|
||||
.mat-tab-labels {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,12 @@
|
|||
class="group-tree"
|
||||
>
|
||||
<!-- This is the tree node template for leaf nodes -->
|
||||
<mat-tree-node *matTreeNodeDef="let node" style="height: 80px;" matRipple>
|
||||
<mat-tree-node
|
||||
*matTreeNodeDef="let node"
|
||||
style="height: 80px;"
|
||||
[attr.node-type]="node?.nodeType"
|
||||
matRipple
|
||||
>
|
||||
<li>
|
||||
<div class="mat-tree-node">
|
||||
<ng-container
|
||||
|
|
@ -33,6 +38,7 @@
|
|||
*matTreeNodeDef="let node; when: isHeader"
|
||||
class="tree-node-frame ucap-clickable"
|
||||
style="height: 80px;"
|
||||
[attr.node-type]="node?.nodeType"
|
||||
matRipple
|
||||
>
|
||||
<li class="tree-node-header" matTreeNodeToggle>
|
||||
|
|
|
|||
|
|
@ -51,6 +51,21 @@
|
|||
}
|
||||
}
|
||||
|
||||
.mat-tree-node[aria-level='0'][node-type='Profile'] {
|
||||
position: relative;
|
||||
widows: 100px;
|
||||
height: 100%;
|
||||
li {
|
||||
margin-left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.mat-tree-node {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.path {
|
||||
display: flex;
|
||||
padding: 6px 4px;
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@ import { VirtualScrollTreeFlatDataSource } from '@ucap-webmessenger/ui';
|
|||
import { FlatTreeControl } from '@angular/cdk/tree';
|
||||
import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
|
||||
import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
enum NodeType {
|
||||
None = 'None',
|
||||
|
|
@ -66,14 +67,10 @@ export class ExpansionPanelComponent
|
|||
}
|
||||
const groupNode: GroupNode = {
|
||||
nodeType: NodeType.Profile,
|
||||
userInfo,
|
||||
children: []
|
||||
};
|
||||
|
||||
groupNode.children.push({
|
||||
nodeType: NodeType.Profile,
|
||||
userInfo
|
||||
});
|
||||
|
||||
this.profileNodes = [groupNode];
|
||||
|
||||
this.refreshRootNodeList();
|
||||
|
|
@ -167,8 +164,8 @@ export class ExpansionPanelComponent
|
|||
@ViewChild('cvsvGroup', { static: false })
|
||||
cvsvGroup: CdkVirtualScrollViewport;
|
||||
|
||||
@ViewChild('cvsvGroup', { read: PerfectScrollbarDirective, static: false })
|
||||
perfectScrollbar: PerfectScrollbarDirective;
|
||||
@ViewChild(PerfectScrollbarDirective, { static: false })
|
||||
psDirectiveRef?: PerfectScrollbarDirective;
|
||||
|
||||
NodeType = NodeType;
|
||||
|
||||
|
|
@ -183,6 +180,8 @@ export class ExpansionPanelComponent
|
|||
|
||||
groupList: { group: GroupDetailData; buddyList: UserInfo[] }[];
|
||||
|
||||
treeControlExpansionChangeSubscription: Subscription;
|
||||
|
||||
constructor(
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
private logger: NGXLogger
|
||||
|
|
@ -217,23 +216,40 @@ export class ExpansionPanelComponent
|
|||
);
|
||||
}
|
||||
|
||||
ngOnInit() {}
|
||||
ngOnInit() {
|
||||
this.treeControlExpansionChangeSubscription = this.treeControl.expansionModel.changed.subscribe(
|
||||
() => {
|
||||
this.psDirectiveRef.update();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {}
|
||||
ngOnDestroy(): void {
|
||||
if (!!this.treeControlExpansionChangeSubscription) {
|
||||
this.treeControlExpansionChangeSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
this.dataSource.cdkVirtualScrollViewport = this.cvsvGroup;
|
||||
}
|
||||
|
||||
// hasChild = (_: number, node: FlatNode) => node.expandable;
|
||||
isHeader = (_: number, node: FlatNode) => 0 === node.level;
|
||||
isHeader = (_: number, node: FlatNode) =>
|
||||
NodeType.Profile !== node.nodeType && 0 === node.level;
|
||||
|
||||
expandMore() {
|
||||
this.groupTree.treeControl.expandAll();
|
||||
if (!!this.psDirectiveRef) {
|
||||
this.psDirectiveRef.scrollToTop();
|
||||
}
|
||||
}
|
||||
|
||||
expandLess() {
|
||||
this.groupTree.treeControl.collapseAll();
|
||||
if (!!this.psDirectiveRef) {
|
||||
this.psDirectiveRef.scrollToTop();
|
||||
}
|
||||
}
|
||||
|
||||
onClickMore(event: MouseEvent, group: GroupDetailData) {
|
||||
|
|
@ -287,8 +303,8 @@ export class ExpansionPanelComponent
|
|||
];
|
||||
this.dataSource.data = this.rootNodeList;
|
||||
|
||||
if (!!this.perfectScrollbar) {
|
||||
this.perfectScrollbar.scrollToTop();
|
||||
if (!!this.psDirectiveRef) {
|
||||
this.psDirectiveRef.scrollToTop();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<input
|
||||
matInput
|
||||
#searchWordInput
|
||||
placeholder="name"
|
||||
placeholder="검색어"
|
||||
(keydown.enter)="onKeyDownEnter(searchWordInput.value)"
|
||||
/>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -20,18 +20,25 @@
|
|||
matTreeNodePaddingIndent="20"
|
||||
class="tree-no-child"
|
||||
>
|
||||
<div class="tree-node-closer-container">
|
||||
<div class="tree-node-closer-top"></div>
|
||||
<div
|
||||
class="tree-node-closer-container"
|
||||
*ngFor="let i of appendDivArray(node.level)"
|
||||
>
|
||||
<div
|
||||
class="tree-node-closer-top"
|
||||
[style.left.px]="20 - 20 * i"
|
||||
[attr.last-node]="isLastNode(node, i) ? '' : null"
|
||||
[attr.sub-node]="0 < i ? '' : null"
|
||||
></div>
|
||||
<div
|
||||
class="tree-node-closer-bottom"
|
||||
[attr.last-node]="isLastNode(node) ? '' : null"
|
||||
[style.left.px]="20 - 20 * i"
|
||||
[attr.last-node]="isLastNode(node, i) ? '' : null"
|
||||
[attr.sub-node]="0 < i ? '' : null"
|
||||
></div>
|
||||
</div>
|
||||
<li
|
||||
(click)="onClickNode(node)"
|
||||
matRipple
|
||||
[attr.sub-node]="isParentLastNode(node) ? '' : null"
|
||||
>
|
||||
|
||||
<li (click)="onClickNode(node)" matRipple>
|
||||
<div class="tree-node-body">{{ node.name }}</div>
|
||||
</li>
|
||||
</mat-tree-node>
|
||||
|
|
@ -42,19 +49,25 @@
|
|||
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-container"
|
||||
*ngFor="let i of appendDivArray(node.level)"
|
||||
>
|
||||
<div
|
||||
class="tree-node-closer-top"
|
||||
[style.left.px]="20 - 20 * i"
|
||||
[attr.last-node]="isLastNode(node, i) ? '' : null"
|
||||
[attr.sub-node]="0 < i ? '' : null"
|
||||
></div>
|
||||
<div
|
||||
class="tree-node-closer-bottom"
|
||||
[style.left.px]="20 - 20 * i"
|
||||
[attr.expanded]="treeControl.isExpanded(node) ? '' : null"
|
||||
[attr.last-node]="isLastNode(node) ? '' : null"
|
||||
[attr.last-node]="isLastNode(node, i) ? '' : null"
|
||||
[attr.sub-node]="0 < i ? '' : null"
|
||||
></div>
|
||||
</div>
|
||||
<li
|
||||
(click)="onClickNode(node)"
|
||||
matRipple
|
||||
[attr.sub-node]="isParentLastNode(node) ? '' : null"
|
||||
>
|
||||
<li (click)="onClickNode(node)" matRipple>
|
||||
<div class="tree-node-body">
|
||||
<span class="horizontal-line"></span>
|
||||
<button
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
border: 1px dotted grey;
|
||||
border-width: 0 0 1px 1px;
|
||||
top: -40px;
|
||||
left: 20px;
|
||||
// left: 20px;
|
||||
}
|
||||
.tree-node-closer-bottom {
|
||||
width: 15px;
|
||||
|
|
@ -22,7 +22,14 @@
|
|||
border: 1px dotted grey;
|
||||
border-width: 0 0 1px 1px;
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
// left: 20px;
|
||||
}
|
||||
|
||||
.tree-node-closer-top[sub-node] {
|
||||
border-width: 0 0 0 1px;
|
||||
}
|
||||
.tree-node-closer-top[sub-node][last-node] {
|
||||
border-width: 0 0 0 0;
|
||||
}
|
||||
|
||||
.tree-node-closer-bottom[expanded] {
|
||||
|
|
@ -31,6 +38,12 @@
|
|||
.tree-node-closer-bottom[last-node] {
|
||||
border-width: 0 0 1px 0px;
|
||||
}
|
||||
.tree-node-closer-bottom[sub-node] {
|
||||
border-width: 0 0 0 1px;
|
||||
}
|
||||
.tree-node-closer-bottom[sub-node][last-node] {
|
||||
border-width: 0 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
|
|
@ -39,11 +52,6 @@
|
|||
list-style-type: none;
|
||||
}
|
||||
|
||||
// li[sub-node] {
|
||||
// border: 1px dotted grey;
|
||||
// border-width: 0 0 0 1px;
|
||||
// }
|
||||
|
||||
// li:last-child {
|
||||
// border-left: 1px solid white;
|
||||
// margin-left: -41px;
|
||||
|
|
|
|||
|
|
@ -19,6 +19,8 @@ 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';
|
||||
import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
|
||||
import { Subscription } from 'rxjs';
|
||||
|
||||
interface OrganizationNode {
|
||||
deptInfo: DeptInfo;
|
||||
|
|
@ -110,10 +112,15 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
@ViewChild('orgranizationTree', { static: false })
|
||||
orgranizationTree: MatTree<OrganizationNode>;
|
||||
|
||||
@ViewChild(PerfectScrollbarDirective, { static: false })
|
||||
psDirectiveRef?: PerfectScrollbarDirective;
|
||||
|
||||
treeControl: FlatTreeControl<FlatNode>;
|
||||
treeFlattener: MatTreeFlattener<OrganizationNode, FlatNode>;
|
||||
dataSource: VirtualScrollTreeFlatDataSource<OrganizationNode, FlatNode>;
|
||||
|
||||
treeControlExpansionChangeSubscription: Subscription;
|
||||
|
||||
constructor(
|
||||
private changeDetectorRef: ChangeDetectorRef,
|
||||
private logger: NGXLogger
|
||||
|
|
@ -141,10 +148,19 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
>(this.treeControl, this.treeFlattener);
|
||||
}
|
||||
|
||||
ngOnInit() {}
|
||||
ngOnInit() {
|
||||
this.treeControlExpansionChangeSubscription = this.treeControl.expansionModel.changed.subscribe(
|
||||
() => {
|
||||
this.psDirectiveRef.update();
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
ngOnDestroy(): void {
|
||||
this.logger.debug('-----------------------TreeComponent ngOnDestroy');
|
||||
if (!!this.treeControlExpansionChangeSubscription) {
|
||||
this.treeControlExpansionChangeSubscription.unsubscribe();
|
||||
}
|
||||
}
|
||||
|
||||
ngAfterViewInit(): void {
|
||||
|
|
@ -153,51 +169,70 @@ export class TreeComponent implements OnInit, OnDestroy, AfterViewInit {
|
|||
|
||||
hasChild = (_: number, node: FlatNode) => node.expandable;
|
||||
|
||||
isLastNode(node: FlatNode): boolean {
|
||||
const i = this.findNodeIndex(node);
|
||||
isLastNode(node: FlatNode, depth: number): boolean {
|
||||
const i = this.findNodeIndex(node, depth);
|
||||
|
||||
if (-1 === i) {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (i === this.dataSource.expandedDataSubject.value.length - 1) {
|
||||
return true;
|
||||
}
|
||||
|
||||
if (node.level !== this.dataSource.expandedDataSubject.value[i + 1].level) {
|
||||
return true;
|
||||
const n = this.dataSource.expandedDataSubject.value[i];
|
||||
|
||||
for (
|
||||
let idx = i + 1;
|
||||
idx < this.dataSource.expandedDataSubject.value.length;
|
||||
idx++
|
||||
) {
|
||||
const element = this.dataSource.expandedDataSubject.value[idx];
|
||||
if (n.level === element.level) {
|
||||
return false;
|
||||
}
|
||||
if (n.level > element.level) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
return true;
|
||||
}
|
||||
|
||||
isParentLastNode(node: FlatNode): boolean {
|
||||
const pi = this.findParentNodeIndex(node);
|
||||
if (-1 === pi) {
|
||||
return false;
|
||||
appendDivArray(level: number): number[] {
|
||||
if (0 === level) {
|
||||
return [];
|
||||
}
|
||||
return this.isLastNode(this.dataSource.expandedDataSubject.value[pi]);
|
||||
|
||||
return Array.from({ length: level }, (_, i: number) => i);
|
||||
}
|
||||
|
||||
onClickNode(node: OrganizationNode) {
|
||||
this.selected.emit(node.deptInfo);
|
||||
}
|
||||
|
||||
private findNodeIndex(node: FlatNode): number {
|
||||
return this.dataSource.expandedDataSubject.value.findIndex(n => {
|
||||
return node.deptInfo.seq === n.deptInfo.seq;
|
||||
});
|
||||
}
|
||||
|
||||
private findParentNodeIndex(node: FlatNode): number {
|
||||
const i = this.findNodeIndex(node);
|
||||
if (-1 === i) {
|
||||
private findNodeIndex(node: FlatNode, depth: number): number {
|
||||
if (!node) {
|
||||
return -1;
|
||||
}
|
||||
const i = this.dataSource.expandedDataSubject.value.findIndex(n => {
|
||||
return node.deptInfo.seq === n.deptInfo.seq;
|
||||
});
|
||||
|
||||
for (let idx = i - 1; idx >= 0; idx--) {
|
||||
if (
|
||||
this.dataSource.expandedDataSubject.value[idx].level ===
|
||||
node.level - 1
|
||||
) {
|
||||
return idx;
|
||||
if (0 === depth) {
|
||||
return i;
|
||||
}
|
||||
return this.findNodeIndex(this.findParentNode(i), depth - 1);
|
||||
}
|
||||
|
||||
private findParentNode(index: number): FlatNode {
|
||||
const node = this.dataSource.expandedDataSubject.value[index];
|
||||
|
||||
for (let idx = index - 1; idx >= 0; idx--) {
|
||||
const n = this.dataSource.expandedDataSubject.value[idx];
|
||||
if (n.level === node.level - 1) {
|
||||
return n;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
return undefined;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,15 @@
|
|||
<span *ngIf="roomInfo.isTimeRoom" class="text-warn-color badge-timer">
|
||||
<mat-icon>timer</mat-icon>
|
||||
</span>
|
||||
<!-- <div style="position: relative;">
|
||||
<div
|
||||
class="num text-accent-darkest thumbnail"
|
||||
*ngIf="roomInfo.roomType === RoomType.Multi"
|
||||
style="position: absolute; width: 40px; height: 40px; top: -40px"
|
||||
>
|
||||
{{ roomInfo.joinUserCount }}
|
||||
</div>
|
||||
</div> -->
|
||||
</dt>
|
||||
<dd class="info">
|
||||
<div class="detail">
|
||||
|
|
|
|||
|
|
@ -25,19 +25,19 @@ $thumbnail-msize: 40px;
|
|||
}
|
||||
|
||||
.badge-timer {
|
||||
position:absolute;
|
||||
position: absolute;
|
||||
background-color: #ffffff;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
border-radius: 50%;
|
||||
bottom: 14px;
|
||||
left: 46px;
|
||||
text-align:center;
|
||||
.mat-icon{
|
||||
font-size:14px;
|
||||
width: 18px;
|
||||
text-align: center;
|
||||
.mat-icon {
|
||||
font-size: 14px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
line-height:18px;
|
||||
line-height: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -131,7 +131,7 @@ $thumbnail-msize: 40px;
|
|||
font-size: 16px;
|
||||
color: #666666;
|
||||
margin-left: 4px;
|
||||
line-height:unset;
|
||||
line-height: unset;
|
||||
}
|
||||
.num {
|
||||
font-size: 12px;
|
||||
|
|
@ -158,6 +158,14 @@ $thumbnail-msize: 40px;
|
|||
@include ellipsis(1);
|
||||
}
|
||||
}
|
||||
|
||||
.num {
|
||||
font-size: 18px;
|
||||
font: bold;
|
||||
flex: none;
|
||||
text-align: center;
|
||||
background-color: rgba($color: #666666, $alpha: 0.5);
|
||||
}
|
||||
}
|
||||
|
||||
.list-item {
|
||||
|
|
|
|||
|
|
@ -1,40 +1,37 @@
|
|||
<div>
|
||||
<mat-list>
|
||||
<h1 mat-subheader>테마</h1>
|
||||
|
||||
<ul class="theme-list">
|
||||
<!--<ul class="theme-list">
|
||||
<li
|
||||
class="theme-box default on"
|
||||
class="theme-box default"
|
||||
(click)="onSelectedTabChange('theme-default')"
|
||||
></li>
|
||||
<li
|
||||
class="theme-box lgRed"
|
||||
(click)="onSelectedTabChange('theme-lgRed')"
|
||||
></li>
|
||||
</ul>
|
||||
<mat-list-item>
|
||||
<!-- <mat-tab-group
|
||||
</ul>-->
|
||||
<mat-list-item class="theme-select">
|
||||
<mat-tab-group
|
||||
mat-stretch-tabs
|
||||
animationDuration="0ms"
|
||||
(selectedTabChange)="onSelectedTabChange($event)"
|
||||
fxLayout="row"
|
||||
class="theme-list"
|
||||
>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<ng-template mat-tab-label class="theme-item">
|
||||
<div class="theme-box default-theme"></div>
|
||||
<div>기본값</div>
|
||||
<div class="theme-name">기본값</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>
|
||||
<ng-template mat-tab-label class="theme-item">
|
||||
<div class="theme-box lg-red-theme"></div>
|
||||
<div>LG Red</div>
|
||||
<div class="theme-name">LG Red</div>
|
||||
</ng-template>
|
||||
</mat-tab>
|
||||
</mat-tab-group> -->
|
||||
<!--
|
||||
<span>기본값</span>
|
||||
<span>어둡게</span>
|
||||
<span>밝게</span> -->
|
||||
</mat-tab-group>
|
||||
</mat-list-item>
|
||||
|
||||
<mat-divider></mat-divider>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,72 @@
|
|||
.theme-list {
|
||||
::ng-deep .mat-list-base {
|
||||
.theme-select.mat-list-item {
|
||||
position: relative;
|
||||
height: 160px;
|
||||
.mat-list-item-content {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .theme-list {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
width: 100%;
|
||||
margin: 10px;
|
||||
height: 120px;
|
||||
|
||||
.theme-box {
|
||||
width: 140px;
|
||||
height: 98px;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #dddddd;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.7;
|
||||
&.default {
|
||||
background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png');
|
||||
height: auto !important;
|
||||
.mat-tab-header {
|
||||
position: relative;
|
||||
width: 100% !important;
|
||||
.mat-tab-labels {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
flex-flow: row !important;
|
||||
.mat-tab-label {
|
||||
width: 140px;
|
||||
height: 120px;
|
||||
.mat-tab-label-content {
|
||||
position: relative;
|
||||
flex-flow: column;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.lgRed {
|
||||
background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png');
|
||||
}
|
||||
&.on {
|
||||
border: 1px solid #333333;
|
||||
opacity: 1;
|
||||
.mat-ink-bar {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.mat-tab-body-wrapper {
|
||||
border-left: none;
|
||||
}
|
||||
}
|
||||
|
||||
.default-theme {
|
||||
.theme-item {
|
||||
width: 140px;
|
||||
height: 98px;
|
||||
margin-right: 10px;
|
||||
border: 1px solid #dddddd;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.theme-box {
|
||||
width: 140px;
|
||||
height: 98px;
|
||||
border: 1px solid #dddddd;
|
||||
background-size: 100% auto;
|
||||
background-repeat: no-repeat;
|
||||
&.default-theme {
|
||||
background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-default.png');
|
||||
}
|
||||
.lg-red-theme {
|
||||
&.lg-red-theme {
|
||||
background-image: url('../../../../ucap-webmessenger-app/src/assets/images/theme/theme-lgRed.png');
|
||||
}
|
||||
}
|
||||
|
||||
.brightness {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import {
|
|||
EventEmitter
|
||||
} from '@angular/core';
|
||||
import { FormGroup, FormBuilder } from '@angular/forms';
|
||||
import { MatTabChangeEvent } from '@angular/material';
|
||||
|
||||
@Component({
|
||||
selector: 'ucap-settings-general',
|
||||
|
|
@ -25,7 +26,19 @@ export class GeneralComponent implements OnInit {
|
|||
|
||||
ngOnInit() {}
|
||||
|
||||
onSelectedTabChange(theme: string) {
|
||||
onSelectedTabChange(e: MatTabChangeEvent) {
|
||||
let theme = 'theme-default';
|
||||
switch (e.index) {
|
||||
case 0:
|
||||
theme = 'theme-default';
|
||||
break;
|
||||
case 1:
|
||||
theme = 'theme-lgRed';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
this.selectTheme.emit(theme);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,35 +1,91 @@
|
|||
<div class="ucap-binary-viewer-container">
|
||||
<mat-toolbar class="ucap-binary-viewer-header">
|
||||
<!--<mat-icon class="ucap-binary-viewer-icon">attachment</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="1.5" stroke-linecap="butt" stroke-linejoin="round" class="ucap-binary-viewer-icon">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="round"
|
||||
class="ucap-binary-viewer-icon"
|
||||
>
|
||||
<path
|
||||
d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48">
|
||||
</path>
|
||||
d="M21.44 11.05l-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"
|
||||
></path>
|
||||
</svg>
|
||||
<span class="ucap-binary-viewer-title">{{ fileInfo.fileName }}</span>
|
||||
<span class="ucap-binary-viewer-spacer"></span>
|
||||
|
||||
<button mat-icon-button class="ucap-binary-viewer-action" matTooltip="다운로드" matTooltipPosition="below" aria-label=""
|
||||
(click)="onClickDownload()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
|
||||
<path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5" />
|
||||
<button
|
||||
mat-icon-button
|
||||
class="ucap-binary-viewer-action"
|
||||
matTooltip="다운로드"
|
||||
matTooltipPosition="below"
|
||||
aria-label=""
|
||||
(click)="onClickDownload()"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="21"
|
||||
height="21"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path
|
||||
d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<span class="stroke-bar"></span>
|
||||
<button mat-icon-button color="warn" class="ucap-binary-viewer-action" (click)="onClickClose()">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
|
||||
<button
|
||||
mat-icon-button
|
||||
color="warn"
|
||||
class="ucap-binary-viewer-action"
|
||||
(click)="onClickClose()"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="21"
|
||||
height="21"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="butt"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
|
||||
<div style="position: relative;">
|
||||
<div
|
||||
*ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
|
||||
style="position: absolute; width: 100%;"
|
||||
>
|
||||
<mat-progress-bar
|
||||
mode="determinate"
|
||||
[value]="fileDownloadItem.downloadingProgress$ | async"
|
||||
></mat-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ucap-binary-viewer-body">
|
||||
<div class="ucap-binary-viewer-content-wrapper" fxLayout="column" fxLayout.xs="row" fxFlexFill
|
||||
fxLayoutAlign="center center">
|
||||
<div
|
||||
class="ucap-binary-viewer-content-wrapper"
|
||||
fxLayout="column"
|
||||
fxLayout.xs="row"
|
||||
fxFlexFill
|
||||
fxLayoutAlign="center center"
|
||||
>
|
||||
<div class="circle-box">
|
||||
<div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.fileExt]">
|
||||
<div class="ico"></div>
|
||||
|
|
@ -39,10 +95,15 @@
|
|||
미리보기를 지원하지 않는 파일입니다.
|
||||
</div>
|
||||
<div>
|
||||
<button colori mat-raised-button aria-label="" (click)="onClickDownload()">
|
||||
<button
|
||||
colori
|
||||
mat-raised-button
|
||||
aria-label=""
|
||||
(click)="onClickDownload()"
|
||||
>
|
||||
Download
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
justify-content: center;
|
||||
align-items: center;
|
||||
border:2px solid #ffffff;
|
||||
background-color:rgba(256, 256, 256, 0.6);
|
||||
background-color:rgba(256, 256, 256, 0.7);
|
||||
}
|
||||
.guide-msg{
|
||||
font-size:16px;
|
||||
|
|
|
|||
|
|
@ -15,9 +15,15 @@
|
|||
>delete</mat-icon
|
||||
>
|
||||
</mat-toolbar>
|
||||
<mat-progress-bar
|
||||
*ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
|
||||
mode="determinate"
|
||||
[value]="fileDownloadItem.downloadingProgress$ | async"
|
||||
></mat-progress-bar>
|
||||
<div style="position: relative;">
|
||||
<div
|
||||
*ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
|
||||
style="position: absolute; width: 100%;"
|
||||
>
|
||||
<mat-progress-bar
|
||||
mode="determinate"
|
||||
[value]="fileDownloadItem.downloadingProgress$ | async"
|
||||
></mat-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -143,11 +143,17 @@
|
|||
</svg>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<mat-progress-bar
|
||||
*ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
|
||||
mode="determinate"
|
||||
[value]="fileDownloadItem.downloadingProgress$ | async"
|
||||
></mat-progress-bar>
|
||||
<div style="position: relative;">
|
||||
<div
|
||||
*ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
|
||||
style="position: absolute; width: 100%;"
|
||||
>
|
||||
<mat-progress-bar
|
||||
mode="determinate"
|
||||
[value]="fileDownloadItem.downloadingProgress$ | async"
|
||||
></mat-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ucap-image-viewer-body">
|
||||
<div
|
||||
class="ucap-image-viewer-image-wrapper"
|
||||
|
|
|
|||
|
|
@ -5,28 +5,43 @@
|
|||
<span class="ucap-sound-viewer-spacer"></span>
|
||||
<button
|
||||
mat-icon-button
|
||||
class="ucap-sound-viewer-action"
|
||||
class="ucap-image-viewer-action"
|
||||
matTooltip="다운로드"
|
||||
matTooltipPosition="below"
|
||||
aria-label=""
|
||||
(click)="onClickDownload()"
|
||||
>
|
||||
<mat-icon>get_app</mat-icon>
|
||||
<!--<mat-icon>get_app</mat-icon>-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
|
||||
<path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5" />
|
||||
</svg>
|
||||
</button>
|
||||
<span class="stroke-bar"></span>
|
||||
<button
|
||||
mat-raised-button
|
||||
color="primary"
|
||||
class="ucap-sound-viewer-action"
|
||||
mat-icon-button
|
||||
color="warn"
|
||||
class="ucap-image-viewer-action btn-close"
|
||||
(click)="onClickClose()"
|
||||
>
|
||||
Close
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="21" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
stroke-width="2" stroke-linecap="butt" stroke-linejoin="round">
|
||||
<line x1="18" y1="6" x2="6" y2="18"></line>
|
||||
<line x1="6" y1="6" x2="18" y2="18"></line>
|
||||
</svg>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<mat-progress-bar
|
||||
*ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
|
||||
mode="determinate"
|
||||
[value]="fileDownloadItem.downloadingProgress$ | async"
|
||||
></mat-progress-bar>
|
||||
<div style="position: relative;">
|
||||
<div
|
||||
*ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
|
||||
style="position: absolute; width: 100%;"
|
||||
>
|
||||
<mat-progress-bar
|
||||
mode="determinate"
|
||||
[value]="fileDownloadItem.downloadingProgress$ | async"
|
||||
></mat-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ucap-sound-viewer-body">
|
||||
<div
|
||||
class="ucap-sound-viewer-sound-icon"
|
||||
|
|
@ -44,46 +59,50 @@
|
|||
(loadstart)="onLoadStartAudio()"
|
||||
(loadeddata)="onLoadedDataAudio()"
|
||||
></audio>
|
||||
<mat-icon class="ucap-sound-viewer-icon">music_note</mat-icon>
|
||||
</div>
|
||||
<div
|
||||
class="ucap-sound-viewer-sound-time"
|
||||
fxLayout="row"
|
||||
fxLayout.xs="column"
|
||||
fxLayoutAlign="center center"
|
||||
>
|
||||
<mat-slider
|
||||
#timeSlider
|
||||
min="0"
|
||||
[max]="duration"
|
||||
[value]="currentTime"
|
||||
(change)="onChangeTimeSlider($event)"
|
||||
>
|
||||
</mat-slider>
|
||||
</div>
|
||||
<div
|
||||
class="ucap-sound-viewer-sound-controls"
|
||||
fxLayout="row"
|
||||
fxLayout.xs="column"
|
||||
fxLayoutAlign="center center"
|
||||
>
|
||||
<div class="ucap-sound-viewer-sound-time-current">
|
||||
{{ currentTime | ucapSecondsToMinutes }}
|
||||
<div class="circle-box">
|
||||
<mat-icon class="ucap-sound-viewer-icon">music_note</mat-icon>
|
||||
</div>
|
||||
<span class="ucap-sound-viewer-spacer"></span>
|
||||
<button
|
||||
mat-icon-button
|
||||
class="ucap-sound-viewer-action"
|
||||
[matTooltip]="playing ? '멈춤' : '재생'"
|
||||
aria-label=""
|
||||
(click)="onClickPlayOrPause()"
|
||||
</div>
|
||||
<div class="viewer-bottom">
|
||||
<div
|
||||
class="ucap-sound-viewer-sound-time"
|
||||
fxLayout="row"
|
||||
fxLayout.xs="column"
|
||||
fxLayoutAlign="center center"
|
||||
>
|
||||
<mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>
|
||||
</button>
|
||||
<span class="ucap-sound-viewer-spacer"></span>
|
||||
<div class="ucap-sound-viewer-sound-time-total">
|
||||
{{ duration | ucapSecondsToMinutes }}
|
||||
<mat-slider
|
||||
#timeSlider
|
||||
min="0"
|
||||
[max]="duration"
|
||||
[value]="currentTime"
|
||||
(change)="onChangeTimeSlider($event)"
|
||||
>
|
||||
</mat-slider>
|
||||
</div>
|
||||
<div
|
||||
class="ucap-sound-viewer-sound-controls"
|
||||
fxLayout="row"
|
||||
fxLayout.xs="column"
|
||||
fxLayoutAlign="center center"
|
||||
>
|
||||
<div class="ucap-sound-viewer-sound-time-current">
|
||||
{{ currentTime | ucapSecondsToMinutes }}
|
||||
</div>
|
||||
<span class="ucap-sound-viewer-spacer"></span>
|
||||
<button
|
||||
mat-icon-button
|
||||
class="ucap-sound-viewer-action"
|
||||
[matTooltip]="playing ? '멈춤' : '재생'"
|
||||
aria-label=""
|
||||
(click)="onClickPlayOrPause()"
|
||||
>
|
||||
<mat-icon>{{ playing ? 'pause' : 'play_arrow' }}</mat-icon>
|
||||
</button>
|
||||
<span class="ucap-sound-viewer-spacer"></span>
|
||||
<div class="ucap-sound-viewer-sound-time-total">
|
||||
{{ duration | ucapSecondsToMinutes }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -4,40 +4,73 @@
|
|||
|
||||
.ucap-sound-viewer-header {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
height: 60px;
|
||||
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.6);
|
||||
background-color: #333333;
|
||||
|
||||
.ucap-sound-viewer-icon {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.ucap-sound-viewer-title {
|
||||
font-size:16px;
|
||||
}
|
||||
.stroke-bar {
|
||||
width: 1px;
|
||||
height: 30px;
|
||||
background-color: rgba(256, 256, 256, 0.3);
|
||||
margin: 0 10px;
|
||||
}
|
||||
.ucap-sound-viewer-action {
|
||||
&:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.ucap-sound-viewer-body {
|
||||
position: relative;
|
||||
background-color: white;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-bottom: 70px;
|
||||
height: calc(100% - 60px);
|
||||
|
||||
.ucap-sound-viewer-sound-icon {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
}
|
||||
.ucap-sound-viewer-sound-time {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
.ucap-sound-viewer-sound-controls {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
|
||||
.ucap-sound-viewer-sound-time-current {
|
||||
padding-left: 30px;
|
||||
.circle-box{
|
||||
display:flex;
|
||||
width:140px;
|
||||
height:140px;
|
||||
border-radius:50%;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border:2px solid #ffffff;
|
||||
background-color:rgba(256, 256, 256, 0.7);
|
||||
.mat-icon{
|
||||
font-size: 100px;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.ucap-sound-viewer-sound-time-total {
|
||||
padding-right: 30px;
|
||||
.ucap-sound-viewer-sound-icon{
|
||||
width: 100%;
|
||||
height: calc(100% - 80px);
|
||||
}
|
||||
.viewer-bottom{
|
||||
background-color: #212121;
|
||||
color:#ffffff;
|
||||
.ucap-sound-viewer-sound-time {
|
||||
width: 100%;
|
||||
height: 30px;
|
||||
}
|
||||
.ucap-sound-viewer-sound-controls {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
|
||||
.ucap-sound-viewer-sound-time-current {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
.ucap-sound-viewer-sound-time-total {
|
||||
padding-right: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -45,9 +78,22 @@
|
|||
flex: 1 1 auto;
|
||||
}
|
||||
.ucap-sound-viewer-action {
|
||||
.mat-icon{
|
||||
font-size: 40px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
line-height:40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
mat-slider {
|
||||
width: 95%;
|
||||
width: 94%;
|
||||
}
|
||||
|
||||
::ng-deep .mat-slider-horizontal .mat-slider-track-background{
|
||||
background-color: #999999 !important;
|
||||
}
|
||||
::ng-deep .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb{
|
||||
border-color: #999999 !important;
|
||||
}
|
||||
|
|
@ -73,11 +73,17 @@
|
|||
</svg>
|
||||
</button>
|
||||
</mat-toolbar>
|
||||
<mat-progress-bar
|
||||
*ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
|
||||
mode="determinate"
|
||||
[value]="fileDownloadItem.downloadingProgress$ | async"
|
||||
></mat-progress-bar>
|
||||
<div style="position: relative;">
|
||||
<div
|
||||
*ngIf="fileDownloadItem && fileDownloadItem.downloadingProgress$"
|
||||
style="position: absolute; width: 100%;"
|
||||
>
|
||||
<mat-progress-bar
|
||||
mode="determinate"
|
||||
[value]="fileDownloadItem.downloadingProgress$ | async"
|
||||
></mat-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ucap-video-viewer-body">
|
||||
<div
|
||||
class="ucap-video-viewer-video-icon"
|
||||
|
|
|
|||
|
|
@ -71,7 +71,7 @@ export class SplashScreenService {
|
|||
.build([
|
||||
style({ opacity: '1' }),
|
||||
animate(
|
||||
'400ms ease',
|
||||
'700ms ease',
|
||||
style({
|
||||
opacity: '0',
|
||||
display: 'none',
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user