Merge pull request #1278 from ethereum/multi_param_angles

src/multiParamManager.js

@@ -61,8 +61,7 @@ class MultiParamManager {
     }
 
     this.contractActionsContainerSingle = yo`<div class="${css.contractActionsContainerSingle}" >
-      <i class="fa fa-caret-right ${css.methCaret}" onclick=${() => { this.switchMethodViewOn() }} title=${title} ></i>
-      <button onclick=${() => { onClick() }} class="${css.instanceButton}">${title}</button>${basicInputField}
+      <button onclick=${() => { onClick() }} class="${css.instanceButton}">${title}</button>${basicInputField}<i class="fa fa-angle-down ${css.methCaret}" onclick=${() => { this.switchMethodViewOn() }} title=${title} ></i>
       </div>`
 
     var multiFields = this.createMultiFields()
@@ -77,13 +76,13 @@ class MultiParamManager {
       this.clickCallBack(this.funABI.inputs, ret)
     }
 
-    var button = yo`<button onclick=${() => { multiOnClick() }} class="${css.instanceButton}">Submit</button>`
+    var button = yo`<button onclick=${() => { multiOnClick() }} class="${css.instanceButton}"></button>`
 
     this.contractActionsContainerMulti = yo`<div class="${css.contractActionsContainerMulti}" >
       <div class="${css.contractActionsContainerMultiInner}" >
         <div onclick=${() => { this.switchMethodViewOff() }} class="${css.multiHeader}">
-          <i class='fa fa-caret-down ${css.methCaret}'></i>
           <div class="${css.multiTitle}">${title}</div>
+          <i class='fa fa-angle-up ${css.methCaret}'></i>
         </div>
         ${multiFields}
         <div class="${css.group} ${css.multiArg}" >
@@ -97,7 +96,10 @@ class MultiParamManager {
     if (this.lookupOnly) {
       contractProperty.classList.add(css.constant)
       button.setAttribute('title', (title + ' - call'))
+      button.innerHTML = 'call'
       this.contractActionsContainerSingle.querySelector(`.${css.instanceButton}`).setAttribute('title', (title + ' - call'))
+    } else {
+      button.innerHTML = 'transact'
     }
 
     if (this.funABI.inputs && this.funABI.inputs.length > 0) {

src/universal-dapp-styles.js

@@ -61,7 +61,7 @@ var css = csjs`
   .methCaret {
     margin-right: 5px;
     cursor: pointer;
-    font-size: 12px;
+    font-size: 16px;
     padding-top: 5px;
     vertical-align: top;
   }
@@ -97,6 +97,10 @@ var css = csjs`
     border-radius: 5px;
     width: 70%;
   }
+  .contractProperty .contractActionsContainerSingle input{
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
   .contractProperty button {
     ${styles.rightPanel.runTab.button_Create}
     min-width: 100px;
@@ -154,27 +158,33 @@ var css = csjs`
     margin-bottom: 5px;
     font-weight: bold;
   }
-  .multiTitle {
-    ${styles.rightPanel.runTab.button_Create}
-    border-radius: 3px;
+  .contractActionsContainerMultiInner .multiTitle {
+    padding-left: 10px;
+  }
+  .contractProperty .multiTitle {
     display: inline-block;
-    width: 95%;
+    width: 90%;
     font-size: 10px;
     height: 25px;
     padding-left: 20px;
-    font-weight: normal;
+    font-weight: bold;
     line-height: 25px;
     cursor: default;
   }
+  .contractProperty .contractActionsContainerMultiInner .multiArg label{
+    text-align: center;
+  }
+  .multiHeader .methCaret {
+    float: right;
+    margin-right: 0;
+  }
   .contractProperty.constant .multiTitle {
-    ${styles.rightPanel.runTab.button_Constant}
-    border-radius: 3px;
     display: inline-block;
-    width: 95%;
+    width: 90%;
     font-size: 10px;
     height: 25px;
     padding-left: 20px;
-    font-weight: normal;
+    font-weight: bold;
     line-height: 25px;
     cursor: default;
   }