Merge pull request #2204 from ethereum/toasterIssue

resizable buttons for deploy&run -> contract functions

src/app/tabs/runTab/contractDropdown.js

@@ -107,10 +107,18 @@ class ContractDropdownUI {
       return
     }
 
-    var selectedContract = this.getSelectedContract()
-    var createConstructorInstance = new MultiParamManager(0, selectedContract.getConstructorInterface(), (valArray, inputsValues) => {
+    const selectedContract = this.getSelectedContract()
+    const clickCallback = (valArray, inputsValues) => {
       this.createInstance(inputsValues)
-    }, selectedContract.getConstructorInputs(), 'Deploy', selectedContract.bytecodeObject)
+    }
+    const createConstructorInstance = new MultiParamManager(
+      0,
+      selectedContract.getConstructorInterface(),
+      clickCallback,
+      selectedContract.getConstructorInputs(),
+      'Deploy',
+      selectedContract.bytecodeObject
+    )
     this.createPanel.appendChild(createConstructorInstance.render())
   }
 

src/app/tabs/styles/run-tab-styles.js

@@ -107,6 +107,9 @@ var css = csjs`
     flex-direction: row;
     align-items: baseline;
   }
+  .button button{
+    flex: none;
+  }
   .button {
     display: flex;
     align-items: center;

src/app/ui/multiParamManager.js

@@ -119,6 +119,7 @@ class MultiParamManager {
     this.basicInputField = yo`<input></input>`
     this.basicInputField.setAttribute('placeholder', this.inputs)
     this.basicInputField.setAttribute('title', this.inputs)
+    this.basicInputField.setAttribute('style', 'flex: 4')
 
     var onClick = (domEl) => {
       this.clickCallBack(this.funABI.inputs, this.basicInputField.value)
@@ -127,9 +128,14 @@ class MultiParamManager {
 // otherwise it needs to have btn-warning injected
 // or do we need to only do this in 1 place - I have a feeling that this will happen in multiple places
 
-    this.contractActionsContainerSingle = yo`<div class="${css.contractActionsContainerSingle}" >
-      <button onclick=${() => { onClick() }} class="${css.instanceButton} btn btn-sm">${title}</button>${this.basicInputField}<i class="fas fa-angle-down ${css.methCaret}" onclick=${() => { this.switchMethodViewOn() }} title=${title} ></i>
-      </div>`
+    this.contractActionsContainerSingle = yo`
+    <div class="${css.contractActionsContainerSingle}" >
+      <button onclick=${() => onClick()} class="${css.instanceButton} btn btn-sm">
+        ${title}
+      </button>
+      ${this.basicInputField}
+      <i class="fas fa-angle-down ${css.methCaret}" onclick=${() => this.switchMethodViewOn()} title=${title} ></i>
+    </div>`
 
     this.multiFields = this.createMultiFields()
 
@@ -195,7 +201,7 @@ class MultiParamManager {
       this.contractActionsContainerSingle.querySelector('i').style.visibility = 'hidden'
     } else {
       this.contractActionsContainerSingle.querySelector('i').style.visibility = 'hidden'
-      this.basicInputField.style.display = 'none'
+      this.basicInputField.style.visibility = 'hidden'
     }
 
     if (this.funABI.payable === true) {

src/universal-dapp-styles.js

@@ -97,6 +97,7 @@ var css = csjs`
   }
   .instanceButton {
     border-radius: 3px;
+    flex: 3;
   }
   .closeIcon {
     font-size: 12px;
@@ -109,7 +110,6 @@ var css = csjs`
     justify-content: flex-end;
   }
   .contractProperty {
-    overflow: auto;
     margin-bottom: 0.4em;
     margin-top: 1em;
     width:100%;