Update: Fixes memo cut-off, changes memo to textarea, auto-expand based on content length, display memo while transaction is in Receiving state

This commit is contained in:
Sam Cheng Hung 2018-03-22 11:50:26 +09:00
commit 7b26261512
7 changed files with 498 additions and 366 deletions

View file

@ -18,7 +18,8 @@ var modules = [
'copayApp.services', 'copayApp.services',
'copayApp.controllers', 'copayApp.controllers',
'copayApp.directives', 'copayApp.directives',
'copayApp.addons' 'copayApp.addons',
'bitcoincom.directives'
]; ];
var copayApp = window.copayApp = angular.module('copayApp', modules); var copayApp = window.copayApp = angular.module('copayApp', modules);
@ -28,3 +29,4 @@ angular.module('copayApp.services', []);
angular.module('copayApp.controllers', []); angular.module('copayApp.controllers', []);
angular.module('copayApp.directives', []); angular.module('copayApp.directives', []);
angular.module('copayApp.addons', []); angular.module('copayApp.addons', []);
angular.module('bitcoincom.directives', []);

View file

@ -0,0 +1,19 @@
'use strict';
angular.module('bitcoincom.directives')
.directive('elastic', [
'$timeout',
function($timeout) {
return {
restrict: 'A',
link: function($scope, element) {
$scope.initialHeight = $scope.initialHeight || element[0].style.height;
var resize = function() {
element[0].style.height = $scope.initialHeight;
element[0].style.height = "" + element[0].scrollHeight + "px";
};
element.on("input change", resize);
$timeout(resize, 0);
}
};
}
]);

View file

@ -290,4 +290,20 @@
font-size: 12px; font-size: 12px;
color: $v-text-accent-color; color: $v-text-accent-color;
} }
/*
Helper classes for .label. Will have to relook into the whole CSS structure for potential optimisations.
*/
.label {
&.flex {
display: flex;
textarea {
flex: 1 1 auto;
}
}
&.align-items-center {
align-items: center;
}
}
} }

View file

