mobile enhancements (#550)

* hide menu bar elements on small screens

* show less columns on handsets

* reduce pagination for handsets

src/app/components/current-user/current-user.component.theme.scss

@@ -34,5 +34,11 @@
             line-height: 1.43;
             letter-spacing: -0.2px;
         }
+
+        @media screen and ($mat-small) {
+            .current-user__full-name {
+                display: none;
+            }
+        }
     }
 }

src/app/components/favorites/favorites.component.html

@@ -57,6 +57,7 @@
                     </data-column>
 
                     <data-column
+                        *ngIf="!isSmallScreen"
                         key="path.name"
                         title="APP.DOCUMENT_LIST.COLUMNS.LOCATION">
                         <ng-template let-context>
@@ -65,12 +66,14 @@
                     </data-column>
 
                     <data-column
+                        *ngIf="!isSmallScreen"
                         key="sizeInBytes"
                         title="APP.DOCUMENT_LIST.COLUMNS.SIZE"
                         type="fileSize">
                     </data-column>
 
                     <data-column
+                        *ngIf="!isSmallScreen"
                         key="modifiedAt"
                         title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON">
                         <ng-template let-value="value">
@@ -79,6 +82,7 @@
                     </data-column>
 
                     <data-column
+                        *ngIf="!isSmallScreen"
                         class="adf-data-table-cell--ellipsis"
                         key="modifiedByUser.displayName"
                         title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY">

src/app/components/favorites/favorites.component.ts

@@ -26,6 +26,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { Store } from '@ngrx/store';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import {
     MinimalNodeEntity,
     MinimalNodeEntryEntity,
@@ -42,12 +43,15 @@ import { ExtensionService } from '../../extensions/extension.service';
     templateUrl: './favorites.component.html'
 })
 export class FavoritesComponent extends PageComponent implements OnInit {
+    isSmallScreen = false;
+
     constructor(
         private router: Router,
         store: Store<AppStore>,
         extensions: ExtensionService,
         private contentApi: ContentApiService,
-        content: ContentManagementService
+        content: ContentManagementService,
+        private breakpointObserver: BreakpointObserver
     ) {
         super(store, extensions, content);
     }
@@ -60,7 +64,16 @@ export class FavoritesComponent extends PageComponent implements OnInit {
             this.content.nodesRestored.subscribe(() => this.reload()),
             this.content.folderEdited.subscribe(() => this.reload()),
             this.content.nodesMoved.subscribe(() => this.reload()),
-            this.content.favoriteRemoved.subscribe(() => this.reload())
+            this.content.favoriteRemoved.subscribe(() => this.reload()),
+
+            this.breakpointObserver
+                .observe([
+                    Breakpoints.HandsetPortrait,
+                    Breakpoints.HandsetLandscape
+                ])
+                .subscribe(result => {
+                    this.isSmallScreen = result.matches;
+                })
         ]);
     }
 

src/app/components/files/files.component.html

@@ -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">

src/app/components/files/files.component.ts

@@ -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;
+                })
         ]);
     }
 

src/app/components/layout/layout.component.html

@@ -23,9 +23,10 @@
 
                         <div class="adf-toolbar--spacer"></div>
 
+                        <ng-container *ngIf="!isSmallScreen">
                             <aca-search-input></aca-search-input>
-
                             <adf-toolbar-divider></adf-toolbar-divider>
+                        </ng-container>
 
                         <aca-current-user></aca-current-user>
 

src/app/components/layout/layout.component.scss

@@ -2,3 +2,15 @@
     display: flex;
     flex: 1;
 }
+
+@media screen and (max-width: 599px) {
+    .adf-app-title {
+        display: none;
+    }
+}
+
+@media screen and (max-width: 719px) {
+    .adf-app-logo {
+        display: none;
+    }
+}

src/app/components/layout/layout.component.ts

