inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-05-12 17:04:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

mobile enhancements (#550)

Browse Source 
* 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/components/current-user/current-user.component.theme.scss
View File

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

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

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

17
src/app/components/favorites/favorites.component.ts
View File

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

3
src/app/components/files/files.component.html
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">

14
src/app/components/files/files.component.ts
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;
})
]);
}

7
src/app/components/layout/layout.component.html
View File

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

12
src/app/components/layout/layout.component.scss
View File

@ -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;
}
}

42
src/app/components/layout/layout.component.ts
View File

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

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

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

17
src/app/components/libraries/libraries.component.ts
View File

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

3
src/app/components/recent-files/recent-files.component.html
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">

17
src/app/components/recent-files/recent-files.component.ts
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;
})
]);
}

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

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

15
src/app/components/shared-files/shared-files.component.ts
View File

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

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

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

14
src/app/components/trashcan/trashcan.component.ts
View File

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

15
src/app/ui/overrides/adf-pagination.theme.scss
View File

@ -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;
}
}
}
}