inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-31 17:38:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ACA-1245] Document List - pagination is missing (#260)

Browse Source 
* refactor styling

* disable :hoover in empty folders content
This commit is contained in:
Cilibiu Bogdan
2018-03-27 14:33:27 +03:00
committed by Denys Vuika
parent c8ace1f5f1
commit 330b795aa6
14 changed files with 149 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/app/components/adf-layout/layout-container.component.scss
View File

@@ -1,15 +1,11 @@
@import 'mixins';
:host {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
@include flex-column;
}
ng-content {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
@include flex-column;
}
.sidenav--hidden {
@@ -20,10 +16,7 @@ ng-content {
}
.mat-sidenav-container {
display: block;
width: 100%;
height: 100%;
overflow: hidden;
@include flex-column;
}
.mat-sidenav {

7
src/app/components/adf-layout/sidenav-layout.component.scss
View File

@@ -1,9 +1,10 @@
@import 'mixins';
:host {
display: flex;
flex: 1;
@include flex-column;
.sidenav-layout {
width: 100%;
@include flex-column;
}
router-outlet {

9
src/app/components/favorites/favorites.component.html
View File

@@ -97,9 +97,9 @@
</adf-toolbar>
</div>
<div class="inner-layout__content">
<div class="inner-layout__panel">
<div class="inner-layout__panel" [ngClass]="{'adf-document-list--loading': documentList.isEmpty()}">
<adf-document-list #documentList
[attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
[attr.class]="documentList.isEmpty() ? 'adf-document-list--empty' : ''"
currentFolderId="-favorites-"
selectionMode="multiple"
[navigate]="false"
@@ -167,10 +167,13 @@
</data-columns>
</adf-document-list>
<adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
<ng-container *ngIf="!documentList.isEmpty()">
<adf-pagination
[target]="documentList"
(changePageSize)="onChangePageSize($event)">
</adf-pagination>
</ng-container>
</div>
<div class="inner-layout__side-panel"

8
src/app/components/files/files.component.html
View File

@@ -101,18 +101,18 @@
</adf-toolbar>
</div>
<div [attr.class]="isValidPath ? 'content--hide' : 'inner-layout__content'">
<div [attr.class]="isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">
<app-generic-error></app-generic-error>
</div>
<div [attr.class]="!isValidPath ? 'content--hide' : 'inner-layout__content'">
<div class="inner-layout__panel">
<div [attr.class]="!isValidPath ? 'inner-layout__content--hide' : 'inner-layout__content'">
<div class="inner-layout__panel" [ngClass]="{'adf-document-list--loading': isLoading}">
<adf-upload-drag-area
[parentId]="node?.id"
[disabled]="!canCreateContent(node)">
<adf-document-list #documentList
[attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
[attr.class]="documentList.isEmpty() ? 'adf-document-list--empty' : ''"
[loading]="isLoading"
[node]="paging"
[sorting]="sorting"

8
src/app/components/libraries/libraries.component.html
View File

@@ -7,9 +7,9 @@
</div>
<div class="inner-layout__content">
<div class="inner-layout__panel">
<div class="inner-layout__panel" [ngClass]="{'adf-document-list--loading': isLoading}">
<adf-document-list #documentList
[attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
[attr.class]="documentList.isEmpty() ? 'adf-document-list--empty' : ''"
currentFolderId="-mysites-"
selectionMode="none"
[navigate]="false"
@@ -66,10 +66,12 @@
</data-columns>
</adf-document-list>
<adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
<ng-container *ngIf="!documentList.isEmpty()">
<adf-pagination
[target]="documentList"
(changePageSize)="onChangePageSize($event)">
</adf-pagination>
</ng-container>
</div>
</div>
</div>

9
src/app/components/recent-files/recent-files.component.html
View File

@@ -91,9 +91,9 @@
</div>
<div class="inner-layout__content">
<div class="inner-layout__panel">
<div class="inner-layout__panel" [ngClass]="{'adf-document-list--loading': documentList.isEmpty()}">
<adf-document-list #documentList
[attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
[attr.class]="documentList.isEmpty() ? 'adf-document-list--empty' : ''"
currentFolderId="-recent-"
selectionMode="multiple"
[navigate]="false"
@@ -156,10 +156,13 @@
</data-columns>
</adf-document-list>
<adf-pagination [ngClass]="{'no-border' : documentList.isEmpty()}"
<ng-container *ngIf="!documentList.isEmpty()">
<adf-pagination
[target]="documentList"
(changePageSize)="onChangePageSize($event)">
</adf-pagination>
</ng-container>
</div>
<div class="inner-layout__side-panel"

9
src/app/components/shared-files/shared-files.component.html
View File

@@ -99,9 +99,9 @@
</div>
<div class="inner-layout__content">
<div class="inner-layout__panel">
<div class="inner-layout__panel" [ngClass]="{'adf-document-list--loading': documentList.isEmpty()}">
<adf-document-list #documentList
[attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
[attr.class]="documentList.isEmpty() ? 'adf-document-list--empty' : ''"
currentFolderId="-sharedlinks-"
selectionMode="multiple"
[sorting]="sorting"
@@ -173,10 +173,13 @@
</data-columns>
</adf-document-list>
<adf-pagination [ngClass]="{ 'no-border' :documentList.isEmpty()}"
<ng-container *ngIf="!documentList.isEmpty()">
<adf-pagination
[target]="documentList"
(changePageSize)="onChangePageSize($event)">
</adf-pagination>
</ng-container>
</div>
<div class="inner-layout__side-panel"

10
src/app/components/trashcan/trashcan.component.html
View File

@@ -27,9 +27,9 @@
</div>
<div class="inner-layout__content">
<div class="inner-layout__panel">
<div class="inner-layout__panel" [ngClass]="{'adf-document-list--loading': documentList.isEmpty()}">
<adf-document-list #documentList
[attr.class]="documentList.isEmpty() ? 'empty-list' : ''"
[attr.class]="documentList.isEmpty() ? 'adf-document-list--empty' : ''"
currentFolderId="-trashcan-"
selectionMode="multiple"
[navigate]="false"
@@ -96,12 +96,14 @@
</data-column>
</data-columns>
</adf-document-list>
<adf-pagination [ngClass]="{ 'no-border' : documentList.isEmpty()}"
<ng-container *ngIf="!documentList.isEmpty()">
<adf-pagination
[target]="documentList"
(changePageSize)="onChangePageSize($event)">
</adf-pagination>
</ng-container>
</div>
</div>
</div>

97
src/app/ui/_layout.scss
View File

@@ -1,65 +1,21 @@
@import 'variables';
@import 'mixins';
$app-layout--header-height: 65px;
$app-layout--side-width: 320px;
$app-inner-layout--header-height: 48px;
$app-inner-layout--footer-height: 48px;
.layout {
display: flex;
flex-direction: column;
flex: 1 0;
overflow: hidden;
&__header {
flex: 0 0 $app-layout--header-height;
}
&__content {
display: flex;
flex: 1;
flex-direction: row;
overflow: hidden;
& > * {
display: flex;
flex: 1;
}
}
.content--hide {
display: none !important;
}
@include flex-column;
}
.inner-layout {
display: flex;
flex: 1;
flex-direction: column;
.adf-info-drawer {
width: 350px;
height: 100%;
overflow-y: auto;
}
.no-border {
border: unset
}
&--scroll {
overflow: auto;
}
&__header,
&__footer {
display: flex;
flex: 0 0;
align-items: center;
}
@include flex-column;
&__header {
display: flex;
align-items: center;
flex: 0 0 $app-layout--header-height;
flex-basis: $app-inner-layout--header-height;
background: $alfresco-gray-background;
border-bottom: 1px solid $alfresco-divider-color;
@@ -67,39 +23,30 @@ $app-inner-layout--footer-height: 48px;
}
&__content {
display: flex;
flex-direction: row;
flex: 1;
overflow: hidden;
background: #fff;
}
&__panel {
width: 100%;
height: 100%;
display: flex;
flex:1;
flex-direction: column;
border-right: 1px solid rgba(0, 0, 0, 0.07);
}
&__side-panel {
display: flex;
width: 350px;
height: 100%;
@include flex-row;
}
&__content--scroll {
overflow: auto;
}
&__footer {
flex-basis: $app-inner-layout--footer-height;
border-top: 1px solid $alfresco-divider-color;
&__content--hide {
display: none !important;
}
app-generic-error {
&__panel {
@include flex-column;
border-right: 1px solid rgba(0, 0, 0, 0.07);
}
&__side-panel {
display: block;
height: 100%;
width: 100%;
overflow-y: scroll;
}
}
app-generic-error {
height: 100%;
width: 100%;
}

18
src/app/ui/application.scss
View File

@@ -1,25 +1,25 @@
@import 'mixins';
@import 'variables';
@import 'theme';
html, body, ng-component {
display: flex;
html, body {
@include flex-column;
font-size: 14px;
font-family: "Muli", sans-serif;
color: $alfresco-primary-text-color;
overflow: hidden;
width: 100%;
height: 100%;
margin: 0;
}
app-root > ng-component {
display: block;
width: 100%;
height: 100%;
app-root,
app-layout,
adf-layout-container,
ng-component {
@include flex-column;
}
@import 'layout';
@import './overrides/adf-login';
@import './overrides/alfresco-document-list';
@import './overrides/alfresco-upload-drag-area';
@import './overrides/alfresco-upload-button';

15
src/app/ui/mixins.scss Normal file
View File

@@ -0,0 +1,15 @@
@mixin flex-column {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
overflow: hidden;
}
@mixin flex-row {
display: flex;
flex-direction: row;
flex: 1;
height: 100%;
overflow: hidden;
}

5
src/app/ui/overrides/_adf-login.scss Normal file
View File

@@ -0,0 +1,5 @@
@import 'mixins';
adf-login {
@include flex-column;
}

39
src/app/ui/overrides/_alfresco-document-list.scss
View File

@@ -1,16 +1,27 @@
@import '../variables';
@import 'variables-color';
@import 'mixins';
adf-document-list {
display: flex;
flex-direction: column;
flex: 1;
overflow: auto;
@include flex-column;
}
& > adf-datatable {
height: 100%;
.adf-document-list--loading {
.adf-data-table {
@include flex-column;
justify-content: center;
align-items: center;
}
.adf-datatable-table-cell {
border: none !important;
}
}
adf-datatable {
@include flex-column;
overflow-y: scroll;
}
.adf-data-table {
border: none !important;
@@ -54,8 +65,7 @@ adf-document-list {
}
}
.adf-datatable-header:first-of-type, .adf-datatable-header.adf-data-table-cell--image,
.adf-data-table-cell:first-of-type, .adf-data-table-cell.adf-data-table-cell--image {
.adf-datatable-body .adf-data-table-cell--image {
padding-left: 24px;
padding-right: 0;
width: 10px;
@@ -89,13 +99,16 @@ adf-document-list {
}
}
.empty-list {
.adf-document-list--empty {
.adf-data-table {
height: 100%;
@include flex-column;
justify-content: center;
align-items: center;
}
.adf-datatable-row:hover, .adf-datatable-row:focus {
.adf-data-table .adf-datatable-row:hover,
.adf-data-table .adf-datatable-row:focus {
background-color: unset;
cursor: default;
}
}
}

23
src/app/ui/overrides/_alfresco-upload-drag-area.scss
View File

@@ -1,4 +1,5 @@
@import '../_variables.scss';
@import 'mixins';
@import 'variables.scss';
@mixin file-draggable__input-focus {
color: $alfresco-secondary-text-color !important;
@@ -6,6 +7,17 @@
margin-left: 0 !important;
}
adf-upload-drag-area {
@include flex-column;
.upload-border {
@include flex-column;
vertical-align: unset;
text-align: unset;
}
}
adf-upload-drag-area:first-child {
& > div {
adf-upload-drag-area {
@@ -34,15 +46,6 @@ adf-upload-drag-area:first-child {
}
adf-upload-drag-area {
height: 100%;
width: 100%;
& > div {
height: 100%;
display: flex;
flex-direction: column;
}
.file-draggable__input-focus {
adf-document-list {
background: $alfresco-app-color--hue-1;