@ -6680,6 +6680,9 @@ button.item.item-button-right {
align-items: center; } align-items: center; }
.item-options .button:before { .item-options .button:before {
margin: 0 auto; } margin: 0 auto; }
.item-options ion-option-button:last-child {
padding-right: calc(constant(safe-area-inset-right) + 16px);
padding-right: calc(env(safe-area-inset-right) + 16px); }
/** /**
* Lists * Lists
@ -9675,28 +9678,57 @@ a.button {
* Platform specific tweaks * Platform specific tweaks
*/ */
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) { .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) {
height: 64px; } height: 64px;
height: calc(constant(safe-area-inset-top) + 44px);
height: calc(env(safe-area-inset-top) + 44px); }
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper { .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader).item-input-inset .item-input-wrapper {
margin-top: 19px !important; } margin-top: 19px !important; }
.platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * { .platform-ios.platform-cordova:not(.fullscreen) .bar-header:not(.bar-subheader) > * {
margin-top: 20px; } margin-top: 20px;
margin-top: constant(safe-area-inset-top);
margin-top: env(safe-area-inset-top); }
.platform-ios.platform-cordova:not(.fullscreen) .tabs-top > .tabs, .platform-ios.platform-cordova:not(.fullscreen) .bar-header {
.platform-ios.platform-cordova:not(.fullscreen) .tabs.tabs-top { padding-left: calc( constant(safe-area-inset-left) + 5px);
padding-left: calc(env(safe-area-inset-left) + 5px);
padding-right: calc(constant(safe-area-inset-right) + 5px);
padding-right: calc(env(safe-area-inset-right) + 5px); }
.platform-ios.platform-cordova:not(.fullscreen) .bar-header .buttons:last-child {
right: calc(constant(safe-area-inset-right) + 5px);
right: calc(env(safe-area-inset-right) + 5px); }
.platform-ios.platform-cordova:not(.fullscreen) .has-tabs, .platform-ios.platform-cordova:not(.fullscreen) .bar-footer.has-tabs {
bottom: calc(constant(safe-area-inset-bottom) + 49px);
bottom: calc(env(safe-area-inset-bottom) + 49px); }
.platform-ios.platform-cordova:not(.fullscreen) .tabs-top > .tabs, .platform-ios.platform-cordova:not(.fullscreen) .tabs.tabs-top {
top: 64px; } top: 64px; }
.platform-ios.platform-cordova:not(.fullscreen) .has-header, .platform-ios.platform-cordova:not(.fullscreen) .tabs {
.platform-ios.platform-cordova:not(.fullscreen) .bar-subheader { padding-bottom: constant(safe-area-inset-bottom);
top: 64px; } padding-bottom: env(safe-area-inset-bottom);
height: calc(constant(safe-area-inset-bottom) + 49px);
height: calc(env(safe-area-inset-bottom) + 49px); }
.platform-ios.platform-cordova:not(.fullscreen) .has-header, .platform-ios.platform-cordova:not(.fullscreen) .bar-subheader {
top: 64px;
top: calc(constant(safe-area-inset-top) + 44px);
top: calc(env(safe-area-inset-top) + 44px); }
.platform-ios.platform-cordova:not(.fullscreen) .has-subheader { .platform-ios.platform-cordova:not(.fullscreen) .has-subheader {
top: 108px; } top: 108px;
top: calc(constant(safe-area-inset-top) + 88px);
top: calc(env(safe-area-inset-top) + 88px); }
.platform-ios.platform-cordova:not(.fullscreen) .has-header.has-tabs-top { .platform-ios.platform-cordova:not(.fullscreen) .has-header.has-tabs-top {
top: 113px; } top: 113px;
top: calc(93px + constant(safe-area-inset-top));
top: calc(93px + env(safe-area-inset-top)); }
.platform-ios.platform-cordova:not(.fullscreen) .has-header.has-subheader.has-tabs-top { .platform-ios.platform-cordova:not(.fullscreen) .has-header.has-subheader.has-tabs-top {
top: 157px; } top: 157px;
top: calc(137px + constant(safe-area-inset-right));
top: calc(137px + env(safe-area-inset-right)); }
.platform-ios.platform-cordova .popover .bar-header:not(.bar-subheader) { .platform-ios.platform-cordova .popover .bar-header:not(.bar-subheader) {
height: 44px; } height: 44px; }
@ -9705,8 +9737,7 @@ a.button {
.platform-ios.platform-cordova .popover .bar-header:not(.bar-subheader) > * { .platform-ios.platform-cordova .popover .bar-header:not(.bar-subheader) > * {
margin-top: 0; } margin-top: 0; }
.platform-ios.platform-cordova .popover .has-header, .platform-ios.platform-cordova .popover .has-header, .platform-ios.platform-cordova .popover .bar-subheader {
.platform-ios.platform-cordova .popover .bar-subheader {
top: 44px; } top: 44px; }
.platform-ios.platform-cordova .popover .has-subheader { .platform-ios.platform-cordova .popover .has-subheader {
@ -9716,6 +9747,32 @@ a.button {
margin-bottom: 20px; } margin-bottom: 20px; }
@media (orientation: landscape) { @media (orientation: landscape) {
.item {
padding: 16px calc(constant(safe-area-inset-right) + 16px); }
.item .badge {
right: calc(constant(safe-area-inset-right) + 32px); }
.item-icon-left {
padding-left: calc(constant(safe-area-inset-left) + 54px); }
.item-icon-left .icon {
left: calc(constant(safe-area-inset-left) + 11px); }
.item-icon-right {
padding-right: calc(constant(safe-area-inset-right) + 54px); }
.item-icon-right .icon {
right: calc(constant(safe-area-inset-right) + 11px); }
.item-complex, a.item.item-complex, button.item.item-complex {
padding: 0; }
.item-complex .item-content, a.item.item-complex .item-content, button.item.item-complex .item-content {
padding: 16px calc(constant(safe-area-inset-right) + 49px) 16px calc(constant(safe-area-inset-left) + 16px); }
.item-left-edit.visible.active {
-webkit-transform: translate3d(calc(constant(safe-area-inset-left) + 8px), 0, 0);
transform: translate3d(calc(constant(safe-area-inset-left) + 8px), 0, 0); }
.list-left-editing .item-left-editable .item-content,
.item-left-editing.item-left-editable .item-content {
-webkit-transform: translate3d(calc(constant(safe-area-inset-left) + 50px), 0, 0);
transform: translate3d(calc(constant(safe-area-inset-left) + 50px), 0, 0); }
.item-right-edit {
right: constant(safe-area-inset-right);
right: env(safe-area-inset-right); }
.platform-ios.platform-browser.platform-ipad { .platform-ios.platform-browser.platform-ipad {
position: fixed; } } position: fixed; } }
@ -10089,9 +10146,17 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm
box-shadow: none; box-shadow: none;
color: #fff; } color: #fff; }
.button-sendmax {
font-size: 0.7em !important;
display: inline !important; }
.button-clear { .button-clear {
background: none !important; } background: none !important; }
.button-skip {
padding-top: 15px !important;
font-size: 24px !important; }
.center-block { .center-block {
float: none; float: none;
margin: 0 auto; } margin: 0 auto; }
@ -10192,6 +10257,10 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm
position: absolute; position: absolute;
top: 10px; } top: 10px; }
#view-amount .amount span input {
display: inline;
width: 120px; }
#view-amount .amount-pane-recipient { #view-amount .amount-pane-recipient {
position: absolute; position: absolute;
top: 95px; top: 95px;
@ -10272,75 +10341,79 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm
#view-amount .amount-pane-no-recipient .amount .light { #view-amount .amount-pane-no-recipient .amount .light {
color: #9b9bab; } color: #9b9bab; }
#view-amount .amount .icon-toggle { #view-amount .amount {
font-size: 1.2em; padding-top: 10px;
width: auto; padding-bottom: 10px; }
margin: 0.8em auto; #view-amount .amount .icon-toggle {
border: 1px solid #f2f2f2; font-size: 1.2em;
color: #445; width: auto;
border-radius: 3px; margin: 0.8em auto;
padding: 0 10px; border: 1px solid #f2f2f2;
cursor: pointer; } color: #445;
@media (max-height: 280px) { border-radius: 3px;
#view-amount .amount .icon-toggle { padding: 0 10px;
margin: 0.1em auto; } } cursor: pointer; }
@media (max-height: 280px) {
#view-amount .amount__editable--minimize { #view-amount .amount .icon-toggle {
font-size: 22px; } margin: 0.1em auto; } }
#view-amount .amount__editable--minimize {
#view-amount .amount__editable--standard { font-size: 22px; }
font-size: 42px; } #view-amount .amount__editable--standard {
@media (max-height: 480px) { font-size: 42px; }
#view-amount .amount__editable--standard { @media (max-height: 480px) {
font-size: 26px; #view-amount .amount__editable--standard {
padding-top: 10px; } } font-size: 26px;
padding-top: 10px; } }
#view-amount .amount__editable--placeholder { #view-amount .amount__editable--placeholder {
color: #9b9bab; } color: #9b9bab; }
#view-amount .amount__number {
#view-amount .amount__number { color: #445; }
color: #445; } #view-amount .amount__currency-toggle {
border: 1px solid #f2f2f2;
#view-amount .amount__currency-toggle { color: #445;
border: 1px solid #f2f2f2; border-radius: 3px;
color: #445; padding: 0 10px;
border-radius: 3px; cursor: pointer;
padding: 0 10px; font-size: .6em;
cursor: pointer; position: relative;
font-size: .6em; top: -3px;
position: relative; line-height: 1; }
top: -3px; @media (max-width: 320px) {
line-height: 1; } #view-amount .amount__currency-toggle {
@media (max-width: 320px) { line-height: 30px;
#view-amount .amount__currency-toggle { height: 30px; } }
line-height: 30px; #view-amount .amount__currency-toggle-mobile {
height: 30px; } } border: 1px solid #f2f2f2;
color: #445;
#view-amount .amount__results--minimize { border-radius: 3px;
font-size: 12px; } cursor: pointer;
position: relative;
#view-amount .amount__results--standard { line-height: 1; }
font-size: 18px; @media (max-width: 320px) {
padding: 10px 0; } #view-amount .amount__currency-toggle-mobile {
line-height: 30px;
#view-amount .amount__results--placeholder { height: 30px; } }
color: #9b9bab; } #view-amount .amount__results--minimize {
font-size: 12px; }
#view-amount .amount__result { #view-amount .amount__results--standard {
color: #9b9bab; font-size: 18px;
font-size: .9em; padding: 10px 0; }
line-height: 1; } #view-amount .amount__results--placeholder {
@media (max-height: 480px) { color: #9b9bab; }
#view-amount .amount__result { #view-amount .amount__result {
margin-bottom: 0; } } color: #9b9bab;
font-size: .9em;
#view-amount .amount__result-equiv { line-height: 1; }
color: #667; @media (max-height: 480px) {
font-size: 1.2em; } #view-amount .amount__result {
@media (max-height: 480px) { margin-bottom: 0; } }
#view-amount .amount__result-equiv { #view-amount .amount__result-equiv {
margin-top: 0; color: #667;
font-size: 16px; } } font-size: 1.2em; }
@media (max-height: 480px) {
#view-amount .amount__result-equiv {
margin-top: 0;
font-size: 16px; } }
#view-amount .keypad { #view-amount .keypad {
text-align: center; text-align: center;
@ -10515,7 +10588,7 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm
background: #fff; background: #fff;
border-radius: 50px; } border-radius: 50px; }
#tab-home .next-step.item { #tab-home .next-step.item, #tab-home .service.item {
padding-top: 27px; padding-top: 27px;
padding-bottom: 27px; } padding-bottom: 27px; }
@ -11070,7 +11143,7 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm
* Generate wallet colors from color map * Generate wallet colors from color map
*/ */
.wallet-color-count { .wallet-color-count {
content: "14"; } content: "15"; }
/* background-color and color defaults should be the same */ /* background-color and color defaults should be the same */
.wallet-background-color-default { .wallet-background-color-default {
@ -11079,6 +11152,9 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm
.wallet-color-default { .wallet-color-default {
color: #fab915; } color: #fab915; }
.cashwallet-color-default {
color: #26B03C; }
/* generate classes for all colors */ /* generate classes for all colors */
.wallet-color-0 { .wallet-color-0 {
background: #dd4b39; } background: #dd4b39; }
@ -11123,58 +11199,65 @@ ion-view.deflash-blue:before, ion-view#view-amount:before, ion-view#view-confirm
margin-left: 2.4rem; } margin-left: 2.4rem; }
.wallet-color-6 { .wallet-color-6 {
background: #fab915; } background: #26B03C; }
.wallet-color-6:before { .wallet-color-6:before {
content: "Observatory"; content: "Dollar Green";
margin-left: 2.4rem; } margin-left: 2.4rem; }
.wallet-color-7 { .wallet-color-7 {
background: #77dada; } background: #fab915; }
.wallet-color-7:before { .wallet-color-7:before {
content: "Turquoise Blue"; content: "Observatory";
margin-left: 2.4rem; } margin-left: 2.4rem; }
.wallet-color-8 { .wallet-color-8 {
background: #4a90e2; } background: #77dada; }
.wallet-color-8:before { .wallet-color-8:before {
content: "Cornflower Blue"; content: "Turquoise Blue";
margin-left: 2.4rem; } margin-left: 2.4rem; }
.wallet-color-9 { .wallet-color-9 {
background: #484ed3; } background: #4a90e2; }
.wallet-color-9:before { .wallet-color-9:before {
content: "Free Speech Blue"; content: "Cornflower Blue";
margin-left: 2.4rem; } margin-left: 2.4rem; }
.wallet-color-10 { .wallet-color-10 {
background: #9b59b6; } background: #484ed3; }
.wallet-color-10:before { .wallet-color-10:before {
content: "Deep Lilac"; content: "Free Speech Blue";
margin-left: 2.4rem; } margin-left: 2.4rem; }
.wallet-color-11 { .wallet-color-11 {
background: #e856ef; } background: #9b59b6; }
.wallet-color-11:before { .wallet-color-11:before {
content: "Free Speech Magenta"; content: "Deep Lilac";
margin-left: 2.4rem; } margin-left: 2.4rem; }
.wallet-color-12 { .wallet-color-12 {
background: #ff599e; } background: #e856ef; }
.wallet-color-12:before { .wallet-color-12:before {
content: "Brilliant Rose"; content: "Free Speech Magenta";
margin-left: 2.4rem; } margin-left: 2.4rem; }
.wallet-color-13 { .wallet-color-13 {
background: #7a8c9e; } background: #ff599e; }
.wallet-color-13:before { .wallet-color-13:before {
content: "Brilliant Rose";
margin-left: 2.4rem; }
.wallet-color-14 {
background: #7a8c9e; }
.wallet-color-14:before {
content: "Light Slate Grey"; content: "Light Slate Grey";
margin-left: 2.4rem; } margin-left: 2.4rem; }
@ -12362,7 +12445,7 @@ a.item {
#onboard-welcome #logo { #onboard-welcome #logo {
width: 40%; width: 40%;
max-width: 200px; max-width: 200px;
margin: 5rem auto 0; } margin: auto 0; }
#onboard-welcome #lead { #onboard-welcome #lead {
line-height: 1.6; line-height: 1.6;
@ -13571,278 +13654,280 @@ slide-to-accept-success {
#tx-details .action-rejected { #tx-details .action-rejected {
color: red; } color: red; }
#txp-details .item-note, #txp-details,
#view-confirm .item-note { #view-confirm {
float: none; } /*
#txp-details .item-note .fee-rate, Helper classes for .label. Will have to relook into the whole CSS structure for potential optimisations.
#view-confirm .item-note .fee-rate { */ }
display: inline-block; }
#txp-details .list,
#view-confirm .list {
background: #f5f5f5; }
#txp-details .add-bottom-for-cta,
#view-confirm .add-bottom-for-cta {
bottom: 92px; }
#txp-details .head,
#view-confirm .head {
padding: 30px 20px 3rem;
border-top: 0; }
#txp-details .head .sending-label,
#view-confirm .head .sending-label {
display: flex;
font-size: 18px;
align-items: center;
margin-bottom: 1.5rem; }
#txp-details .head .sending-label img,
#view-confirm .head .sending-label img {
margin-right: 1rem;
height: 35px;
width: 35px; }
#txp-details .head .amount-label,
#view-confirm .head .amount-label {
line-height: 30px; }
#txp-details .head .amount-label .amount,
#view-confirm .head .amount-label .amount {
font-size: 38px;
margin-bottom: .5rem; }
#txp-details .head .amount-label .amount > .unit,
#view-confirm .head .amount-label .amount > .unit {
font-family: "Roboto-Light"; }
#txp-details .head .amount-label .alternative,
#view-confirm .head .amount-label .alternative {
font-size: 16px;
font-family: "Roboto-Light";
color: #9B9B9B; }
#txp-details .item,
#view-confirm .item {
border-color: #EFEFEF; }
#txp-details .item-note, #txp-details .item-note,
#view-confirm .item-note { #view-confirm .item-note {
word-break: keep-all; } float: none; }
#txp-details .item-note .fee-rate,
#txp-details .info span, #view-confirm .item-note .fee-rate {
#view-confirm .info span { display: inline-block; }
display: block; } #txp-details .list,
#view-confirm .list {
#txp-details .info .badge, background: #f5f5f5; }
#view-confirm .info .badge { #txp-details .add-bottom-for-cta,
border-radius: 0; #view-confirm .add-bottom-for-cta {
padding: .5rem; } bottom: 92px; }
#txp-details .head,
#txp-details .info .item, #view-confirm .head {
#view-confirm .info .item { padding: 30px 20px 3rem;
color: #4A4A4A; border-top: 0; }
padding-top: 10px; #txp-details .head .sending-label,
padding-bottom: 10px; #view-confirm .head .sending-label {
padding-left: 20px; }
#txp-details .info .item:not(.item-icon-right),
#view-confirm .info .item:not(.item-icon-right) {
padding-right: 20px; }
#txp-details .info .item .label,
#view-confirm .info .item .label {
font-size: 14px;
color: #6C6C6E;
margin-bottom: 8px; }
#txp-details .info .item.single-line,
#view-confirm .info .item.single-line {
display: flex;
align-items: center;
padding-top: 17px;
padding-bottom: 17px; }
#txp-details .info .item.single-line .label,
#view-confirm .info .item.single-line .label {
margin: 0;
flex-grow: 1; }
#txp-details .info .item.low-fees,
#view-confirm .info .item.low-fees {
display: flex;
font-size: 14px;
color: #777;
align-items: center; }
#txp-details .info .item.low-fees i,
#view-confirm .info .item.low-fees i {
padding-right: 20px; }
#txp-details .info .item.low-fees span,
#view-confirm .info .item.low-fees span {
display: inline; }
#txp-details .info .toggle-unconfirmed,
#view-confirm .info .toggle-unconfirmed {
padding-bottom: 15px; }
#txp-details .info .toggle-label,
#view-confirm .info .toggle-label {
margin-top: 5px;
font-size: 14px;
color: #6C6C6E; }
#txp-details .info .item-divider,
#view-confirm .info .item-divider {
padding-top: 1.2rem;
color: #6C6C6E;
font-size: 15px; }
#txp-details .info .payment-proposal-to,
#view-confirm .info .payment-proposal-to {
width: 100%;
display: inline-block;
padding: 8px 13px;
background-color: rgba(203, 203, 203, 0.13);
margin-top: 10px;
margin-bottom: 5px;
display: flex;
align-items: center;
border-radius: 4px; }
#txp-details .info .payment-proposal-to img,
#view-confirm .info .payment-proposal-to img {
padding: .2rem;
padding-left: 0;
border-right: 1px solid #e4e4e4;
padding-right: 12px; }
#txp-details .info .payment-proposal-to i,
#view-confirm .info .payment-proposal-to i {
color: grey;
position: inherit;
padding: 0 10px;
float: right; }
#txp-details .info .payment-proposal-to contact,
#view-confirm .info .payment-proposal-to contact {
margin-left: 15px;
font-size: 14px;
display: inline-block; }
#txp-details .info .wallet,
#view-confirm .info .wallet {
display: flex;
align-items: center;
padding: .2rem 0;
margin-bottom: 5px; }
#txp-details .info .wallet > i,
#view-confirm .info .wallet > i {
padding: 0;
position: static; }
#txp-details .info .wallet > i > img,
#view-confirm .info .wallet > i > img {
height: 24px;
width: 24px;
padding: 2px;
margin-right: .7rem;
box-shadow: none; }
#txp-details .info .timeline-item,
#view-confirm .info .timeline-item {
border: 0;
padding: 17px 20px; }
#txp-details .info .timeline-item:nth-child(2),
#view-confirm .info .timeline-item:nth-child(2) {
border-top: 1px solid #EFEFEF; }
#txp-details .info .timeline-item:last-child,
#view-confirm .info .timeline-item:last-child {
border-bottom: 1px solid #EFEFEF; }
#txp-details .info .timeline-item > *,
#view-confirm .info .timeline-item > * {
padding-right: 0; }
#txp-details .info .timeline-content,
#view-confirm .info .timeline-content {
display: flex;
align-items: center; }
#txp-details .info .timeline-content__icon,
#view-confirm .info .timeline-content__icon {
display: flex;
align-items: center;
min-width: 40px;
padding-right: 1rem;
padding-left: 1rem;
margin-right: .5rem;
position: relative; }
#txp-details .info .timeline-content__icon::before,
#view-confirm .info .timeline-content__icon::before {
content: '';
background: #e8e8e8;
height: 100px;
width: 1px;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-100%);
transform: translateX(-50%) translateY(-100%);
top: 0; }
#txp-details .info .timeline-content__icon::after,
#view-confirm .info .timeline-content__icon::after {
content: '';
background: #e8e8e8;
height: 100px;
width: 1px;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%) translateY(100%);
transform: translateX(-50%) translateY(100%);
bottom: 0; }
#txp-details .info .timeline-content__icon > div,
#view-confirm .info .timeline-content__icon > div {
border: 3px solid #fab915;
border-radius: 3px;
display: flex; display: flex;
height: 26px; font-size: 18px;
width: 26px;
font-size: 13px;
align-items: center; align-items: center;
justify-content: center; margin-bottom: 1.5rem; }
font-weight: 600; #txp-details .head .sending-label img,
vertical-align: middle; #view-confirm .head .sending-label img {
color: #fab915; } margin-right: 1rem;
#txp-details .info .timeline-content__icon > div.rejected, height: 35px;
#view-confirm .info .timeline-content__icon > div.rejected { width: 35px; }
background: #E15061; #txp-details .head .amount-label,
border-color: #E15061; #view-confirm .head .amount-label {
color: #FFFFFF; line-height: 30px; }
font-family: "Roboto-Bold"; #txp-details .head .amount-label .amount,
font-size: 19px; } #view-confirm .head .amount-label .amount {
#txp-details .info .timeline-content__label, font-size: 38px;
#view-confirm .info .timeline-content__label { margin-bottom: .5rem; }
flex-grow: 1; } #txp-details .head .amount-label .amount > .unit,
#txp-details .info .timeline-content__label > .action, #view-confirm .head .amount-label .amount > .unit {
#view-confirm .info .timeline-content__label > .action { font-family: "Roboto-Light"; }
font-size: 16px; } #txp-details .head .amount-label .alternative,
#txp-details .info .timeline-content__label > .name, #view-confirm .head .amount-label .alternative {
#view-confirm .info .timeline-content__label > .name { font-size: 16px;
color: #aaa; font-family: "Roboto-Light";
font-size: 14px; } color: #9B9B9B; }
#txp-details .item,
#txp-details .proposal-deletion-help, #view-confirm .item {
#view-confirm .proposal-deletion-help { border-color: #EFEFEF; }
color: #6C6C6E; #txp-details .item-note,
padding: 1rem 2rem; } #view-confirm .item-note {
word-break: keep-all; }
#txp-details .view-on-blockchain-btn, #txp-details .info span,
#view-confirm .view-on-blockchain-btn { #view-confirm .info span {
background: #e8e7e7; display: inline-block; }
color: rgba(58, 58, 58, 0.6); #txp-details .info .badge,
margin-bottom: 1.5rem; } #view-confirm .info .badge {
border-radius: 0;
#txp-details .glidera-success, padding: .5rem; }
#view-confirm .glidera-success { #txp-details .info .item,
padding: 20px; #view-confirm .info .item {
margin-top: 15px; } color: #4A4A4A;
#txp-details .glidera-success span, padding-top: 10px;
#view-confirm .glidera-success span { padding-bottom: 10px;
font-size: 15px; padding-left: 20px; }
display: block; } #txp-details .info .item:not(.item-icon-right),
#view-confirm .info .item:not(.item-icon-right) {
#txp-details .glidera-explanation, padding-right: 20px; }
#view-confirm .glidera-explanation { #txp-details .info .item .label,
padding: 0 1rem; #view-confirm .info .item .label {
white-space: normal; } font-size: 14px;
color: #6C6C6E;
#txp-details .glidera-description, margin-bottom: 8px; }
#view-confirm .glidera-description { #txp-details .info .item.single-line,
text-align: center; #view-confirm .info .item.single-line {
font-size: 12px; display: flex;
color: #667; } align-items: center;
padding-top: 17px;
padding-bottom: 17px; }
#txp-details .info .item.single-line .label,
#view-confirm .info .item.single-line .label {
margin: 0;
flex-grow: 1; }
#txp-details .info .item.low-fees,
#view-confirm .info .item.low-fees {
display: flex;
font-size: 14px;
color: #777;
align-items: center; }
#txp-details .info .item.low-fees i,
#view-confirm .info .item.low-fees i {
padding-right: 20px; }
#txp-details .info .item.low-fees span,
#view-confirm .info .item.low-fees span {
display: inline; }
#txp-details .info .toggle-unconfirmed,
#view-confirm .info .toggle-unconfirmed {
padding-bottom: 15px; }
#txp-details .info .toggle-label,
#view-confirm .info .toggle-label {
margin-top: 5px;
font-size: 14px;
color: #6C6C6E; }
#txp-details .info .item-divider,
#view-confirm .info .item-divider {
padding-top: 1.2rem;
color: #6C6C6E;
font-size: 15px; }
#txp-details .info .payment-proposal-to,
#view-confirm .info .payment-proposal-to {
width: 100%;
display: inline-block;
padding: 8px 13px;
background-color: rgba(203, 203, 203, 0.13);
margin-top: 10px;
margin-bottom: 5px;
display: flex;
align-items: center;
border-radius: 4px; }
#txp-details .info .payment-proposal-to img,
#view-confirm .info .payment-proposal-to img {
padding: .2rem;
padding-left: 0;
border-right: 1px solid #e4e4e4;
padding-right: 12px; }
#txp-details .info .payment-proposal-to i,
#view-confirm .info .payment-proposal-to i {
color: grey;
position: inherit;
padding: 0 10px;
float: right; }
#txp-details .info .payment-proposal-to contact,
#view-confirm .info .payment-proposal-to contact {
margin-left: 15px;
font-size: 14px;
display: inline-block; }
#txp-details .info .wallet,
#view-confirm .info .wallet {
display: flex;
align-items: center;
padding: .2rem 0;
margin-bottom: 5px; }
#txp-details .info .wallet > i,
#view-confirm .info .wallet > i {
padding: 0;
position: static; }
#txp-details .info .wallet > i > img,
#view-confirm .info .wallet > i > img {
height: 24px;
width: 24px;
padding: 2px;
margin-right: .7rem;
box-shadow: none; }
#txp-details .info .timeline-item,
#view-confirm .info .timeline-item {
border: 0;
padding: 17px 20px; }
#txp-details .info .timeline-item:nth-child(2),
#view-confirm .info .timeline-item:nth-child(2) {
border-top: 1px solid #EFEFEF; }
#txp-details .info .timeline-item:last-child,
#view-confirm .info .timeline-item:last-child {
border-bottom: 1px solid #EFEFEF; }
#txp-details .info .timeline-item > *,
#view-confirm .info .timeline-item > * {
padding-right: 0; }
#txp-details .info .timeline-content,
#view-confirm .info .timeline-content {
display: flex;
align-items: center; }
#txp-details .info .timeline-content__icon,
#view-confirm .info .timeline-content__icon {
display: flex;
align-items: center;
min-width: 40px;
padding-right: 1rem;
padding-left: 1rem;
margin-right: .5rem;
position: relative; }
#txp-details .info .timeline-content__icon::before,
#view-confirm .info .timeline-content__icon::before {
content: '';
background: #e8e8e8;
height: 100px;
width: 1px;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-100%);
transform: translateX(-50%) translateY(-100%);
top: 0; }
#txp-details .info .timeline-content__icon::after,
#view-confirm .info .timeline-content__icon::after {
content: '';
background: #e8e8e8;
height: 100px;
width: 1px;
position: absolute;
left: 50%;
-webkit-transform: translateX(-50%) translateY(100%);
transform: translateX(-50%) translateY(100%);
bottom: 0; }
#txp-details .info .timeline-content__icon > div,
#view-confirm .info .timeline-content__icon > div {
border: 3px solid #fab915;
border-radius: 3px;
display: flex;
height: 26px;
width: 26px;
font-size: 13px;
align-items: center;
justify-content: center;
font-weight: 600;
vertical-align: middle;
color: #fab915; }
#txp-details .info .timeline-content__icon > div.rejected,
#view-confirm .info .timeline-content__icon > div.rejected {
background: #E15061;
border-color: #E15061;
color: #FFFFFF;
font-family: "Roboto-Bold";
font-size: 19px; }
#txp-details .info .timeline-content__label,
#view-confirm .info .timeline-content__label {
flex-grow: 1; }
#txp-details .info .timeline-content__label > .action,
#view-confirm .info .timeline-content__label > .action {
font-size: 16px; }
#txp-details .info .timeline-content__label > .name,
#view-confirm .info .timeline-content__label > .name {
color: #aaa;
font-size: 14px; }
#txp-details .proposal-deletion-help,
#view-confirm .proposal-deletion-help {
color: #6C6C6E;
padding: 1rem 2rem; }
#txp-details .view-on-blockchain-btn,
#view-confirm .view-on-blockchain-btn {
background: #e8e7e7;
color: rgba(58, 58, 58, 0.6);
margin-bottom: 1.5rem; }
#txp-details .glidera-success,
#view-confirm .glidera-success {
padding: 20px;
margin-top: 15px; }
#txp-details .glidera-success span,
#view-confirm .glidera-success span {
font-size: 15px;
display: block; }
#txp-details .glidera-explanation,
#view-confirm .glidera-explanation {
padding: 0 1rem;
white-space: normal; }
#txp-details .glidera-description,
#view-confirm .glidera-description {
text-align: center;
font-size: 12px;
color: #667; }
#txp-details .button-address,
#view-confirm .button-address {
margin-top: 10px;
background: transparent;
border: none;
font-size: 12px;
color: #aaa; }
#txp-details .label.flex,
#view-confirm .label.flex {
display: flex; }
#txp-details .label.flex textarea,
#view-confirm .label.flex textarea {
flex: 1 1 auto; }
#txp-details .label.align-items-center,
#view-confirm .label.align-items-center {
align-items: center; }
#tx-status .popup-txsent { #tx-status .popup-txsent {
font-size: 5rem; font-size: 5rem;
@ -14485,6 +14570,13 @@ account-selector {
#custom-amount .button-share .icon:before { #custom-amount .button-share .icon:before {
font-size: 26px; } font-size: 26px; }
#custom-amount .button-address {
margin-top: 10px;
background: transparent;
border: none;
font-size: 12px;
color: #aaa; }
#custom-amount .address { #custom-amount .address {
background: #fff; background: #fff;
overflow: auto; overflow: auto;
@ -14539,6 +14631,8 @@ account-selector {
padding-bottom: 17px; } padding-bottom: 17px; }
#custom-amount .address .info .item .single-line .item-note { #custom-amount .address .info .item .single-line .item-note {
margin-left: 10px; } margin-left: 10px; }
#custom-amount .address .address-types {
text-align: center; }
#pin { #pin {
background-color: #FAFAFA; background-color: #FAFAFA;

