From 79d0a08107a2d7400bb4f3272d35bd8ec984e651 Mon Sep 17 00:00:00 2001 From: skarabocu Date: Fri, 7 Jun 2019 16:39:46 -0400 Subject: [PATCH 01/15] Redesigned the ethereum card according to the recent designs. --- cards/asset/addon/mixins/asset-base.js | 6 +++ cards/asset/addon/styles/asset-embedded.css | 43 +++++++++++++++++---- cards/asset/addon/templates/embedded.hbs | 21 +++++++--- packages/common/addon/styles/colors.css | 1 + 4 files changed, 58 insertions(+), 13 deletions(-) diff --git a/cards/asset/addon/mixins/asset-base.js b/cards/asset/addon/mixins/asset-base.js index e39e7c5..22ace64 100644 --- a/cards/asset/addon/mixins/asset-base.js +++ b/cards/asset/addon/mixins/asset-base.js @@ -26,4 +26,10 @@ export default Mixin.create({ return moment.unix(timestamp).format('MMM D,YYYY') }), + twoLineAddress: computed('content.formattedAddress', function() { + let address = this.get('content.formattedAddress'); + if (!address) { return; } + + return `${address.slice(0,address.length/2)}\n${address.slice(-address.length/2)}`; + }), }); \ No newline at end of file diff --git a/cards/asset/addon/styles/asset-embedded.css b/cards/asset/addon/styles/asset-embedded.css index 562176b..ae61045 100644 --- a/cards/asset/addon/styles/asset-embedded.css +++ b/cards/asset/addon/styles/asset-embedded.css @@ -14,7 +14,7 @@ background: var(--portfolio-bitcoin-gradient); } .asset-embedded--ether { - background: var(--portfolio-ether-gradient); + background: var(--portfolio-grey-ether-gradient); } .asset-embedded--litecoin { background: var(--portfolio-litecoin-gradient); @@ -26,13 +26,13 @@ .asset-embedded__link { display: block; text-decoration: none; - color: var(--portfolio-white); + color: var(--portfolio-black); font-size: var(--portfolio-sm-font); letter-spacing: 0.2px; } .asset-embedded__wrapper { - padding: 20px; + padding: 5px; } .asset-embedded__header { @@ -52,34 +52,58 @@ .asset-embedded__title { margin: 0; - font-size: var(--portfolio-med-font); + font-size: var(--portfolio-xs-font); font-weight: bold; letter-spacing: 0.2px; line-height: 1.1; text-transform: uppercase; + margin-right: 20px; + align-self: center-start; } .asset-embedded__logo { - margin-right: 10px; + margin-right: 5px; +} + +.asset-embedded__address { + color: var(--portfolio-muted-gray); + font-size: var(--portfolio-xs-font); + font-weight: 600; + letter-spacing: 0.1px; + line-height: 1.5; + flex-shrink: 3; + max-width: 150px; + word-wrap: break-word; } /* Balance summary */ .asset-embedded__balance { - font-weight: bold; letter-spacing: 0.3px; line-height: 1.5; - text-align: right; + margin-left: 20px; } +.asset-embedded__balance > .asset-embedded__balance-title { + color: var(--portfolio-muted-gray); + font-size: var(--portfolio-xs-font); + font-weight: 600; + letter-spacing: 0.3px; + line-height: 1.5; + text-align: left; +} + .asset-embedded__balance-main { padding-bottom: 10px; font-size: 36px; line-height: 1; + text-align: left; } .asset-embedded__balance-main > span { font-size: var(--portfolio-sm-font); } .asset-embedded__balance-fiat { font-size: var(--portfolio-sm-font); + text-align: left; + font-weight: 600; } .asset-embedded__details { @@ -99,3 +123,8 @@ letter-spacing: 0.1px; line-height: 1.5; } + +.asset-embedded__balance-threedots { + color: var(--portfolio-muted-gray); + text-align: right; +} diff --git a/cards/asset/addon/templates/embedded.hbs b/cards/asset/addon/templates/embedded.hbs index 0ade3a1..665ae0d 100644 --- a/cards/asset/addon/templates/embedded.hbs +++ b/cards/asset/addon/templates/embedded.hbs @@ -5,36 +5,44 @@
- {{svg-jar content.networkId width="22px" height="22px" class="asset-embedded__logo"}} + {{svg-jar content.networkId width="30px" height="30px" class="asset-embedded__logo"}}

{{content.networkTitle}}

 + +

{{content.formattedAddress}}

+
+
Balance
-   {{! reserves height if the balance is loading asynchronously }} + {{!   reserves height if the balance is loading asynchronously }} {{#if content.networkBalance}} {{wei-to-ethers content.networkBalance}} {{else}} {{assetBalance}} {{/if}} - {{content.networkUnit}} + {{content.networkUnit}}
{{!-- TODO you can use the "get-rate" helper to get the rate object used for the currency conversion Rate as of {{get (get-rate content.networkUnit 'USD' content.todaysRate) 'gmtDate'}} 0:00 GMT --}} {{#if content.networkBalance}} - ≈ {{currency-symbol currency}}{{convert-currency content.networkUnit currency content.networkBalance content.todaysRatesLookup.rates}} + {{currency-symbol currency}}{{convert-currency content.networkUnit currency content.networkBalance content.todaysRatesLookup.rates}} {{else}} - ≈ {{currency-symbol currency}}{{assetValue}} + {{currency-symbol currency}}{{assetValue}} {{/if}} - {{currency}} + {{currency}} +
+
+ ...
+ {{!--
@@ -43,6 +51,7 @@
+ --}} diff --git a/packages/common/addon/styles/colors.css b/packages/common/addon/styles/colors.css index 07925bf..2db8e16 100644 --- a/packages/common/addon/styles/colors.css +++ b/packages/common/addon/styles/colors.css @@ -66,4 +66,5 @@ --cardfolio-purple-gradient: linear-gradient(45deg, #3023ae 0%, #c86dd7 100%), #834bc4; --cardfolio-box-shadow: rgba(0, 0, 0, 0.5); + --portfolio-grey-ether-gradient: linear-gradient(135deg, #aaaab1 0%,#fff 50%, #aaaab1 100%); } From 665a12ba079eadc48ea6b5f9f0ab4f48c4043fee Mon Sep 17 00:00:00 2001 From: Sinan Karabocuoglu <45086880+skarabocu@users.noreply.github.com> Date: Mon, 10 Jun 2019 17:18:50 -0400 Subject: [PATCH 02/15] Update asset-embedded.css Aligned the address and the title. --- cards/asset/addon/styles/asset-embedded.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/cards/asset/addon/styles/asset-embedded.css b/cards/asset/addon/styles/asset-embedded.css index ae61045..c48c52f 100644 --- a/cards/asset/addon/styles/asset-embedded.css +++ b/cards/asset/addon/styles/asset-embedded.css @@ -41,13 +41,14 @@ justify-content: space-between; align-items: center; padding-bottom: 20px; + padding-top: 20px; } .asset-embedded__title-row { display: flex; flex-flow: row nowrap; justify-content: flex-start; - align-items: center; + align-items: flex-start; } .asset-embedded__title { @@ -55,7 +56,7 @@ font-size: var(--portfolio-xs-font); font-weight: bold; letter-spacing: 0.2px; - line-height: 1.1; + line-height: 1.5; text-transform: uppercase; margin-right: 20px; align-self: center-start; @@ -74,6 +75,7 @@ flex-shrink: 3; max-width: 150px; word-wrap: break-word; + margin: 0; } /* Balance summary */ From b059e12f280ec6938c0b8e0454d5b99baabc98c6 Mon Sep 17 00:00:00 2001 From: skarabocu Date: Wed, 12 Jun 2019 17:25:22 -0400 Subject: [PATCH 03/15] Started to the redesign of isolated view. --- cards/asset/addon/styles/asset-isolated.css | 22 ++++++++++--- cards/asset/addon/templates/isolated.hbs | 36 ++++++++++++++------- 2 files changed, 42 insertions(+), 16 deletions(-) diff --git a/cards/asset/addon/styles/asset-isolated.css b/cards/asset/addon/styles/asset-isolated.css index 76bff34..5739031 100644 --- a/cards/asset/addon/styles/asset-isolated.css +++ b/cards/asset/addon/styles/asset-isolated.css @@ -26,6 +26,10 @@ padding-top: 50px; } +.asset-isolated-details-title { + font-size: var(--portfolio-med-font); +} + .asset-isolated__grid { display: grid; grid-template-columns: 2fr 1fr; @@ -54,17 +58,28 @@ .asset-isolated__title { margin: 0; - font-size: var(--portfolio-med-font); - font-weight: bold; + font-size: var(--portfolio-lg-font); + font-weight: 600; letter-spacing: 0.2px; line-height: 1.1; - text-transform: uppercase; + margin-left: 5px; } .asset-isolated__logo { margin-right: 10px; } +.asset-isolated_currency_and_balance_row { + display: flex; + flex-direction: row nowrap; + align-content: flex-start; + justify-content: space-between; +} + +.asset-isolated_currency_and_balance_row > .asset-isolated__balance-fiat{ + padding-top: 5px; +} + /* Balance summary */ .asset-isolated__balance { padding-bottom: 25px; @@ -88,7 +103,6 @@ /* Currency switcher buttons */ .asset-isolated__currency > span { - margin-left: -50px; font-size: var(--portfolio-xs-font); font-weight: 600; } diff --git a/cards/asset/addon/templates/isolated.hbs b/cards/asset/addon/templates/isolated.hbs index f9e542f..4b41564 100644 --- a/cards/asset/addon/templates/isolated.hbs +++ b/cards/asset/addon/templates/isolated.hbs @@ -4,6 +4,16 @@
+
+ + {{currency-symbol currency}} Asset Detail + +
+

+
+ {{cardstack-content content=content format="embedded"}} +
+
@@ -12,14 +22,14 @@
- {{svg-jar content.networkId width="36px" height="36px" class="asset-isolated__logo"}} + {{svg-jar "activity" width="22px" height="20px" class="asset-isolated__activity "}} -

{{content.networkTitle}}

+

Details
-
+ {{!--
{{#if content.networkAsset.balance}} {{wei-to-ethers content.networkAsset.balance}} @@ -28,15 +38,8 @@ {{/if}} {{content.networkUnit}}
-
- {{#if content.networkAsset.balance}} - ≈ {{currency-symbol currency}}{{convert-currency content.networkUnit currency content.networkAsset.balance content.todaysRatesLookup.rates}} - {{else}} - ≈ {{currency-symbol currency}}{{assetValue}} - {{/if}} - {{currency}} -
-
+
--}} +
View as
@@ -45,6 +48,15 @@
+
+ {{#if content.networkAsset.balance}} + Balance {{currency-symbol currency}}{{convert-currency content.networkUnit currency content.networkAsset.balance content.todaysRatesLookup.rates}} + {{else}} + Balance {{currency-symbol currency}}{{assetValue}} + {{/if}} + {{currency}} +
+
{{#if content.assetHistory}} From 3681acdfdaa15854fdfb66e35f4107bce8dc45f1 Mon Sep 17 00:00:00 2001 From: skarabocu Date: Thu, 13 Jun 2019 10:58:17 -0400 Subject: [PATCH 04/15] Added the icon. --- packages/common/public/images/activity.svg | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 packages/common/public/images/activity.svg diff --git a/packages/common/public/images/activity.svg b/packages/common/public/images/activity.svg new file mode 100644 index 0000000..533da33 --- /dev/null +++ b/packages/common/public/images/activity.svg @@ -0,0 +1,10 @@ + + + + icon + + + + + + \ No newline at end of file From 405491d11d85627d9ed1f70828bd2b3393ce7a9e Mon Sep 17 00:00:00 2001 From: skarabocu Date: Thu, 13 Jun 2019 17:21:23 -0400 Subject: [PATCH 05/15] Added a dropdown menu for changing the currency. --- cards/asset/addon/components/isolated.js | 4 ++++ cards/asset/addon/styles/asset-isolated.css | 14 ++++++++++---- cards/asset/addon/templates/isolated.hbs | 9 ++++++--- package.json | 1 + 4 files changed, 21 insertions(+), 7 deletions(-) diff --git a/cards/asset/addon/components/isolated.js b/cards/asset/addon/components/isolated.js index 780cd51..ff66668 100644 --- a/cards/asset/addon/components/isolated.js +++ b/cards/asset/addon/components/isolated.js @@ -9,6 +9,8 @@ import { task } from 'ember-concurrency'; export default LiveIsolatedCard.extend(AssetBaseMixin, CurrencyParamsMixin, { layout, + currencies: [{name: 'USD'}, {name: 'EUR'}, {name: 'BTC'}], + selectedSymbol: {name: 'USD'}, cardstackData: service(), fastboot: injectOptional.service(), @@ -50,3 +52,5 @@ export default LiveIsolatedCard.extend(AssetBaseMixin, CurrencyParamsMixin, { } }).drop(), }); + + diff --git a/cards/asset/addon/styles/asset-isolated.css b/cards/asset/addon/styles/asset-isolated.css index 5739031..54501be 100644 --- a/cards/asset/addon/styles/asset-isolated.css +++ b/cards/asset/addon/styles/asset-isolated.css @@ -78,6 +78,7 @@ .asset-isolated_currency_and_balance_row > .asset-isolated__balance-fiat{ padding-top: 5px; + width: 150px; } /* Balance summary */ @@ -107,18 +108,22 @@ font-weight: 600; } .asset-isolated__currency-switcher { - display: inline-flex; + display: flex; margin: 0 auto; padding-left: 6px; + width: 400px; + color: black; } + .asset-isolated__currency-switcher > button { padding: 5px 10px; - background: none; + background: whitesmoke; border: 1px solid var(--portfolio-white); - color: var(--portfolio-white); + color: var(--portfolio-black); font-size: var(--portfolio-xs-font); - font-weight: bold; + font-weight: 600; text-align: center; + display: inline-block; } .asset-isolated__currency-switcher > button:first-child { border-top-left-radius: 15px; @@ -127,6 +132,7 @@ .asset-isolated__currency-switcher > button:last-child { border-top-right-radius: 15px; border-bottom-right-radius: 15px; + height:30px; } .asset-isolated__currency-switcher > button + button { border-left: none; diff --git a/cards/asset/addon/templates/isolated.hbs b/cards/asset/addon/templates/isolated.hbs index 4b41564..d0983c8 100644 --- a/cards/asset/addon/templates/isolated.hbs +++ b/cards/asset/addon/templates/isolated.hbs @@ -41,11 +41,14 @@
--}}
- View as -
- +
+ + + + {{!-- + --}}
diff --git a/package.json b/package.json index 188c306..12e4654 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,7 @@ "devDependencies": { "@cardstack/eslint-config": "^0.14.16", "@cardstack/test-support": "^0.14.16", + "@cardstack/ui-components": "^0.1.5", "@typescript-eslint/eslint-plugin": "^1.7.0", "@typescript-eslint/parser": "^1.7.0", "eslint": "^5.9.0", From 3c7a47ef958072ece9062367e882a31e403050c0 Mon Sep 17 00:00:00 2001 From: skarabocu Date: Fri, 14 Jun 2019 16:55:03 -0400 Subject: [PATCH 06/15] Added the scrolling down features and white background for the isolated view, and fixed the justify-content issue for the embedded card address. --- cards/asset/addon/components/isolated.js | 1 + cards/asset/addon/styles/asset-embedded.css | 3 ++ cards/asset/addon/styles/asset-isolated.css | 41 ++++++++++++++------- cards/asset/addon/templates/isolated.hbs | 6 +-- yarn.lock | 2 +- 5 files changed, 36 insertions(+), 17 deletions(-) diff --git a/cards/asset/addon/components/isolated.js b/cards/asset/addon/components/isolated.js index ff66668..fc400ea 100644 --- a/cards/asset/addon/components/isolated.js +++ b/cards/asset/addon/components/isolated.js @@ -51,6 +51,7 @@ export default LiveIsolatedCard.extend(AssetBaseMixin, CurrencyParamsMixin, { this.set('wallet', wallet); } }).drop(), + }); diff --git a/cards/asset/addon/styles/asset-embedded.css b/cards/asset/addon/styles/asset-embedded.css index c48c52f..6a2c968 100644 --- a/cards/asset/addon/styles/asset-embedded.css +++ b/cards/asset/addon/styles/asset-embedded.css @@ -49,6 +49,8 @@ flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; + align-self: strech; + flex-grow: 10; } .asset-embedded__title { @@ -76,6 +78,7 @@ max-width: 150px; word-wrap: break-word; margin: 0; + margin-left: auto; } /* Balance summary */ diff --git a/cards/asset/addon/styles/asset-isolated.css b/cards/asset/addon/styles/asset-isolated.css index 54501be..1f4a3d2 100644 --- a/cards/asset/addon/styles/asset-isolated.css +++ b/cards/asset/addon/styles/asset-isolated.css @@ -6,7 +6,8 @@ background: var(--portfolio-bitcoin-gradient); } .asset-isolated--ether { - background: var(--portfolio-ether-gradient); + /*background: var(--portfolio-ether-gradient);*/ + background: red; } .asset-isolated--litecoin { background: var(--portfolio-litecoin-gradient); @@ -39,6 +40,7 @@ .asset-isolated__wrapper { padding: 25px 20px; + background: var(--portfolio-white); } .asset-isolated__header { @@ -69,6 +71,26 @@ margin-right: 10px; } +.asset-isolated-embedded-asset, .asset-isolated__wrapper { + position: -webkit-sticky; + position: sticky; +} + +.asset-isolated__section--main { + z-index: -2; +} + +.asset-isolated-embedded-asset { + top: 0; + min-height: 50px; + z-index: 5; +} + +.asset-isolated__wrapper { + top: 180px; + z-index: 2; +} + .asset-isolated_currency_and_balance_row { display: flex; flex-direction: row nowrap; @@ -138,17 +160,10 @@ border-left: none; } .asset-isolated__currency-switcher > button.active, -.asset-isolated__currency-switcher > button.active:hover, -.asset-isolated__currency-switcher > button:focus { +.asset-isolated__currency-switcher > .asset-isolated-currency-switch-button:hover, +.asset-isolated__currency-switcher > .asset-isolated-currency-switch-button:focus { outline: none; - background-color: var(--portfolio-white); - color: var(--portfolio-dark-purple); - cursor: pointer; - user-select: none; -} -.asset-isolated__currency-switcher > button:hover { - outline: none; - background-color: var(--portfolio-white-alpha50); + background-color: var(--portfolio-black); color: var(--portfolio-white); cursor: pointer; user-select: none; @@ -218,8 +233,8 @@ } .asset-isolated__section--main { - background-color: var(--portfolio-light-purple); - color: var(--portfolio-white); + /*background-color: var(--portfolio-light-purple);*/ + color: var(--portfolio-black); text-align: center; } diff --git a/cards/asset/addon/templates/isolated.hbs b/cards/asset/addon/templates/isolated.hbs index d0983c8..81f7f97 100644 --- a/cards/asset/addon/templates/isolated.hbs +++ b/cards/asset/addon/templates/isolated.hbs @@ -42,9 +42,9 @@
- + - + {{!-- @@ -57,7 +57,7 @@ {{else}} Balance {{currency-symbol currency}}{{assetValue}} {{/if}} - {{currency}} + {{currency}}
diff --git a/yarn.lock b/yarn.lock index fe8bab5..c5d993e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5555,7 +5555,7 @@ ember-assign-polyfill@^2.5.0, ember-assign-polyfill@^2.6.0: ember-cli-babel "^6.16.0" ember-cli-version-checker "^2.0.0" -ember-auto-import@^1.2.15, ember-auto-import@^1.4.0: +ember-auto-import@1.4.0, ember-auto-import@^1.2.15, ember-auto-import@^1.2.16, ember-auto-import@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/ember-auto-import/-/ember-auto-import-1.4.0.tgz#9fee23cfe050e2221626ebb5ca30a91b03926064" integrity sha512-3OK37rFEQT3e0mjl1v7L3HHd9w0dWD+JqDjTnQFRNT0uhTeD2lq8k30r3w6HYtvJ1ish57ChdfxBLgGib8MTiA== From d3048f509bc934c85591b15d20619aa6ca0b750d Mon Sep 17 00:00:00 2001 From: skarabocu Date: Mon, 17 Jun 2019 16:43:18 -0400 Subject: [PATCH 07/15] Changed the CSS of the highchart to adapt the new design. --- .../asset-history/addon/styles/highcharts.css | 45 ++++++++++--------- cards/asset/addon/styles/asset-isolated.css | 3 +- 2 files changed, 26 insertions(+), 22 deletions(-) diff --git a/cards/asset-history/addon/styles/highcharts.css b/cards/asset-history/addon/styles/highcharts.css index fecc40d..b92d404 100644 --- a/cards/asset-history/addon/styles/highcharts.css +++ b/cards/asset-history/addon/styles/highcharts.css @@ -6,6 +6,7 @@ --portfolio-chart-dark: #000; --portfolio-chart-hover-light: #fafafa; --portfolio-chart-hover-dark: #4d4c6d; + --portfolio-chart-area: linear-gradient(90deg, rgba(78,78,206,1) 0%, rgba(108,209,179,1) 38%, rgba(74,204,118,1) 100%); position: relative; overflow: hidden; @@ -26,7 +27,7 @@ .highcharts-root text { stroke-width: 0; - fill: var(--portfolio-chart-light); + fill: var(--portfolio-chart-dark); } .highcharts-strong { @@ -69,6 +70,7 @@ .highcharts-tracker-area { fill: rgba(192, 192, 192, 0.0001); stroke-width: 0; + stroke: rgba(192, 192, 192, 0.0001); } /* Titles */ @@ -93,11 +95,12 @@ } .highcharts-axis-title { - fill: var(--portfolio-chart-light); + fill: var(--portfolio-chart-dark); } .highcharts-axis-labels { - fill: var(--portfolio-chart-light); + fill: var(--portfolio-chart-dark); + stroke: #000; cursor: default; font-size: var(--portfolio-chart-sm-font); font-weight: bold; @@ -105,7 +108,7 @@ .highcharts-grid-line { fill: none; - stroke: #fff; + stroke: #666666; /*#fff*/ opacity: 0.15; } .highcharts-grid-line:first-child, @@ -131,7 +134,7 @@ } .highcharts-minor-grid-line { - stroke: #f2f2f2; + stroke: #666666; /*#f2f2f2*/ } .highcharts-crosshair-thin { @@ -180,7 +183,7 @@ } .highcharts-tooltip-box .highcharts-label-box { - fill: #f7f7f7; + fill:#f7f7f7; fill-opacity: 0.85; } @@ -228,8 +231,9 @@ g.highcharts-series, /* Series options */ /* Default colors */ .highcharts-color-0 { - fill: var(--portfolio-chart-light); - stroke: #fff; + fill: var(--portfolio-chart-dark); + stroke: #666666; /*#fff*/ + fillColor: #da1919; } .highcharts-color-1 { @@ -284,7 +288,7 @@ g.highcharts-series, .highcharts-markers { stroke-width: 1px; - stroke: #ffffff; + stroke: #666666; /*#ffffff*/ } .highcharts-point { @@ -325,7 +329,7 @@ g.highcharts-series, } .highcharts-column-series rect.highcharts-point { - stroke: #ffffff; + stroke: #666666; /*#ffffff*/ } .highcharts-column-series .highcharts-point { @@ -339,7 +343,7 @@ g.highcharts-series, .highcharts-pie-series .highcharts-point { stroke-linejoin: round; - stroke: #ffffff; + stroke: #666666; /*#ffffff*/ } .highcharts-pie-series .highcharts-point-hover { @@ -349,7 +353,7 @@ g.highcharts-series, .highcharts-funnel-series .highcharts-point { stroke-linejoin: round; - stroke: #ffffff; + stroke: #666666; /*#ffffff*/ } .highcharts-funnel-series .highcharts-point-hover { @@ -364,7 +368,7 @@ g.highcharts-series, .highcharts-pyramid-series .highcharts-point { stroke-linejoin: round; - stroke: #ffffff; + stroke: #666666; /*#ffffff*/ } .highcharts-pyramid-series .highcharts-point-hover { @@ -592,6 +596,7 @@ g.highcharts-series, .highcharts-navigator-series .highcharts-area { fill-opacity: 0.05; + fill: var(--portfolio-chart-area); } .highcharts-navigator-xaxis .highcharts-axis-line { @@ -604,7 +609,7 @@ g.highcharts-series, } .highcharts-navigator-xaxis.highcharts-axis-labels { - fill: #999999; + fill: #000; /*#999999*/ } .highcharts-navigator-yaxis .highcharts-grid-line { @@ -647,25 +652,25 @@ g.highcharts-series, } .highcharts-button text { - fill: var(--portfolio-chart-light); + fill: var(--portfolio-chart-dark); font-weight: bold; } .highcharts-button-hover { transition: fill 0ms; - fill: var(--portfolio-chart-hover-light); - stroke: #cccccc; + fill: var(--portfolio-chart-hover-dark); + stroke: #000; cursor: pointer; } .highcharts-button-hover text { - fill: var(--portfolio-chart-hover-dark); + fill: var(--portfolio-chart-hover-light); font-weight: bold; } .highcharts-button-pressed { fill: var(--portfolio-chart-light); - stroke: #cccccc; + stroke: #000; } .highcharts-button-pressed text { @@ -674,7 +679,7 @@ g.highcharts-series, } .highcharts-button-disabled text { - fill: var(--portfolio-chart-light); + fill: var(--portfolio-chart-dark); opacity: 0.3; cursor: not-allowed; } diff --git a/cards/asset/addon/styles/asset-isolated.css b/cards/asset/addon/styles/asset-isolated.css index 1f4a3d2..35c1bd0 100644 --- a/cards/asset/addon/styles/asset-isolated.css +++ b/cards/asset/addon/styles/asset-isolated.css @@ -160,8 +160,7 @@ border-left: none; } .asset-isolated__currency-switcher > button.active, -.asset-isolated__currency-switcher > .asset-isolated-currency-switch-button:hover, -.asset-isolated__currency-switcher > .asset-isolated-currency-switch-button:focus { +.asset-isolated__currency-switcher > .asset-isolated-currency-switch-button:hover { outline: none; background-color: var(--portfolio-black); color: var(--portfolio-white); From 0539d321cc3e4714c5ec71d65e84af413896d834 Mon Sep 17 00:00:00 2001 From: skarabocu Date: Tue, 18 Jun 2019 17:35:37 -0400 Subject: [PATCH 08/15] Modified the dropdown, so the currency can be changed without a switch button. --- cards/asset/addon/components/isolated.js | 12 +++++++++--- cards/asset/addon/styles/asset-isolated.css | 2 +- cards/asset/addon/templates/isolated.hbs | 5 ++--- packages/common/addon/mixins/currency-params.js | 2 +- 4 files changed, 13 insertions(+), 8 deletions(-) diff --git a/cards/asset/addon/components/isolated.js b/cards/asset/addon/components/isolated.js index fc400ea..08c796d 100644 --- a/cards/asset/addon/components/isolated.js +++ b/cards/asset/addon/components/isolated.js @@ -9,8 +9,10 @@ import { task } from 'ember-concurrency'; export default LiveIsolatedCard.extend(AssetBaseMixin, CurrencyParamsMixin, { layout, - currencies: [{name: 'USD'}, {name: 'EUR'}, {name: 'BTC'}], - selectedSymbol: {name: 'USD'}, + currencies: [{name: 'View details as USD', currency: 'USD'}, + {name: 'View details as EUR', currency: 'EUR'}, + {name: 'View details as BTC', currency: 'BTC'}], + selectedSymbol:{name: 'View details as USD', currency: 'USD'}, cardstackData: service(), fastboot: injectOptional.service(), @@ -51,7 +53,11 @@ export default LiveIsolatedCard.extend(AssetBaseMixin, CurrencyParamsMixin, { this.set('wallet', wallet); } }).drop(), - + setCurrencyDropDown(selectedSymbol){ + console.log(selectedSymbol); + this.set('selectedSymbol', selectedSymbol); + this.setCurrency(selectedSymbol.currency); + } }); diff --git a/cards/asset/addon/styles/asset-isolated.css b/cards/asset/addon/styles/asset-isolated.css index 35c1bd0..11d8e2a 100644 --- a/cards/asset/addon/styles/asset-isolated.css +++ b/cards/asset/addon/styles/asset-isolated.css @@ -99,7 +99,7 @@ } .asset-isolated_currency_and_balance_row > .asset-isolated__balance-fiat{ - padding-top: 5px; + padding-top: 15px; width: 150px; } diff --git a/cards/asset/addon/templates/isolated.hbs b/cards/asset/addon/templates/isolated.hbs index 81f7f97..8cdb1bc 100644 --- a/cards/asset/addon/templates/isolated.hbs +++ b/cards/asset/addon/templates/isolated.hbs @@ -42,9 +42,8 @@
- - - + {{!-- diff --git a/packages/common/addon/mixins/currency-params.js b/packages/common/addon/mixins/currency-params.js index 5814dce..8fa9594 100644 --- a/packages/common/addon/mixins/currency-params.js +++ b/packages/common/addon/mixins/currency-params.js @@ -42,5 +42,5 @@ export default Mixin.create({ setParam('currency', currency); } } - } + } }); \ No newline at end of file From 030da111cd3e48e901640ced7b4694b3bd6186fc Mon Sep 17 00:00:00 2001 From: skarabocu Date: Tue, 18 Jun 2019 17:44:21 -0400 Subject: [PATCH 09/15] A small change for dropdown. --- cards/asset/addon/templates/isolated.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/cards/asset/addon/templates/isolated.hbs b/cards/asset/addon/templates/isolated.hbs index 8cdb1bc..d2da854 100644 --- a/cards/asset/addon/templates/isolated.hbs +++ b/cards/asset/addon/templates/isolated.hbs @@ -43,7 +43,7 @@
+ @handleChange={{action setCurrencyDropDown}} style='width:210px;'/> {{!-- From 743585e7e4e902386fc2d81d76ba33fccf6627ea Mon Sep 17 00:00:00 2001 From: Will Bagby Date: Wed, 19 Jun 2019 12:41:53 -0400 Subject: [PATCH 10/15] revert yarn.lock --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index c5d993e..fe8bab5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5555,7 +5555,7 @@ ember-assign-polyfill@^2.5.0, ember-assign-polyfill@^2.6.0: ember-cli-babel "^6.16.0" ember-cli-version-checker "^2.0.0" -ember-auto-import@1.4.0, ember-auto-import@^1.2.15, ember-auto-import@^1.2.16, ember-auto-import@^1.4.0: +ember-auto-import@^1.2.15, ember-auto-import@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/ember-auto-import/-/ember-auto-import-1.4.0.tgz#9fee23cfe050e2221626ebb5ca30a91b03926064" integrity sha512-3OK37rFEQT3e0mjl1v7L3HHd9w0dWD+JqDjTnQFRNT0uhTeD2lq8k30r3w6HYtvJ1ish57ChdfxBLgGib8MTiA== From 89dbe1288f800cd243981a4d914497ec657a2204 Mon Sep 17 00:00:00 2001 From: skarabocu Date: Wed, 19 Jun 2019 13:43:26 -0400 Subject: [PATCH 11/15] Solved the bug with yarn.lock --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index fe8bab5..94efeb3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1132,7 +1132,7 @@ postcss-cssnext "^2.10.0" postcss-import "^9.1.0" -"@cardstack/ui-components@^0.1.6": +"@cardstack/ui-components@^0.1.5", "@cardstack/ui-components@^0.1.6": version "0.1.6" resolved "https://registry.yarnpkg.com/@cardstack/ui-components/-/ui-components-0.1.6.tgz#40d1da62a48f6c1b0d1ff9f0d1c4d1cc9703ccf9" integrity sha512-US6QdZVU6Xlh3uoFsvNbWRJxeS6xySj+SsZRD1mnLRhmICqAHPy1xQKQXHh1vddCK1bkHy7OVVHiKPLGSFmcWA== From d66d50485233b8dd388bfcb650ae6245655e08bd Mon Sep 17 00:00:00 2001 From: skarabocu Date: Wed, 19 Jun 2019 13:58:02 -0400 Subject: [PATCH 12/15] Get rid of a useless console.log --- cards/asset/addon/components/isolated.js | 1 - 1 file changed, 1 deletion(-) diff --git a/cards/asset/addon/components/isolated.js b/cards/asset/addon/components/isolated.js index 08c796d..db16f3a 100644 --- a/cards/asset/addon/components/isolated.js +++ b/cards/asset/addon/components/isolated.js @@ -54,7 +54,6 @@ export default LiveIsolatedCard.extend(AssetBaseMixin, CurrencyParamsMixin, { } }).drop(), setCurrencyDropDown(selectedSymbol){ - console.log(selectedSymbol); this.set('selectedSymbol', selectedSymbol); this.setCurrency(selectedSymbol.currency); } From bf36023b6696f5130e2a2f83ea6efcb1367db429 Mon Sep 17 00:00:00 2001 From: skarabocu Date: Wed, 19 Jun 2019 14:46:49 -0400 Subject: [PATCH 13/15] Solved linting errors for currencies and selectedSymbol. --- cards/asset/addon/components/isolated.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/cards/asset/addon/components/isolated.js b/cards/asset/addon/components/isolated.js index db16f3a..f6b5f11 100644 --- a/cards/asset/addon/components/isolated.js +++ b/cards/asset/addon/components/isolated.js @@ -9,9 +9,9 @@ import { task } from 'ember-concurrency'; export default LiveIsolatedCard.extend(AssetBaseMixin, CurrencyParamsMixin, { layout, - currencies: [{name: 'View details as USD', currency: 'USD'}, + currencies: Object.freeze([{name: 'View details as USD', currency: 'USD'}, {name: 'View details as EUR', currency: 'EUR'}, - {name: 'View details as BTC', currency: 'BTC'}], + {name: 'View details as BTC', currency: 'BTC'}]), selectedSymbol:{name: 'View details as USD', currency: 'USD'}, cardstackData: service(), fastboot: injectOptional.service(), @@ -35,6 +35,7 @@ export default LiveIsolatedCard.extend(AssetBaseMixin, CurrencyParamsMixin, { } else { this.fetchWallet.perform(); } + this.set('selectedSymbol', {name: 'View details as USD', currency: 'USD'}) }, fetchWallet: task(function * () { From a96e94e311084ea660c9ce0d0edb749407229db0 Mon Sep 17 00:00:00 2001 From: skarabocu Date: Wed, 19 Jun 2019 16:43:19 -0400 Subject: [PATCH 14/15] Small fix for linting error. --- cards/asset/addon/components/isolated.js | 1 - 1 file changed, 1 deletion(-) diff --git a/cards/asset/addon/components/isolated.js b/cards/asset/addon/components/isolated.js index f6b5f11..037624f 100644 --- a/cards/asset/addon/components/isolated.js +++ b/cards/asset/addon/components/isolated.js @@ -12,7 +12,6 @@ export default LiveIsolatedCard.extend(AssetBaseMixin, CurrencyParamsMixin, { currencies: Object.freeze([{name: 'View details as USD', currency: 'USD'}, {name: 'View details as EUR', currency: 'EUR'}, {name: 'View details as BTC', currency: 'BTC'}]), - selectedSymbol:{name: 'View details as USD', currency: 'USD'}, cardstackData: service(), fastboot: injectOptional.service(), From fb80b26628518645233e008a45cc43ee1bb313cf Mon Sep 17 00:00:00 2001 From: Burcu Noyan Date: Fri, 28 Jun 2019 11:22:35 -0400 Subject: [PATCH 15/15] Fix tests --- cards/asset/tests/integration/card-test.js | 13 ++++++++----- portfolio/tests/acceptance/asset-test.js | 8 +++++--- yarn.lock | 4 ++-- 3 files changed, 15 insertions(+), 10 deletions(-) diff --git a/cards/asset/tests/integration/card-test.js b/cards/asset/tests/integration/card-test.js index fd85b5a..871d6b2 100644 --- a/cards/asset/tests/integration/card-test.js +++ b/cards/asset/tests/integration/card-test.js @@ -85,7 +85,7 @@ module('Card | asset', function (hooks) { await render(hbs`{{cardstack-card-test "asset" "0xC3D7FcFb69D168e9339ed18869B506c3B0F51fDE" format="embedded"}}`); assert.dom('[data-test-asset-embedded-link]').hasAttribute('href', `/assets/${address}`) assert.dom('[data-test-asset-embedded-title]').hasText('Ether'); - assert.dom('[data-test-asset-embedded-address]').hasText('0xC3D7...1fDE'); + assert.dom('[data-test-asset-embedded-address]').hasText('0xC3D7FcFb69D168e9339ed18869B506c3B0F51fDE'); assert.dom('[data-test-asset-embedded-last-active]').hasAnyText(); // testing timezone sensitive dates is notoriously difficult in CI assert.dom('[data-test-asset-embedded-balance]').hasTextContaining('0.2009 ETH'); assert.dom('[data-test-asset-embedded-fiat-value]').hasText('≈ $20.09 USD'); @@ -93,7 +93,7 @@ module('Card | asset', function (hooks) { test('isolated format renders', async function (assert) { await render(hbs`{{cardstack-card-test "asset" "0xC3D7FcFb69D168e9339ed18869B506c3B0F51fDE" format="isolated"}}`); - assert.dom('[data-test-asset-isolated-title]').hasText('Ether'); + assert.dom('[data-test-asset-isolated-title]').hasText('Details'); assert.dom('[data-test-asset-isolated-address]').hasText(`Address ${address}`); assert.dom('[data-test-asset-isolated-established-date]').hasAnyText(); // testing timezone sensitive dates is notoriously difficult in CI assert.dom('[data-test-asset-isolated-num-transactions]').hasText('Transactions 2'); @@ -104,15 +104,18 @@ module('Card | asset', function (hooks) { test('can change currency in isolated format', async function (assert) { await render(hbs`{{cardstack-card-test "asset" "0xC3D7FcFb69D168e9339ed18869B506c3B0F51fDE" format="isolated"}}`); - await click('[data-test-asset-isolated-eur-button]'); + await click('.ember-power-select-trigger'); + await click('.ember-power-select-option:nth-of-type(1)'); assert.dom('[data-test-asset-isolated-fiat-value]').hasText('≈ €20.09 EUR'); - await click('[data-test-asset-isolated-btc-button]'); + await click('.ember-power-select-trigger'); + await click('.ember-power-select-option:nth-of-type(2)'); assert.dom('[data-test-asset-isolated-fiat-value]').hasText('≈ 0.2009 BTC'); - await click('[data-test-asset-isolated-usd-button]'); + await click('.ember-power-select-trigger'); + await click('.ember-power-select-option:nth-of-type(0)'); assert.dom('[data-test-asset-isolated-fiat-value]').hasText('≈ $20.09 USD'); }); diff --git a/portfolio/tests/acceptance/asset-test.js b/portfolio/tests/acceptance/asset-test.js index c407b33..8a0d027 100644 --- a/portfolio/tests/acceptance/asset-test.js +++ b/portfolio/tests/acceptance/asset-test.js @@ -81,7 +81,7 @@ module('Acceptance | asset', function (hooks) { function testAssetPage(assert) { assert.dom('[data-test-asset-isolated]').exists(); - assert.dom('[data-test-asset-isolated-title]').hasTextContaining('Ether'); + assert.dom('[data-test-asset-isolated-title]').hasTextContaining('Details'); assert.dom('[data-test-asset-isolated-address]').hasText(`Address ${address}`); assert.dom('[data-test-portfolio-top-header]').exists(); assert.dom('[data-test-portfolio-breadcrumbs]').doesNotExist(); @@ -122,12 +122,14 @@ module('Acceptance | asset', function (hooks) { assert.dom('[data-test-asset-isolated-currency-name').hasText('USD'); - await click('[data-test-asset-isolated-eur-button]'); + await click('.ember-power-select-trigger'); + await click('.ember-power-select-option:nth-of-type(1)'); assert.dom('[data-test-asset-isolated-currency-name').hasText('EUR'); assert.equal(currentURL(this.owner), `/assets/${address}?assets[currency]=EUR`); - await click('[data-test-asset-isolated-btc-button]'); + await click('.ember-power-select-trigger'); + await click('.ember-power-select-option:nth-of-type(2)'); assert.dom('[data-test-asset-isolated-currency-name').hasText('BTC'); assert.equal(currentURL(this.owner), `/assets/${address}?assets[currency]=BTC`); diff --git a/yarn.lock b/yarn.lock index 94efeb3..7b95b85 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6818,9 +6818,9 @@ ember-power-calendar@^0.13.2: ember-cli-htmlbars "^3.0.1" ember-concurrency "^0.8.27 || ^0.9.0 || ^0.10.0 || ^1.0.0" -"ember-power-datepicker@git+https://github.com/bagby/ember-power-datepicker.git#9eaf27d921056b47b7d620b42e303b45c7a40e67": +"ember-power-datepicker@git+https://github.com/bagby/ember-power-datepicker#9eaf27d921056b47b7d620b42e303b45c7a40e67": version "0.6.0" - resolved "git+https://github.com/bagby/ember-power-datepicker.git#9eaf27d921056b47b7d620b42e303b45c7a40e67" + resolved "git+https://github.com/bagby/ember-power-datepicker#9eaf27d921056b47b7d620b42e303b45c7a40e67" dependencies: ember-basic-dropdown "^1.1.2" ember-cli-babel "^7.1.2"