Merge pull request #121 from MakerDAO/112-switch-quote-base-currency

Icon button enabling switching of quote and base currency

frontend/client/style/index.css

@@ -104,3 +104,9 @@ h1 img { margin-left: -1.2rem }
 section { float: right; width: 48% }
 section:first-of-type { float: left }
 }
+
+#spnSwitchCurrencies {
+    margin: 0px 10px;
+    vertical-align: middle;
+    cursor: pointer;
+}

frontend/client/templates/currencyselector.html

@@ -1,12 +1,12 @@
 <template name="currencySelector">
   <p>
     Quote Currency:
-    <select {{b "options: currencies, value: quoteCurrency, change: quoteChange"}}></select>
+    <select id="sltQuoteCurrency" {{b "options: currencies, value: quoteCurrency, change: quoteChange"}}></select>
     <span class="text-danger" {{b "text: quoteHelper"}}></span>
-  </p>
-  <p>
+  <span id="spnSwitchCurrencies" class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
+
     Base Currency:
-    <select {{b "options: currencies, value: baseCurrency, change: baseChange"}}></select>
+    <select id="sltBaseCurrency" {{b "options: currencies, value: baseCurrency, change: baseChange"}}></select>
     <span class="text-danger" {{b "text: baseHelper"}}></span>
   </p>
 </template>

frontend/client/templates/currencyselector.js

@@ -47,3 +47,12 @@ Template.currencySelector.viewmodel({
     })
   }
 })
+
+Template.currencySelector.events({
+  'click #spnSwitchCurrencies': function () {
+    var quoteCurrency = Session.get('quoteCurrency')
+    var baseCurrency = Session.get('baseCurrency')
+    Session.set('quoteCurrency', baseCurrency)
+    Session.set('baseCurrency', quoteCurrency)
+  }
+})