From b389c6d2ba8b9fcb252e335a209cdbbba3e60304 Mon Sep 17 00:00:00 2001 From: Maksym Tymchyk Date: Sun, 22 Oct 2017 02:13:58 +0300 Subject: [PATCH] Up WEX Ticker Extension version to v0.2.0 --- resources/images/wex-logo.png | Bin 0 -> 4047 bytes resources/manifest.json | 8 +- src/Popup/Screens/HomeScreen.jsx | 35 +++--- .../Screens/HomeViews/CurrentTickerView.tsx | 70 ++++++----- src/Style/parts/header.scss | 42 +++++++ src/Style/popup.scss | 10 +- src/Style/screens/home.scss | 109 +++++++++--------- src/Style/variable.scss | 9 +- src/background.js | 2 +- 9 files changed, 174 insertions(+), 111 deletions(-) create mode 100644 resources/images/wex-logo.png create mode 100644 src/Style/parts/header.scss diff --git a/resources/images/wex-logo.png b/resources/images/wex-logo.png new file mode 100644 index 0000000000000000000000000000000000000000..87e533cdc1ece87c043a364092d4b38c31a5ea5d GIT binary patch literal 4047 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 { - return { - value: trc.key, - label: `${trc.baseCurrency}/${trc.quoteCurrency}` - }; - }); - } - drawTickerList() { const {tickers = [], currentTickerKey = null} = this.props; const {selectMode = false} = this.state; @@ -89,8 +77,8 @@ class HomeScreen extends React.Component { const currentTicker = _.find(tickers, {key: currentTickerKey}); - const currentTickerLabelProps = { - className: "current-ticker-label", + const currentMarketLabelProps = { + className: "header__current-market", onClick: () => { this.setState({selectMode: true}); } @@ -99,15 +87,20 @@ class HomeScreen extends React.Component { return (
{this.drawTickerList()} - { - currentTicker && ( -
-
- ) - } + ) + } + +
); diff --git a/src/Popup/Screens/HomeViews/CurrentTickerView.tsx b/src/Popup/Screens/HomeViews/CurrentTickerView.tsx index 3dc85da..f65eb92 100644 --- a/src/Popup/Screens/HomeViews/CurrentTickerView.tsx +++ b/src/Popup/Screens/HomeViews/CurrentTickerView.tsx @@ -19,34 +19,52 @@ class CurrentTickerView extends React.Component - - -
- Market {ticker.baseCurrency}/{ticker.quoteCurrency} +
+ + +
-
Volume 24h
- - - - +
+ + + + + + + + + +
); } diff --git a/src/Style/parts/header.scss b/src/Style/parts/header.scss new file mode 100644 index 0000000..db09570 --- /dev/null +++ b/src/Style/parts/header.scss @@ -0,0 +1,42 @@ +.header { + padding: 0 10px; + height: 50px; + background: white; + display: flex; + justify-content: space-between; + align-items: center; + + border-bottom: 1px solid $color-alto; + + &__logo { + display: block; + &-img { + display: block; + height: 21px; + } + } + + &__current-market { + display: block; + cursor: pointer; + padding: 0 22px 0 8px; + border-radius: 4px; + font-size: 14px; + color: $color-shuttle-gray; + + &:after { + border-style: solid; + border-color: $color-shuttle-gray; + border-width: 1px 1px 0 0; + content: ''; + transform: rotate(135deg); + display: block; + height: 4px; + width: 4px; + margin-top: -4px; + position: absolute; + right: 8px; + top: 50%; + } + } +} \ No newline at end of file diff --git a/src/Style/popup.scss b/src/Style/popup.scss index 8169175..b078e96 100644 --- a/src/Style/popup.scss +++ b/src/Style/popup.scss @@ -9,14 +9,16 @@ html { body { width: 300px; - height: 200px; + height: 255px; overflow: hidden; font-size: 16px; background: white; - color: rgb(38, 38, 38); + color: $color-dark-gray; font-family: $font; } +@import "parts/header"; + .created-by { display: none; position: fixed; @@ -48,4 +50,8 @@ body { letter-spacing: 0.8px; } +.application { + padding: 0; +} + @import "screens/home"; \ No newline at end of file diff --git a/src/Style/screens/home.scss b/src/Style/screens/home.scss index 7244052..e8f3004 100644 --- a/src/Style/screens/home.scss +++ b/src/Style/screens/home.scss @@ -1,59 +1,74 @@ -.application { - padding: 16px 8px 16px 8px -} - .current-ticker { + + &__bugged { + padding: 24px 0; + } + &__price { font-size: 24px; - display: inline-block; + display: block; position: relative; - margin: 0; + text-align: center; + width: 100%; + line-height: 24px; + letter-spacing: 0.6px; &-currency { - position: absolute; bottom: 0; - left: 100%; margin-bottom: 3px; margin-left: 6px; font-size: 14px; - color: rgb(200, 200, 200); + color: $color-gull-gray; + font-weight: 100; + letter-spacing: 0.4px; } } &__market { display: block; - margin: 4px 0 8px 0; + text-align: center; + line-height: 16px; + font-weight: 100; + letter-spacing: 0.4px; &-link { font-size: 10px; + color: $color-gull-gray; + text-decoration: none; + &:hover { + color: darken($color-gull-gray, 10%); + } } } - &__title { - font-size: 12px; - color: rgb(160, 160, 160); - } + &__info { + &-container { + padding: 0 10px; + } - &__vol { display: inline-block; - margin-right: 16px; - &-currency, &-value { - display: inline-block; - vertical-align: middle; - font-size: 12px; - } + width: 50%; + padding: 0; + margin-bottom: 16px; - &-currency { - color: rgb(200, 200, 200); - margin-right: 4px; + &-label { + display: block; + color: $color-gull-gray; + text-transform: uppercase; + font-size: 10px; + font-weight: 100; + letter-spacing: 0.8px; } &-value { + font-size: 14px; + font-weight: 100; + letter-spacing: 0.8px; } } } .ticker-list { - transition: all 0.2s; + transition: all 0.4s; position: fixed; left: 0; top: 0; @@ -62,22 +77,25 @@ background: rgb(255, 255, 255); overflow-y: scroll; z-index: 100; + padding: 4px; visibility: hidden; opacity: 0; + transform: scale(0.8); &.-active { visibility: visible; opacity: 1; + transform: scale(1); } &__item { transition: all 0.2s; position: relative; - padding: 8px 8px; + padding: 8px; + border-radius: 4px; font-size: 12px; + margin-bottom: 2px; cursor: pointer; - border-bottom: 1px solid rgb(240, 240, 240); - display: flex; justify-content: space-between; @@ -89,38 +107,17 @@ } &-price { - color: $color-blue; + color: $color-violet; font-weight: 100; } - } -} -.current-ticker-label { - display: block; - text-align: center; - margin-bottom: 16px; + &.-active { + background: linear-gradient(45deg, $color-dark-violet, $color-violet); + } - &__item { - display: inline-block; - cursor: pointer; - padding: 0 22px 0 8px; - border-radius: 4px; - font-size: 14px; - color: $color-blue; - - &:after { - border-style: solid; - border-color: $color-blue; - border-width: 1px 1px 0 0; - content: ' '; - transform: rotate(135deg); - display: block; - height: 4px; - width: 4px; - margin-top: -4px; - position: absolute; - right: 8px; - top: 50%; + &.-active &-price, + &.-active &-name { + color: white; } } } \ No newline at end of file diff --git a/src/Style/variable.scss b/src/Style/variable.scss index a7c0ccd..6686f4a 100644 --- a/src/Style/variable.scss +++ b/src/Style/variable.scss @@ -1 +1,8 @@ -$color-blue: #0078c8; \ No newline at end of file +$color-violet: #8090CC; +$color-dark-violet: #6779A9; + +$color-dark-gray: #373C46; +$color-shuttle-gray: #5A6170; +$color-gull-gray: #9DA6B8; +$color-alto: #DADFEA; +$color-all-ocean: #F4F6F9; \ No newline at end of file diff --git a/src/background.js b/src/background.js index eeceefc..681b067 100644 --- a/src/background.js +++ b/src/background.js @@ -91,7 +91,7 @@ const updateBudgetTexts = () => { ExtensionPlatform.getExtension().browserAction.setTitle({ title: 'Wex Ticker: ' + `${currentTicker.baseCurrency} / ${currentTicker.quoteCurrency}` + - ` - ${Numeral(currentTicker.price).format('0,0.[0000]')}` + ` - ${Numeral(currentTicker.price).format(currentTicker.format)}` }); } };