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

rename 'info-drawer' to 'sidebar' (#2562)

Browse Source
This commit is contained in:
Denys Vuika
2017-10-27 14:48:59 +01:00
committed by Eugenio Romano
parent d911d38c12
commit 31235c9f52
8 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,5 +1,5 @@
<ng-container *ngIf="nodeId">
<adf-viewer [fileNodeId]="nodeId">
<adf-viewer [fileNodeId]="nodeId" [allowSidebar]="true">
<!--<extension-viewer [supportedExtensions]="['obj','3DS']" #extension>-->
<!--<ng-template let-urlFileContent="urlFileContent" let-extension="extension" >-->
<!--<threed-viewer [urlFile]="urlFileContent" [extension]="extension" ></threed-viewer>-->

18
docs/viewer.component.md
View File

@@ -54,8 +54,8 @@ Using with file url:
| allowDownload | boolean | true | Toggle download feature |
| allowPrint | boolean | false | Toggle printing feature |
| allowShare | boolean | false | Toggle sharing feature |
| allowInfoDrawer | boolean |false | Toogle info drawer feature |
| showInfoDrawer | boolean | false | Toggles info drawer visibility. Requires `allowInfoDrawer` to be set to `true`. |
| allowSidebar | boolean |false | Toogle sidebar feature |
| showSidebar | boolean | false | Toggles sidebar visibility. Requires `allowSidebar` to be set to `true`. |
## Events
@@ -131,20 +131,20 @@ You can replace standard viewer toolbar with your custom implementation.
Everything you put inside the "adf-viewer-toolbar" tags is going to be rendered instead of the toolbar.
### Custom info drawer
### Custom sidebar
The Viewer component also suports custom Info Drawer components and layouts.
The `allowInfoDrawer` property should be set to `true` to enable Info Drawer feature.
The Viewer component also suports custom sidebar components and layouts.
The `allowSidebar` property should be set to `true` to enable this feature.
```html
<adf-viewer [allowInfoDrawer]="true">
<adf-viewer-info-drawer>
<adf-viewer [allowSidebar]="true">
<adf-viewer-sidebar>
<h1>My info</h1>
</adf-viewer-info-drawer>
</adf-viewer-sidebar>
</adf-viewer>
```
Everything you put inside the "adf-viewer-info-drawer" tags is going to be rendered instead of the default info drawer.
Everything you put inside the "adf-viewer-sidebar" tags is going to be rendered instead of the default sidebar.
### Custom "Open With" menu

4
ng2-components/ng2-alfresco-viewer/index.ts
View File

@@ -24,9 +24,9 @@ import { MediaPlayerComponent } from './src/components/mediaPlayer.component';
import { PdfViewerComponent } from './src/components/pdfViewer.component';
import { TxtViewerComponent } from './src/components/txtViewer.component';
import { UnknownFormatComponent } from './src/components/unknown-format/unknown-format.component';
import { ViewerInfoDrawerComponent } from './src/components/viewer-info-drawer.component';
import { ViewerMoreActionsComponent } from './src/components/viewer-more-actions.component';
import { ViewerOpenWithComponent } from './src/components/viewer-open-with.component';
import { ViewerSidebarComponent } from './src/components/viewer-sidebar.component';
import { ViewerToolbarComponent } from './src/components/viewer-toolbar.component';
import { ViewerComponent } from './src/components/viewer.component';
import { ExtensionViewerDirective } from './src/directives/extension-viewer.directive';
@@ -44,7 +44,7 @@ export function declarations() {
ExtensionViewerDirective,
UnknownFormatComponent,
ViewerToolbarComponent,
ViewerInfoDrawerComponent,
ViewerSidebarComponent,
ViewerOpenWithComponent,
ViewerMoreActionsComponent
];

6
ng2-components/ng2-alfresco-viewer/src/components/viewer-info-drawer.component.ts → ng2-components/ng2-alfresco-viewer/src/components/viewer-sidebar.component.ts
View File

@@ -18,11 +18,11 @@
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'adf-viewer-info-drawer',
selector: 'adf-viewer-sidebar',
encapsulation: ViewEncapsulation.None,
changeDetection: ChangeDetectionStrategy.OnPush,
host: { class: 'adf-viewer-info-drawer' },
host: { class: 'adf-viewer-sidebar' },
template: `<ng-content></ng-content>`
})
export class ViewerInfoDrawerComponent {
export class ViewerSidebarComponent {
}

14
ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html
View File

@@ -68,12 +68,12 @@
</mat-menu>
</ng-container>
<ng-container *ngIf="allowInfoDrawer">
<ng-container *ngIf="allowSidebar">
<adf-toolbar-divider></adf-toolbar-divider>
<button mat-icon-button matTooltip="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
[color]="showInfoDrawer ? 'accent' : 'default'"
(click)="showInfoDrawer = !showInfoDrawer">
[color]="showSidebar ? 'accent' : 'default'"
(click)="showSidebar = !showSidebar">
<mat-icon>info_outline</mat-icon>
</button>
</ng-container>
@@ -127,10 +127,10 @@
</div>
</div>
<ng-container *ngIf="showInfoDrawer">
<div class="adf-viewer__info-drawer">
<ng-content select="adf-viewer-info-drawer"></ng-content>
<ng-container *ngIf="!infoDrawer">
<ng-container *ngIf="showSidebar">
<div class="adf-viewer__sidebar">
<ng-content select="adf-viewer-sidebar"></ng-content>
<ng-container *ngIf="!sidebar">
<!-- todo: default info drawer -->
</ng-container>
</div>

2
ng2-components/ng2-alfresco-viewer/src/components/viewer.component.scss
View File

@@ -84,7 +84,7 @@ $adf-viewer-background-color: #f5f5f5;
}
}
&__info-drawer {
&__sidebar {
width: 350px;
display: block;
padding: 8px 0;

18
ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts
View File

@@ -30,9 +30,9 @@ import { MediaPlayerComponent } from './mediaPlayer.component';
import { PdfViewerComponent } from './pdfViewer.component';
import { TxtViewerComponent } from './txtViewer.component';
import { UnknownFormatComponent } from './unknown-format/unknown-format.component';
import { ViewerInfoDrawerComponent } from './viewer-info-drawer.component';
import { ViewerMoreActionsComponent } from './viewer-more-actions.component';
import { ViewerOpenWithComponent } from './viewer-open-with.component';
import { ViewerSidebarComponent } from './viewer-sidebar.component';
import { ViewerToolbarComponent } from './viewer-toolbar.component';
import { ViewerComponent } from './viewer.component';
@@ -51,16 +51,16 @@ declare let jasmine: any;
class ViewerWithCustomToolbarComponent {}
@Component({
selector: 'adf-viewer-container-info-drawer',
selector: 'adf-viewer-container-sidebar',
template: `
<adf-viewer>
<adf-viewer-info-drawer>
<div class="custom-info-drawer-element"></div>
</adf-viewer-info-drawer>
<adf-viewer-sidebar>
<div class="custom-sidebar"></div>
</adf-viewer-sidebar>
</adf-viewer>
`
})
class ViewerWithCustomInfoDrawerComponent {}
class ViewerWithCustomSidebarComponent {}
@Component({
selector: 'adf-viewer-container-open-with',
@@ -128,12 +128,12 @@ describe('ViewerComponent', () => {
MediaPlayerComponent,
ImgViewerComponent,
UnknownFormatComponent,
ViewerInfoDrawerComponent,
ViewerSidebarComponent,
ViewerToolbarComponent,
ViewerOpenWithComponent,
ViewerMoreActionsComponent,
ViewerWithCustomToolbarComponent,
ViewerWithCustomInfoDrawerComponent,
ViewerWithCustomSidebarComponent,
ViewerWithCustomOpenWithComponent,
ViewerWithCustomMoreActionsComponent
],
@@ -173,7 +173,7 @@ describe('ViewerComponent', () => {
});
it('should use custom info drawer', () => {
let customFixture = TestBed.createComponent(ViewerWithCustomInfoDrawerComponent);
let customFixture = TestBed.createComponent(ViewerWithCustomSidebarComponent);
let customElement: HTMLElement = customFixture.nativeElement;
customFixture.detectChanges();

10
ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts
View File

@@ -23,9 +23,9 @@ import {
import { MinimalNodeEntryEntity } from 'alfresco-js-api';
import { AlfrescoApiService, BaseEvent, LogService, RenditionsService } from 'ng2-alfresco-core';
import { ViewerInfoDrawerComponent } from './viewer-info-drawer.component';
import { ViewerMoreActionsComponent } from './viewer-more-actions.component';
import { ViewerOpenWithComponent } from './viewer-open-with.component';
import { ViewerSidebarComponent } from './viewer-sidebar.component';
import { ViewerToolbarComponent } from './viewer-toolbar.component';
@Component({
@@ -40,8 +40,8 @@ export class ViewerComponent implements OnDestroy, OnChanges {
@ContentChild(ViewerToolbarComponent)
toolbar: ViewerToolbarComponent;
@ContentChild(ViewerInfoDrawerComponent)
infoDrawer: ViewerInfoDrawerComponent;
@ContentChild(ViewerSidebarComponent)
sidebar: ViewerSidebarComponent;
@ContentChild(ViewerOpenWithComponent)
mnuOpenWith: ViewerOpenWithComponent;
@@ -83,10 +83,10 @@ export class ViewerComponent implements OnDestroy, OnChanges {
allowShare = false;
@Input()
allowInfoDrawer = false;
allowSidebar = false;
@Input()
showInfoDrawer = false;
showSidebar = false;
@Output()
goBack = new EventEmitter<BaseEvent<any>>();