앨범,파일함- 퍼펙트 스크롤 적용
This commit is contained in:
khk
parent
534e026742
commit
b43afc3ebb
|
|
@ -33,6 +33,7 @@
|
|||
width: 70px;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
::ng-deep .organization-side {
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
|
|
@ -44,6 +45,7 @@
|
|||
flex-flow: column;
|
||||
height: 280px;
|
||||
padding-top: 10px;
|
||||
border-bottom: none;
|
||||
.mat-tab-label {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
|
|
@ -92,11 +94,15 @@
|
|||
.mat-tab-label-content {
|
||||
.icon-item {
|
||||
transform: scale(1);
|
||||
/*svg {
|
||||
stroke: #ef4c73;
|
||||
fill: #ef4c73;
|
||||
}*/
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .ps {
|
||||
.ps-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
}
|
||||
|
||||
.list-search {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 60px;
|
||||
|
|
|
|||
|
|
@ -16,13 +16,6 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
::ng-deep .ps {
|
||||
.ps-content {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.search-result {
|
||||
height: calc(100% - 130px);
|
||||
|
|
@ -52,7 +45,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.list-item-frame{
|
||||
width:100%;
|
||||
height:100%;
|
||||
.list-item-frame {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -10,3 +10,10 @@
|
|||
margin-left:auto;
|
||||
}
|
||||
}
|
||||
::ng-deep .mat-tab-labels {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-bottom: 2px solid #dddddd;
|
||||
flex: 1 1 auto;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
<div fxLayout="column" class="album-box">
|
||||
<div fxLayout="column" class="rightDrawer-albumbox">
|
||||
<div>
|
||||
<mat-tab-group (selectedIndexChange)="onSelectedIndexChange($event)">
|
||||
<mat-tab label="Image"></mat-tab>
|
||||
|
|
@ -81,7 +81,7 @@
|
|||
</ng-container>
|
||||
</div>
|
||||
<div class="search-list">
|
||||
<perfect-scrollbar>
|
||||
<perfect-scrollbar class="album-scrollbar">
|
||||
<div
|
||||
*ngFor="let fileInfo of filteredList"
|
||||
class="img-item"
|
||||
|
|
|
|||
|
|
@ -13,17 +13,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
.album-box {
|
||||
::ng-deep .rightDrawer-albumbox {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.search-list {
|
||||
overflow: auto;
|
||||
.mat-tab-labels {
|
||||
.mat-tab-label {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-tab-label{
|
||||
width:50%;
|
||||
}
|
||||
|
||||
.select-filebox{
|
||||
|
|
@ -32,6 +29,7 @@
|
|||
margin:10px;
|
||||
padding:10px;
|
||||
border:1px solid #cccccc;
|
||||
border-radius: 4px;
|
||||
.select-file{
|
||||
color: #212121;
|
||||
border-bottom: 1px dotted #dddddd;
|
||||
|
|
@ -66,6 +64,7 @@
|
|||
height: calc(100% - 450px);
|
||||
overflow-y: auto;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.img-item {
|
||||
cursor: pointer;
|
||||
margin-bottom:10px;
|
||||
|
|
@ -99,6 +98,14 @@
|
|||
}
|
||||
}
|
||||
|
||||
::ng-deep .album-scrollbar{
|
||||
.ps{
|
||||
.ps-content{
|
||||
display:flex;
|
||||
flex-flow: wrap;
|
||||
}
|
||||
}
|
||||
}
|
||||
.preview-image,
|
||||
.preview-video{
|
||||
max-height: 140px;
|
||||
|
|
|
|||
|
|
@ -123,6 +123,7 @@
|
|||
</ng-container>
|
||||
</div>
|
||||
<div fxFlex="0 0 auto" class="table-box">
|
||||
<perfect-scrollbar class="album-scrollbar">
|
||||
<table mat-table [dataSource]="dataSource" matSort>
|
||||
<ng-container matColumnDef="check">
|
||||
<th mat-header-cell *matHeaderCellDef>
|
||||
|
|
@ -173,6 +174,7 @@
|
|||
(click)="onClickRow(row)"
|
||||
></tr>
|
||||
</table>
|
||||
</perfect-scrollbar>
|
||||
</div>
|
||||
<div class="footer-fix">
|
||||
<mat-paginator
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.rightDrawer-filebox {
|
||||
::ng-deep .rightDrawer-filebox {
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
.rightDrawer-tab {
|
||||
|
|
@ -23,16 +23,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
::ng-deep .mat-tab-label {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.select-filebox {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
margin: 10px;
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 4px;
|
||||
.select-flie {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
|
|
@ -114,7 +111,7 @@
|
|||
}
|
||||
}
|
||||
.table-box {
|
||||
height: calc(100% - 450px);
|
||||
height: calc(100% - 440px);
|
||||
overflow-y: auto;
|
||||
}
|
||||
.mat-paginator-container {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,48 @@
|
|||
div.message-box {
|
||||
width: 600px;
|
||||
.list-search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
height: 60px;
|
||||
align-items: center;
|
||||
padding: 0;
|
||||
font-size: 14px;
|
||||
background-color: #f9f9f9;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
.searchbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
::ng-deep .searchbox {
|
||||
.mat-form-field {
|
||||
display: block;
|
||||
.mat-form-field-wrapper {
|
||||
padding: 0;
|
||||
padding-bottom: 0 !important;
|
||||
height: 100%;
|
||||
.mat-form-field-flex {
|
||||
height: 59px;
|
||||
padding: 0 10px 0 20px;
|
||||
align-items: center;
|
||||
.mat-form-field-infix {
|
||||
width: 90%;
|
||||
font-size: 14px;
|
||||
border: none;
|
||||
}
|
||||
.mat-form-field-suffix {
|
||||
.mat-icon {
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.mat-form-field-appearance-legacy {
|
||||
.mat-form-field-wrapper {
|
||||
padding: 0;
|
||||
}
|
||||
.mat-form-field-underline {
|
||||
bottom: 0;
|
||||
background-color: unset !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user