Remove scrollable area. Use short currency format in menubar and show…

… long format in tooltip. Also fixes #7

src/app/actions/Actions.js

@@ -52,15 +52,15 @@ export default {
   fetchCurrencyData () {
     console.log('Fetching currency data')
 
-    api.currencyAPI((error, currency_data) => {
+    api.currencyAPI((error, currencyData) => {
       if (error) throw new Error(error)
 
       console.log('Currency data fetched successfully')
 
       AppDispatcher.dispatch({
         type: ActionTypes.CURRENCY_DATA,
         data: {
-          currency_data: currency_data
+          currencyData: currencyData
         }
       })
     })
@@ -69,15 +69,15 @@ export default {
   fetchCoinData () {
     console.log('Fetching coin data')
 
-    api.frontAPI((error, coin_data) => {
+    api.frontAPI((error, coinData) => {
       if (error) throw new Error(error)
 
       console.log('Coin map fetched successfully')
 
       AppDispatcher.dispatch({
         type: ActionTypes.COIN_DATA,
         data: {
-          coin_data: coin_data
+          coinData: coinData
         }
       })
     })

src/app/components/App.jsx

@@ -47,7 +47,7 @@ export default class App extends React.Component {
       return (
         <li className='list-group-item'>
           <div className='media-body text-center'>
-            <ScaleLoader color='#d1cfd1' size='32px'/>
+            <ScaleLoader color='#d1cfd1' size='32px' />
           </div>
         </li>
       )

src/app/components/Coin.jsx

@@ -9,8 +9,8 @@ import CurrencyStore from '../stores/CurrencyStore'
 import * as CoinUtil from '../utils/coin'
 import * as FormatUtil from '../utils/format'
 
-function updateTitle (price, currency) {
-  ipcRenderer.send('update-btc-price', `${price} ${currency}`)
+function updateTitle (shortPrice, price, currency) {
+  ipcRenderer.send('update-btc-price', { shortPrice, price, currency })
 }
 
 export default class Coin extends React.Component {
@@ -96,11 +96,12 @@ export default class Coin extends React.Component {
 
     const formattedBTCPrice = FormatUtil.getFormattedBTCPrice(priceInBTC)
     const formattedCurrencyPrice = FormatUtil.getFormattedCurrencyPrice(priceInSelectedCurrency)
+    const formattedCurrencyPriceShort = FormatUtil.getFormattedCurrencyPriceShort(priceInSelectedCurrency)
     const formattedVolumeChange = FormatUtil.getFormattedPercentage(cap24hrChange)
     const formattedChangeInPercentage = FormatUtil.getFormattedPercentage(perc)
     const formattedVolume = FormatUtil.getFormattedVolume(volume)
 
-    if (short === 'BTC') updateTitle(formattedCurrencyPrice, selectedCurrency)
+    if (short === 'BTC') updateTitle(formattedCurrencyPriceShort, formattedCurrencyPrice, selectedCurrency)
 
     return (
       <li className={listClass} ref={(ref) => { this.coinRef = ref }}>

src/app/components/Footer.jsx

@@ -32,7 +32,7 @@ export default class Footer extends React.Component {
     this.openGitHubLink = this.openGitHubLink.bind(this)
     this.onVersionChange = this.onVersionChange.bind(this)
     this.onCurrencyChange = this.onCurrencyChange.bind(this)
-    this.setCurrency = this.setCurrency.bind(this)
+    this.handleCurrencyChange = this.handleCurrencyChange.bind(this)
     this.onAppStatusChange = this.onAppStatusChange.bind(this)
   }
 
@@ -91,32 +91,25 @@ export default class Footer extends React.Component {
     else shell.openExternal(pkg.repository)
   }
 
-  setCurrency (currency) {
-    return () => {
-      if (this.state.selectedCurrency === currency) return
+  handleCurrencyChange (event) {
+    const currency = event.target.value
 
-      AppDispatcher.dispatch({
-        type: ActionTypes.SELECT_CURRENCY,
-        data: {
-          selected_currency: currency
-        }
-      })
-    }
+    AppDispatcher.dispatch({
+      type: ActionTypes.SELECT_CURRENCY,
+      data: {
+        selectedCurrency: currency
+      }
+    })
   }
 
   render () {
     console.log('Rendering footer')
 
-    const { currencies, isUpdateAvailable, online, version } = this.state
+    const { currencies, isUpdateAvailable, online, version, selectedCurrency } = this.state
 
     const currencyKeys = Object.keys(currencies)
     const currencyList = currencyKeys.map((currency) => {
-      const currencyClass = classNames({
-        'btn btn-default': true,
-        'active': this.state.selectedCurrency === currency
-      })
-
-      return <button className={currencyClass} key={currency} onClick={this.setCurrency(currency)}>{currency}</button>
+      return <option key={currency} value={currency}>{currency}</option>
     })
 
     const updateTitle = isUpdateAvailable ? 'Update available. Click this button to download new version.' : version
@@ -137,7 +130,7 @@ export default class Footer extends React.Component {
     return (
       <footer className='toolbar toolbar-footer'>
         <div className='toolbar-actions'>
-          <div className='btn-group'>
+          <div className='btn-group btn-group-actions'>
             <button className='btn btn-default' title={onlineOfflineTitle}>
               <span className={onlineOfflineClass} />
             </button>
@@ -148,9 +141,9 @@ export default class Footer extends React.Component {
               <span className='icon icon-cancel' />
             </button> : ''}
           </div>
-          <div className='btn-group btn-group-currencies'>
+          <select className='form-control currency-list pull-right' value={selectedCurrency} onChange={this.handleCurrencyChange}>
             {currencyList}
-          </div>
+          </select>
         </div>
       </footer>
     )

src/app/stores/CoinStore.js

@@ -60,7 +60,7 @@ CoinStore.setMaxListeners(1000)
 
 const register = {
   [ ActionTypes.COIN_DATA ]: (data) => {
-    CoinStore.syncCoins(data.coin_data)
+    CoinStore.syncCoins(data.coinData)
     CoinStore.emitChange()
   },
   [ ActionTypes.NEW_TRADE ]: (data) => {

src/app/stores/CurrencyStore.js

@@ -41,11 +41,11 @@ CurrencyStore.setMaxListeners(1000)
 
 const register = {
   [ ActionTypes.CURRENCY_DATA ]: (data) => {
-    CurrencyStore.syncCurrencies(data.currency_data.rates)
+    CurrencyStore.syncCurrencies(data.currencyData.rates)
     CurrencyStore.emitChange()
   },
   [ ActionTypes.SELECT_CURRENCY ]: (data) => {
-    CurrencyStore.setSelectedCurrency(data.selected_currency)
+    CurrencyStore.setSelectedCurrency(data.selectedCurrency)
     CurrencyStore.emitChange()
   }
 }

src/app/utils/format.js

@@ -4,6 +4,7 @@ export const isPositive = (value) => value >= 0
 export const getFormattedVolume = (volume) => numeral(volume).format('0.0a').toUpperCase()
 export const getFormattedBTCPrice = (price) => price === 1 ? 1 : numeral(price).format('0,0.000000')
 export const getFormattedCurrencyPrice = (price) => numeral(price).format('0,0.0000')
+export const getFormattedCurrencyPriceShort = (price) => numeral(price).format('0,0.00')
 
 export const getFormattedPercentage = (value) => {
   const formattedValue = numeral(value / 100).format('0.00%')

src/main.js

@@ -23,8 +23,9 @@ if (platform === 'darwin' || platform === 'win32') {
   app.on('ready', () => {
     mb.tray.setTitle('Donut')
 
-    ipcMain.on('update-btc-price', (event, price) => {
-      mb.tray.setTitle(price)
+    ipcMain.on('update-btc-price', (event, { shortPrice, price, currency }) => {
+      mb.tray.setTitle(`${shortPrice} ${currency}`)
+      mb.tray.setToolTip(`${price} ${currency}`)
     })
   })
 } else {

src/sass/_photon.scss

@@ -17,6 +17,5 @@
 }
 
 .toolbar-footer {
-  overflow-x: auto;
-  white-space: nowrap;
+  -webkit-app-region: no-drag!important;
 }

src/sass/_utility.scss

@@ -57,8 +57,18 @@
   }
 }
 
-.btn-group-currencies {
-  display: inline-flex;
+.currency-list {
+  height: 23px;
+  width: auto;
+  border-top-color: #c2c0c2;
+  border-right-color: #c2c0c2;
+  border-bottom-color: #a19fa1;
+  border-left-color: #c2c0c2;
+  margin-right: 4px;
+}
+
+.btn-group-actions {
+  margin-bottom: -1px;
 }
 
 .online {