Merge pull request #78 from jamal-jackson/feature/recieve_bitcoin_views

Initial setup of receive tab(waiting on some designs/views to be made)

public/views/includes/wallets.html

@@ -1,16 +1,18 @@
 <div class="wallets" ng-show="wallets[0]">
   <ion-slides class="slides" slider="data.slider">
     <ion-slide-page ng-repeat="wallet in wallets track by $index">
-      <div class="item item-icon-left item-icon-right">
+      <div class="card">
-        <i class="icon ion-briefcase size-21" ng-style="{'color':wallet.color}"></i>
+        <div class="item item-icon-left text-right">
-          {{wallet.name || wallet.id}}
+          <i class="icon ion-briefcase size-21" ng-style="{'color':wallet.color}"></i>
-        <span class="item-note" ng-show="wallet.n > 1 && wallet.isComplete()">
+            <span>{{wallet.name || wallet.id}}</span>
-          {{wallet.m}}-of-{{wallet.n}}
+          <span class="item-note" ng-show="wallet.n > 1 && wallet.isComplete()">
-        </span>
+            {{wallet.m}}-of-{{wallet.n}}
-        <span class="badge badge-assertive" ng-show="!wallet.isComplete()" translate>
+          </span>
-          Incomplete
+          <span class="badge badge-assertive" ng-show="!wallet.isComplete()" translate>
-        </span>
+            Incomplete
-        <i ng-show="wallet.needsBackup" class="icon ion-android-warning assertive"></i>
+          </span>
+          <!-- <i ng-show="wallet.needsBackup" class="icon ion-android-warning assertive"></i> -->
+        </div>
       </div>
     </ion-slide-page>
   </ion-slides>

public/views/tab-receive.html

@@ -1,36 +1,68 @@
-<ion-view>
+<ion-view id="tab-receive">
   <ion-nav-bar class="bar-royal">
     <ion-nav-title>{{'Receive' | translate}}</ion-nav-title>
+    <ion-nav-buttons side="secondary">
+      <button class="no-border">
+        <i class="ion-help-circled"></i>
+      </button>
+    </ion-nav-buttons>
   </ion-nav-bar>
-
   <ion-content ng-controller="tabReceiveController" ng-init="init()">
-    <div class="m30v text-center" copy-to-clipboard="addr">
+    <article id="address">
-      <qrcode size="220" data="bitcoin:{{addr}}"></qrcode>
+      <div class="row">
-      <div ng-if="wallet.needsBackup" class="assertive" translate>
+        <div class="m15t text-center col col-60 center-block" copy-to-clipboard="addr">
-        Before receiving funds, you must backup your wallet. If this device is lost, it is impossible to access your funds without a backup.
+          <qrcode size="220" data="bitcoin:{{addr}}"></qrcode>
+          <div ng-if="wallet.needsBackup" class="assertive m10t" translate>
+            Before receiving funds, you must backup your wallet. If this device is lost, it is impossible to access your funds without a backup.
+          </div>
+        </div>
       </div>
-    </div>
+      <div class="row">
-
+        <div class="col" ng-show="isCordova && addr">
-    <div class="list card padding text-center" ng-if="!wallets[0]">
+          <div class="item item-icon-left" ng-click="shareAddress(addr)">
-      <span translate>No Wallet</span>
+            <i class="icon ion-ios-upload-outline"></i>
-    </div>
+            <span translate>Share</span>
-
+          </div>
-    <div class="list" ng-if="wallets[0]">
+        </div>
-      <div class="item item-icon-left" ng-click="shareAddress(addr)" ng-show="isCordova && addr">
+        <div class="col" ng-class="{'center-block col-50': !isCordova || !addr}">
-        <i class="icon ion-ios-upload-outline"></i>
+          <div class="item item-icon-left" ng-click="setAddress(null, true)">
-        <span translate>Share address</span>
+            <i class="icon ion-ios-loop"></i>
+            <span translate>Next Address</span>
+          </div>
+        </div>
       </div>
-      <div class="item item-icon-left" ng-click="setAddress(null, true)">
+      <div class="row border-top">
-        <i class="icon ion-ios-loop"></i>
+        <div class="col col-90 center-block bit-address">
-        <span translate>Next Address</span>
+          <div class="item item-icon-left">
+            <i class="icon ion-social-bitcoin-outline"></i>
+            <span ng-if="generatingAddress">...</span>
+            <span class="bit-address-gen-address" ng-if="!generatingAddress" copy-to-clipboard="addr">{{addr}}</span>
+          </div>
+        </div>
       </div>
-      <div class="item item-icon-left">
+    </article>
-        <i class="icon ion-social-bitcoin-outline"></i>
+    <article id="wallets">
-        <span ng-if="generatingAddress">...</span>
+      <div class="list card padding text-center" ng-if="!wallets[0]">
-        <span ng-if="!generatingAddress" copy-to-clipboard="addr">{{addr}}</span>
+        <span translate>No Wallet</span>
       </div>
-
+      <div class="list" ng-if="wallets[0]">
-      <wallets ng-if="wallets[0]" wallets="wallets"></wallets>
+                <!-- <div class="item item-icon-left" ng-click="setAddress(null, true)">
-    </div>
+          <i class="icon ion-ios-loop"></i>
+          <span translate>Next Address</span>
+        </div> -->
+        <wallets ng-if="wallets[0]" wallets="wallets"></wallets>
+      </div>
+    </article>
   </ion-content>
+  <div id="first-time-tip" ng-if="firstTime">
+    <i class="ion-close close"></i>
+    <div class="row">
+      <h3 class="col col-60 center-block">Receive bitcoin by sharing your address</h3>
+    </div>
+    <div class="row">
+      <p class="col col-60 center-block">
+        Other bitcoin users can scan this code to send you money
+      </p>
+    </div>
+  </div>
 </ion-view>

src/sass/common.scss

@@ -68,3 +68,7 @@ ion-header-bar{
     border:none;
   }
 }
+
+.border-top{
+  border-top:1px solid rgb(228,228,228);
+}

src/sass/main.scss

@@ -772,6 +772,10 @@ ul.wallet-selection.wallets {
   margin: 30px 0;
 }
 
+.m15v {
+  margin: 15px 0;
+}
+
 .m10h {
   margin: 0 10px;
 }
@@ -995,7 +999,9 @@ input[type=number] {
 @import 'mixins/mixins';
 @import "views/add";
 @import "views/tab-home";
+@import "views/tab-receive";
 @import "views/walletDetails";
 @import "views/bitpayCard";
 @import 'views/onboarding/onboarding';
 @import "views/includes/walletActivity";
+@import "views/includes/wallets";

src/sass/mixins/layout.scss

@@ -1,4 +1,8 @@
 @mixin center-block($topBottom: 0) {
   float:none;
   margin: $topBottom auto;
+}
+
+.center-block{
+  @include center-block();
 }

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;
+  }
+}

src/sass/views/tab-receive.scss

@@ -0,0 +1,91 @@
+#tab-receive {
+  ion-header-bar{
+    button{
+      i{
+        color:#fff;
+        font-size: 1.1rem;
+      }
+    }
+  }
+  #address {
+    background: #fff;
+    .item {
+      border: none;
+      font-size: .8rem;
+      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 {
+    position: relative;
+    &:before {
+      content: "";
+      display: inline-block;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 0 20px 20px 20px;
+      border-color: transparent transparent #f5f5f5 transparent;
+      top: -9px;
+      position: absolute;
+      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;
+  }
+}