From 288d122b3d81dd9fcfe0342a070bf8084c3ebe69 Mon Sep 17 00:00:00 2001 From: Marty Alcala Date: Tue, 11 Oct 2016 14:45:54 -0400 Subject: [PATCH 01/10] prelim styling of payment proposal modal --- src/js/controllers/modals/txpDetails.js | 10 +++++ src/sass/views/includes/txp-details.scss | 56 +++++++++++++++++------- www/img/sending-icon.svg | 19 ++++++++ www/views/modals/txp-details.html | 15 ++++--- 4 files changed, 76 insertions(+), 24 deletions(-) create mode 100644 www/img/sending-icon.svg 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..562f8ba96 100644 --- a/src/sass/views/includes/txp-details.scss +++ b/src/sass/views/includes/txp-details.scss @@ -1,36 +1,58 @@ -#txp-details{ +#txp-details { + $item-lateral-padding: 20px; + $item-vertical-padding: 10px; + $item-border-color: #EFEFEF; + $item-label-color: #6C6C6E; + + .wallet-color-header-bar { + border: 0; + background: none; + } .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; + .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{ + .info { span { display: block; } + .item { + border-color: $item-border-color; + padding: $item-vertical-padding $item-lateral-padding; + + &__label { + font-size: 14px; + color: $item-label-color; + } + } .payment-proposal-to { width: 100%; display: inline-block; 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 de3091d91..b7a6e6368 100644 --- a/www/views/modals/txp-details.html +++ b/www/views/modals/txp-details.html @@ -1,5 +1,5 @@ - + @@ -15,11 +15,12 @@
- + + Sending
-
{{tx.amountStr}}
+
{{displayAmount}} {{displayUnit}}
{{tx.alternativeAmountStr}}
@@ -50,7 +51,7 @@
- To + To @@ -71,7 +72,7 @@
- {{'From'|translate}} + From @@ -80,7 +81,7 @@
- {{'Created by'|translate}} + Created by {{tx.creatorName}} @@ -92,7 +93,7 @@
- {{'Fee'|translate}} + Fee {{tx.feeStr}} From 70367bc4e735cdb4a7acc98437a16bed826bfe31 Mon Sep 17 00:00:00 2001 From: Marty Alcala Date: Tue, 11 Oct 2016 15:22:11 -0400 Subject: [PATCH 02/10] more proposal page styling --- src/sass/views/includes/txp-details.scss | 34 +++++++++++++++++++++--- www/img/icon-bitcoin-small.svg | 16 +++++++++++ www/views/modals/txp-details.html | 10 +++---- 3 files changed, 51 insertions(+), 9 deletions(-) create mode 100644 www/img/icon-bitcoin-small.svg diff --git a/src/sass/views/includes/txp-details.scss b/src/sass/views/includes/txp-details.scss index 562f8ba96..17b4b1095 100644 --- a/src/sass/views/includes/txp-details.scss +++ b/src/sass/views/includes/txp-details.scss @@ -45,20 +45,33 @@ display: block; } .item { + color: #4A4A4A; border-color: $item-border-color; padding: $item-vertical-padding $item-lateral-padding; &__label { font-size: 14px; color: $item-label-color; + margin-bottom: 8px; } } .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; + 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; @@ -71,12 +84,25 @@ } 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; + } + } } .accept-slide { position: fixed; 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/views/modals/txp-details.html b/www/views/modals/txp-details.html index b7a6e6368..066ed96a1 100644 --- a/www/views/modals/txp-details.html +++ b/www/views/modals/txp-details.html @@ -53,7 +53,7 @@
To - + Multiple recipients @@ -73,12 +73,12 @@
From - - +
+ -
{{wallet.name}}
- +
{{wallet.name}}
+
Created by From a637c1b61d24ab94f50a7dd28ec6ed5463e872a5 Mon Sep 17 00:00:00 2001 From: Marty Alcala Date: Tue, 11 Oct 2016 15:36:28 -0400 Subject: [PATCH 03/10] add single-line item style --- src/sass/views/includes/txp-details.scss | 13 ++++++++++++- www/views/modals/txp-details.html | 12 ++++++------ 2 files changed, 18 insertions(+), 7 deletions(-) diff --git a/src/sass/views/includes/txp-details.scss b/src/sass/views/includes/txp-details.scss index 17b4b1095..db0fe7245 100644 --- a/src/sass/views/includes/txp-details.scss +++ b/src/sass/views/includes/txp-details.scss @@ -49,11 +49,22 @@ border-color: $item-border-color; padding: $item-vertical-padding $item-lateral-padding; - &__label { + .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; + } + } } .payment-proposal-to { width: 100%; diff --git a/www/views/modals/txp-details.html b/www/views/modals/txp-details.html index 066ed96a1..f95d2b743 100644 --- a/www/views/modals/txp-details.html +++ b/www/views/modals/txp-details.html @@ -51,7 +51,7 @@
- To + To @@ -72,7 +72,7 @@
- From + From
@@ -80,8 +80,8 @@
{{wallet.name}}
-
- Created by +
+ Created by {{tx.creatorName}} @@ -92,8 +92,8 @@ {{tx.message}}
-
- Fee +
+ Fee {{tx.feeStr}} From 908bbdff9cf835ec9ca4ae44b31fda452d4ac440 Mon Sep 17 00:00:00 2001 From: Marty Alcala Date: Tue, 11 Oct 2016 16:48:03 -0400 Subject: [PATCH 04/10] prelim timeline-content styling --- src/sass/views/includes/txp-details.scss | 30 ++++++++++++++++++++++++ www/views/modals/txp-details.html | 17 ++++++++------ 2 files changed, 40 insertions(+), 7 deletions(-) diff --git a/src/sass/views/includes/txp-details.scss b/src/sass/views/includes/txp-details.scss index db0fe7245..4fb7d44ea 100644 --- a/src/sass/views/includes/txp-details.scss +++ b/src/sass/views/includes/txp-details.scss @@ -66,12 +66,18 @@ } } } + .item-divider { + padding-top: 1.2rem; + color: $item-label-color; + font-size: 15px; + } .payment-proposal-to { width: 100%; display: inline-block; padding: 8px 13px; background-color: rgba(203, 203, 203, .13); margin-top: 10px; + margin-bottom: 5px; display: flex; align-items: center; border-radius: 4px; @@ -114,6 +120,30 @@ box-shadow: none; } } + + .timeline-item { + > * { + padding-right: 0; + } + } + + .timeline-content { + display: flex; + align-items: center; + + &__label { + flex-grow: 1; + + > .action { + font-size: 16px; + } + + > .name { + color: #aaa; + font-size: 14px; + } + } + } } .accept-slide { position: fixed; diff --git a/www/views/modals/txp-details.html b/www/views/modals/txp-details.html index f95d2b743..3c9c4f89e 100644 --- a/www/views/modals/txp-details.html +++ b/www/views/modals/txp-details.html @@ -1,7 +1,8 @@ - +
Payment Proposal @@ -131,17 +132,19 @@
Timeline
-
+
- {{$index + 1}} + {{$index + 1}}
-
-
{{a.description}}
+
+
+
{{a.description}}
+
{{a.by}}
+
- {{a.by}} - +
From dd6a55a5a182afed03cdeb07410c4a12d4c90fdb Mon Sep 17 00:00:00 2001 From: Marty Alcala Date: Tue, 11 Oct 2016 18:05:00 -0400 Subject: [PATCH 05/10] more proposal timeline styling --- src/sass/views/includes/txp-details.scss | 58 ++++++++++++++++++++++-- www/views/modals/txp-details.html | 29 ++++++++++-- 2 files changed, 80 insertions(+), 7 deletions(-) diff --git a/src/sass/views/includes/txp-details.scss b/src/sass/views/includes/txp-details.scss index 4fb7d44ea..3d860607c 100644 --- a/src/sass/views/includes/txp-details.scss +++ b/src/sass/views/includes/txp-details.scss @@ -4,9 +4,8 @@ $item-border-color: #EFEFEF; $item-label-color: #6C6C6E; - .wallet-color-header-bar { - border: 0; - background: none; + .list { + background: #f5f5f5; } .slide-to-pay { bottom: 100px; @@ -122,6 +121,9 @@ } .timeline-item { + border: 0; + padding: 17px $item-lateral-padding; + > * { padding-right: 0; } @@ -131,6 +133,56 @@ 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: #D2D2D2; + height: 100px; + width: 1px; + position: absolute; + left: 50%; + transform: translateX(-50%) translateY(-100%); + top: 0; + } + + &::after { + content: ''; + background: #D2D2D2; + height: 100px; + width: 1px; + position: absolute; + left: 50%; + transform: translateX(-50%) translateY(100%); + bottom: 0; + } + + &::after { + + } + + > 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; + } + } + &__label { flex-grow: 1; diff --git a/www/views/modals/txp-details.html b/www/views/modals/txp-details.html index 3c9c4f89e..779a90cd6 100644 --- a/www/views/modals/txp-details.html +++ b/www/views/modals/txp-details.html @@ -133,9 +133,9 @@
Timeline
-
-
- {{$index + 1}} + + + +
+
+
{{$index + 1}}
+
+
+
{{a.description}}
+
{{a.by}}
+
+
+ + + +
+
+ +
From b3ad938ad4368533399fedc3a357960c2160651b Mon Sep 17 00:00:00 2001 From: Marty Alcala Date: Tue, 11 Oct 2016 18:20:10 -0400 Subject: [PATCH 06/10] fix borders and bottom for slide to pay --- src/sass/views/includes/txp-details.scss | 18 +++++++++++------- www/views/modals/txp-details.html | 2 +- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/sass/views/includes/txp-details.scss b/src/sass/views/includes/txp-details.scss index 3d860607c..af6e44e5d 100644 --- a/src/sass/views/includes/txp-details.scss +++ b/src/sass/views/includes/txp-details.scss @@ -12,6 +12,8 @@ } .head { padding: 30px $item-lateral-padding 4rem; + border-top: 0; + .sending-label { display: flex; font-size: 18px; @@ -122,8 +124,14 @@ .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; } @@ -144,7 +152,7 @@ &::before { content: ''; - background: #D2D2D2; + background: #e8e8e8; height: 100px; width: 1px; position: absolute; @@ -155,7 +163,7 @@ &::after { content: ''; - background: #D2D2D2; + background: #e8e8e8; height: 100px; width: 1px; position: absolute; @@ -164,10 +172,6 @@ bottom: 0; } - &::after { - - } - > div { border: 3px solid #09C286; border-radius: 50%; diff --git a/www/views/modals/txp-details.html b/www/views/modals/txp-details.html index 779a90cd6..4671eb46c 100644 --- a/www/views/modals/txp-details.html +++ b/www/views/modals/txp-details.html @@ -12,7 +12,7 @@ - +
From 7f40490d0b65b6618fc1883112841a3c20d8ab5f Mon Sep 17 00:00:00 2001 From: Marty Alcala Date: Tue, 11 Oct 2016 18:24:01 -0400 Subject: [PATCH 07/10] better style proposal deletion help text --- src/sass/views/includes/txp-details.scss | 9 +++------ www/views/modals/txp-details.html | 2 +- 2 files changed, 4 insertions(+), 7 deletions(-) diff --git a/src/sass/views/includes/txp-details.scss b/src/sass/views/includes/txp-details.scss index af6e44e5d..44d2a9964 100644 --- a/src/sass/views/includes/txp-details.scss +++ b/src/sass/views/includes/txp-details.scss @@ -201,11 +201,8 @@ } } } - .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/views/modals/txp-details.html b/www/views/modals/txp-details.html index 4671eb46c..080519a96 100644 --- a/www/views/modals/txp-details.html +++ b/www/views/modals/txp-details.html @@ -182,7 +182,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.
From 3f9b27d991d47179be654694139d6a0b03ffaa0a Mon Sep 17 00:00:00 2001 From: Marty Alcala Date: Tue, 11 Oct 2016 19:07:39 -0400 Subject: [PATCH 09/10] fix warning message border color --- src/sass/views/includes/txp-details.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/sass/views/includes/txp-details.scss b/src/sass/views/includes/txp-details.scss index 09efe3946..76f48336d 100644 --- a/src/sass/views/includes/txp-details.scss +++ b/src/sass/views/includes/txp-details.scss @@ -41,13 +41,15 @@ } } } + .item { + border-color: $item-border-color; + } .info { span { display: block; } .item { color: #4A4A4A; - border-color: $item-border-color; padding: $item-vertical-padding $item-lateral-padding; .label { From a7fe6fc27b8b69b96ebb56fd1f05b33e766f4a51 Mon Sep 17 00:00:00 2001 From: Marty Alcala Date: Tue, 11 Oct 2016 19:10:13 -0400 Subject: [PATCH 10/10] remove commented code --- www/views/modals/txp-details.html | 2 -- 1 file changed, 2 deletions(-) diff --git a/www/views/modals/txp-details.html b/www/views/modals/txp-details.html index 36bf32cef..6f8573994 100644 --- a/www/views/modals/txp-details.html +++ b/www/views/modals/txp-details.html @@ -2,7 +2,6 @@
Payment Proposal @@ -16,7 +15,6 @@
- Sending