inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-26 17:24:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-3643] Viewer shows both sidebar icons (#3852)

Browse Source 
* Viewer shows both sidebar icons

* update readme

* add config editor for start-process
This commit is contained in:
Eugenio Romano 2018-10-03 11:29:55 +01:00 committed by GitHub
parent 4ca80e13f1
commit 58f61fd836
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 179 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
demo-shell/src/app/components/config-editor/config-editor.component.html
View File

@ -20,6 +20,27 @@
<mat-icon>info</mat-icon>
</button>
</mat-list-item>
<mat-list-item (click)="taskHeaderConfClick()">
<a matLine id="adf-task-conf" >Task header</a>
<button mat-icon-button>
<mat-icon>info</mat-icon>
</button>
</mat-list-item>
<mat-list-item (click)="processInstanceHeaderConfClick()">
<a matLine id="adf-process-conf" >Process instance Header</a>
<button mat-icon-button>
<mat-icon>info</mat-icon>
</button>
</mat-list-item>
<mat-list-item (click)="startProcessConfClick()">
<a matLine id="adf-start-process-conf">Start process</a>
<button mat-icon-button>
<mat-icon>info</mat-icon>
</button>
</mat-list-item>
</mat-nav-list>
<div>

18
demo-shell/src/app/components/config-editor/config-editor.component.ts
View File

@ -87,6 +87,24 @@ export class ConfigEditorComponent {
this.indentCode();
}
taskHeaderConfClick() {
this.code = JSON.stringify(this.appConfig.config['adf-task-header']);
this.field = 'adf-task-header';
this.indentCode();
}
processInstanceHeaderConfClick() {
this.code = JSON.stringify(this.appConfig.config['adf-process-instance-header']);
this.field = 'adf-process-instance-header';
this.indentCode();
}
startProcessConfClick() {
this.code = JSON.stringify(this.appConfig.config['adf-start-process']);
this.field = 'adf-start-process';
this.indentCode();
}
indentCode() {
setTimeout(() => {
this.editor.getAction('editor.action.formatDocument').run();

13
demo-shell/src/app/components/file-view/file-view.component.html
View File

@ -224,7 +224,17 @@
[color]="'primary'"
(change)="toggleAllowSidebar()"
[checked]="allowSidebar">
Allow Sidebar
Allow Right Sidebar
</mat-slide-toggle>
</p>
<p class="toggle">
<mat-slide-toggle
id="adf-switch-allowLeftSidebar"
[color]="'primary'"
(change)="toggleAllowLeftSidebar()"
[checked]="allowLeftSidebar">
Allow Left Sidebar
</mat-slide-toggle>
</p>
@ -268,6 +278,7 @@
[allowPrint]="allowPrint"
[allowDownload]="allowDownload"
[allowSidebar]="allowSidebar"
[allowLeftSidebar]="allowLeftSidebar"
[urlFile]="urlFile"
[sidebarLeftTemplate]="sidebarLeftTemplate"
[sidebarTemplate]="sidebarRightTemplate">

5
demo-shell/src/app/components/file-view/file-view.component.ts
View File

@ -45,6 +45,7 @@ export class FileViewComponent implements OnInit {
allowPrint = true;
allowShare = true;
allowSidebar = true;
allowLeftSidebar = true;
moreActions = true;
customName = false;
fileUrlSwitch = false;
@ -136,6 +137,10 @@ export class FileViewComponent implements OnInit {
this.allowSidebar = !this.allowSidebar;
}
toggleAllowLeftSidebar() {
this.allowLeftSidebar = !this.allowLeftSidebar;
}
toggleCustomName() {
this.customName = !this.customName;

3
docs/core/viewer.component.md
View File

@ -78,10 +78,11 @@ See the [Custom layout](#custom-layout) section for full details of all availabl
| allowDownload | `boolean` | true | Toggles downloading. |
| allowFullScreen | `boolean` | true | Toggles the 'Full Screen' feature. |
| allowGoBack | `boolean` | true | Allows `back` navigation |
| allowLeftSidebar | `boolean` | false | Allow the left the sidebar. |
| allowNavigate | `boolean` | false | Toggles before/next navigation. You can use the arrow buttons to navigate between documents in the collection. |
| allowPrint | `boolean` | false | Toggles printing. |
| allowShare | `boolean` | false | (**Deprecated:** 2.5.0 - inject the share button directive as custom button) Toggles sharing. |
| allowSidebar | `boolean` | false | Toggles the sidebar. |
| allowSidebar | `boolean` | false | (**Deprecated:** 2.5.0 - will be renamed allowRightSidebar in 3.0.0) Allow the right sidebar. |
| allowThumbnails | `boolean` | true | Toggles PDF thumbnails. |
| blobFile | [`Blob`](https://developer.mozilla.org/en-US/docs/Web/API/Blob) | | Loads a [Blob](https://developer.mozilla.org/en-US/docs/Web/API/Blob) File |
| canNavigateBefore | `boolean` | true | Toggles the "before" ("&lt;") button. Requires `allowNavigate` to be enabled. |

4
lib/core/viewer/components/viewer.component.html
View File

@ -10,7 +10,7 @@
<adf-toolbar-title>
<ng-container *ngIf="allowSidebar">
<ng-container *ngIf="allowLeftSidebar">
<button
mat-icon-button
title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
@ -151,7 +151,7 @@
</div>
</ng-container>
<ng-container *ngIf="allowSidebar && showLeftSidebar">
<ng-container *ngIf="allowLeftSidebar && showLeftSidebar">
<div class="adf-viewer__sidebar" [ngClass]="'adf-viewer__sidebar__left'" fxFlexOrder="1" id="adf-left-sidebar" >
<ng-container *ngIf="sidebarLeftTemplate">
<ng-container *ngTemplateOutlet="sidebarLeftTemplate;context:sidebarLeftTemplateContext"></ng-container>

168
lib/core/viewer/components/viewer.component.spec.ts
View File

@ -285,7 +285,7 @@ describe('ViewerComponent', () => {
it('should NOT display left sidebar if is not allowed', (done) => {
component.showLeftSidebar = true;
component.allowSidebar = false;
component.allowLeftSidebar = false;
fixture.detectChanges();
fixture.whenStable().then(() => {
@ -297,7 +297,7 @@ describe('ViewerComponent', () => {
});
it('should display sidebar on the left side', (done) => {
component.allowSidebar = true;
component.allowLeftSidebar = true;
component.showLeftSidebar = true;
fixture.detectChanges();
@ -315,27 +315,36 @@ describe('ViewerComponent', () => {
expect(element.querySelector('[data-automation-id="adf-toolbar-fullscreen"]')).toBeDefined();
});
it('should not render fullscreen button', () => {
it('should not render fullscreen button', (done) => {
component.allowFullScreen = false;
fixture.detectChanges();
expect(element.querySelector('[data-automation-id="adf-toolbar-fullscreen"]')).toBeNull();
fixture.whenStable().then(() => {
expect(element.querySelector('[data-automation-id="adf-toolbar-fullscreen"]')).toBeNull();
done();
});
});
it('should render default download button', () => {
it('should render default download button', (done) => {
component.allowDownload = true;
expect(element.querySelector('[data-automation-id="adf-toolbar-download"]')).toBeDefined();
fixture.whenStable().then(() => {
expect(element.querySelector('[data-automation-id="adf-toolbar-download"]')).toBeDefined();
done();
});
});
it('should not render default download button', () => {
it('should not render default download button', (done) => {
component.allowDownload = false;
fixture.detectChanges();
expect(element.querySelector('[data-automation-id="adf-toolbar-download"]')).toBeNull();
fixture.whenStable().then(() => {
expect(element.querySelector('[data-automation-id="adf-toolbar-download"]')).toBeNull();
done();
});
});
it('should invoke download action with the toolbar button', () => {
it('should invoke download action with the toolbar button', (done) => {
component.allowDownload = true;
spyOn(component, 'downloadContent').and.stub();
fixture.detectChanges();
@ -343,7 +352,10 @@ describe('ViewerComponent', () => {
const button: HTMLButtonElement = element.querySelector('[data-automation-id="adf-toolbar-download"]') as HTMLButtonElement;
button.click();
expect(component.downloadContent).toHaveBeenCalled();
fixture.whenStable().then(() => {
expect(component.downloadContent).toHaveBeenCalled();
done();
});
});
it('should raise download event with the toolbar button', async(() => {
@ -358,21 +370,27 @@ describe('ViewerComponent', () => {
button.click();
}));
it('should render default print button', () => {
it('should render default print button', (done) => {
component.allowPrint = true;
fixture.detectChanges();
expect(element.querySelector('[data-automation-id="adf-toolbar-print"]')).toBeDefined();
fixture.whenStable().then(() => {
expect(element.querySelector('[data-automation-id="adf-toolbar-print"]')).toBeDefined();
done();
});
});
it('should not render default print button', () => {
it('should not render default print button', (done) => {
component.allowPrint = false;
fixture.detectChanges();
expect(element.querySelector('[data-automation-id="adf-toolbar-print"]')).toBeNull();
fixture.whenStable().then(() => {
expect(element.querySelector('[data-automation-id="adf-toolbar-print"]')).toBeNull();
done();
});
});
it('should invoke print action with the toolbar button', () => {
it('should invoke print action with the toolbar button', (done) => {
component.allowPrint = true;
fixture.detectChanges();
@ -381,7 +399,10 @@ describe('ViewerComponent', () => {
const button: HTMLButtonElement = element.querySelector('[data-automation-id="adf-toolbar-print"]') as HTMLButtonElement;
button.click();
expect(component.printContent).toHaveBeenCalled();
fixture.whenStable().then(() => {
expect(component.printContent).toHaveBeenCalled();
done();
});
});
it('should raise the print event with the toolbar button', async(() => {
@ -396,21 +417,27 @@ describe('ViewerComponent', () => {
button.click();
}));
it('should render default share button', () => {
it('should render default share button', (done) => {
component.allowShare = true;
fixture.detectChanges();
expect(element.querySelector('[data-automation-id="adf-toolbar-share"]')).toBeDefined();
fixture.whenStable().then(() => {
expect(element.querySelector('[data-automation-id="adf-toolbar-share"]')).toBeDefined();
done();
});
});
it('should not render default share button', () => {
it('should not render default share button', (done) => {
component.allowShare = false;
fixture.detectChanges();
expect(element.querySelector('[data-automation-id="adf-toolbar-share"]')).toBeNull();
fixture.whenStable().then(() => {
expect(element.querySelector('[data-automation-id="adf-toolbar-share"]')).toBeNull();
done();
});
});
it('should invoke share action with the toolbar button', () => {
it('should invoke share action with the toolbar button', (done) => {
component.allowShare = true;
fixture.detectChanges();
@ -419,7 +446,10 @@ describe('ViewerComponent', () => {
const button: HTMLButtonElement = element.querySelector('[data-automation-id="adf-toolbar-share"]') as HTMLButtonElement;
button.click();
expect(component.shareContent).toHaveBeenCalled();
fixture.whenStable().then(() => {
expect(component.shareContent).toHaveBeenCalled();
done();
});
});
it('should raise share event with the toolbar button', async(() => {
@ -467,17 +497,25 @@ describe('ViewerComponent', () => {
});
});
it('should Click on close button hide the viewer', () => {
it('should Click on close button hide the viewer', (done) => {
let closebutton: any = element.querySelector('.adf-viewer-close-button');
closebutton.click();
fixture.detectChanges();
expect(element.querySelector('.adf-viewer-content')).toBeNull();
fixture.whenStable().then(() => {
expect(element.querySelector('.adf-viewer-content')).toBeNull();
done();
});
});
it('should Esc button hide the viewer', () => {
it('should Esc button hide the viewer', (done) => {
EventMock.keyUp(27);
fixture.detectChanges();
expect(element.querySelector('.adf-viewer-content')).toBeNull();
fixture.whenStable().then(() => {
expect(element.querySelector('.adf-viewer-content')).toBeNull();
done();
});
});
});
@ -488,10 +526,14 @@ describe('ViewerComponent', () => {
fixture.detectChanges();
});
it('should Esc button not hide the viewer if is not overlay mode', () => {
it('should Esc button not hide the viewer if is not overlay mode', (done) => {
EventMock.keyDown(27);
fixture.detectChanges();
expect(element.querySelector('.adf-viewer-content')).not.toBeNull();
fixture.whenStable().then(() => {
expect(element.querySelector('.adf-viewer-content')).not.toBeNull();
done();
});
});
});
});
@ -541,7 +583,7 @@ describe('ViewerComponent', () => {
describe('Extension Type Test', () => {
it('should extension file pdf be loaded', async(() => {
it('should extension file pdf be loaded', (done) => {
component.urlFile = 'fake-test-file.pdf';
component.ngOnChanges(null);
fixture.detectChanges();
@ -549,10 +591,11 @@ describe('ViewerComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('adf-pdf-viewer')).not.toBeNull();
done();
});
}));
});
it('should extension file png be loaded', async(() => {
it('should extension file png be loaded', (done) => {
component.urlFile = 'fake-url-file.png';
component.ngOnChanges(null);
fixture.detectChanges();
@ -560,10 +603,11 @@ describe('ViewerComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('#viewer-image')).not.toBeNull();
done();
});
}));
});
it('should extension file mp4 be loaded', async(() => {
it('should extension file mp4 be loaded', (done) => {
component.urlFile = 'fake-url-file.mp4';
component.ngOnChanges(null);
fixture.detectChanges();
@ -571,10 +615,11 @@ describe('ViewerComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('adf-media-player')).not.toBeNull();
done();
});
}));
});
it('should extension file mp3 be loaded', async(() => {
it('should extension file mp3 be loaded', (done) => {
component.urlFile = 'fake-url-file.mp3';
component.ngOnChanges(null);
fixture.detectChanges();
@ -582,10 +627,11 @@ describe('ViewerComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('adf-media-player')).not.toBeNull();
done();
});
}));
});
it('should extension file wav be loaded', async(() => {
it('should extension file wav be loaded', (done) => {
component.urlFile = 'fake-url-file.wav';
component.ngOnChanges(null);
fixture.detectChanges();
@ -593,10 +639,11 @@ describe('ViewerComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('adf-media-player')).not.toBeNull();
done();
});
}));
});
it('should extension file txt be loaded', async(() => {
it('should extension file txt be loaded', (done) => {
component.urlFile = 'fake-test-file.txt';
component.ngOnChanges(null);
fixture.detectChanges();
@ -604,10 +651,11 @@ describe('ViewerComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('adf-txt-viewer')).not.toBeNull();
done();
});
}));
});
it('should display [unknown format] for unsupported extensions', async(() => {
it('should display [unknown format] for unsupported extensions', (done) => {
component.urlFile = 'fake-url-file.unsupported';
component.mimeType = '';
component.ngOnChanges(null);
@ -616,13 +664,14 @@ describe('ViewerComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('adf-viewer-unknown-format')).toBeDefined();
done();
});
}));
});
});
describe('error handling', () => {
it('should show unknown view when node file not found', async(() => {
it('should show unknown view when node file not found', (done) => {
spyOn(alfrescoApiService.getInstance().nodes, 'getNodeInfo')
.and.returnValue(Promise.reject({}));
@ -634,10 +683,11 @@ describe('ViewerComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('adf-viewer-unknown-format')).not.toBeNull();
done();
});
}));
});
it('should show unknown view when sharedLink file not found', async(() => {
it('should show unknown view when sharedLink file not found', (done) => {
spyOn(alfrescoApiService.getInstance().core.sharedlinksApi, 'getSharedLink')
.and.returnValue(Promise.reject({}));
@ -649,9 +699,10 @@ describe('ViewerComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('adf-viewer-unknown-format')).not.toBeNull();
done();
});
}));
});
it('should raise an event when the shared link is invalid', (done) => {
spyOn(alfrescoApiService.getInstance().core.sharedlinksApi, 'getSharedLink')
@ -672,7 +723,7 @@ describe('ViewerComponent', () => {
describe('MimeType handling', () => {
it('should display a PDF file identified by mimetype when the filename has no extension', async(() => {
it('should display a PDF file identified by mimetype when the filename has no extension', (done) => {
component.urlFile = 'content';
component.mimeType = 'application/pdf';
fixture.detectChanges();
@ -681,11 +732,12 @@ describe('ViewerComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('adf-pdf-viewer')).not.toBeNull();
done();
});
}));
});
it('should display a PDF file identified by mimetype when the file extension is wrong', async(() => {
it('should display a PDF file identified by mimetype when the file extension is wrong', (done) => {
component.urlFile = 'content.bin';
component.mimeType = 'application/pdf';
component.ngOnChanges(null);
@ -693,10 +745,11 @@ describe('ViewerComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('adf-pdf-viewer')).not.toBeNull();
done();
});
}));
});
it('should display an image file identified by mimetype when the filename has no extension', async(() => {
it('should display an image file identified by mimetype when the filename has no extension', (done) => {
component.urlFile = 'content';
component.mimeType = 'image/png';
fixture.detectChanges();
@ -705,10 +758,11 @@ describe('ViewerComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('#viewer-image')).not.toBeNull();
done();
});
}));
});
it('should display a image file identified by mimetype when the file extension is wrong', async(() => {
it('should display a image file identified by mimetype when the file extension is wrong', (done) => {
component.urlFile = 'content.bin';
component.mimeType = 'image/png';
fixture.detectChanges();
@ -717,10 +771,11 @@ describe('ViewerComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('#viewer-image')).not.toBeNull();
done();
});
}));
});
it('should display the media player if the file identified by mimetype is a media when the filename has wrong extension', async(() => {
it('should display the media player if the file identified by mimetype is a media when the filename has wrong extension', (done) => {
component.urlFile = 'content.bin';
component.mimeType = 'video/mp4';
fixture.detectChanges();
@ -729,8 +784,9 @@ describe('ViewerComponent', () => {
fixture.whenStable().then(() => {
fixture.detectChanges();
expect(element.querySelector('adf-media-player')).not.toBeNull();
done();
});
}));
});
it('should display the txt viewer if the file identified by mimetype is a txt when the filename has wrong extension', (done) => {
component.urlFile = 'content.bin';

8
lib/core/viewer/components/viewer.component.ts
View File

@ -141,7 +141,13 @@ export class ViewerComponent implements OnChanges, OnInit, OnDestroy {
@Input()
canNavigateNext = true;
/** Toggles the sidebar. */
/** Allow the left the sidebar. */
@Input()
allowLeftSidebar = false;
/** Allow the right sidebar.
* @deprecated 2.5.0 - will be renamed allowRightSidebar in 3.0.0
*/
@Input()
allowSidebar = false;