From 6c783392523e231233f5ec3c5240467b325715c4 Mon Sep 17 00:00:00 2001
From: Caroline Church <caroline.church@uk.ibm.com>
Date: Thu, 15 Jun 2017 09:48:20 +0100
Subject: [PATCH] Fix Multiple Scroll Bars

Fixed the problem with getting multiple scroll bars when create resources
---
 .../src/app/resource/resource.component.html  |  88 ++++++-------
 .../src/app/resource/resource.component.scss  |  75 +++++------
 .../src/app/resource/resource.component.ts    |   2 +-
 .../transaction/transaction.component.html    | 120 +++++++++---------
 4 files changed, 141 insertions(+), 144 deletions(-)

diff --git a/packages/composer-playground/src/app/resource/resource.component.html b/packages/composer-playground/src/app/resource/resource.component.html
index f49359d730..01658c4c0d 100644
--- a/packages/composer-playground/src/app/resource/resource.component.html
+++ b/packages/composer-playground/src/app/resource/resource.component.html
@@ -1,46 +1,48 @@
 <div class="resource-modal">
-  <div class="modal-header">
-    <h1>{{resourceAction}} {{resourceType}}</h1>
-    <button class="icon modal-exit" (click)="activeModal.close()">
-      <svg class="ibm-icon" aria-hidden="true">
-       <use xlink:href="#icon-close_new"></use>
-      </svg>
-    </button>
-  </div>
-  <section class="modal-body">
-    <h2>In registry: <b>{{registryID}}</b></h2>
-    <section class="resource-container">
-      <section class="resource-component">
-      <div>
-        <p class="resource-preview-text">JSON Data Preview</p>
-      </div>
-       <div class="resource-bound">
-        <codemirror name="codeMirror" [(ngModel)]="resourceDefinition" [config]="codeConfig" (ngModelChange)="onDefinitionChanged()"
-                    width="100%" height="100%" ngDefaultControl>
-        </codemirror>
-        <div class="resource-error-text" ng-if="definitionError!=null">
-          <p>{{definitionError}}</p>
-        </div>
-      </div>
-      </section>
+    <div class="modal-header">
+        <h1>{{resourceAction}} {{resourceType}}</h1>
+        <button class="icon modal-exit" (click)="activeModal.close()">
+            <svg class="ibm-icon" aria-hidden="true">
+                <use xlink:href="#icon-close_new"></use>
+            </svg>
+        </button>
+    </div>
+    <section class="modal-body">
+        <h2>In registry: <b>{{registryID}}</b></h2>
+        <section class="resource-container">
+            <section class="resource-component">
+                <div>
+                    <p class="resource-preview-text">JSON Data Preview</p>
+                </div>
+                <codemirror name="codeMirror" [(ngModel)]="resourceDefinition" [config]="codeConfig"
+                            (ngModelChange)="onDefinitionChanged()"
+                            width="100%" height="100%" ngDefaultControl>
+                </codemirror>
+                <div class="resource-error-text" ng-if="definitionError!=null">
+                    <p>{{definitionError}}</p>
+                </div>
+            </section>
+        </section>
     </section>
-  </section>
-  <footer>
-    <p class="footer-text" *ngIf="!editMode()">Just need quick test data? <button type="button" class="icon" (click)="generateResource(true)"><u>Generate Random Data</u></button></p>
-    <button type="button" class="secondary" (click)="activeModal.close();">
-      <span>Cancel</span>
-    </button>
-    <button id="createResourceButton" type="button" class="primary" (click)="addOrUpdateResource()" [disabled]="definitionError!=null || actionInProgress ">
-      <div *ngIf="!actionInProgress">
-        <span>{{resourceAction}}</span>
-      </div>
-      <div *ngIf="actionInProgress" class="ibm-spinner-indeterminate small loop">
-        <div class="loader">
-          <svg class="circular" viewBox="25 25 50 50">
-            <circle class="circle-path" cx="50" cy="50" r="20"/>
-          </svg>
-        </div>
-      </div>
-    </button>
-  </footer>
+    <footer>
+        <p class="footer-text" *ngIf="!editMode()">Just need quick test data?
+            <button type="button" class="icon" (click)="generateResource(true)"><u>Generate Random Data</u></button>
+        </p>
+        <button type="button" class="secondary" (click)="activeModal.close();">
+            <span>Cancel</span>
+        </button>
+        <button id="createResourceButton" type="button" class="primary" (click)="addOrUpdateResource()"
+                [disabled]="definitionError!=null || actionInProgress ">
+            <div *ngIf="!actionInProgress">
+                <span>{{resourceAction}}</span>
+            </div>
+            <div *ngIf="actionInProgress" class="ibm-spinner-indeterminate small loop">
+                <div class="loader">
+                    <svg class="circular" viewBox="25 25 50 50">
+                        <circle class="circle-path" cx="50" cy="50" r="20"/>
+                    </svg>
+                </div>
+            </div>
+        </button>
+    </footer>
 </div>
