Merge pull request #3309 from cmgustavo/bug/ui-preferences

Bug/ui preferences

public/views/preferences.html

@@ -13,107 +13,111 @@
 
 
     <li  ng-click="$root.go('preferencesAlias')">
-      <span translate>Wallet Alias</span>
-      <span class="right text-gray">
-        <i class="icon-arrow-right3 size-24 right"></i>
+      <div class="right text-gray">
         {{index.alias||index.walletName}}
-      </span>
+        <i class="icon-arrow-right3 size-24"></i>
+      </div>
+      <div translate>Wallet Alias</div>
     </li>
 
     <li ng-click="$root.go('preferencesEmail')">
-      <span translate>Email Notifications</span>
-      <span class="right text-gray">
-        <i class="icon-arrow-right3 size-24 right"></i>
-         <span ng-if="!index.preferences.email" translate>Disabled</span>
-         <span ng-if="index.preferences.email">{{index.preferences.email}}</span>
-      </span>
+      <div class="right text-gray">
+        <span ng-if="!index.preferences.email" translate>Disabled</span>
+        <span ng-if="index.preferences.email">{{index.preferences.email}}</span>
+        <i class="icon-arrow-right3 size-24"></i>
+      </div>
+      <div translate>Email Notifications</div>
     </li>
 
     <li ng-click="$root.go('preferencesColor')">
-      <span translate>Color</span>
-      <span class="right text-gray">
-        <i class="icon-arrow-right3 size-24 right"></i>
+      <div class="right text-gray">
         <span ng-style="{'color':index.backgroundColor}">&block;</span>
-      </span>      
+        <i class="icon-arrow-right3 size-24"></i>
+      </div>      
+      <div translate>Color</div>
     </li>
 
     <li ng-show="index.isPrivKeyExternal">
-      <span translate>Hardware wallet</span>
-      <span class="right text-gray">
+      <div class="right text-gray">
         {{preferences.externalSource}} 
         <!-- (Accont {{preferences.externalAccount}}) -->
-      </span>
+      </div>
+      <div translate>Hardware wallet</div>
     </li> 
 
     <h4>
     </h4>
     <li ng-click="$root.go('backup')"  ng-hide="index.isPrivKeyExternal">
-      <i class="icon-arrow-right3 size-24 right text-gray"></i>  
-      <span class="text-warning right" ng-show="index.needsBackup">
-        <i class="fi-alert"></i> <span translate> Still not done</span>
-      </span>
-      <span translate>Backup</span>
+      <div class="right text-gray">
+        <span class="text-warning" ng-show="index.needsBackup">
+          <i class="fi-alert"></i><span translate>Still not done</span>
+        </span>
+        <i class="icon-arrow-right3 size-24 text-gray"></i>
+      </div>
+      <div translate>Backup</div>
     </li>
  
     <li ng-click="$root.go('preferencesAdvanced')">
       <i class="icon-arrow-right3 size-24 right text-gray"></i>  
-      <span translate>Advanced</span>
+      <div translate>Advanced</div>
     </li>
   </ul>
+  <div ng-show="!index.noFocusedWallet && (!index.isPrivKeyExternal || preferences.touchidAvailable)">
     <h4 translate>
       Spending Restrictions
     </h4>
-  <ul class="no-bullet m0 ">
-    <li  ng-hide="index.isPrivKeyExternal">
-      <span translate>Request Password</span>
-      <switch id="network-name" name="encrypt" ng-model="encrypt" class="green right"></switch>
-    </li>
-    <li  ng-show="preferences.touchidAvailable">
-      <span translate>Scan Fingerprint</span>
-      <switch id="touchid" name="touchid" ng-model="touchid" class="green right"></switch>
-    </li>
-  </ul>
+    <ul class="no-bullet m0 ">
+      <li ng-show="!index.isPrivKeyExternal">
+        <switch id="network-name" name="encrypt" ng-model="encrypt" class="green right"></switch>
+        <div translate>Request Password</div>
+      </li>
+      <li  ng-show="preferences.touchidAvailable">
+        <switch id="touchid" name="touchid" ng-model="touchid" class="green right"></switch>
+        <div translate>Scan Fingerprint</div>
+      </li>
+    </ul>
+  </div>
   <ul class="no-bullet m0 ">
 
     <h4 translate>Global settings</h4>
 
     <li  ng-show="!index.noFocusedWallet" ng-click="$root.go('preferencesLanguage')">
-      <span translate>Language</span>
-      <span class="right text-gray">
-        <i class="icon-arrow-right3 size-24 right"></i>
+      <div class="right text-gray">
         {{preferences.currentLanguageName|translate}}
