Styling output (udapp)

assets/css/browser-solidity.css

@@ -326,18 +326,6 @@ body {
     display: none;
 }
 
-.udapp .contract > .title {
-    cursor:pointer;
-}
-
-.udapp .contract > .title:before {
-    content: "\25BC";
-    opacity: 0.5;
-    margin-right: 0.4em;
-    font-size: 10px;
-    margin-top: 0.2em;
-}
-
 .contract.hidesub > .title:before {
     content: "\25B6";
 }

assets/css/universal-dapp.css

@@ -47,29 +47,6 @@
 	margin: 1em;
 }
 
-.udapp .title {
-	margin-bottom: 0.4em;
-	padding: 1em;
-	background-color: #C6CFF7;
-	font-weight: bold;
-	display: flex;
-	justify-content: space-between;
-	word-wrap: break-word;
-	position: relative;
-	border-radius: 3px;
-}
-
-.udapp .definitionTitle {
-	background-color: #C6CFD9;
-}
-
-.udapp .title:hover {
-	opacity: 0.8;
-}
-.udapp .title .size {
-	font-weight: normal;
-}
-
 .udapp .output {
 	padding: 1em;
 	clear: both;

src/app/renderer.js

@@ -341,7 +341,6 @@ Renderer.prototype.contracts = function (data, source) {
     }
   })
 
-  $contractOutput.find('.title').click(function (ev) { $(this).closest('.contract').toggleClass('hidesub') })
   $('#output').append($contractOutput)
   $('.' + css.col2 + ' input,textarea').click(function () { this.select() })
 }

src/app/style-guide.js

@@ -11,7 +11,7 @@ function styleGuide () {
     lightBlue: '#F4F6FF',
     greyBlue: '#102026',
     grey: '#666',
-    lightGrey: '#f8f8f8',
+    lightGrey: '#dddddd',
     red: '#FF8080',
     lightRed: '#FFB9B9',
     green: '#B1EAC5',
@@ -90,6 +90,18 @@ function styleGuide () {
       box-shadow            : rgba(0,0,0,.2) 0 1px 4px;
       margin-bottom         : 1em;
     }
+
+    .title-box {
+      margin-bottom         : 0.4em;
+      padding               : 1em;
+      background-color      : transparent;
+      font-weight           : bold;
+      display               : flex;
+      justify-content       : space-between;
+      word-wrap             : break-word;
+      position              : relative;
+      border-radius         : 3px;
+    }
   `
   /* --------------------------------------------------------------------------
                                     BUTTONS
@@ -135,6 +147,7 @@ function styleGuide () {
     titleM: texts['title-M'],
     dropdown: buttons['dropdown-menu'],
     button: buttons['button'],
-    colors: colors
+    colors: colors,
+    titleBox: textBoxes['title-box']
   }
 }

src/universal-dapp.js

@@ -12,6 +12,9 @@ var TxRunner = require('./app/txRunner')
 
 // -------------- styling ----------------------
 var csjs = require('csjs-inject')
+var styleGuide = require('./app/style-guide')
+var styles = styleGuide()
+
 var css = csjs`
   .options {
       float: left;
@@ -22,7 +25,54 @@ var css = csjs`
       margin-right: 0.5em;
       font-size: 1em;
   }
+  .title extends ${styles.titleBox} {
+    cursor: pointer;
+    background-color: ${styles.colors.violet};
+  }
+  .title:hover {
+    opacity: .8;
+  }
+  .contract .title:before {
+    content: "\\25BE";
+  }
+  .contract.hidesub .title:before {
+    content: "\\25B8"
+  }
+  .contract.hidesub {
+      padding-bottom: 0;
+      margin: 0;
+  }
+  .contract.hidesub > *:not(.title) {
+      display: none;
+  }
+`
+
+var cssInstance = csjs`
+  .title extends ${styles.titleBox} {
+    font-size: .95em;
+    cursor: pointer;
+    background-color: ${styles.colors.lightGrey};
+  }
+  .title:hover {
+    opacity: .8;
+  }
+  .instance .title:before {
+    content: "\\25BE";
+    margin-right: .5em;
+  }
+  .instance.hidesub .title:before {
+    content: "\\25B8"
+    margin-right: .5em;
+  }
+  .instance.hidesub {
+      padding-bottom: 0;
+      margin: 0;
+  }
+  .instance.hidesub > *:not(.title) {
+      display: none;
+  }
 `
+
 ;[...document.querySelectorAll('#header #options li')].forEach(addCss)
 function addCss (el) { el.classList.add(css.options) }
 
@@ -171,14 +221,14 @@ UniversalDApp.prototype.render = function () {
   self.$el.append($legend)
 
   for (var c in self.contracts) {
-    var $contractEl = $('<div class="contract"/>')
+    var $contractEl = $(`<div class="${css.contract}"/>`)
 
     if (self.contracts[c].address) {
       self.getInstanceInterface(self.contracts[c], self.contracts[c].address, $contractEl)
     } else {
-      var $title = $('<span class="title"/>').text(self.contracts[c].name)
+      var $title = $(`<span class="${css.title}"/>`).text(self.contracts[c].name)
+      $title.click(function (ev) { $(this).closest(`.${css.contract}`).toggleClass(`${css.hidesub}`) })
       if (self.contracts[c].bytecode) {
-        $title.addClass('definitionTitle')
         $title.append($('<div class="size"/>').text((self.contracts[c].bytecode.length / 2) + ' bytes'))
       }
       $contractEl.append($title).append(self.getCreateInterface($contractEl, self.contracts[c]))
@@ -265,7 +315,7 @@ UniversalDApp.prototype.getInstanceInterface = function (contract, address, $tar
   var $createInterface = $('<div class="createContract"/>')
 
   var appendFunctions = function (address, $el) {
-    var $instance = $('<div class="instance"/>')
+    var $instance = $(`<div class="${cssInstance.instance}"/>`)
     if (self.options.removable_instances) {
       var $close = $('<div class="udapp-close" />')
       $close.click(function () { $instance.remove() })
@@ -274,9 +324,9 @@ UniversalDApp.prototype.getInstanceInterface = function (contract, address, $tar
     var context = self.executionContext.isVM() ? 'memory' : 'blockchain'
 
     address = (address.slice(0, 2) === '0x' ? '' : '0x') + address.toString('hex')
-    var $title = $('<span class="title"/>').text(contract.name + ' at ' + address + ' (' + context + ')')
+    var $title = $(`<span class="${cssInstance.title}"/>`).text('Contract instance for ' + contract.name + ' at ' + address + ' (' + context + ')')
     $title.click(function () {
-      $instance.toggleClass('hidesub')
+      $instance.toggleClass(`${cssInstance.hidesub}`)
     })
 
     var $events = $('<div class="events"/>')