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

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

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

docs/viewer.component.md

@@ -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 |
+| allowSidebar | boolean |false | Toogle sidebar feature |
-| showInfoDrawer | boolean | false | Toggles info drawer visibility. Requires `allowInfoDrawer` to be set to `true`. |
+| 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 Viewer component also suports custom sidebar components and layouts.
-The `allowInfoDrawer` property should be set to `true` to enable Info Drawer feature.
+The `allowSidebar` property should be set to `true` to enable this feature.
 
 ```html
-<adf-viewer [allowInfoDrawer]="true">
+<adf-viewer [allowSidebar]="true">
-    <adf-viewer-info-drawer>
+    <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
 

ng2-components/ng2-alfresco-viewer/index.ts

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

ng2-components/ng2-alfresco-viewer/src/components/viewer-sidebar.component.ts

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

ng2-components/ng2-alfresco-viewer/src/components/viewer.component.html

@@ -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'"
+                        [color]="showSidebar ? 'accent' : 'default'"
-                        (click)="showInfoDrawer = !showInfoDrawer">
+                        (click)="showSidebar = !showSidebar">
                         <mat-icon>info_outline</mat-icon>
                     </button>
                 </ng-container>
@@ -127,10 +127,10 @@
                 </div>
             </div>
 
-            <ng-container *ngIf="showInfoDrawer">
+            <ng-container *ngIf="showSidebar">
-                <div class="adf-viewer__info-drawer">
+                <div class="adf-viewer__sidebar">
-                    <ng-content select="adf-viewer-info-drawer"></ng-content>
+                    <ng-content select="adf-viewer-sidebar"></ng-content>
-                    <ng-container *ngIf="!infoDrawer">
+                    <ng-container *ngIf="!sidebar">
                         <!-- todo: default info drawer -->
                     </ng-container>
                 </div>

ng2-components/ng2-alfresco-viewer/src/components/viewer.component.scss

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

ng2-components/ng2-alfresco-viewer/src/components/viewer.component.spec.ts

@@ -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>
+            <adf-viewer-sidebar>
-                <div class="custom-info-drawer-element"></div>
+                <div class="custom-sidebar"></div>
-            </adf-viewer-info-drawer>
+            </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();

ng2-components/ng2-alfresco-viewer/src/components/viewer.component.ts

@@ -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)
+    @ContentChild(ViewerSidebarComponent)
-    infoDrawer: ViewerInfoDrawerComponent;
+    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>>();