View file

@ -7,10 +7,10 @@
<meta name="msapplication-tap-highlight" content="no"> <meta name="msapplication-tap-highlight" content="no">
<meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="css/main.css"> <link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/payment-received.css">
<link rel="stylesheet" type="text/css" href="css/chartist.css"> <link rel="stylesheet" type="text/css" href="css/chartist.css">
<link rel="stylesheet" type="text/css" href="css/bitcoin.com.css"> <link rel="stylesheet" type="text/css" href="css/bitcoin.com.css">
<link rel="stylesheet" type="text/css" href="css/icomoon.css"> <link rel="stylesheet" type="text/css" href="css/icomoon.css">
<link rel="stylesheet" type="text/css" href="css/payment-received.css">
<title>Bitcoin.com - Bitcoin.com Wallet</title> <title>Bitcoin.com - Bitcoin.com Wallet</title>
<link rel="shortcut icon" href="img/app/favicon.ico"> <link rel="shortcut icon" href="img/app/favicon.ico">
</head> </head>

View file

@ -57,6 +57,7 @@
<span ng-if="btx.action == 'sent' || btx.action == 'moved'"> <span ng-if="btx.action == 'sent' || btx.action == 'moved'">
{{addressbook[btx.addressTo].name || addressbook[btx.addressTo] || 'Sending'|translate}} {{addressbook[btx.addressTo].name || addressbook[btx.addressTo] || 'Sending'|translate}}
</span> </span>
<div ng-if="btx.note.body" class="wallet-details__tx-message ellipsis">abc{{btx.note.body}}</div>
<span ng-if="btx.action == 'received'" translate>Receiving</span> <span ng-if="btx.action == 'received'" translate>Receiving</span>
</div> </div>
</div> </div>

View file

@ -106,9 +106,9 @@
</span> </span>
</div> </div>
<div class="item single-line"> <div class="item single-line">
<span class="label" translate> <span class="label flex" translate>
Memo: &emsp; Memo: &emsp;
<input style="display:inline-block;" class="label" type="text" placeholder="{{btx.note.body || btx.message || 'Enter text here'}}" ng-model="btx.note.body" ng-blur="updateNote(btx.note.body)"/> <textarea elastic placeholder="{{btx.note.body || btx.message || 'Enter text here'}}" ng-model="btx.note.body" ng-blur="updateNote(btx.note.body)"></textarea>
</span> </span>
</div> </div>
<div class="item" ng-if="btx.action != 'received'"> <div class="item" ng-if="btx.action != 'received'">