mobile enhancements (#550)

* hide menu bar elements on small screens

* show less columns on handsets

* reduce pagination for handsets
This commit is contained in:
Denys Vuika
2018-08-06 12:18:03 +01:00
committed by Cilibiu Bogdan
parent 8f3030760a
commit 54f879f5e6
17 changed files with 177 additions and 20 deletions

View File

@@ -59,6 +59,7 @@
</data-column>
<data-column
*ngIf="!isSmallScreen"
key="content.sizeInBytes"
title="APP.DOCUMENT_LIST.COLUMNS.SIZE">
<ng-template let-value="value">
@@ -67,6 +68,7 @@
</data-column>
<data-column
*ngIf="!isSmallScreen"
key="modifiedAt"
title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON">
<ng-template let-value="value">
@@ -75,6 +77,7 @@
</data-column>
<data-column
*ngIf="!isSmallScreen"
class="adf-data-table-cell--ellipsis"
key="modifiedByUser.displayName"
title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY">

View File

@@ -35,6 +35,7 @@ import { PageComponent } from '../page.component';
import { ContentApiService } from '../../services/content-api.service';
import { ExtensionService } from '../../extensions/extension.service';
import { SetCurrentFolderAction } from '../../store/actions';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
@Component({
templateUrl: './files.component.html'
@@ -42,6 +43,7 @@ import { SetCurrentFolderAction } from '../../store/actions';
export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
isValidPath = true;
isSmallScreen = false;
private nodePath: PathElement[];
@@ -52,7 +54,8 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
private nodeActionsService: NodeActionsService,
private uploadService: UploadService,
content: ContentManagementService,
extensions: ExtensionService) {
extensions: ExtensionService,
private breakpointObserver: BreakpointObserver) {
super(store, extensions, content);
}
@@ -95,6 +98,15 @@ export class FilesComponent extends PageComponent implements OnInit, OnDestroy {
content.nodesRestored.subscribe(() => this.documentList.reload()),
uploadService.fileUploadComplete.debounceTime(300).subscribe(file => this.onFileUploadedEvent(file)),
uploadService.fileUploadDeleted.debounceTime(300).subscribe((file) => this.onFileUploadedEvent(file)),
this.breakpointObserver
.observe([
Breakpoints.HandsetPortrait,
Breakpoints.HandsetLandscape
])
.subscribe(result => {
this.isSmallScreen = result.matches;
})
]);
}