From 0cba978d6539574e9a75098b6a94b2c596e36462 Mon Sep 17 00:00:00 2001 From: Brendon Duncan Date: Tue, 31 Jul 2018 20:25:21 +1200 Subject: [PATCH] Replaced old amount screen. --- src/js/routes.js | 4 +- src/sass/views/amount.scss | 158 +++++++--- src/sass/views/amountNew.scss | 557 ---------------------------------- src/sass/views/views.scss | 1 - www/views/amount.html | 63 ++-- www/views/amountNew.html | 102 ------- 6 files changed, 158 insertions(+), 727 deletions(-) delete mode 100644 src/sass/views/amountNew.scss delete mode 100644 www/views/amountNew.html diff --git a/src/js/routes.js b/src/js/routes.js index 5b0b59d77..286b27ab1 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -292,7 +292,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr 'tab-send@tabs': { controller: 'amountController', controllerAs: 'vm', - templateUrl: 'views/amountNew.html' + templateUrl: 'views/amount.html' } } }) @@ -701,7 +701,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr 'tab-receive@tabs': { controller: 'amountController', controllerAs: 'vm', - templateUrl: 'views/amountNew.html' + templateUrl: 'views/amount.html' } } }) diff --git a/src/sass/views/amount.scss b/src/sass/views/amount.scss index c712d85e5..daf6cf4fe 100644 --- a/src/sass/views/amount.scss +++ b/src/sass/views/amount.scss @@ -244,6 +244,18 @@ flex-direction: column; justify-content: center; + .send-amount-header-footer { + flex: 1 1 auto; + min-height: 20px; + + .warning { + font-weight: bold; + font-size: 12px; + padding: 0 6px 6px 6px; + text-align: center; + } + } + .send-amount-tool { flex: 0 1 auto; @@ -260,6 +272,8 @@ } .primary-amount { + color: #333; + font-weight: bold; input, .unit, .primary-amount-display { font-size: 1.8em; @@ -329,16 +343,15 @@ line-height: 1em; } - .unit { - font-weight: bold; - } - .primary-amount-display { margin-right: 5px; word-break: break-all; } } + .alternative-amount { + color: #6F6F70; + } .switch-currencies { position: absolute; right: 0; @@ -351,27 +364,56 @@ } } } + } + } - .send-amount-actions { - margin-top: 15px; + .send-amount-extras { + display: flex; + flex: 0 0 auto; + /* So that if only one item is present, it appears on the right. */ + flex-direction: row-reverse; + font-size: 12px; + align-items: center; + justify-content: space-between; + margin: 0 14px; + + .available-funds { + color: #6F6F70; + } + + .warning { + color: $v-warning-color-2; + } + + .extra, + button.extra { + /*display: flex;*/ + flex: 0 1 auto; + } + + button.extra { + background: none; + border: none; + color: #000; + font-family: 'ProximaNova'; + font-size: 14px; + line-height: normal; + min-height: auto; + min-width: auto; + padding: 0; + } + + .button .icon:before { + font-size: 14px; + line-height: normal; + } + + + .button { + span { display: flex; align-items: center; justify-content: center; - - .button { - flex: 1 1 auto; - line-height: 1.2em; - - + .button { - margin-left: 10px; - } - - span { - display: flex; - align-items: center; - justify-content: center; - } - } } } } @@ -394,37 +436,58 @@ .keypad-container { position: relative; + font-size: 18px; + line-height: 2em; //flex: 0 1 196px; + @media (min-height: 667px) { + font-size: 24px; + } + + @media(max-height: 480px) { + font-size: 12px; + } + @media (min-height: 667px) { //flex: 0 1 224px; } + .sendmax { + background: $v-off-black; + + .button { + color: white; + background: black; + border: 1px solid $v-off-black; + border-radius: 0; + font-size: 0.8em; + line-height: 2em; + width: 100%; + + .available-funds-amount { + color: #C9C9C9; + } + + &:active { + background-color: $v-dark-gray; + } + } + } + .keypad { text-align: center; - font-size: 18px; font-weight: lighter; position: absolute; bottom: 0; width: 100%; - color: $v-mid-gray; + color: $v-text-primary-color; + - @media (min-height: 667px) { - font-size: 24px; - } .row { padding: 0 !important; margin: 0 !important; } - - .col { - line-height: 38px; - - @media (min-height: 667px) { - line-height: 45px; - } - } .row { &:last-child { @@ -458,23 +521,34 @@ .digit{ cursor: pointer; - border-top: 1px solid $v-subtle-gray; - border-left: 1px solid $v-subtle-gray; + background-color: #000; + border: 1px solid $v-off-black; transition: all 0.1s ease; &:active { - background-color: $v-subtle-gray; + background-color: $v-dark-gray; } } - @media(max-height: 480px) { - font-size: 12px; - - } } } + + .button-primary { + background-color: $v-primary-color; + border-radius: 0; + font-weight: bold; + } + + .button-primary[disabled] { + background-color: $v-button-primary-disabled-bg; + opacity: 1; + } } - background: #494949; + + .warning { + color: $v-warning-color-2; + } + background: $v-background-under-card; ion-content { margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */ diff --git a/src/sass/views/amountNew.scss b/src/sass/views/amountNew.scss deleted file mode 100644 index 24338fe99..000000000 --- a/src/sass/views/amountNew.scss +++ /dev/null @@ -1,557 +0,0 @@ -#view-amount-new { - @extend .deflash-blue; - .recipient-label { - font-size: 14px; - padding-bottom: 0; - color: $v-mid-gray; - } - .item-no-bottom-border + .item { - border-top: 0; - } - .icon-bitpay-card { - background-image: url("../img/icon-bitpay.svg"); - } - .icon-amazon { - background-image: url("../img/icon-amazon.svg"); - } - @media(max-width: 480px) { - .bitcoin-address { - .icon { - left: 8px; - font-size: 24px; - } - .big-icon-svg { - left:5px; - & > .bg{ - width:30px; - height:30px; - box-shadow: none; - } - } - font-size: 13px; - padding-left: 48px; - } - } - @media(max-width: 320px) { - .bitcoin-address { - & > span:last-child { - margin-left: -2px; - } - } - } - .send-gravatar { - left: 11px; - position: absolute; - top: 10px; - } - .amount span input { - display: inline; - width: 120px; - } - .amount-pane-recipient { - position: absolute; - top: 95px; - bottom: 0; - width: 100%; - background-color: #fff; - padding: 0 16px; - - .amount-bar { - padding: 24px 0; - font-size: 18px; - @media(max-height: 480px) { - padding: 0px; - } - @media(max-width: 320px) { - padding: 0px; - } - .title { - float: left; - padding-top: 10px; - color: $v-dark-gray; - font-weight: bold; - @media(max-height: 480px) { - padding: 0px; - } - } - @media(max-height: 480px) { - padding-top: 3px; - } - } - .amount { - display: flex; - flex-direction: column; - justify-content: center; - flex-grow: 1; - position: absolute; - bottom: 254px; - top: 66px; - .light { - color: $v-light-gray; - } - @media(max-height: 480px) { - top: 45px; - } - @media(max-width: 320px) { - bottom: 276px; - top: 60px; - & > div { - display: inline-block; - } - & > div:first-child { - display: inherit; - } - } - } - } - .amount-pane-no-recipient { - position: absolute; - top: 0; - bottom: 0; - width: 100%; - background-color: #fff; - padding: 0 16px; - - .amount-bar { - padding: 24px 0; - font-size: 18px; - .title { - padding-top: 10px; - color: $v-dark-gray; - font-weight: bold; - .limits { - margin-top: 10px; - color: $v-light-gray; - font-size: 12px; - } - .select { - margin: 10px 1px; - } - } - } - .amount { - display: flex; - flex-direction: column; - justify-content: center; - flex-grow: 1; - position: absolute; - bottom: 254px; - top: 66px; - .light { - color: $v-light-gray; - } - } - } - .amount { - padding-top: 10px; - padding-bottom: 10px; - .icon-toggle { - font-size: 1.2em; - width: auto; - margin: 0.8em auto; - border: 1px solid $v-subtle-gray; - color: $v-dark-gray; - border-radius: 3px; - padding: 0 10px; - cursor: pointer; - @media(max-height: 280px) { - margin: 0.1em auto; - } - } - &__editable { - &--minimize { - font-size: 22px; - } - &--standard { - font-size: 42px; - @media(max-height: 480px) { - font-size: 26px; - padding-top: 10px; - } - } - &--placeholder { - color: $v-light-gray; - } - } - &__number { - color: $v-dark-gray; - } - &__currency-toggle { - border: 1px solid $v-subtle-gray; - color: $v-dark-gray; - border-radius: 3px; - padding: 0 10px; - cursor: pointer; - font-size: .6em; - position: relative; - top: -3px; - line-height: 1; - @media(max-width: 320px) { - line-height: 30px; - height: 30px; - } - } - &__currency-toggle-mobile { - border: 1px solid $v-subtle-gray; - color: $v-dark-gray; - border-radius: 3px; - cursor: pointer; - position: relative; - line-height: 1; - @media(max-width: 320px) { - line-height: 30px; - height: 30px; - } - } - &__results { - &--minimize { - font-size: 12px; - } - &--standard { - font-size: 18px; - padding: 10px 0; - } - &--placeholder { - color: $v-light-gray; - } - } - &__result { - color: $v-light-gray; - font-size: .9em; - //margin-bottom: -.9em; TODO matias - line-height: 1; - @media(max-height: 480px) { - margin-bottom: 0; - } - } - &__result-equiv { - color: $v-mid-gray; - font-size: 1.2em; - @media(max-height: 480px) { - margin-top: 0; - font-size: 16px; - } - } - } - - .scroll-content { - display: flex; - flex-direction: column; - - .send-amount { - flex: 1 1 auto; - display: flex; - flex-direction: column; - justify-content: center; - - .send-amount-header-footer { - flex: 1 1 auto; - min-height: 20px; - - .warning { - font-weight: bold; - font-size: 12px; - padding: 0 6px 6px 6px; - text-align: center; - } - } - - .send-amount-tool { - flex: 0 1 auto; - - .send-amount-tool-input { - text-align: center; - position: relative; - padding: 10px 30px; - - .text-selectable { - -webkit-user-select: text; - -moz-user-select: text; - -ms-user-select: text; - user-select: text; - } - - .primary-amount { - color: #333; - font-weight: bold; - input, .unit, .primary-amount-display { - font-size: 1.8em; - - @media (min-width: 375px) { - font-size: 2.1em; - } - - @media (min-width: 414px) { - font-size: 2.4em; - } - } - - &.long { - input, .unit, .primary-amount-display { - font-size: 1.6em; - - @media (min-width: 375px) { - font-size: 1.8em; - } - - @media (min-width: 414px) { - font-size: 2em; - } - } - } - - &.very-long { - input, .unit, .primary-amount-display { - font-size: 0.9em; - - @media (min-width: 375px) { - font-size: 1.3em; - } - - @media (min-width: 414px) { - font-size: 1.4em; - } - } - } - - - input { - border:0; - padding:0; - white-space:normal; - background:none; - line-height:1; - box-sizing:content-box; - display: inline-block; - vertical-align: middle; - margin: 0; - height: 1em; - margin-right: 5px; - font-family: 'ProximaNova'; - - @media (min-width: 375px) { - } - - @media (min-width: 414px) { - } - } - - .unit, - .primary-amount-display { - display: inline-block; - vertical-align: middle; - line-height: 1em; - } - - .primary-amount-display { - margin-right: 5px; - word-break: break-all; - } - } - - .alternative-amount { - color: #6F6F70; - } - .switch-currencies { - position: absolute; - right: 0; - top: 50%; - transform: translate(0, -50%); - padding: 15px; - - img { - width: 18px; - } - } - } - } - } - - .send-amount-extras { - display: flex; - flex: 0 0 auto; - /* So that if only one item is present, it appears on the right. */ - flex-direction: row-reverse; - font-size: 12px; - align-items: center; - justify-content: space-between; - margin: 0 14px; - - .available-funds { - color: #6F6F70; - } - - .warning { - color: $v-warning-color-2; - } - - .extra, - button.extra { - /*display: flex;*/ - flex: 0 1 auto; - } - - button.extra { - background: none; - border: none; - color: #000; - font-family: 'ProximaNova'; - font-size: 14px; - line-height: normal; - min-height: auto; - min-width: auto; - padding: 0; - } - - .button .icon:before { - font-size: 14px; - line-height: normal; - } - - - .button { - span { - display: flex; - align-items: center; - justify-content: center; - } - } - } - - .button { - &.no-margin { - margin: 0; - } - } - - .notification-warning { - display: block; - padding: .75rem 1.25rem; - color: #856404; - background-color: #fff3cd; - border: 1px solid #ffeeba; - line-height: 1.4em; - margin-bottom: 20px; - } - - .keypad-container { - position: relative; - font-size: 18px; - line-height: 2em; - //flex: 0 1 196px; - - @media (min-height: 667px) { - font-size: 24px; - } - - @media(max-height: 480px) { - font-size: 12px; - } - - @media (min-height: 667px) { - //flex: 0 1 224px; - } - - .sendmax { - background: $v-off-black; - - .button { - color: white; - background: black; - border: 1px solid $v-off-black; - border-radius: 0; - font-size: 0.8em; - line-height: 2em; - width: 100%; - - .available-funds-amount { - color: #C9C9C9; - } - - &:active { - background-color: $v-dark-gray; - } - } - } - - .keypad { - text-align: center; - font-weight: lighter; - position: absolute; - bottom: 0; - width: 100%; - color: $v-text-primary-color; - - - - .row { - padding: 0 !important; - margin: 0 !important; - } - - .row { - &:last-child { - .col { - padding-bottom: 10px; - } - } - } - - .operator { - background-color: $v-subtle-gray; - font-weight: normal; - cursor: pointer; - - &:active { - background-color: $v-light-gray; - } - } - - .operator-send { - font-weight: bolder; - color: #fff; - background-color: $positive; - font-size: 36px; - cursor: pointer; - - &:active { - background-color: #eaeaea; - } - } - - .digit{ - cursor: pointer; - background-color: #000; - border: 1px solid $v-off-black; - transition: all 0.1s ease; - - &:active { - background-color: $v-dark-gray; - } - } - - } - } - - .button-primary { - background-color: $v-primary-color; - border-radius: 0; - font-weight: bold; - } - - .button-primary[disabled] { - background-color: $v-button-primary-disabled-bg; - opacity: 1; - } - } - - .warning { - color: $v-warning-color-2; - } - background: $v-background-under-card; - - ion-content { - margin-bottom: constant(safe-area-inset-bottom); /* iOS 11.0 */ - margin-bottom: env(safe-area-inset-bottom); /* iOS 11.2 */ - } -} \ No newline at end of file diff --git a/src/sass/views/views.scss b/src/sass/views/views.scss index 387b68597..d4ed735ed 100644 --- a/src/sass/views/views.scss +++ b/src/sass/views/views.scss @@ -1,7 +1,6 @@ @import "tabs"; @import "add"; @import "amount"; -@import "amountNew"; @import "confirm"; @import "copayers"; @import "starting"; diff --git a/www/views/amount.html b/www/views/amount.html index 90187ef59..77c52f96c 100644 --- a/www/views/amount.html +++ b/www/views/amount.html @@ -1,24 +1,26 @@ - {{'Enter amount' | translate}} + {{'Enter Amount' | translate}} - +
-
-
- Minimum amount: {{vm.minShapeshiftAmount}}
- Maximum amount: {{vm.maxShapeshiftAmount}}
+
+
+
+ Minimum amount: {{vm.minShapeshiftAmount}}
+ Maximum amount: {{vm.maxShapeshiftAmount}}
+
- {{ vm.amountModel.amount || 0 }}{{vm.unit}} + ng-class="{long: vm.amount.length > 5, 'very-long': vm.amount.length > 10}"> + {{vm.amount}} {{vm.unit}}
{{vm.globalResult}} {{vm.unit}}
@@ -26,26 +28,41 @@
-
- - +
+
+ Not enough available funds +
-
+
+
+ +
+ +
+ Available Funds: {{vm.availableFunds}} +
-
+
+ +
+ +
7
diff --git a/www/views/amountNew.html b/www/views/amountNew.html deleted file mode 100644 index e0296219a..000000000 --- a/www/views/amountNew.html +++ /dev/null @@ -1,102 +0,0 @@ - - - - {{'Enter Amount' | translate}} - - - - - -
- -
-
-
- Minimum amount: {{vm.minShapeshiftAmount}}
- Maximum amount: {{vm.maxShapeshiftAmount}}
-
-
-
-
-
- {{vm.amount}} {{vm.unit}} -
- {{vm.globalResult}} {{vm.unit}} -
- {{vm.alternativeAmount || '0.00'}} {{vm.alternativeUnit}} -
-
-
-
-
- Not enough available funds -
-
-
-
- -
- -
- Available Funds: {{vm.availableFunds}} -
-
-
- -
-
- -
- -
- -
-
7
-
8
-
9
-
- -
-
4
-
5
-
6
-
- -
-
1
-
2
-
3
-
- -
-
.
-
0
-
-
-
-
- - - - \ No newline at end of file