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

@@ -58,6 +58,7 @@
</data-column>
<data-column
*ngIf="!isSmallScreen"
key="path.name"
title="APP.DOCUMENT_LIST.COLUMNS.LOCATION">
<ng-template let-context>
@@ -66,12 +67,14 @@
</data-column>
<data-column
*ngIf="!isSmallScreen"
key="content.sizeInBytes"
type="fileSize"
title="APP.DOCUMENT_LIST.COLUMNS.SIZE">
</data-column>
<data-column
*ngIf="!isSmallScreen"
key="modifiedAt"
title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON">
<ng-template let-value="value">

View File

@@ -24,6 +24,7 @@
*/
import { Component, OnInit } from '@angular/core';
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
import { MinimalNodeEntity } from 'alfresco-js-api';
import { ContentManagementService } from '../../services/content-management.service';
import { PageComponent } from '../page.component';
@@ -35,10 +36,13 @@ import { ExtensionService } from '../../extensions/extension.service';
templateUrl: './recent-files.component.html'
})
export class RecentFilesComponent extends PageComponent implements OnInit {
isSmallScreen = false;
constructor(
store: Store<AppStore>,
extensions: ExtensionService,
content: ContentManagementService
content: ContentManagementService,
private breakpointObserver: BreakpointObserver
) {
super(store, extensions, content);
}
@@ -49,7 +53,16 @@ export class RecentFilesComponent extends PageComponent implements OnInit {
this.subscriptions = this.subscriptions.concat([
this.content.nodesDeleted.subscribe(() => this.reload()),
this.content.nodesMoved.subscribe(() => this.reload()),
this.content.nodesRestored.subscribe(() => this.reload())
this.content.nodesRestored.subscribe(() => this.reload()),
this.breakpointObserver
.observe([
Breakpoints.HandsetPortrait,
Breakpoints.HandsetLandscape
])
.subscribe(result => {
this.isSmallScreen = result.matches;
})
]);
}