Merge pull request #184 from JDonadio/ref/new-index

Send flow

public/views/modals/inputAmount.html

@@ -1,15 +1,16 @@
 <ion-modal-view ng-controller="inputAmountController" ng-style="{'background-color':'#F6F7F9'}" ng-init=init()>
-  <ion-header-bar align-title="center" class="tab-bar" ng-style="{'background-color':color}">
-    <div class="left-small">
-      <a ng-click="cancel()" class="p10">
-        <span class="text-close" translate>Close</span>
-      </a>
+  <ion-header-bar align-title="center" class="tab-bar" ng-style="{'background-color':recipientColor}">
+    <div class="buttons m3t" ng-click="cancel()">
+      <button class="button text-white transform-none" ng-style="{'background-color':'transparent'}" translate>Close</button>
     </div>
-    <h1 class="title ellipsis" translate>Enter amount</h1>
-    <div class="buttons m5r m3t" ng-if="!specificAmount" ng-click="toggleAlternative()">
+
+    <h1 class="title ellipsis text-white" translate>Enter amount</h1>
+
+    <div class="buttons m5r m3t" ng-if="!specificAmount && !sending" ng-click="toggleAlternative()">
       <button class="button black" ng-show="showAlternativeAmount">{{alternativeIsoCode}}</button>
-      <button class="button" ng-style="{'background-color':color}" ng-show="!showAlternativeAmount">{{unitName}}</button>
+      <button class="button text-whit transform-none" ng-show="!showAlternativeAmount">{{unitName}}</button>
     </div>
+
     <div class="right-small m10r" ng-if="specificAmount">
       <a ng-click="init()">
         <span class="text-close" translate>Cancel</span>
@@ -18,64 +19,68 @@
   </ion-header-bar>
 
   <ion-pane>
-    <ion-content class="calculator" scroll="false" ng-show="!specificAmount">
+    <ion-content class="calculator" scroll="false" ng-show="!specificAmount && !sending">
+      <div class="m5t">
+        <label class="m15l">Recipient</label>
+        <a class="item item-icon-left item-icon-right">
+          <i class="icon ion-ios-person-outline"></i>
+          {{recipientName}}
+          <i class="icon ion-ios-close-empty"></i>
+        </a>
+      </div>
+
       <div class="header-calc">
-        <div class="text-light text-black" ng-class="{'size-28': smallFont, 'size-36': !smallFont}">{{amount || '-'}}</div>
+        <div class="text-light text-black m15b" ng-class="{'size-28': smallFont, 'size-36': !smallFont}">{{amount || '-'}}</div>
         <div class="text-light text-black" ng-class="{'size-16': smallFont, 'size-17': !smallFont}" ng-show="!showAlternativeAmount">
-          {{globalResult}} <span class="label gray radius">{{amountResult || '0.00'}} {{alternativeIsoCode}}</span>
+          {{globalResult}} <span class="label gray text-white radius">{{amountResult || '0.00'}} {{alternativeIsoCode}}</span>
         </div>
         <div class="text-light text-black size-17" ng-show="showAlternativeAmount">
-          {{globalResult}} <span class="label gray radius">{{alternativeResult || '0.00'}} {{unitName}}</span>
+          {{globalResult}} <span class="label gray text-white radius">{{alternativeResult || '0.00'}} {{unitName}}</span>
         </div>
       </div>
 
       <div class="button-calc">
-        <div class="oh">
-          <div class="left large-3 medium-3 small-3">
-            <button class="button expand text-center m0 operator"
-                    ng-click="resetAmount()">
-              AC
-            </button>
-          </div>
-          <div class="left large-9 medium-9 small-9">
-            <button class="button expand text-center m0"
-                    ng-style="{'background-color':index.backgroundColor}"
-                    ng-disabled="alternativeResult <= 0 && amountResult <= 0" ng-click="finish()" ng-show="!specificAmount">
-              OK
-            </button>
-          </div>
+        <div class="row m5b">
+          <button class="col columns col-25 text-center m0 operator" ng-click="resetAmount()">
+            AC
+          </button>
+          <button class="col columns text-center text-white m0"
+            ng-style="{'background-color':recipientColor || '#4b6178'}"
+            ng-disabled="alternativeResult <= 0 && amountResult <= 0" ng-click="finish()" ng-show="!specificAmount">
+            OK
+          </button>
         </div>
-        <div class="row collapse">
-          <div class="columns large-3 medium-3 small-3" ng-click="pushDigit('7')">7</div>
-          <div class="columns large-3 medium-3 small-3" ng-click="pushDigit('8')">8</div>
-          <div class="columns large-3 medium-3 small-3" ng-click="pushDigit('9')">9</div>
-          <div class="columns large-3 medium-3 small-3 operator" ng-click="pushOperator('/')">/</div>
+        <div class="row text-center">
+          <div class="col columns" ng-click="pushDigit('7')">7</div>
+          <div class="col columns" ng-click="pushDigit('8')">8</div>
+          <div class="col columns" ng-click="pushDigit('9')">9</div>
+          <div class="col columns operator" ng-click="pushOperator('/')">/</div>
         </div>
 
