From 54f879f5e63c88abd11e0a38f47fb0b03a79b69f Mon Sep 17 00:00:00 2001 From: Denys Vuika Date: Mon, 6 Aug 2018 12:18:03 +0100 Subject: [PATCH] mobile enhancements (#550) * hide menu bar elements on small screens * show less columns on handsets * reduce pagination for handsets --- .../current-user.component.theme.scss | 6 +++ .../favorites/favorites.component.html | 4 ++ .../favorites/favorites.component.ts | 17 +++++++- src/app/components/files/files.component.html | 3 ++ src/app/components/files/files.component.ts | 14 ++++++- .../components/layout/layout.component.html | 7 ++-- .../components/layout/layout.component.scss | 12 ++++++ src/app/components/layout/layout.component.ts | 42 +++++++++++++++---- .../libraries/libraries.component.html | 1 + .../libraries/libraries.component.ts | 17 +++++++- .../recent-files/recent-files.component.html | 3 ++ .../recent-files/recent-files.component.ts | 17 +++++++- .../shared-files/shared-files.component.html | 5 +++ .../shared-files/shared-files.component.ts | 15 ++++++- .../trashcan/trashcan.component.html | 5 ++- .../components/trashcan/trashcan.component.ts | 14 ++++++- .../ui/overrides/adf-pagination.theme.scss | 15 +++++++ 17 files changed, 177 insertions(+), 20 deletions(-) diff --git a/src/app/components/current-user/current-user.component.theme.scss b/src/app/components/current-user/current-user.component.theme.scss index 6a22fa665..449fad6f7 100644 --- a/src/app/components/current-user/current-user.component.theme.scss +++ b/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; + } + } } } diff --git a/src/app/components/favorites/favorites.component.html b/src/app/components/favorites/favorites.component.html index 7b029ca71..7fc5a0717 100644 --- a/src/app/components/favorites/favorites.component.html +++ b/src/app/components/favorites/favorites.component.html @@ -57,6 +57,7 @@ @@ -65,12 +66,14 @@ @@ -79,6 +82,7 @@ diff --git a/src/app/components/favorites/favorites.component.ts b/src/app/components/favorites/favorites.component.ts index 33da9d6d8..7a3b2cc39 100644 --- a/src/app/components/favorites/favorites.component.ts +++ b/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, 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; + }) ]); } diff --git a/src/app/components/files/files.component.html b/src/app/components/files/files.component.html index 6024a92f5..400c8e5b5 100644 --- a/src/app/components/files/files.component.html +++ b/src/app/components/files/files.component.html @@ -59,6 +59,7 @@ @@ -67,6 +68,7 @@ @@ -75,6 +77,7 @@ diff --git a/src/app/components/files/files.component.ts b/src/app/components/files/files.component.ts index 98078cd80..32a506ae8 100644 --- a/src/app/components/files/files.component.ts +++ b/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; + }) ]); } diff --git a/src/app/components/layout/layout.component.html b/src/app/components/layout/layout.component.html index f8b990203..89f09a7fc 100644 --- a/src/app/components/layout/layout.component.html +++ b/src/app/components/layout/layout.component.html @@ -23,9 +23,10 @@
- - - + + + + diff --git a/src/app/components/layout/layout.component.scss b/src/app/components/layout/layout.component.scss index bfe4ce972..679f37fcd 100644 --- a/src/app/components/layout/layout.component.scss +++ b/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; + } +} diff --git a/src/app/components/layout/layout.component.ts b/src/app/components/layout/layout.component.ts index 6ee3e68ec..2eacd4790 100644 --- a/src/app/components/layout/layout.component.ts +++ b/src/app/components/layout/layout.component.ts @@ -23,24 +23,38 @@ * along with Alfresco. If not, see . */ -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 = new Subject(); expandedSidenav: boolean; @@ -51,10 +65,13 @@ export class LayoutComponent implements OnInit, OnDestroy { headerColor$: Observable; logo$: Observable; + isSmallScreen = false; + constructor( protected store: Store, - 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; }); } diff --git a/src/app/components/libraries/libraries.component.html b/src/app/components/libraries/libraries.component.html index df0cb1239..fc15ea496 100644 --- a/src/app/components/libraries/libraries.component.html +++ b/src/app/components/libraries/libraries.component.html @@ -60,6 +60,7 @@ diff --git a/src/app/components/libraries/libraries.component.ts b/src/app/components/libraries/libraries.component.ts index 47cfc302b..4b39dae75 100644 --- a/src/app/components/libraries/libraries.component.ts +++ b/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, extensions: ExtensionService, - private router: Router) { + private router: Router, + private breakpointObserver: BreakpointObserver) { super(store, extensions, content); } @@ -56,7 +60,16 @@ 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; + }) ); } diff --git a/src/app/components/recent-files/recent-files.component.html b/src/app/components/recent-files/recent-files.component.html index 1bd4ae175..3ead747e6 100644 --- a/src/app/components/recent-files/recent-files.component.html +++ b/src/app/components/recent-files/recent-files.component.html @@ -58,6 +58,7 @@ @@ -66,12 +67,14 @@ diff --git a/src/app/components/recent-files/recent-files.component.ts b/src/app/components/recent-files/recent-files.component.ts index f1c6af04e..1fc75c779 100644 --- a/src/app/components/recent-files/recent-files.component.ts +++ b/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, 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; + }) ]); } diff --git a/src/app/components/shared-files/shared-files.component.html b/src/app/components/shared-files/shared-files.component.html index 323f2d3fa..b447f83d2 100644 --- a/src/app/components/shared-files/shared-files.component.html +++ b/src/app/components/shared-files/shared-files.component.html @@ -57,6 +57,7 @@ @@ -65,12 +66,14 @@ @@ -79,12 +82,14 @@ diff --git a/src/app/components/shared-files/shared-files.component.ts b/src/app/components/shared-files/shared-files.component.ts index 1479dccc5..977ad5955 100644 --- a/src/app/components/shared-files/shared-files.component.ts +++ b/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, 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; + }) ]); } } diff --git a/src/app/components/trashcan/trashcan.component.html b/src/app/components/trashcan/trashcan.component.html index be3bd82a2..b45488380 100644 --- a/src/app/components/trashcan/trashcan.component.html +++ b/src/app/components/trashcan/trashcan.component.html @@ -54,6 +54,7 @@ @@ -62,12 +63,14 @@ @@ -76,7 +79,7 @@ diff --git a/src/app/components/trashcan/trashcan.component.ts b/src/app/components/trashcan/trashcan.component.ts index fddc50518..1a71090da 100644 --- a/src/app/components/trashcan/trashcan.component.ts +++ b/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; constructor(content: ContentManagementService, extensions: ExtensionService, - store: Store) { + store: Store, + 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; + }) ); } } diff --git a/src/app/ui/overrides/adf-pagination.theme.scss b/src/app/ui/overrides/adf-pagination.theme.scss index 47060f65b..b197e11f4 100644 --- a/src/app/ui/overrides/adf-pagination.theme.scss +++ b/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; + } + } + } }