-      </span>
+        <i class="icon-arrow-right3 size-24"></i>
+      </div>
+      <div translate>Language</div>
     </li>
     <li  ng-show="!index.noFocusedWallet" ng-click="$root.go('preferencesUnit')">
-      <span translate>Unit</span>
-      <span class="right text-gray">
-        <i class="icon-arrow-right3 size-24 right"></i>
+      <div class="right text-gray">
         {{preferences.unitName}}
-      </span>
+        <i class="icon-arrow-right3 size-24"></i>
+      </div>
+      <div translate>Unit</div>
     </li>
     <li  ng-show="!index.noFocusedWallet" ng-click="$root.go('preferencesAltCurrency')">
-      <span translate>Alternative Currency</span>
-      <span class="right text-gray">
-        <i class="icon-arrow-right3 size-24 right"></i>
+      <div class="right text-gray">
         {{preferences.selectedAlternative.name}}
-      </span>
+        <i class="icon-arrow-right3 size-24"></i>
+      </div>
+      <div translate>Alternative Currency</div>
     </li>
     <li  ng-show="!index.noFocusedWallet" ng-click="$root.go('preferencesFee')"
       ng-show="(index.network == 'livenet' ? index.feeLevels.livenet : index.feeLevels.testnet)">
-      <span translate>Bitcoin Network Fee Policy</span>
-      <span class="right text-gray">
-        <i class="icon-arrow-right3 size-24 right"></i>
+      <div class="right text-gray">
         {{index.feeOpts[index.currentFeeLevel]|translate}}
-      </span>
+        <i class="icon-arrow-right3 size-24"></i>
+      </div>
+      <div translate>Bitcoin Network Fee Policy</div>
     </li> 
    <li  ng-show="!index.noFocusedWallet">
-      <span translate>Use Unconfirmed Funds</span>
       <switch id="spend-unconfirmed" name="spendUnconfirmed" ng-model="spendUnconfirmed" class="green right"></switch>
+      <div translate>Use Unconfirmed Funds</div>
     </li>
 
     <li ng-show="!index.noFocusedWallet">
-      <span>Enable Glidera Service</span>
       <switch id="glidera-enabled" name="glideraEnabled" ng-model="glideraEnabled" class="green right"></switch>
+      <div>Enable Glidera Service</div>
     </li>
  
     <!-- Disabled for testnet 
@@ -125,7 +129,7 @@
 
     <li ng-click="$root.go('about')">
       <i class="icon-arrow-right3 size-24 right text-gray"></i>  
-      <span translate>About Copay</span>
+      <div translate>About Copay</div>
     </li>
  
   </ul>

public/views/preferencesAdvanced.html

@@ -9,20 +9,19 @@
   <h4></h4>
   <ul class="no-bullet m0">
 
-
     <li  ng-click="$root.go('information')">
       <i class="icon-arrow-right3 size-24 right text-gray"></i>  
-      <span translate>Wallet Information</span>
+      <div translate>Wallet Information</div>
     </li>
 
     <li ng-show="index.network == 'livenet'" class="text-capitalize" ng-click="$root.go('paperWallet')">
       <i class="icon-arrow-right3 size-24 right text-gray"></i>  
-      <span translate>Sweep paper wallet</span>
+      <div translate>Sweep paper wallet</div>
     </li>
  
     <li  ng-click="$root.go('export')">
       <i class="icon-arrow-right3 size-24 right text-gray"></i>  
-      <span translate>Export Wallet</span>
+      <div translate>Export Wallet</div>
     </li>
  
     <li  ng-click="$root.go('preferencesBwsUrl')">
@@ -32,7 +31,7 @@
 
     <li ng-click="$root.go('delete')">
       <i class="icon-arrow-right3 size-24 right text-gray"></i>  
-      <span translate>Delete Wallet</span>
+      <div translate>Delete Wallet</div>
     </li>
   </ul>
 </div>

public/views/preferencesInformation.html

@@ -4,32 +4,32 @@
   ng-init="titleSection='Wallet Information'; goBackToState = 'preferencesAdvanced'">
 </div>
 
-<div class="content preferences" ng-controller="preferencesInformation as info">
+<div class="content preferences" ng-controller="preferencesInformation as info" ng-init="info.init()">
     <h4 class="title m0" translate>Wallet Information</h4>
 
     <ul class="no-bullet m0 size-14">
