스크롤 조정
This commit is contained in:
khk
parent
e6a7838dff
commit
c5d336a297
|
|
@ -119,7 +119,7 @@
|
|||
</mat-tab-group>
|
||||
|
||||
<div class="left-side-tabs-body">
|
||||
<div #tabs id="tabs-0" style="display: block;">
|
||||
<div #tabs id="tabs-0">
|
||||
<app-layout-chat-left-sidenav-group
|
||||
class="left-group-side"
|
||||
(newGroupAndMember)="onClickNewGroupAndMember()"
|
||||
|
|
|
|||
|
|
@ -5,16 +5,22 @@
|
|||
|
||||
::ng-deep .mat-tab-body-wrapper,
|
||||
::ng-deep .mat-tab-body {
|
||||
height: 0%;
|
||||
width: 0%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
::ng-deep .mat-tab-header {
|
||||
border-bottom: none !important;
|
||||
}
|
||||
|
||||
.left-side-tabs-body {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
width: calc(100% - 70px);
|
||||
div[id^=tabs] {
|
||||
height:100%;
|
||||
width:100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
|
|
@ -41,6 +47,7 @@
|
|||
height: 280px;
|
||||
padding-top: 10px;
|
||||
.mat-tab-label {
|
||||
width:100%;
|
||||
height: 80px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@
|
|||
[oraganizationList]="departmentInfoList$ | async"
|
||||
[loginRes]="loginRes"
|
||||
(selected)="onSelectedOrganization($event)"
|
||||
class="tab-tree-frame"
|
||||
></ucap-organization-tree>
|
||||
</perfect-scrollbar>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -154,3 +154,13 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
::ng-deep .oraganization-tab{
|
||||
.oraganization-tab-tree,
|
||||
.select-list{
|
||||
.ps{
|
||||
.ps-content{
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,6 +15,10 @@
|
|||
height:100% !important;
|
||||
border-right: 1px solid #dddddd;
|
||||
overflow: auto;
|
||||
.tab-tree-frame{
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
.select-list {
|
||||
display: inline-flex;
|
||||
|
|
@ -66,6 +70,7 @@
|
|||
}
|
||||
::ng-deep .mat-dialog-container .mat-tab-body-wrapper {
|
||||
height: 380px;
|
||||
width:100%;
|
||||
}
|
||||
.list-panel{
|
||||
overflow: auto;
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
[size]="leftSideComponentWidth"
|
||||
minSize="300"
|
||||
maxSize="500"
|
||||
class="split-area"
|
||||
>
|
||||
<div class="left-side">
|
||||
<app-layout-messenger-left-side
|
||||
|
|
@ -41,6 +42,7 @@
|
|||
mode="side"
|
||||
position="end"
|
||||
(openedChange)="onOpenedChange($event)"
|
||||
class="rightDrawer"
|
||||
>
|
||||
<app-layout-messenger-right-drawer
|
||||
[selectedRightDrawer]="selectedRightDrawer$ | async"
|
||||
|
|
|
|||
|
|
@ -1,29 +1,42 @@
|
|||
.container {
|
||||
height: 100%;
|
||||
height:100%;
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
padding-top: 30px;
|
||||
border: 3px solid #4f4f4f;
|
||||
border-top: none;
|
||||
|
||||
.left-side {
|
||||
.split-area{
|
||||
overflow: hidden;
|
||||
.left-side {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.contents {
|
||||
flex: 1 1 auto;
|
||||
min-width: 400px;
|
||||
height: 100%;
|
||||
|
||||
.messages {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.rightDrawer{
|
||||
width:420px;
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
.right-side {
|
||||
height: 100%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-drawer-inner-container{
|
||||
overflow: unset !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ ol {
|
|||
list-style: none;
|
||||
}
|
||||
$lg-red: (
|
||||
50: #ffffff,
|
||||
50: #faf3f6,
|
||||
100: #f8bbd0,
|
||||
200: #f48fb1,
|
||||
300: #f06292,
|
||||
|
|
@ -78,6 +78,39 @@ $lg-red: (
|
|||
)
|
||||
);
|
||||
|
||||
$daesang: (
|
||||
50: #e0f7fa,
|
||||
100: #b2ebf2,
|
||||
200: #80deea,
|
||||
300: #4dd0e1,
|
||||
400: #26c6da,
|
||||
500: #00bcd4,
|
||||
/*600: #00acc1,*/ 600: #00b6d5,
|
||||
700: #0097a7,
|
||||
800: #00838f,
|
||||
900: #006064,
|
||||
A100: #84ffff,
|
||||
A200: #18ffff,
|
||||
A400: #00e5ff,
|
||||
A700: #00b8d4,
|
||||
contrast: (
|
||||
50: $dark-primary-text,
|
||||
100: $dark-primary-text,
|
||||
200: $dark-primary-text,
|
||||
300: $dark-primary-text,
|
||||
400: $dark-primary-text,
|
||||
500: $light-primary-text,
|
||||
600: $light-primary-text,
|
||||
700: $light-primary-text,
|
||||
800: $light-primary-text,
|
||||
900: $light-primary-text,
|
||||
A100: $dark-primary-text,
|
||||
A200: $dark-primary-text,
|
||||
A400: $dark-primary-text,
|
||||
A700: $dark-primary-text,
|
||||
)
|
||||
);
|
||||
|
||||
@mixin ucap-material-theme($theme) {
|
||||
@include ucap-core-theme($theme);
|
||||
}
|
||||
|
|
@ -101,10 +134,18 @@ $lg-red: (
|
|||
background: mat-color($primary);
|
||||
color: mat-color($primary, default-contrast);
|
||||
}
|
||||
.bg-accent-darkest {
|
||||
background: mat-color($accent, 900);
|
||||
color: mat-color($primary, default-contrast);
|
||||
}
|
||||
.bg-accent-dark {
|
||||
background: mat-color($accent, 600);
|
||||
color: mat-color($primary, default-contrast);
|
||||
}
|
||||
.bg-accent-brightest {
|
||||
background: mat-color($accent, 50);
|
||||
color: mat-color($primary, $dark-primary-text);
|
||||
}
|
||||
.bg-accent-light {
|
||||
background: mat-color($accent, 300) !important;
|
||||
color: mat-color($primary, default-contrast);
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
.bubble-main{
|
||||
padding:10px;
|
||||
img{
|
||||
height:140px;
|
||||
width:auto;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<cdk-virtual-scroll-viewport #cvsvOrganization itemSize="48" fxFlexFill>
|
||||
<cdk-virtual-scroll-viewport #cvsvOrganization itemSize="40" fxFlexFill>
|
||||
<ng-container
|
||||
*cdkVirtualFor="let node of dataSource.expandedData$"
|
||||
></ng-container>
|
||||
|
|
@ -9,9 +9,9 @@
|
|||
class="organization-tree"
|
||||
>
|
||||
<!-- This is the tree node template for leaf nodes -->
|
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding>
|
||||
<mat-tree-node *matTreeNodeDef="let node" matTreeNodePadding class="mat-tree-last-node">
|
||||
<li>
|
||||
<div class="mat-tree-node" (click)="onClickNode(node)">
|
||||
<div (click)="onClickNode(node)">
|
||||
{{ node.name }}
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
class="tree-node-frame"
|
||||
>
|
||||
<li>
|
||||
<div class="mat-tree-node" (click)="onClickNode(node)" class="path">
|
||||
<div (click)="onClickNode(node)" class="path">
|
||||
<span class="horizontal-line"></span>
|
||||
<button
|
||||
mat-icon-button
|
||||
|
|
|
|||
|
|
@ -6,14 +6,13 @@
|
|||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
list-style-type: none;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.organization-tree-node-invisible {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tree-node-frame {
|
||||
/*.tree-node-frame {
|
||||
li {
|
||||
.path {
|
||||
.horizontal-line {
|
||||
|
|
@ -33,6 +32,37 @@
|
|||
box-shadow: 0 1px 4px rgba(32, 33, 36, 0.1);
|
||||
}
|
||||
}
|
||||
}*/
|
||||
.organization-tree{
|
||||
.tree-node-frame {
|
||||
height:40px;
|
||||
min-height:40px;
|
||||
li{
|
||||
display:flex;
|
||||
align-items: center;
|
||||
cursor:pointer;
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
.mat-tree-last-node{
|
||||
height:30px;
|
||||
min-height:30px;
|
||||
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 {
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@ $thumbnail-msize: 40px;
|
|||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: calc(100% - 60px);
|
||||
|
||||
.detail {
|
||||
flex-direction: column;
|
||||
width: calc(100% - 80px);
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user