@@ -23,24 +23,38 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { Component, OnInit, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
+import {
+    Component,
+    OnInit,
+    OnDestroy,
+    ViewChild,
+    ViewEncapsulation
+} from '@angular/core';
 import { Observable, Subject } from 'rxjs/Rx';
 import { MinimalNodeEntryEntity } from 'alfresco-js-api';
 import { NodePermissionService } from '../../services/node-permission.service';
 import { SidenavViewsManagerDirective } from './sidenav-views-manager.directive';
 import { Store } from '@ngrx/store';
 import { AppStore } from '../../store/states';
-import { currentFolder, selectAppName, selectHeaderColor, selectLogoPath } from '../../store/selectors/app.selectors';
+import {
+    currentFolder,
+    selectAppName,
+    selectHeaderColor,
+    selectLogoPath
+} from '../../store/selectors/app.selectors';
 import { takeUntil } from 'rxjs/operators';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 
 @Component({
     selector: 'app-layout',
     templateUrl: './layout.component.html',
     styleUrls: ['./layout.component.scss'],
     encapsulation: ViewEncapsulation.None,
+    host: { class: 'app-layout' }
 })
 export class LayoutComponent implements OnInit, OnDestroy {
-    @ViewChild(SidenavViewsManagerDirective) manager: SidenavViewsManagerDirective;
+    @ViewChild(SidenavViewsManagerDirective)
+    manager: SidenavViewsManagerDirective;
 
     onDestroy$: Subject<boolean> = new Subject<boolean>();
     expandedSidenav: boolean;
@@ -51,10 +65,13 @@ export class LayoutComponent implements OnInit, OnDestroy {
     headerColor$: Observable<string>;
     logo$: Observable<string>;
 
+    isSmallScreen = false;
+
     constructor(
         protected store: Store<AppStore>,
-        private permission: NodePermissionService) {
+        private permission: NodePermissionService,
-
+        private breakpointObserver: BreakpointObserver
+    ) {
         this.headerColor$ = store.select(selectHeaderColor);
         this.appName$ = store.select(selectAppName);
         this.logo$ = store.select(selectLogoPath);
@@ -69,11 +86,22 @@ export class LayoutComponent implements OnInit, OnDestroy {
 
         this.manager.run(true);
 
-        this.store.select(currentFolder)
+        this.store
+            .select(currentFolder)
             .pipe(takeUntil(this.onDestroy$))
             .subscribe(node => {
                 this.node = node;
-                this.canUpload = node && this.permission.check(node, ['create']);
+                this.canUpload =
+                    node && this.permission.check(node, ['create']);
+            });
+
+        this.breakpointObserver
+            .observe([
+                Breakpoints.HandsetPortrait,
+                Breakpoints.HandsetLandscape
+            ])
+            .subscribe(result => {
+                this.isSmallScreen = result.matches;
             });
     }
 

src/app/components/libraries/libraries.component.html

@@ -60,6 +60,7 @@
                     </data-column>
 
                     <data-column
+                        *ngIf="!isSmallScreen"
                         key="visibility"
                         title="APP.DOCUMENT_LIST.COLUMNS.STATUS">
                         <ng-template let-value="value">

src/app/components/libraries/libraries.component.ts

@@ -26,6 +26,7 @@
 import { Component, OnInit } from '@angular/core';
 import { Router, ActivatedRoute } from '@angular/router';
 import { ShareDataRow } from '@alfresco/adf-content-services';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 
 import { PageComponent } from '../page.component';
 import { Store } from '@ngrx/store';
@@ -40,12 +41,15 @@ import { ExtensionService } from '../../extensions/extension.service';
 })
 export class LibrariesComponent extends PageComponent implements OnInit {
 
+    isSmallScreen = false;
+
     constructor(private route: ActivatedRoute,
                 content: ContentManagementService,
                 private contentApi: ContentApiService,
                 store: Store<AppStore>,
                 extensions: ExtensionService,
-                private router: Router) {
+                private router: Router,
+                private breakpointObserver: BreakpointObserver) {
         super(store, extensions, content);
     }
 
@@ -56,6 +60,15 @@ export class LibrariesComponent extends PageComponent implements OnInit {
             this.content.libraryDeleted.subscribe(() => this.reload()),
             this.content.libraryCreated.subscribe((node: SiteEntry) => {
                 this.navigate(node.entry.guid);
+            }),
+
+            this.breakpointObserver
+                .observe([
+                    Breakpoints.HandsetPortrait,
+                    Breakpoints.HandsetLandscape
+                ])
+                .subscribe(result => {
+                    this.isSmallScreen = result.matches;
                 })
         );
     }

src/app/components/recent-files/recent-files.component.html

@@ -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">

src/app/components/recent-files/recent-files.component.ts

@@ -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;
+                })
         ]);
     }
 

src/app/components/shared-files/shared-files.component.html

@@ -57,6 +57,7 @@
                     </data-column>
 
                     <data-column
+                        *ngIf="!isSmallScreen"
                         key="path.name"
                         title="APP.DOCUMENT_LIST.COLUMNS.LOCATION">
                         <ng-template let-context>
@@ -65,12 +66,14 @@
                     </data-column>
 
                     <data-column
+                        *ngIf="!isSmallScreen"
                         key="content.sizeInBytes"
                         title="APP.DOCUMENT_LIST.COLUMNS.SIZE"
                         type="fileSize">
                     </data-column>
 
                     <data-column
+                        *ngIf="!isSmallScreen"
                         key="modifiedAt"
                         title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_ON">
                         <ng-template let-value="value">
@@ -79,12 +82,14 @@
                     </data-column>
 
                     <data-column