-      <li class="line-b p20">
+      <li class="line-b p20 oh">
         <span translate>Wallet Name (at creation)</span>
         <span class="right text-gray">
           {{walletName}}
         </span>
       </li>
 
-      <li class="line-b p20">
+      <li class="line-b p20 oh">
         <span translate>Wallet Id</span>
-        <span class="right text-gray">
+        <span class="right text-gray enable_text_select">
           {{walletId}}
         </span>
       </li>
 
-      <li class="line-b p20">
+      <li class="line-b p20 oh">
         <span translate>Wallet Configuration (m-n)</span>
         <span class="right text-gray">
           {{M}}-{{N}}
         </span>
       </li>
 
-       <li class="line-b p20">
+       <li class="line-b p20 oh">
         <span translate>Wallet Network</span>
         <span class="right text-gray">
           {{network}}
@@ -37,7 +37,7 @@
       </li>
 
 
-      <li class="line-b p20">
+      <li class="line-b p20 oh">
         <span translate>Address Type</span>
         <span class="right text-gray">
           {{addressType}}
@@ -45,7 +45,7 @@
       </li>
 
  
-      <li class="line-b p20">
+      <li class="line-b p20 oh">
         <span translate>Derivation Strategy</span>
         <span class="right text-gray">
           {{derivationStrategy}}
@@ -54,13 +54,13 @@
 
     <h4 class="title m0" translate>Extended Public Keys</h4>
       <li  ng-repeat="pk in pubKeys">
-        <div class="row">
-          <div class="small-3 columns">Copayer {{$index}}</div>
-          <div class="small-9 columns oh enable_text_select text-gray" style="text-overflow:ellipsis">
-            {{pk}} 
-            <span class="right size-12" ng-if="$index == 0">
+        <div class="row collapse">
+          <div class="small-4 columns">Copayer {{$index}}</div>
+          <div class="small-8 columns oh text-gray">
+            <div class="ellipsis enable_text_select">{{pk}}</div>
+            <div class="size-12 text-right" ng-if="$index == 0">
               ({{basePath}})
-            </span>
+            </div>
           </div>
         </div>
       </li>
@@ -69,13 +69,11 @@
     <ul class="no-bullet m0 size-14" ng-show="addrs">
     <h4 class="title m0" translate>Last Wallet Addresses</h4>
       <li  ng-repeat="a in addrs" class="oh">
-          <div class="enable_text_select" style="text-overflow:ellipsis">
+          <div class="enable_text_select ellipsis">
             {{a.address}} 
           </div>
-          <div class="enable_text_select text-gray size-12" style="text-overflow:ellipsis">
-            <span class="right">
-              {{a.path}} &middot;  {{a.createdOn *1000  | amDateFormat:'MMMM Do YYYY, h:mm a' }}
-            </span>
+          <div class="text-gray size-12 right enable_text_select">
+            {{a.path}} &middot;  {{a.createdOn *1000  | amDateFormat:'MMMM Do YYYY, h:mm a' }}
           </div>
       </li>
       <li class="line-b p10 text-centered text-gray size-12">
@@ -87,13 +85,13 @@
 
       <span translate>Scan addresses for funds</span>
       </button>
-      </li>
- 
-
-      <li class="line-b p20" ng-hide="!index.isCordova">
-      <button class="black round small expand"  ng-style="{'background-color':index.backgroundColor}" ng-click="info.sendAddrs()"><i class="fi-mail"></i>
-
-      <span translate>Send all by email</span>
+      
+      <button ng-show="index.isCordova" class="black round small expand" 
+        ng-style="{'background-color':index.backgroundColor}" 
+        ng-click="info.sendAddrs()"
+        ng-disabled="info.loading">
+        <i class="fi-mail"></i>
+        <span translate>Send addresses by email</span>
       </button>
       </li>
     </ul>
@@ -102,8 +100,10 @@
     <ul class="no-bullet m0 size-14" ng-show="index.balanceByAddress">
       <div ng-if="index.balanceByAddress[0]">
         <h4 class="title m0" translate>Balance By Address</h4>
-        <li class="line-b p20 enable_text_select"  ng-repeat="a in index.balanceByAddress">
-          {{a.address}} 
+        <li class="line-b p20 oh"  ng-repeat="a in index.balanceByAddress">
+          <div class="enable_text_select ellipsis">
+            {{a.address}} 
+          </div>
           <div class="text-gray text-right">
             {{(a.amount/1e8).toFixed(8)}} BTC 
           </div>
@@ -111,6 +111,7 @@
       </div>
     </ul>
 
+    <h4></h4>
 
     <div class="extra-margin-bottom"></div>
 </div>