diff --git a/packages/composer-playground/src/app/resource/resource.component.scss b/packages/composer-playground/src/app/resource/resource.component.scss
index 6e357a5610..145fa4ea4f 100644
--- a/packages/composer-playground/src/app/resource/resource.component.scss
+++ b/packages/composer-playground/src/app/resource/resource.component.scss
@@ -2,54 +2,47 @@
 @import '../../assets/styles/base/_variables.scss';
 
 resource-modal {
-
-  .resource-container {
-    position: relative;
-    flex: 1 1 auto;
-    padding: $space-small;
-    display: flex;
-    flex-direction: row;
-    justify-content: space-around;
-    min-height: 415px;
-  }
-
-  .resource-component {
-
-    padding: $space-medium;
-
-    .resource-bound {
-      max-height: 40px;
-      min-width: 100%;
-     // min-width: 410px;
-     // max-width: 410px;
-      margin-top: $space-medium;
+    .resource-container {
+        position: relative;
+        flex: 1 1 auto;
+        display: flex;
+        flex-direction: row;
+        justify-content: space-around;
+        height: 450px;
     }
 
-    .resource-preview-text{
-      color:$secondary-text;
+    .resource-component {
+        .resource-preview-text {
+            color: $secondary-text;
+        }
+
+        .resource-error-text {
+            min-height: 30px;
+            color: $error-colour-1;
+            max-width: 625px;
+            margin: 0 auto;
+            word-wrap: break-word;
+        }
     }
 
-    .resource-error-text{
-      min-height: 30px;
-      color: $error-colour-1;
-      max-width: 600px;
+    footer {
+        justify-content: flex-start;
+
+        .footer-text {
+            flex: 1;
+        }
     }
-  }
 
-  footer {
-    justify-content: flex-start;
+    .CodeMirror {
+        font-family: Source Code Pro
 
-    .footer-text{
-      flex:1;
     }
-  }
-
-  .CodeMirror,
-  .CodeMirror-scroll {
-    min-height: 250px;
-    max-height: 450px;
-    min-width: 600px;
-    max-width: 600px;
-  }
 
+    .CodeMirror, .CodeMirror-scroll {
+        min-height: 40vh;
+        max-height: 40vh;
+        // needed to get rid of the duplicate scroll bars, not sure why this works????
+        min-width: 640px;
+        max-width: 650px;
+    }
 }
diff --git a/packages/composer-playground/src/app/resource/resource.component.ts b/packages/composer-playground/src/app/resource/resource.component.ts
index f998d59483..77bc75d878 100644
--- a/packages/composer-playground/src/app/resource/resource.component.ts
+++ b/packages/composer-playground/src/app/resource/resource.component.ts
@@ -40,7 +40,7 @@ export class ResourceComponent implements OnInit {
 
     private codeConfig = {
         lineNumbers: true,
-        lineWrapping: false,
+        lineWrapping: true,
         readOnly: false,
         mode: 'javascript',
         autofocus: true,
diff --git a/packages/composer-playground/src/app/transaction/transaction.component.html b/packages/composer-playground/src/app/transaction/transaction.component.html
index 2098d22a46..3b6f129d0d 100644
--- a/packages/composer-playground/src/app/transaction/transaction.component.html
+++ b/packages/composer-playground/src/app/transaction/transaction.component.html
@@ -1,65 +1,67 @@
 <div class="transaction-modal">
-  <div class="modal-header">
-    <h1>Submit Transaction</h1>
-    <button class="icon modal-exit" (click)="activeModal.dismiss()">
-      <svg class="ibm-icon" aria-hidden="true">
-        <use xlink:href="#icon-close_new"></use>
-      </svg>
-    </button>
-  </div>
-  <section class="modal-body">
-    <div class="transaction-select">
-      <div class="transaction-select-item">
-        <p>Transaction Type</p>
-      </div>
-      <div class="transaction-select-item">
-        <div ngbDropdown class="d-inline-block">
-            <button type="button" class="action" id="dropdownMenu1" ngbDropdownToggle><span title="{{selectedTransactionName}}">{{selectedTransactionName}}</span></button>
-          <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
-            <button class="dropdown-item action " *ngFor="let transaction of transactionTypes"
-                    (click)="onTransactionSelect(transaction)">{{transaction.getName()}}
-            </button>
-          </div>
-        </div>
-      </div>
+    <div class="modal-header">
+        <h1>Submit Transaction</h1>
+        <button class="icon modal-exit" (click)="activeModal.dismiss()">
+            <svg class="ibm-icon" aria-hidden="true">
+                <use xlink:href="#icon-close_new"></use>
+            </svg>
+        </button>
     </div>
-    <section class="resource-container">
-      <section class="resource-component">
-        <div>
-          <p class="resource-preview-text">JSON Data Preview</p>
+    <section class="modal-body">
+        <div class="transaction-select">
+            <div class="transaction-select-item">
+                <p>Transaction Type</p>
+            </div>
+            <div class="transaction-select-item">
+                <div ngbDropdown class="d-inline-block">
+                    <button type="button" class="action" id="dropdownMenu1" ngbDropdownToggle><span
+                        title="{{selectedTransactionName}}">{{selectedTransactionName}}</span></button>
+                    <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
+                        <button class="dropdown-item action " *ngFor="let transaction of transactionTypes"
+                                (click)="onTransactionSelect(transaction)">{{transaction.getName()}}
+                        </button>
+                    </div>
+                </div>
+            </div>
         </div>
-        <div class="resource-bound">
-          <codemirror name="codeMirror" [(ngModel)]="resourceDefinition" [config]="codeConfig" (ngModelChange)="onDefinitionChanged()"
-                      width="100%" height="100%" ngDefaultControl>
-          </codemirror>
-          <div class="resource-error-text" ng-if="definitionError!=null">
-            <p>{{definitionError}}</p>
-          </div>
-        </div>
-      </section>
+        <section class="resource-container">
+            <section class="resource-component">
+                <div>
+                    <p class="resource-preview-text">JSON Data Preview</p>
+                </div>
+                <codemirror name="codeMirror" [(ngModel)]="resourceDefinition" [config]="codeConfig"
+                            (ngModelChange)="onDefinitionChanged()"
+                            width="100%" height="100%" ngDefaultControl>
+                </codemirror>
+                <div class="resource-error-text" ng-if="definitionError!=null">
+                    <p>{{definitionError}}</p>
+                </div>
+            </section>
+        </section>
     </section>
-  </section>
-  <footer>
-    <p class="footer-text">Just need quick test data?
-      <button type="button" class="icon" (click)="generateTransactionDeclaration(true)"><u>Generate Random Data</u></button>
-    </p>
-    <div class="transaction-footer-cta">
-      <button type="button" class="secondary" (click)="activeModal.dismiss();">
-        <span>Cancel</span>
-      </button>
-      <button name="submitButton" id="submitTransactionButton" type="button" class="primary" (click)="submitTransaction()"
-              [disabled]="definitionError!=null || submitInProgress" ngDefaultControl>
-        <div *ngIf="!submitInProgress" ngDefaultControl>
-          <span>Submit</span>
-        </div>
-        <div *ngIf="submitInProgress" class="ibm-spinner-indeterminate small loop" ngDefaultControl>
-          <div class="loader">
-            <svg class="circular" viewBox="25 25 50 50">
-              <circle class="circle-path" cx="50" cy="50" r="20"/>
-            </svg>
-          </div>
+    <footer>
+        <p class="footer-text">Just need quick test data?
+            <button type="button" class="icon" (click)="generateTransactionDeclaration(true)"><u>Generate Random
+                Data</u></button>
+        </p>
+        <div class="transaction-footer-cta">
+            <button type="button" class="secondary" (click)="activeModal.dismiss();">
+                <span>Cancel</span>
+            </button>
+            <button name="submitButton" id="submitTransactionButton" type="button" class="primary"
+                    (click)="submitTransaction()"
+                    [disabled]="definitionError!=null || submitInProgress" ngDefaultControl>
+                <div *ngIf="!submitInProgress" ngDefaultControl>
+                    <span>Submit</span>
+                </div>
+                <div *ngIf="submitInProgress" class="ibm-spinner-indeterminate small loop" ngDefaultControl>
+                    <div class="loader">
+                        <svg class="circular" viewBox="25 25 50 50">
+                            <circle class="circle-path" cx="50" cy="50" r="20"/>
+                        </svg>
+                    </div>
+                </div>
+            </button>
         </div>
-      </button>
-    </div>
-  </footer>
+    </footer>
 </div>