[ACA-1490] Enable CardView (#491)

* integrate carview

* experimental cardview

* fix tests

* fix spellcheck error
This commit is contained in:
Suzana Dirla
2018-07-05 14:29:30 +03:00
committed by Denys Vuika
parent 9b10cea98e
commit e5bc3bb755
17 changed files with 82 additions and 8 deletions

View File

@@ -36,7 +36,8 @@
"tooltip",
"tooltips",
"unindent",
"exif"
"exif",
"cardview"
],
"dictionaries": [
"html"

View File

@@ -10,7 +10,8 @@
},
"experimental": {
"libraries": false,
"comments": false
"comments": false,
"cardview": false
},
"headerColor": "#2196F3",
"languagePicker": false,

View File

@@ -3,6 +3,12 @@
<adf-breadcrumb root="APP.BROWSE.FAVORITES.TITLE">
</adf-breadcrumb>
<button *ifExperimental="'cardview'"
mat-icon-button
(click)="toggleGalleryView()">
<mat-icon *ngIf="displayMode === 'list'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy</mat-icon>
<mat-icon *ngIf="displayMode === 'gallery'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.LISTVIEW' | translate }}">list</mat-icon>
</button>
<adf-toolbar class="inline" *ngIf="!selection.isEmpty">
<button

View File

