From 398c1315eb9638df34c439d5d6407f07030fbed5 Mon Sep 17 00:00:00 2001 From: Harsh Vakharia <harshjv@gmail.com> Date: Thu, 5 Jan 2017 16:21:36 +0530 Subject: [PATCH] Remove scrollable area. Use short currency format in menubar and show long format in tooltip. Also fixes #7 --- src/app/actions/Actions.js | 8 ++++---- src/app/components/App.jsx | 2 +- src/app/components/Coin.jsx | 7 ++++--- src/app/components/Footer.jsx | 35 +++++++++++++-------------------- src/app/stores/CoinStore.js | 2 +- src/app/stores/CurrencyStore.js | 4 ++-- src/app/utils/format.js | 1 + src/main.js | 5 +++-- src/sass/_photon.scss | 3 +-- src/sass/_utility.scss | 14 +++++++++++-- 10 files changed, 43 insertions(+), 38 deletions(-) diff --git a/src/app/actions/Actions.js b/src/app/actions/Actions.js index 3d081b9..c3fb403 100644 --- a/src/app/actions/Actions.js +++ b/src/app/actions/Actions.js @@ -52,7 +52,7 @@ 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') @@ -60,7 +60,7 @@ export default { AppDispatcher.dispatch({ type: ActionTypes.CURRENCY_DATA, data: { - currency_data: currency_data + currencyData: currencyData } }) }) @@ -69,7 +69,7 @@ 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') @@ -77,7 +77,7 @@ export default { AppDispatcher.dispatch({ type: ActionTypes.COIN_DATA, data: { - coin_data: coin_data + coinData: coinData } }) }) diff --git a/src/app/components/App.jsx b/src/app/components/App.jsx index 31bb41a..ea7d0ad 100644 --- a/src/app/components/App.jsx +++ b/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> ) diff --git a/src/app/components/Coin.jsx b/src/app/components/Coin.jsx index 6479099..79a9c00 100644 --- a/src/app/components/Coin.jsx +++ b/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 }}> diff --git a/src/app/components/Footer.jsx b/src/app/components/Footer.jsx index b8f764b..72ffb27 100644 --- a/src/app/components/Footer.jsx +++ b/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> ) diff --git a/src/app/stores/CoinStore.js b/src/app/stores/CoinStore.js index 3b0a9c0..a6ee60d 100644 --- a/src/app/stores/CoinStore.js +++ b/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) => { diff --git a/src/app/stores/CurrencyStore.js b/src/app/stores/CurrencyStore.js index ffd7b27..2e476bb 100644 --- a/src/app/stores/CurrencyStore.js +++ b/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() } } diff --git a/src/app/utils/format.js b/src/app/utils/format.js index e1d18ff..ff5afb0 100644 --- a/src/app/utils/format.js +++ b/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%') diff --git a/src/main.js b/src/main.js index e2f8ece..472535e 100644 --- a/src/main.js +++ b/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 { diff --git a/src/sass/_photon.scss b/src/sass/_photon.scss index af253f3..78ecd50 100644 --- a/src/sass/_photon.scss +++ b/src/sass/_photon.scss @@ -17,6 +17,5 @@ } .toolbar-footer { - overflow-x: auto; - white-space: nowrap; + -webkit-app-region: no-drag!important; } diff --git a/src/sass/_utility.scss b/src/sass/_utility.scss index b19aa35..3f617a0 100644 --- a/src/sass/_utility.scss +++ b/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 {