-        <div class="row collapse">
-          <div class="columns large-3 medium-3 small-3" ng-click="pushDigit('4')">4</div>
-          <div class="columns large-3 medium-3 small-3" ng-click="pushDigit('5')">5</div>
-          <div class="columns large-3 medium-3 small-3" ng-click="pushDigit('6')">6</div>
-          <div class="columns large-3 medium-3 small-3 operator" ng-click="pushOperator('x')">x</div>
+        <div class="row text-center">
+          <div class="col columns" ng-click="pushDigit('4')">4</div>
+          <div class="col columns" ng-click="pushDigit('5')">5</div>
+          <div class="col columns" ng-click="pushDigit('6')">6</div>
+          <div class="col columns operator" ng-click="pushOperator('x')">x</div>
         </div>
 
-        <div class="row collapse">
-          <div class="columns large-3 medium-3 small-3" ng-click="pushDigit('1')">1</div>
-          <div class="columns large-3 medium-3 small-3" ng-click="pushDigit('2')">2</div>
-          <div class="columns large-3 medium-3 small-3" ng-click="pushDigit('3')">3</div>
-          <div class="columns large-3 medium-3 small-3 operator" ng-click="pushOperator('+')">+</div>
+        <div class="row text-center">
+          <div class="col columns" ng-click="pushDigit('1')">1</div>
+          <div class="col columns" ng-click="pushDigit('2')">2</div>
+          <div class="col columns" ng-click="pushDigit('3')">3</div>
+          <div class="col columns operator" ng-click="pushOperator('+')">+</div>
         </div>
 
-        <div class="row collapse">
-          <div class="columns large-3 medium-3 small-3 operator" ng-click="pushDigit('.')">.</div>
-          <div class="columns large-3 medium-3 small-3" ng-click="pushDigit('0')">0</div>
-          <div class="columns large-3 medium-3 small-3 operator icon ion-arrow-left-a" ng-click="removeDigit()"></div>
-          <div class="columns large-3 medium-3 small-3 operator" ng-click="pushOperator('-')">-</div>
+        <div class="row text-center">
+          <div class="col columns operator" ng-click="pushDigit('.')">.</div>
+          <div class="col columns" ng-click="pushDigit('0')">0</div>
+          <div class="col columns operator icon ion-arrow-left-a" ng-click="removeDigit()"></div>
+          <div class="col columns operator" ng-click="pushOperator('-')">-</div>
         </div>
       </div>
     </ion-content>
 
-    <ion-content ng-show="specificAmount" ng-style="{'background-color':'#f6f7f9'}">
+    <ion-content ng-show="specificAmount && !sending" ng-style="{'background-color':'#f6f7f9'}">
       <section class="modal-content m20b">
         <h4 class="title m10l" translate>QR Code</h4>
         <ul class="no-bullet size-14 m0">
@@ -110,5 +115,43 @@
         <div class="extra-margin-bottom"></div>
       </section>
     </ion-content>
+
+    <ion-content ng-show="sending">
+      <div class="card">
+        <div class="item item-text-wrap">
+          <i class="icon ion-arrow-up-c"></i> <span class="text-bold size-16">Sending</span>
+          <div class="text-bold size-28 m15t">{{sendingAmount}} {{unitName}}</div>
+          <div class="text-light size-20 m5t">{{sendingAlternativeAmount}} {{alternativeIsoCode}}</div>
+        </div>
+      </div>
+
+      <div class="list card">
+        <span class="item">Fee: Economy (97 bits)</span>
+
+        <span class="item item-icon-left">
+          <i class="icon ion-ios-person-outline"></i>
+          <label translate>To</label>
+          <p>{{recipientName}}</p>
+        </span>
+
+        <span class="item item-icon-left">
+          <i class="icon icon-wallet size-21" ng-style="{'color':recipientColor}"></i>
+          <label translate>From</label>
+          <p>Focused Wallet (Default Wallet)</p>
+        </span>
+
+        <span class="item item-icon-right">
+          Add Memo
+          <i class="icon ion-ios-arrow-right size-21"></i>
+        </span>
+      </div>
+
+      <div class="card">
+        <div class="item item-text-wrap item-icon-right" ng-click="cancel()">
+          Slide to complete
+          <i class="icon ion-ios-arrow-thin-right size-21"></i>
+        </div>
+      </div>
+    </ion-content>
   </ion-pane>
 </ion-modal-view>

public/views/tab-send.html

@@ -1,5 +1,29 @@
 <ion-view view-title="Home">
-  <ion-content class="send">
-    <h2>Welcome to Send</h2>
+  <ion-content class="send" ng-controller="tabSendController" ng-init="init()">
+    <h2>Recipient</h2>
+
+    <label class="item item-input">
+      <i class="icon ion-search placeholder-icon"></i>
+      <input type="text" placeholder="Search" ng-model="search" ng-change="findContact()">
+    </label>
+
+    <h2>Contacts</h2>
+
+    <div class="list card">
+      <a class="item item-icon-left" ng-repeat="item in list" ng-click="openInputAmountModal(item)">
+        <div ng-show="!item.id">
+          <i class="icon ion-ios-person-outline"></i>
+          {{item.label}}
+        </div>
+
+        <div ng-show="item.id">
+          <i class="icon icon-wallet size-21" ng-style="{'color':item.color}"></i>
+          {{item.name || item.alias}}
+          <span class="item-note">
+            {{item.balance || '123,999.91 bits'}}
+          </span>
+        </div>
+      </a>
+    </div>
   </ion-content>
-</ion-view> 
+</ion-view>