From 4a9b94f3b5a918b976cacc8ca9b8a86a5f9f82c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Gabriel=20Baz=C3=A1n?= <gabrielbazan7@hotmail.com>
Date: Wed, 15 Jun 2016 12:47:01 -0300
Subject: [PATCH] change all modals nav header with ionic header to fix ios
 delay

---
 public/views/modals/addressbook.html         | 40 +++++++++-----------
 public/views/modals/coinbase-tx-details.html | 14 +++----
 public/views/modals/customized-amount.html   | 21 +++++-----
 public/views/modals/glidera-tx-details.html  | 14 +++----
 public/views/modals/paypro.html              | 13 +++----
 public/views/modals/search.html              | 21 +++++-----
 public/views/modals/tx-details.html          | 12 +++---
 public/views/modals/txp-details.html         | 13 +++----
 public/views/modals/wallets.html             | 19 ++++------
 src/css/ionic-migration.css                  |  9 ++++-
 src/sass/main.scss                           |  6 +--
 11 files changed, 78 insertions(+), 104 deletions(-)

diff --git a/public/views/modals/addressbook.html b/public/views/modals/addressbook.html
index 94ebe34f4..59e2f9ba8 100644
--- a/public/views/modals/addressbook.html
+++ b/public/views/modals/addressbook.html
@@ -1,29 +1,23 @@
 <ion-modal-view ng-controller="addressbookController as addressbookC">
   <div ng-init="wallets[0] ? selectedWalletsOpt = true : selectedWalletsOpt = false; checkClipboard()">
+    <ion-header-bar align-title="center" class="tab-bar" ng-style="{'background-color':color}">
+      <div class="left-small">
+        <a ng-show="!editAddressbook && !addAddressbookEntry" ng-click="cancelAddress()" class="p10">
+          <span class="text-close" translate>Close</span>
+        </a>
+      </div>
+      <h1 class="title ellipsis" translate>{{walletName}}</h1>
+      <div class="right-small" ng-show="!selectedWalletsOpt && !isEmptyList" ng-click="toggleEditAddressbook()">
+        <a ng-show="!editAddressbook && !addAddressbookEntry" href class="p10">
+          <span class="text-close" translate>Edit</span>
+        </a>
+        <a ng-show="editAddressbook && !addAddressbookEntry" href class="p10">
+          <span class="text-close" translate>Done</span>
+        </a>
+      </div>
+    </ion-header-bar>
+    
     <ion-content ng-style="{'background-color': '#f6f7f9'}" overflow-scroll="true">
-      <nav class="tab-bar" ng-style="{'background-color':color}">
-        <section class="left-small">
-          <a ng-show="!editAddressbook && !addAddressbookEntry" ng-click="cancelAddress()" class="p10">
-            <span class="text-close" translate>Close</span>
-          </a>
-        </section>
-
-        <section class="middle tab-bar-section">
-          <h1 class="title ellipsis">
-          {{walletName}}
-          </h1>
-        </section>
-
-        <section class="right-small" ng-show="!selectedWalletsOpt && !isEmptyList" ng-click="toggleEditAddressbook()">
-          <a ng-show="!editAddressbook && !addAddressbookEntry" href class="p10">
-            <span class="text-close" translate>Edit</span>
-          </a>
-          <a ng-show="editAddressbook && !addAddressbookEntry" href class="p10">
-            <span class="text-close" translate>Done</span>
-          </a>
-        </section>
-      </nav>
-
       <div class="modal-content p20b">
         <div class="create-tab small-only-text-center" ng-show="!editAddressbook && !addAddressbookEntry">
           <div class="row">
diff --git a/public/views/modals/coinbase-tx-details.html b/public/views/modals/coinbase-tx-details.html
index 1eb355e59..37303d111 100644
--- a/public/views/modals/coinbase-tx-details.html
+++ b/public/views/modals/coinbase-tx-details.html
@@ -1,17 +1,13 @@
 <ion-modal-view ng-controller="coinbaseTxDetailsController">
-  <nav class="tab-bar" ng-style="{'background-color': '#2b71b1'}">
-    <section class="left-small">
+  <ion-header-bar align-title="center" class="tab-bar" ng-style="{'background-color': '#2b71b1'}">
+    <div class="left-small">
       <a ng-click="cancel()">
         <i class="icon-arrow-left3 icon-back"></i>
         <span class="text-back">Back</span>
       </a>
