add scroll bars to editor pages for non code-mirror elements (hyperle…

…dger-archives#1244) * add scroll bars to editor pages for non code-mirror elements * add mock directives to tests
prashant-dewan-ext-ey · Jun 12, 2017 · 301a3eb · 301a3eb
1 parent 1e86277
commit 301a3eb
Show file tree

Hide file tree

Showing 11 changed files with 54 additions and 14 deletions.
diff --git a/packages/composer-playground/package.json b/packages/composer-playground/package.json
@@ -103,8 +103,8 @@
         "@angular/platform-server": "~4.1.3",
         "@angular/router": "~4.1.3",
         "@angularclass/conventions-loader": "^1.0.13",
-    "@angularclass/hmr": "^1.2.2",
-    "@angularclass/hmr-loader": "^3.0.2",
+        "@angularclass/hmr": "^1.2.2",
+        "@angularclass/hmr-loader": "^3.0.2",
         "@types/chai": "^3.4.35",
         "@types/dropboxjs": "^0.0.29",
         "@types/filesystem": "^0.0.28",
@@ -177,6 +177,7 @@
         "mocha": "^3.2.0",
         "ng2-bootstrap": "^1.1.16-11",
         "ng2-codemirror": "1.1.2",
+        "ngx-perfect-scrollbar": "^4.3.0",
         "node-sass": "^4.5.0",
         "parse5": "^3.0.1",
         "protractor": "^5.1.1",

diff --git a/packages/composer-playground/src/app/app.module.ts b/packages/composer-playground/src/app/app.module.ts
@@ -55,6 +55,7 @@ import { ViewCertificateComponent } from './view-certificate';
 import { FileDragDropDirective } from './directives/file-drag-drop';
 import { CheckOverFlowDirective } from './directives/check-overflow';
 import { FocusHereDirective } from './directives/focus-here';
+import { PerfectScrollbarModule } from 'ngx-perfect-scrollbar';
 
 import { AdminService } from './services/admin.service';
 import { ClientService } from './services/client.service';
@@ -160,6 +161,7 @@ type StoreType = {
         HttpModule,
         RouterModule.forRoot(ROUTES, {useHash: false, preloadingStrategy: PreloadAllModules}),
         CodemirrorModule,
+        PerfectScrollbarModule,
         ModalModule.forRoot(),
         TooltipModule.forRoot(),
         NgbModule.forRoot(),

diff --git a/packages/composer-playground/src/app/editor-file/editor-file.component.html b/packages/composer-playground/src/app/editor-file/editor-file.component.html
@@ -1,5 +1,5 @@
-<div class="readme" *ngIf="editorType === 'readme'" [innerHTML]="editorContent">
-</div>
+<perfect-scrollbar class="readme" *ngIf="editorType === 'readme'" [innerHTML]="editorContent">
+</perfect-scrollbar>
 
 <codemirror name="editorCodeMirror" *ngIf="editorType === 'code'" [(ngModel)]="editorContent" [config]="codeConfig"
             (ngModelChange)="onCodeChanged()" width="100%" height="100%" ngDefaultControl>

diff --git a/packages/composer-playground/src/app/editor-file/editor-file.component.scss b/packages/composer-playground/src/app/editor-file/editor-file.component.scss
@@ -30,7 +30,7 @@ editor-file {
     padding: $space-large;
     min-height: 63vh;
     max-height: 63vh;
-    overflow-y: auto;
+    overflow-y: scroll;
   }
 }
 
@@ -43,3 +43,8 @@ editor-file {
   min-height: 63vh;
   max-height: 63vh;
 }
+
+.ps.ps--active-x>.ps__scrollbar-x-rail,
+.ps.ps--active-y>.ps__scrollbar-y-rail{
+    opacity: 0.6;
+}
diff --git a/packages/composer-playground/src/app/editor-file/editor-file.component.spec.ts b/packages/composer-playground/src/app/editor-file/editor-file.component.spec.ts
@@ -26,6 +26,13 @@ class MockCodeMirrorDirective {
     public config;
 }
 
+@Directive({
+    selector: 'perfect-scrollbar'
+})
+
+class MockPerfectScrollBarDirective {
+}
+
 describe('EditorFileComponent', () => {
     let component: EditorFileComponent;
     let fixture: ComponentFixture<EditorFileComponent>;
@@ -35,7 +42,7 @@ describe('EditorFileComponent', () => {
     beforeEach(() => {
         TestBed.configureTestingModule({
             imports: [FormsModule],
-            declarations: [EditorFileComponent, MockCodeMirrorDirective],
+            declarations: [EditorFileComponent, MockCodeMirrorDirective, MockPerfectScrollBarDirective],
             providers: [
                 {provide: ClientService, useValue: mockClientService}]
         });

diff --git a/packages/composer-playground/src/app/editor/editor.component.html b/packages/composer-playground/src/app/editor/editor.component.html
@@ -1,7 +1,7 @@
 <section class="side-bar">
   <div class="files">
     <span>Files</span>
-    <div class="side-bar-nav">
+    <perfect-scrollbar class="side-bar-nav">
       <ul>
         <li *ngFor="let file of files" [class.active]="file.id === currentFile.id" (click)="setCurrentFile(file)">
             <div class="flex-container">
@@ -21,7 +21,7 @@ <h3 [class.error]="file.invalid" *ngIf="file.readme">About</h3>
           </div>
         </li>
       </ul>
-    </div>
+    </perfect-scrollbar>
     <div class="add-file">
       <button class="action" type="button" (click)="openAddFileModal()">+ Add a file...</button>
     </div>

diff --git a/packages/composer-playground/src/app/editor/editor.component.scss b/packages/composer-playground/src/app/editor/editor.component.scss
@@ -24,7 +24,8 @@ app-editor {
 
       .side-bar-nav {
         padding: 0;
-
+        max-height: 25rem;
+        overflow-y: scroll;
         .error {
             color: $first-warning;
         }
@@ -121,4 +122,10 @@ app-editor {
       min-height:63vh;
       max-height:63vh;
     }
+
+  .ps.ps--active-x>.ps__scrollbar-x-rail,
+  .ps.ps--active-y>.ps__scrollbar-y-rail{
+      opacity: 0.6;
+  }
+
 }
diff --git a/packages/composer-playground/src/app/editor/editor.component.spec.ts b/packages/composer-playground/src/app/editor/editor.component.spec.ts
@@ -36,6 +36,13 @@ class MockEditorFileDirective {
     public editorFile;
 }
 
+@Directive({
+    selector: 'perfect-scrollbar'
+})
+
+class MockPerfectScrollBarDirective {
+}
+
 describe('EditorComponent', () => {
     let component: EditorComponent;
     let fixture: ComponentFixture<EditorComponent>;
@@ -81,7 +88,7 @@ describe('EditorComponent', () => {
 
         TestBed.configureTestingModule({
             imports: [FormsModule],
-            declarations: [EditorComponent, MockEditorFileDirective],
+            declarations: [EditorComponent, MockEditorFileDirective, MockPerfectScrollBarDirective ],
             providers: [
                 {provide: SampleBusinessNetworkService, useValue: mockBusinessNetworkService},
                 {provide: AdminService, useValue: mockAdminService},

diff --git a/packages/composer-playground/src/app/import/import.component.html b/packages/composer-playground/src/app/import/import.component.html
@@ -90,14 +90,14 @@ <h1>Import/Replace Business Network</h1>
             </div>
           </div>
         </div>
-        <div *ngIf="!gitHubInProgress" class="sample-network-list-container">
+        <perfect-scrollbar *ngIf="!gitHubInProgress" class="sample-network-list-container">
           <div class="sample-network-list" *ngFor=" let sampleNetwork of sampleNetworks; let networkIndex=index">
             <input id="sampleNetwork{{networkIndex}}" type="radio" name="sampleNetwork" [(ngModel)]="chosenNetwork"
                    value="{{sampleNetwork.name}}">
             <label class="radio-label" for="sampleNetwork{{networkIndex}}">{{sampleNetwork.name}}</label>
             <div class="description">{{sampleNetwork.description}}</div>
           </div>
-        </div>
+        </perfect-scrollbar>
       </div>
     </div>
   </section>

diff --git a/packages/composer-playground/src/app/import/import.component.scss b/packages/composer-playground/src/app/import/import.component.scss
@@ -83,7 +83,7 @@ import-modal {
 
       .sample-network-list-container {
         max-height: 200px;
-        overflow-y: auto;
+        overflow-y: scroll;
         margin-top: $space-medium;
       }
 
@@ -121,4 +121,9 @@ import-modal {
       width: 100%;
     }
   }
+
+  .ps.ps--active-x>.ps__scrollbar-x-rail,
+  .ps.ps--active-y>.ps__scrollbar-y-rail{
+      opacity: 0.6;
+  }
 }
diff --git a/packages/composer-playground/src/app/import/import.component.spec.ts b/packages/composer-playground/src/app/import/import.component.spec.ts
@@ -53,6 +53,12 @@ class MockFileImporterDirective {
     public svgName: string = '#icon-BNA_Upload';
 }
 
+@Directive({
+    selector: 'perfect-scrollbar'
+})
+class MockPerfectScrollBarDirective {
+}
+
 describe('ImportComponent', () => {
     let sandbox;
     let component: ImportComponent;
@@ -90,7 +96,7 @@ describe('ImportComponent', () => {
 
         TestBed.configureTestingModule({
             imports: [FormsModule],
-            declarations: [ImportComponent, MockDragDropDirective, MockFileImporterDirective],
+            declarations: [ImportComponent, MockDragDropDirective, MockFileImporterDirective, MockPerfectScrollBarDirective],
             providers: [
                 {provide: SampleBusinessNetworkService, useValue: mockBusinessNetworkService},
                 {provide: AdminService, useValue: mockAdminService},