diff --git a/src/js/routes.js b/src/js/routes.js index 286b27ab1..5900b88da 100644 --- a/src/js/routes.js +++ b/src/js/routes.js @@ -701,7 +701,7 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr 'tab-receive@tabs': { controller: 'amountController', controllerAs: 'vm', - templateUrl: 'views/amount.html' + templateUrl: 'views/amountNew.html' } } }) diff --git a/src/sass/views/amountNew.scss b/src/sass/views/amountNew.scss new file mode 100644 index 000000000..cbffe4929 --- /dev/null +++ b/src/sass/views/amountNew.scss @@ -0,0 +1,484 @@ +#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-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 { + 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; + } + + .unit { + font-weight: bold; + } + + .primary-amount-display { + margin-right: 5px; + word-break: break-all; + } + } + + .switch-currencies { + position: absolute; + right: 0; + top: 50%; + transform: translate(0, -50%); + padding: 15px; + + img { + width: 18px; + } + } + } + + .send-amount-actions { + margin-top: 15px; + 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; + } + } + } + } + } + + .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; + //flex: 0 1 196px; + + @media (min-height: 667px) { + //flex: 0 1 224px; + } + + .keypad { + text-align: center; + font-size: 18px; + font-weight: lighter; + position: absolute; + bottom: 0; + width: 100%; + 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 { + .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 #262424; + transition: all 0.1s ease; + + + &:active { + background-color: $v-dark-gray; + } + } + + @media(max-height: 480px) { + font-size: 12px; + + } + } + } + } + background: #494949; + + 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 d4ed735ed..387b68597 100644 --- a/src/sass/views/views.scss +++ b/src/sass/views/views.scss @@ -1,6 +1,7 @@ @import "tabs"; @import "add"; @import "amount"; +@import "amountNew"; @import "confirm"; @import "copayers"; @import "starting"; diff --git a/www/views/amountNew.html b/www/views/amountNew.html new file mode 100644 index 000000000..6fe58eb9b --- /dev/null +++ b/www/views/amountNew.html @@ -0,0 +1,85 @@ + + + + {{'Enter amount (New)' | translate}} + + + + + +
+ +
+
+ Minimum amount: {{vm.minShapeshiftAmount}}
+ Maximum amount: {{vm.maxShapeshiftAmount}}
+
+
+
+
+ {{ vm.amountModel.amount || 0 }}{{vm.unit}} +
+ {{vm.globalResult}} {{vm.unit}} +
+ {{vm.alternativeAmount || '0.00'}} {{vm.alternativeUnit}} +
+
+
+
+ + +
+
+
+
+ +
+
+ +
+
7
+
8
+
9
+
+ +
+
4
+
5
+
6
+
+ +
+
1
+
2
+
3
+
+ +
+
.
+
0
+
+
+
+
+ + +
+
\ No newline at end of file