-    </section>
-    <section class="middle tab-bar-section">
-      <h1 class="title ellipsis">
-        Details
-      </h1>
-    </section>
-  </nav>
+    </div>
+    <h1 class="title ellipsis" translate>Details</h1>
+  </ion-header-bar>
 
   <ion-content overflow-scroll="true">
     <div class="modal-content fix-modals-touch">
diff --git a/public/views/modals/customized-amount.html b/public/views/modals/customized-amount.html
index 7e827ee51..a99928420 100644
--- a/public/views/modals/customized-amount.html
+++ b/public/views/modals/customized-amount.html
@@ -1,17 +1,14 @@
 <ion-modal-view ng-controller="customAmountController">
-  <ion-content overflow-scroll="true">
-    <nav class="tab-bar" ng-style="{'background-color':color}">
-      <section class="left-small">
-        <a ng-click="cancel()" class="p10">
-          <span class="text-close" translate>Close</span>
-        </a>
-      </section>
-
-      <section class="middle tab-bar-section">
-        <h1 class="title ellipsis" translate>Request a specific amount</h1>
-      </section>
-    </nav>
+  <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>
+    </div>
+    <h1 class="title ellipsis" translate>Request a specific amount</h1>
+  </ion-header-bar>
 
+  <ion-content overflow-scroll="true" ng-style="{'background-color': '#f6f7f9'}">
     <div class="modal-content fix-modals-touch">
       <div class="m20b" ng-show="customizedAmountBtc">
         <h4 class="title m0" translate>QR Code</h4>
diff --git a/public/views/modals/glidera-tx-details.html b/public/views/modals/glidera-tx-details.html
index d7666b8cc..a0c960ad0 100644
--- a/public/views/modals/glidera-tx-details.html
+++ b/public/views/modals/glidera-tx-details.html
@@ -1,17 +1,13 @@
 <ion-modal-view ng-controller="glideraTxDetailsController">
-  <nav class="tab-bar">
-    <section class="left-small">
+  <ion-header-bar align-title="center" class="tab-bar">
+    <div class="left-small">
       <a ng-click="cancel()">
         <i class="icon-arrow-left3 icon-back"></i>
         <span class="text-back">Back</span>
       </a>
-    </section>
-    <section class="middle tab-bar-section">
-      <h1 class="title ellipsis">
-        Details
-      </h1>
-    </section>
-  </nav>
+    </div>
+    <h1 class="title ellipsis" translate>Details</h1>
+  </ion-header-bar>
 
   <ion-content overflow-scroll="true">
     <div class="modal-content fix-modals-touch">
diff --git a/public/views/modals/paypro.html b/public/views/modals/paypro.html
index 77a33e464..f7617e32c 100644
--- a/public/views/modals/paypro.html
+++ b/public/views/modals/paypro.html
@@ -1,15 +1,12 @@
 <ion-modal-view ng-controller="payproController as payproC">
-  <nav class="tab-bar" ng-style="{'background-color':color}">
-    <section class="left-small">
+  <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>
-    </section>
-
-    <section class="middle tab-bar-section">
-      <h1 class="title" translate>Payment request</h1>
-    </section>
-  </nav>
+    </div>
+    <h1 class="title ellipsis" translate>Payment request</h1>
+  </ion-header-bar>
 
   <ion-content ng-style="{'background-color': '#F6F7F9'}" overflow-scroll="true">
     <div class="modal-content">
diff --git a/public/views/modals/search.html b/public/views/modals/search.html
index 10b100145..aa62a4bd2 100644
--- a/public/views/modals/search.html
+++ b/public/views/modals/search.html
@@ -1,17 +1,14 @@
 <ion-modal-view ng-controller="searchController">
+  <ion-header-bar align-title="center" class="tab-bar" ng-style="{'background-color':color}">
+    <div class="left-small">
+      <a ng-click="cancel(); index.cancelSearch()" class="p10">
+        <span class="text-close" translate>Close</span>
+      </a>
+    </div>
+    <h1 class="title ellipsis" translate>Search Transactions</h1>
+  </ion-header-bar>
+
   <ion-content overflow-scroll="true">
-    <nav class="tab-bar" ng-style="{'background-color':color}">
-      <section class="left-small">
-        <a ng-click="cancel(); index.cancelSearch()" class="p10">
-          <span class="text-close" translate>Close</span>
-        </a>
-      </section>
-
-      <section class="middle tab-bar-section">
-        <h1 class="title ellipsis" translate>Search Transactions</h1>
-      </section>
-    </nav>
-
     <div class="row searchBar searchLabel">
       <i class="fi-magnifying-glass size-14"></i>
       <form>