@@ -38,6 +38,7 @@ import { ContentManagementService } from '../../common/services/content-manageme
import { FavoritesComponent } from './favorites.component';
import { AppTestingModule } from '../../testing/app-testing.module';
import { ContentApiService } from '../../services/content-api.service';
import { ExperimentalDirective } from '../../directives/experimental.directive';
describe('FavoritesComponent', () => {
let fixture: ComponentFixture<FavoritesComponent>;
@@ -85,7 +86,8 @@ describe('FavoritesComponent', () => {
NodeFavoriteDirective,
DocumentListComponent,
FavoritesComponent,
AppConfigPipe
AppConfigPipe,
ExperimentalDirective
],
schemas: [ NO_ERRORS_SCHEMA ]
});

View File

@@ -6,6 +6,12 @@
(navigate)="onBreadcrumbNavigate($event)">
</adf-breadcrumb>
<button *ifExperimental="'cardview'"
mat-icon-button
(click)="toggleGalleryView()">
<mat-icon *ngIf="displayMode === 'list'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy</mat-icon>
<mat-icon *ngIf="displayMode === 'gallery'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.LISTVIEW' | translate }}">list</mat-icon>
</button>
<adf-toolbar class="inline" *ngIf="!selection.isEmpty">
<button
color="primary"

View File

@@ -38,6 +38,7 @@ import { NodeActionsService } from '../../common/services/node-actions.service';
import { FilesComponent } from './files.component';
import { AppTestingModule } from '../../testing/app-testing.module';
import { ContentApiService } from '../../services/content-api.service';
import { ExperimentalDirective } from '../../directives/experimental.directive';
describe('FilesComponent', () => {
let node;
@@ -67,7 +68,8 @@ describe('FilesComponent', () => {
NodeFavoriteDirective,
DocumentListComponent,
FileSizePipe,
AppConfigPipe
AppConfigPipe,
ExperimentalDirective
],
providers: [
{ provide: ActivatedRoute, useValue: {

View File

@@ -2,6 +2,13 @@
<div class="inner-layout__header">
<adf-breadcrumb root="APP.BROWSE.LIBRARIES.TITLE">
</adf-breadcrumb>
<button *ifExperimental="'cardview'"
mat-icon-button
(click)="toggleGalleryView()">
<mat-icon *ngIf="displayMode === 'list'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy</mat-icon>
<mat-icon *ngIf="displayMode === 'gallery'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.LISTVIEW' | translate }}">list</mat-icon>
</button>
<adf-toolbar class="inline" *ngIf="!selection.isEmpty">
<ng-container *ifExperimental="'libraries'">
<button

View File

@@ -24,7 +24,7 @@
*/
import { DocumentListComponent, ShareDataRow } from '@alfresco/adf-content-services';
import { FileUploadErrorEvent } from '@alfresco/adf-core';
import { DisplayMode, FileUploadErrorEvent } from '@alfresco/adf-core';
import { OnDestroy, OnInit, ViewChild } from '@angular/core';
import { Store } from '@ngrx/store';
import { MinimalNodeEntity, MinimalNodeEntryEntity } from 'alfresco-js-api';
@@ -46,6 +46,7 @@ export abstract class PageComponent implements OnInit, OnDestroy {
infoDrawerOpened = false;
node: MinimalNodeEntryEntity;
selection: SelectionState;
displayMode = DisplayMode.List;
protected subscriptions: Subscription[] = [];
@@ -134,4 +135,9 @@ export abstract class PageComponent implements OnInit, OnDestroy {
this.store.dispatch(action);
}
toggleGalleryView(): void {
this.displayMode = this.displayMode === DisplayMode.List ? DisplayMode.Gallery : DisplayMode.List;
this.documentList.display = this.displayMode;
}
}

View File

@@ -3,6 +3,12 @@
<adf-breadcrumb root="APP.BROWSE.RECENT.TITLE">
</adf-breadcrumb>
<button *ifExperimental="'cardview'"
mat-icon-button
(click)="toggleGalleryView()">
<mat-icon *ngIf="displayMode === 'list'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy</mat-icon>
<mat-icon *ngIf="displayMode === 'gallery'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.LISTVIEW' | translate }}">list</mat-icon>
</button>
<adf-toolbar class="inline" *ngIf="!selection.isEmpty">
<button

View File

@@ -34,6 +34,7 @@ import { ContentManagementService } from '../../common/services/content-manageme
import { RecentFilesComponent } from './recent-files.component';
import { AppTestingModule } from '../../testing/app-testing.module';
import { ExperimentalDirective } from '../../directives/experimental.directive';
describe('RecentFilesComponent', () => {
let fixture: ComponentFixture<RecentFilesComponent>;
@@ -63,7 +64,8 @@ describe('RecentFilesComponent', () => {
NodeFavoriteDirective,
DocumentListComponent,
RecentFilesComponent,
AppConfigPipe
AppConfigPipe,
ExperimentalDirective
],
schemas: [ NO_ERRORS_SCHEMA ]
});

View File

@@ -73,5 +73,12 @@
Comments
</mat-checkbox>
</div>
<div>
<mat-checkbox
[(ngModel)]="cardview"
(change)="onChangeCardviewFeature($event)">
Cardview
</mat-checkbox>
</div>
</mat-expansion-panel>
</mat-accordion>

View File

@@ -50,6 +50,7 @@ export class SettingsComponent implements OnInit {
languagePicker$: Observable<boolean>;
libraries: boolean;
comments: boolean;
cardview: boolean;
constructor(
private store: Store<AppStore>,
@@ -78,6 +79,9 @@ export class SettingsComponent implements OnInit {
const comments = this.appConfig.get('experimental.comments');
this.comments = (comments === true || comments === 'true');
const cardview = this.appConfig.get('experimental.cardview');
this.cardview = (cardview === true || cardview === 'true');
}
apply(model: any, isValid: boolean) {
@@ -105,4 +109,8 @@ export class SettingsComponent implements OnInit {
onChangeCommentsFeature(event: MatCheckboxChange) {
this.storage.setItem('experimental.comments', event.checked.toString());
}
onChangeCardviewFeature(event: MatCheckboxChange) {
this.storage.setItem('experimental.cardview', event.checked.toString());
}
}

View File

@@ -3,6 +3,12 @@
<adf-breadcrumb root="APP.BROWSE.SHARED.TITLE">
</adf-breadcrumb>
<button *ifExperimental="'cardview'"
mat-icon-button
(click)="toggleGalleryView()">
<mat-icon *ngIf="displayMode === 'list'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy</mat-icon>
<mat-icon *ngIf="displayMode === 'gallery'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.LISTVIEW' | translate }}">list</mat-icon>
</button>
<adf-toolbar class="inline" *ngIf="!selection.isEmpty">
<button
*ngIf="selection.count === 1"

View File

@@ -33,6 +33,7 @@ import { DocumentListComponent } from '@alfresco/adf-content-services';
import { ContentManagementService } from '../../common/services/content-management.service';
import { SharedFilesComponent } from './shared-files.component';
import { AppTestingModule } from '../../testing/app-testing.module';
import { ExperimentalDirective } from '../../directives/experimental.directive';
describe('SharedFilesComponent', () => {
let fixture: ComponentFixture<SharedFilesComponent>;
@@ -61,7 +62,8 @@ describe('SharedFilesComponent', () => {
NodeFavoriteDirective,
DocumentListComponent,
SharedFilesComponent,
AppConfigPipe
AppConfigPipe,
ExperimentalDirective
],
schemas: [ NO_ERRORS_SCHEMA ]
});

View File

@@ -3,6 +3,12 @@
<adf-breadcrumb root="APP.BROWSE.TRASHCAN.TITLE">
</adf-breadcrumb>
<button *ifExperimental="'cardview'"
mat-icon-button
(click)="toggleGalleryView()">
<mat-icon *ngIf="displayMode === 'list'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.CARDVIEW' | translate }}">view_comfy</mat-icon>
<mat-icon *ngIf="displayMode === 'gallery'" matTooltip="{{ 'APP.DOCUMENT_LIST.TOOLBAR.LISTVIEW' | translate }}">list</mat-icon>
</button>
<adf-toolbar class="inline" *ngIf="!selection.isEmpty">
<button
color="primary"

View File

@@ -33,6 +33,7 @@ import { DocumentListComponent } from '@alfresco/adf-content-services';
import { ContentManagementService } from '../../common/services/content-management.service';
import { TrashcanComponent } from './trashcan.component';
import { AppTestingModule } from '../../testing/app-testing.module';
import { ExperimentalDirective } from '../../directives/experimental.directive';
describe('TrashcanComponent', () => {
let fixture: ComponentFixture<TrashcanComponent>;
@@ -60,7 +61,8 @@ describe('TrashcanComponent', () => {
NodeFavoriteDirective,
DocumentListComponent,
TrashcanComponent,
AppConfigPipe
AppConfigPipe,
ExperimentalDirective
],
schemas: [ NO_ERRORS_SCHEMA ]
});

View File

@@ -146,6 +146,10 @@
"SHARED_BY": "Shared by",
"DELETED_ON": "Deleted",
"DELETED_BY": "Deleted by"
},
"TOOLBAR": {
"CARDVIEW": "Card view mode",
"LISTVIEW": "List view mode"
}
},
"SITES_VISIBILITY": {