From 21a2f41ef98e7baed4bd05a17eae297d12906c99 Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Wed, 7 Sep 2016 09:46:00 -0400 Subject: [PATCH 1/4] began update for wallet module and receive screen --- public/views/includes/wallets.html | 22 +++++---- public/views/tab-receive.html | 68 +++++++++++++++++----------- src/sass/common.scss | 4 ++ src/sass/main.scss | 6 +++ src/sass/mixins/layout.scss | 4 ++ src/sass/views/includes/wallets.scss | 33 ++++++++++++++ src/sass/views/tab-receive.scss | 34 ++++++++++++++ 7 files changed, 135 insertions(+), 36 deletions(-) create mode 100644 src/sass/views/includes/wallets.scss create mode 100644 src/sass/views/tab-receive.scss diff --git a/public/views/includes/wallets.html b/public/views/includes/wallets.html index 356ce9135..3fa2178ff 100644 --- a/public/views/includes/wallets.html +++ b/public/views/includes/wallets.html @@ -1,16 +1,18 @@
-
- - {{wallet.name || wallet.id}} - - {{wallet.m}}-of-{{wallet.n}} - - - Incomplete - - +
+
+ + {{wallet.name || wallet.id}} + + {{wallet.m}}-of-{{wallet.n}} + + + Incomplete + + +
diff --git a/public/views/tab-receive.html b/public/views/tab-receive.html index 780360ccb..eb284a0d0 100644 --- a/public/views/tab-receive.html +++ b/public/views/tab-receive.html @@ -1,36 +1,52 @@ - + {{'Receive' | translate}} - -
- -
- Before receiving funds, you must backup your wallet. If this device is lost, it is impossible to access your funds without a backup. +
+
+
+ +
+ Before receiving funds, you must backup your wallet. If this device is lost, it is impossible to access your funds without a backup. +
+
-
- -
- No Wallet -
- -
-
- - Share address +
+
+
+ + Share +
+
+
+
+ + Next Address +
+
-
- - Next Address +
+
+
+ + ... + {{addr}} +
+
-
- - ... - {{addr}} + +
+
+ No Wallet
- - -
+
+ + +
+ diff --git a/src/sass/common.scss b/src/sass/common.scss index 9350009f1..f866cfd60 100644 --- a/src/sass/common.scss +++ b/src/sass/common.scss @@ -63,3 +63,7 @@ ion-header-bar{ border:none; } } + +.border-top{ + border-top:1px solid rgb(228,228,228); +} diff --git a/src/sass/main.scss b/src/sass/main.scss index b0f2c402a..5a0672550 100644 --- a/src/sass/main.scss +++ b/src/sass/main.scss @@ -772,6 +772,10 @@ ul.wallet-selection.wallets { margin: 30px 0; } +.m15v { + margin: 15px 0; +} + .m10h { margin: 0 10px; } @@ -995,6 +999,8 @@ input[type=number] { @import 'mixins/mixins'; @import "views/add"; @import "views/tab-home"; +@import "views/tab-receive"; @import "views/walletDetails"; @import 'views/onboarding/onboarding'; @import "views/includes/walletActivity"; +@import "views/includes/wallets"; diff --git a/src/sass/mixins/layout.scss b/src/sass/mixins/layout.scss index 71affb4b8..c55eb4932 100644 --- a/src/sass/mixins/layout.scss +++ b/src/sass/mixins/layout.scss @@ -1,4 +1,8 @@ @mixin center-block($topBottom: 0) { float:none; margin: $topBottom auto; +} + +.center-block{ + @include center-block(); } \ No newline at end of file diff --git a/src/sass/views/includes/wallets.scss b/src/sass/views/includes/wallets.scss new file mode 100644 index 000000000..4f73f3ce6 --- /dev/null +++ b/src/sass/views/includes/wallets.scss @@ -0,0 +1,33 @@ +.wallets{ + .slides{ + .swiper-container{ + width:75% !important; + overflow:visible; + } + .card{ + padding: .7rem; + padding-left:.25rem; + padding-right:.25rem; + border-radius: .25rem; + } + .swiper-slide{ + width:100% !important; + &.swiper-slide-prev, &.swiper-slide-next{ + opacity: .2; + } + &.swiper-slide-prev{ + left:-5%; + } + &.swiper-slide-next{ + left:4%; + } + span{ + float:right; + clear:both; + } + } + } + .swiper-pagination{ + visibility: hidden; + } +} \ No newline at end of file diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss new file mode 100644 index 000000000..7651accbf --- /dev/null +++ b/src/sass/views/tab-receive.scss @@ -0,0 +1,34 @@ +#tab-receive { + #address { + background: #fff; + .item { + border: none; + font-size: .9rem; + i { + font-size: 1.3rem; + &.ion-social-bitcoin-outline { + border-right: 1px solid rgb(228, 228, 228); + } + } + } + .bit-address { + font-size: .8rem; + .item { + padding-top: 5px; + padding-bottom: 5px; + } + &-gen-address {} + } + } + #wallets { + &:before { + content: ""; + display: inline-block; + width: 0; + height: 0; + border-style: solid; + border-width: 0 20px 20px 20px; + border-color: transparent transparent #6980fe transparent; + } + } +} From ad862bc78cc1b91f080aec689cf7106165b9ec05 Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Wed, 7 Sep 2016 09:56:52 -0400 Subject: [PATCH 2/4] added arrow top to wallets background --- src/sass/views/tab-receive.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index 7651accbf..eda75cf8f 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -28,7 +28,10 @@ height: 0; border-style: solid; border-width: 0 20px 20px 20px; - border-color: transparent transparent #6980fe transparent; + border-color: transparent transparent #f5f5f5 transparent; + top: -9px; + position: absolute; + left: 45%; } } } From b0c5fc22db479aa371eeac0358f063d86e855fa7 Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Wed, 7 Sep 2016 13:49:08 -0400 Subject: [PATCH 3/4] added help circle and tip modal --- public/views/tab-receive.html | 18 ++++++++++- src/sass/views/tab-receive.scss | 56 ++++++++++++++++++++++++++++++++- 2 files changed, 72 insertions(+), 2 deletions(-) diff --git a/public/views/tab-receive.html b/public/views/tab-receive.html index eb284a0d0..669b6ac96 100644 --- a/public/views/tab-receive.html +++ b/public/views/tab-receive.html @@ -1,6 +1,11 @@ {{'Receive' | translate}} + + +
@@ -41,7 +46,7 @@ No Wallet
- @@ -49,4 +54,15 @@
+
+ +
+

Receive bitcoin by sharing your address

+
+
+

+ Other bitcoin users can scan this code to send you money +

+
+
diff --git a/src/sass/views/tab-receive.scss b/src/sass/views/tab-receive.scss index eda75cf8f..88fd844ed 100644 --- a/src/sass/views/tab-receive.scss +++ b/src/sass/views/tab-receive.scss @@ -1,9 +1,17 @@ #tab-receive { + ion-header-bar{ + button{ + i{ + color:#fff; + font-size: 1.1rem; + } + } + } #address { background: #fff; .item { border: none; - font-size: .9rem; + font-size: .8rem; i { font-size: 1.3rem; &.ion-social-bitcoin-outline { @@ -21,6 +29,7 @@ } } #wallets { + position: relative; &:before { content: ""; display: inline-block; @@ -34,4 +43,49 @@ left: 45%; } } + #first-time-tip { + background: rgba(30, 49, 134, 1); + background: -moz-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(30, 49, 134, 0) 88%, rgba(30, 49, 134, 0) 100%); + background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(30, 49, 134, 1)), color-stop(88%, rgba(30, 49, 134, 0)), color-stop(100%, rgba(30, 49, 134, 0))); + background: -webkit-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(30, 49, 134, 0) 88%, rgba(30, 49, 134, 0) 100%); + background: -o-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(30, 49, 134, 0) 88%, rgba(30, 49, 134, 0) 100%); + background: -ms-linear-gradient(top, rgba(30, 49, 134, 1) 0%, rgba(30, 49, 134, 0) 88%, rgba(30, 49, 134, 0) 100%); + background: linear-gradient(to bottom, rgba(30, 49, 134, 1) 0%, rgba(30, 49, 134, 0) 88%, rgba(30, 49, 134, 0) 100%); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 0; + animation-name: fadeIn; + animation-iteration-count: 1; + animation-timing-function: ease-in; + animation-duration: .4s; + animation-delay: 2s; + animation-fill-mode: forwards; + z-index: 10; + text-align: center; + color: #fff; + padding-top: 3rem; + .close { + top: .5rem; + right: 1rem; + position: absolute; + font-size: 1.5rem; + opacity: .5; + } + h3 { + color: #fff; + margin-bottom:1rem; + } + } +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } } From fefdc0de93431fedbadbd380c33d546169d11fec Mon Sep 17 00:00:00 2001 From: Jamal Jackson Date: Wed, 7 Sep 2016 15:09:53 -0400 Subject: [PATCH 4/4] fixed full screen positioning issue with qr code --- public/views/tab-receive.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/public/views/tab-receive.html b/public/views/tab-receive.html index 669b6ac96..43f3eb9f1 100644 --- a/public/views/tab-receive.html +++ b/public/views/tab-receive.html @@ -10,7 +10,7 @@
-
+
Before receiving funds, you must backup your wallet. If this device is lost, it is impossible to access your funds without a backup.