diff --git a/public/views/modals/tx-details.html b/public/views/modals/tx-details.html
index d75173434..58de6e0a5 100644
--- a/public/views/modals/tx-details.html
+++ b/public/views/modals/tx-details.html
@@ -1,14 +1,12 @@
 <ion-modal-view ng-controller="txDetailsController">
-  <nav class="tab-bar" ng-style="{'background-color':color}">
-    <section class="left-small">
+  <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>
-    </section>
-    <section class="middle tab-bar-section">
-      <h1 class="title ellipsis" translate>Transaction</h1>
-    </section>
-  </nav>
+    </div>
+    <h1 class="title ellipsis" translate>Transaction</h1>
+  </ion-header-bar>
 
   <ion-content ng-style="{'background-color': '#F6F7F9'}" overflow-scroll="true">
     <div class="modal-content">
diff --git a/public/views/modals/txp-details.html b/public/views/modals/txp-details.html
index fc6f183ca..a0a66895e 100644
--- a/public/views/modals/txp-details.html
+++ b/public/views/modals/txp-details.html
@@ -1,15 +1,12 @@
 <ion-modal-view ng-controller="txpDetailsController">
-  <nav class="tab-bar" ng-style="{'background-color':color}">
-    <section class="left-small">
+  <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>
-    </section>
-
-    <section class="middle tab-bar-section">
-      <h1 class="title ellipsis" translate>Payment Proposal</h1>
-    </section>
-  </nav>
+    </div>
+    <h1 class="title ellipsis" translate>Payment Proposal</h1>
+  </ion-header-bar>
 
   <div class="onGoingProcess" ng-show="loading">
     <div class="onGoingProcess-content" ng-style="{'background-color':index.backgroundColor}">
diff --git a/public/views/modals/wallets.html b/public/views/modals/wallets.html
index fa820d8ed..fb33340e6 100644
--- a/public/views/modals/wallets.html
+++ b/public/views/modals/wallets.html
@@ -1,18 +1,15 @@
 <ion-modal-view ng-controller="walletsController">
-  <nav class="tab-bar">
-    <section class="left-small">
+  <ion-header-bar align-title="center" class="tab-bar">
+    <div class="left-small">
       <a ng-click="cancel()" class="p10">
         <span class="text-close">Close</span>
       </a>
-    </section>
-
-    <section class="middle tab-bar-section">
-      <h1 class="title ellipsis">
-        <span ng-show="type == 'BUY' || type == 'RECEIVE'">Choose your destination wallet</span>
-        <span ng-show="type == 'SELL' || type == 'SEND'">Choose your source wallet</span>
-      </h1>
-    </section>
-  </nav>
+    </div>
+    <h1 class="title ellipsis">
+      <span ng-show="type == 'BUY' || type == 'RECEIVE'">Choose your destination wallet</span>
+      <span ng-show="type == 'SELL' || type == 'SEND'">Choose your source wallet</span>
+    </h1>
+  </ion-header-bar>
 
   <ion-content class="m20t" overflow-scroll="true">
     <div class="modal-content m20t">
diff --git a/src/css/ionic-migration.css b/src/css/ionic-migration.css
index 82225aa3e..152e15008 100644
--- a/src/css/ionic-migration.css
+++ b/src/css/ionic-migration.css
@@ -20,8 +20,13 @@
 	z-index: -1;
 }
 
-.ng-hide.ng-hide-animate{
-     display: none !important;
+.ng-hide.ng-hide-animate {
+	display: none !important;
+}
+
+.bar .title {
+	font-size: 14px;
+	line-height: 48px;
 }
 
 .radio-label {
diff --git a/src/sass/main.scss b/src/sass/main.scss
index d59fc5468..1773dde88 100644
--- a/src/sass/main.scss
+++ b/src/sass/main.scss
@@ -839,7 +839,7 @@ ul.manage li {
 
 .tab-bar {
   h1, h2, h3, h4, h5, h6 {
-    line-height: 2.7rem;
+    line-height: 48px;
   }
 }
 
@@ -877,7 +877,7 @@ ul.manage li {
 .header-modal {
   background: #fff;
   width: 100%;
-  padding-top: 60px;
+  padding-top: 20px;
   padding-bottom: 20px;
   position: relative;
 }
@@ -2005,7 +2005,7 @@ body.modal-open {
 
 .payment-proposal-head {
   color: #fff;
-  padding: 40px 10px 20px 10px;
+  padding: 10px 10px 20px 10px;
   text-align: center;
 }