mirror of
https://github.com/Alfresco/alfresco-content-app.git
synced 2025-07-24 17:31:52 +00:00
[ACA-1490] Enable CardView (#491)
* integrate carview * experimental cardview * fix tests * fix spellcheck error
This commit is contained in:
committed by
Denys Vuika
parent
9b10cea98e
commit
e5bc3bb755
@@ -36,7 +36,8 @@
|
||||
"tooltip",
|
||||
"tooltips",
|
||||
"unindent",
|
||||
"exif"
|
||||
"exif",
|
||||
"cardview"
|
||||
],
|
||||
"dictionaries": [
|
||||
"html"
|
||||
|
@@ -10,7 +10,8 @@
|
||||
},
|
||||
"experimental": {
|
||||
"libraries": false,
|
||||
"comments": false
|
||||
"comments": false,
|
||||
"cardview": false
|
||||
},
|
||||
"headerColor": "#2196F3",
|
||||
"languagePicker": false,
|
||||
|
@@ -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
|
||||
|
@@ -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 ]
|
||||
});
|
||||
|
@@ -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"
|
||||
|
@@ -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: {
|
||||
|
@@ -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
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
|
@@ -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
|
||||
|
@@ -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 ]
|
||||
});
|
||||
|
@@ -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>
|
||||
|
@@ -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());
|
||||
}
|
||||
}
|
||||
|
@@ -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"
|
||||
|
@@ -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 ]
|
||||
});
|
||||
|
@@ -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"
|
||||
|
@@ -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 ]
|
||||
});
|
||||
|
@@ -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": {
|
||||
|
Reference in New Issue
Block a user