diff --git a/src/js/controllers/modals/txpDetails.js b/src/js/controllers/modals/txpDetails.js index ca05f5027..853383dd1 100644 --- a/src/js/controllers/modals/txpDetails.js +++ b/src/js/controllers/modals/txpDetails.js @@ -18,10 +18,20 @@ angular.module('copayApp.controllers').controller('txpDetailsController', functi $scope.color = $scope.wallet.color; $scope.data = {}; $scope.hasClick = platformInfo.hasClick; + $scope.displayAmount = getDisplayAmount(tx.amountStr); + $scope.displayUnit = getDisplayUnit(tx.amountStr); initActionList(); checkPaypro(); } + function getDisplayAmount(amountStr) { + return amountStr.split(' ')[0]; + } + + function getDisplayUnit(amountStr) { + return amountStr.split(' ')[1]; + } + function initActionList() { $scope.actionList = []; diff --git a/src/sass/views/includes/txp-details.scss b/src/sass/views/includes/txp-details.scss index 28c1d977e..76f48336d 100644 --- a/src/sass/views/includes/txp-details.scss +++ b/src/sass/views/includes/txp-details.scss @@ -1,42 +1,97 @@ -#txp-details{ +#txp-details { + $item-lateral-padding: 20px; + $item-vertical-padding: 10px; + $item-border-color: #EFEFEF; + $item-label-color: #6C6C6E; + + .list { + background: #f5f5f5; + } .slide-to-pay { bottom: 100px; } .head { - padding-bottom: 30px; - .sending-label{ - line-height: 70px; - font-size: 25px; - i { - margin-left: 20px; - } - span { - margin-left: 15px; + padding: 30px $item-lateral-padding 4rem; + border-top: 0; + + .sending-label { + display: flex; + font-size: 18px; + align-items: center; + margin-bottom: 1.5rem; + + img { + margin-right: 1rem; } } .amount-label{ - margin-left: 20px; line-height: 30px; .amount{ - font-size: 36px; + font-size: 38px; + margin-bottom: .5rem; + + > .unit { + font-family: "Roboto-Light"; + } } - .alternative{ - font-size: 18px; - font-weight: 200; - color: grey; + .alternative { + font-size: 16px; + font-family: "Roboto-Light"; + color: #9B9B9B; } } } - .info{ + .item { + border-color: $item-border-color; + } + .info { span { display: block; } + .item { + color: #4A4A4A; + padding: $item-vertical-padding $item-lateral-padding; + + .label { + font-size: 14px; + color: $item-label-color; + margin-bottom: 8px; + } + + &.single-line { + display: flex; + align-items: center; + padding: 17px $item-lateral-padding; + + .label { + margin: 0; + flex-grow: 1; + } + } + } + .item-divider { + padding-top: 1.2rem; + color: $item-label-color; + font-size: 15px; + } .payment-proposal-to { width: 100%; display: inline-block; - padding: 5px 15px; - background-color: #f5f5f5; + padding: 8px 13px; + background-color: rgba(203, 203, 203, .13); margin-top: 10px; + margin-bottom: 5px; + display: flex; + align-items: center; + border-radius: 4px; + + img { + padding: .2rem; + padding-left: 0; + border-right: 1px solid #e4e4e4; + padding-right: 12px; + } + i { color: grey; position: inherit; @@ -49,18 +104,115 @@ } contact { margin-left: 15px; - margin-bottom: 3px; - margin-top: 5px; font-size: 14px; display: inline-block; } } + .wallet { + display: flex; + align-items: center; + padding: .2rem 0; + i { + padding: 0; + } + img { + height: 24px; + width: 24px; + padding: 2px; + margin-right: .7rem; + box-shadow: none; + } + } + + .timeline-item { + border: 0; + &:nth-child(2) { + border-top: 1px solid $item-border-color; + } + &:last-child { + border-bottom: 1px solid $item-border-color; + } + padding: 17px $item-lateral-padding; + + > * { + padding-right: 0; + } + } + + .timeline-content { + display: flex; + align-items: center; + + &__icon { + display: flex; + align-items: center; + min-width: 40px; + padding-right: 1rem; + padding-left: 1rem; + margin-right: .5rem; + position: relative; + + &::before { + content: ''; + background: #e8e8e8; + height: 100px; + width: 1px; + position: absolute; + left: 50%; + transform: translateX(-50%) translateY(-100%); + top: 0; + } + + &::after { + content: ''; + background: #e8e8e8; + height: 100px; + width: 1px; + position: absolute; + left: 50%; + transform: translateX(-50%) translateY(100%); + bottom: 0; + } + + > div { + border: 3px solid #09C286; + border-radius: 50%; + display: flex; + height: 26px; + width: 26px; + font-size: 13px; + align-items: center; + justify-content: center; + font-weight: 600; + vertical-align: middle; + color: #09C286; + + &.rejected { + background: #E15061; + border-color: #E15061; + color: #FFFFFF; + font-family: "Roboto-Bold"; + font-size: 19px; + } + } + } + + &__label { + flex-grow: 1; + + > .action { + font-size: 16px; + } + + > .name { + color: #aaa; + font-size: 14px; + } + } + } } - .accept-slide { - position: fixed; - bottom: 0; - width: 100%; - height: 100px; - background-color: #f5f5f5; + .proposal-deletion-help { + color: $item-label-color; + padding: 1rem 2rem; } } diff --git a/www/img/icon-bitcoin-small.svg b/www/img/icon-bitcoin-small.svg new file mode 100644 index 000000000..23477ff69 --- /dev/null +++ b/www/img/icon-bitcoin-small.svg @@ -0,0 +1,16 @@ + + + + Bitcoin_Symbol + Created with Sketch. + + + + + + + + + + + \ No newline at end of file diff --git a/www/img/sending-icon.svg b/www/img/sending-icon.svg new file mode 100644 index 000000000..fdbf4de25 --- /dev/null +++ b/www/img/sending-icon.svg @@ -0,0 +1,19 @@ + + + + Received + Created with Sketch. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/www/views/modals/txp-details.html b/www/views/modals/txp-details.html index 6fdbc6262..6f8573994 100644 --- a/www/views/modals/txp-details.html +++ b/www/views/modals/txp-details.html @@ -1,5 +1,5 @@ - + @@ -11,15 +11,15 @@ - +
- + Sending
-
{{tx.amountStr}}
+
{{displayAmount}} {{displayUnit}}
{{tx.alternativeAmountStr}}
@@ -50,9 +50,9 @@
- To + To - + Multiple recipients @@ -71,18 +71,18 @@
- {{'From'|translate}} - - + From +
+ -
{{wallet.name}}
- +
{{wallet.name}}
+
-
- {{'Created by'|translate}} +
+ Created by - {{tx.creatorName}} + {{tx.creatorName}}
@@ -91,8 +91,8 @@ {{tx.message}}
-
- {{'Fee'|translate}} +
+ Fee {{tx.feeStr}} @@ -129,20 +129,20 @@
Timeline
- -
-
-
- {{$index + 1}} +
+
+
+
!
+
{{$index + 1}}
-
-
{{a.description}}
-
- {{a.by}} - - - -
+
+
{{a.description}}
+
{{a.by}}
+
+
+ + +
@@ -157,7 +157,7 @@ Click to accept
-
+
* A payment proposal can be deleted if 1) you are the creator, and no other copayer has signed, or 2) 24 hours have passed since the proposal was created.