+                        *ngIf="!isSmallScreen"
                         class="adf-data-table-cell--ellipsis"
                         key="modifiedByUser.displayName"
                         title="APP.DOCUMENT_LIST.COLUMNS.MODIFIED_BY">
                     </data-column>
 
                     <data-column
+                        *ngIf="!isSmallScreen"
                         class="adf-data-table-cell--ellipsis"
                         key="sharedByUser.displayName"
                         title="APP.DOCUMENT_LIST.COLUMNS.SHARED_BY">

src/app/components/shared-files/shared-files.component.ts

@@ -24,6 +24,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { ContentManagementService } from '../../services/content-management.service';
 import { PageComponent } from '../page.component';
 import { Store } from '@ngrx/store';
@@ -34,10 +35,13 @@ import { ExtensionService } from '../../extensions/extension.service';
     templateUrl: './shared-files.component.html'
 })
 export class SharedFilesComponent extends PageComponent implements OnInit {
+    isSmallScreen = false;
+
     constructor(
         store: Store<AppStore>,
         extensions: ExtensionService,
-        content: ContentManagementService
+        content: ContentManagementService,
+        private breakpointObserver: BreakpointObserver
     ) {
         super(store, extensions, content);
     }
@@ -50,6 +54,15 @@ export class SharedFilesComponent extends PageComponent implements OnInit {
             this.content.nodesMoved.subscribe(() => this.reload()),
             this.content.nodesRestored.subscribe(() => this.reload()),
             this.content.linksUnshared.subscribe(() => this.reload()),
+
+            this.breakpointObserver
+                .observe([
+                    Breakpoints.HandsetPortrait,
+                    Breakpoints.HandsetLandscape
+                ])
+                .subscribe(result => {
+                    this.isSmallScreen = result.matches;
+                })
         ]);
     }
 }

src/app/components/trashcan/trashcan.component.html

@@ -54,6 +54,7 @@
                     </data-column>
 
                     <data-column
+                        *ngIf="!isSmallScreen"
                         key="path.name"
                         title="APP.DOCUMENT_LIST.COLUMNS.LOCATION">
                         <ng-template let-context>
@@ -62,12 +63,14 @@
                     </data-column>
 
                     <data-column
+                        *ngIf="!isSmallScreen"
                         key="content.sizeInBytes"
                         title="APP.DOCUMENT_LIST.COLUMNS.SIZE"
                         type="fileSize">
                     </data-column>
 
                     <data-column
+                        *ngIf="!isSmallScreen"
                         key="archivedAt"
                         title="APP.DOCUMENT_LIST.COLUMNS.DELETED_ON">
                         <ng-template let-value="value">
@@ -76,7 +79,7 @@
                     </data-column>
 
                     <data-column
-                        *ngIf="(user$ | async)?.isAdmin"
+                        *ngIf="!isSmallScreen && (user$ | async)?.isAdmin"
                         class="adf-data-table-cell--ellipsis"
                         key="archivedByUser.displayName"
                         title="APP.DOCUMENT_LIST.COLUMNS.DELETED_BY">

src/app/components/trashcan/trashcan.component.ts

@@ -24,6 +24,7 @@
  */
 
 import { Component, OnInit } from '@angular/core';
+import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';
 import { ContentManagementService } from '../../services/content-management.service';
 import { PageComponent } from '../page.component';
 import { Store } from '@ngrx/store';
@@ -37,11 +38,13 @@ import { Observable } from 'rxjs/Observable';
     templateUrl: './trashcan.component.html'
 })
 export class TrashcanComponent extends PageComponent implements OnInit {
+    isSmallScreen = false;
     user$: Observable<ProfileState>;
 
     constructor(content: ContentManagementService,
                 extensions: ExtensionService,
-                store: Store<AppStore>) {
+                store: Store<AppStore>,
+                private breakpointObserver: BreakpointObserver) {
         super(store, extensions, content);
         this.user$ = this.store.select(selectUser);
     }
@@ -53,6 +56,15 @@ export class TrashcanComponent extends PageComponent implements OnInit {
             this.content.nodesRestored.subscribe(() => this.reload()),
             this.content.nodesPurged.subscribe(() => this.reload()),
             this.content.nodesRestored.subscribe(() => this.reload()),
+
+            this.breakpointObserver
+                .observe([
+                    Breakpoints.HandsetPortrait,
+                    Breakpoints.HandsetLandscape
+                ])
+                .subscribe(result => {
+                    this.isSmallScreen = result.matches;
+                })
         );
     }
  }

src/app/ui/overrides/adf-pagination.theme.scss

@@ -4,4 +4,19 @@
             display: none;
         }
     }
+
+    @media screen and (max-width: 599px) {
+        .adf-pagination {
+            padding: 0;
+
+            &__range-block,
+            &__perpage-block {
+                display: none;
+            }
+
+            &__actualinfo-block {
+                border-right: none;
+            }
+        }
+    }
 }