replace all toggle buttons

Gruntfile.js

@@ -97,7 +97,6 @@ module.exports = function(grunt) {
           'bower_components/ng-lodash/build/ng-lodash.js',
           'bower_components/angular-qrcode/angular-qrcode.js',
           'bower_components/angular-gettext/dist/angular-gettext.js',
-          'bower_components/angular-ui-switch/angular-ui-switch.js',
           'bower_components/angular-sanitize/angular-sanitize.js',
           'bower_components/ng-csv/build/ng-csv.js',
           'angular-bitcore-wallet-client/angular-bitcore-wallet-client.js'

public/views/preferences.html

@@ -1,6 +1,6 @@
 
-<div 
+<div
-  class="topbar-container" 
+  class="topbar-container"
   ng-include="'views/includes/topbar.html'"
   ng-init="titleSection='Wallet Preferences'; closeToHome = true">
 </div>
@@ -33,17 +33,17 @@
       <div class="right text-gray">
         <span ng-style="{'color':index.backgroundColor}">&block;</span>
         <i class="icon-arrow-right3 size-24"></i>
-      </div>      
+      </div>
       <div translate>Color</div>
     </li>
 
     <li ng-show="index.isPrivKeyExternal">
       <div class="right text-gray">
-        {{preferences.externalSource}} 
+        {{preferences.externalSource}}
         <!-- (Accont {{preferences.externalAccount}}) -->
       </div>
       <div translate>Hardware wallet</div>
-    </li> 
+    </li>
 
     <li ng-click="$root.go('backup')"  ng-hide="index.isPrivKeyExternal">
       <div class="right text-gray">
@@ -56,7 +56,7 @@
     </li>
 
     <li ng-click="$root.go('preferencesAdvanced')">
-      <i class="icon-arrow-right3 size-24 right text-gray"></i>  
+      <i class="icon-arrow-right3 size-24 right text-gray"></i>
       <div translate>Advanced</div>
     </li>
 
@@ -67,20 +67,13 @@
   </h4>
 
   <div ng-show="!index.noFocusedWallet && index.canSign">
+    <ion-toggle ng-model="encryptEnabled" toggle-class="toggle-balanced" ng-change="encryptChange()">
+      <span class="toggle-label" translate>Request Spending Password</span>
+    </ion-toggle>
 
-    <ul class="no-bullet m0">
+    <ion-toggle ng-model="touchidEnabled" toggle-class="toggle-balanced" ng-change="touchidChange()" ng-show="preferences.touchidAvailable">
-
+      <span class="toggle-label" translate>Scan Fingerprint</span>
-      <li>
+    </ion-toggle>
-        <switch id="network-name" name="encrypt" ng-model="encrypt" class="green right"></switch>
-        <div translate>Request Spending 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>
   <div ng-show ="!deleted">
 

public/views/preferencesGlobal.html

@@ -1,14 +1,11 @@
 
-<div
+<div class="topbar-container" ng-include="'views/includes/topbar.html'"
-  class="topbar-container"
-  ng-include="'views/includes/topbar.html'"
   ng-init="titleSection='Global preferences'; closeToHome = true; noColor = true">
 </div>
 
-
 <div class="content preferences" ng-controller="preferencesGlobalController as prefGlobal" ng-init="prefGlobal.init()">
   <h4></h4>
-  <ul class="no-bullet m0 ">
+  <ul class="no-bullet m0">
     <li ng-click="$root.go('preferencesLanguage')">
       <div class="right text-gray">
         {{prefGlobal.currentLanguageName|translate}}
@@ -18,7 +15,8 @@
     </li>
   </ul>
   <h4></h4>
-  <ul class="no-bullet m0 ">
+
+  <ul class="no-bullet m0">
     <li ng-click="$root.go('preferencesUnit')">
       <div class="right text-gray">
         {{prefGlobal.unitName}}
@@ -26,6 +24,7 @@
       </div>
       <div translate>Unit</div>
     </li>
+
     <li ng-click="$root.go('preferencesAltCurrency')">
       <div class="right text-gray">
         {{prefGlobal.selectedAlternative.name}}
@@ -35,7 +34,8 @@
     </li>
   </ul>
   <h4></h4>
-  <ul class="no-bullet m0 ">
+
+  <ul class="no-bullet m0">
     <li ng-click="$root.go('preferencesFee')">
       <div class="right text-gray">
         {{prefGlobal.feeOpts[prefGlobal.currentFeeLevel]|translate}}
@@ -43,41 +43,37 @@
       </div>
       <div translate>Bitcoin Network Fee Policy</div>
     </li>
-    <li>
-      <switch id="spend-unconfirmed" name="spendUnconfirmed" ng-model="spendUnconfirmed" class="green right"></switch>
-      <div translate>Use Unconfirmed Funds</div>
-    </li>
   </ul>
+
+  <ion-toggle ng-model="spendUnconfirmed" toggle-class="toggle-balanced" ng-change="spendUnconfirmedChange()">
+    <span class="toggle-label" translate>Use Unconfirmed Funds</span>
+  </ion-toggle>
+
   <div ng-show="prefGlobal.usePushNotifications && PNEnabledByUser">
     <h4></h4>
-    <ul class="no-bullet m0">
+    <ion-toggle ng-model="pushNotifications" toggle-class="toggle-balanced" ng-change="pushNotificationsChange()">
-      <li>
+      <span class="toggle-label" translate>Enable push notifications</span>
-        <switch id="push-notifications" name="pushNotifications" ng-model="pushNotifications" class="green right"></switch>
+    </ion-toggle>
-        <div translate>Enable push notifications</div>
-      </li>
-    </ul>
   </div>
   <h4></h4>
-  <ul class="no-bullet m0 ">
+
-    <li>
+  <ion-toggle ng-model="glideraEnabled" toggle-class="toggle-balanced" ng-change="glideraChange()">
-      <switch id="glidera-enabled" name="glideraEnabled" ng-model="glideraEnabled" class="green right"></switch>
+    <span class="toggle-label" translate>Enable Glidera Service</span>
-      <div translate>Enable Glidera Service</div>
+  </ion-toggle>
-    </li>
-  </ul>
   <h4></h4>
-  <ul class="no-bullet m0">
+
-    <li>
+  <ion-toggle ng-model="coinbaseEnabled" toggle-class="toggle-balanced" ng-change="coinbaseChange()">
-      <switch id="coinbase-enabled" name="coinbaseEnabled" ng-model="coinbaseEnabled" class="green right"></switch>
+    <span class="toggle-label" translate>Enable Coinbase Service</span>
-      <div translate>Enable Coinbase Service</div>
+  </ion-toggle>
-    </li>
-  </ul>
   <h4></h4>
+
   <ul class="no-bullet m0">
     <li ng-click="$root.go('about')">
       <i class="icon-arrow-right3 size-24 right text-gray"></i>
       <div translate>About Copay</div>
     </li>
   </ul>
+
   <div ng-show="prefGlobal.usePushNotifications && !PNEnabledByUser && isIOSApp">
     <div class="text-centered text-gray size-12 m10" translate>Push notifications for Copay are currently disabled. Enable them in the Settings app.</div>
     <ul class="no-bullet m0" ng-click="prefGlobal.openSettings()">

src/css/ionic-migration.css

@@ -16,6 +16,16 @@
 	display: inherit;
 }
 
+.item-toggle .toggle {
+	right: 28px;
+}
+
+.toggle-label {
+	color: rgb(41, 55, 68);
+	font-size: 14px;
+	margin-left: 5px;
+}
+
 button, .button {
 	min-width: inherit;
   min-height: inherit;

src/js/app.js

@@ -8,7 +8,6 @@ var modules = [
   'gettext',
   'ionic',
   'ngLodash',
-  'uiSwitch',
   'ngSanitize',
   'ngCsv',
   'bwcModule',

src/js/controllers/preferences.js

@@ -6,20 +6,21 @@ angular.module('copayApp.controllers').controller('preferencesController',
     var fc = profileService.focusedClient;
     var config = configService.getSync();
     $scope.deleted = false;
+
     if (fc.credentials && !fc.credentials.mnemonicEncrypted && !fc.credentials.mnemonic) {
       $scope.deleted = true;
     }
 
     this.init = function() {
       if (fc) {
-        $scope.encrypt = walletService.isEncrypted(fc);
+        $scope.encryptEnabled = walletService.isEncrypted(fc);
         this.externalSource = fc.getPrivKeyExternalSourceName() == 'ledger' ? "Ledger" : null;
         // TODO externalAccount
         //this.externalIndex = fc.getExternalIndex();
       }
 
       this.touchidAvailable = fingerprintService.isAvailable();
-      $scope.touchid = config.touchIdFor ? config.touchIdFor[fc.credentials.walletId] : null;
+      $scope.touchidEnabled = config.touchIdFor ? config.touchIdFor[fc.credentials.walletId] : null;
     };
 
     var handleEncryptedWallet = function(client, cb) {
@@ -29,60 +30,56 @@ angular.module('copayApp.controllers').controller('preferencesController',
       });
     };
 
-    var unwatchEncrypt = $scope.$watch('encrypt', function(val) {
+    $scope.encryptChange = function() {
-      var fc = profileService.focusedClient;
       if (!fc) return;
+      var val = $scope.encryptEnabled;
 
       if (val && !walletService.isEncrypted(fc)) {
         $rootScope.$emit('Local/NeedsPassword', true, function(err, password) {
           if (err || !password) {
-            $scope.encrypt = false;
+            $scope.encryptEnabled = false;
             return;
           }
           profileService.setPrivateKeyEncryptionFC(password, function() {
             $rootScope.$emit('Local/NewEncryptionSetting');
-            $scope.encrypt = true;
+            $scope.encryptEnabled = true;
           });
         });
       } else {
         if (!val && walletService.isEncrypted(fc)) {
          handleEncryptedWallet(fc, function(err) {
             if (err) {
-              $scope.encrypt = true;
+              $scope.encryptEnabled = true;
               return;
             }
             profileService.disablePrivateKeyEncryptionFC(function(err) {
               $rootScope.$emit('Local/NewEncryptionSetting');
               if (err) {
-                $scope.encrypt = true;
+                $scope.encryptEnabled = true;
                 $log.error(err);
                 return;
               }
-              $scope.encrypt = false;
+              $scope.encryptEnabled = false;
             });
           });
         }
       }
-    });
+    };
 
-    var unwatchRequestTouchid = $scope.$watch('touchid', function(newVal, oldVal) {
+    $scope.touchidChange = function() {
-      if (newVal == oldVal || $scope.touchidError) {
-        $scope.touchidError = false;
-        return;
-      }
       var walletId = fc.credentials.walletId;
 
       var opts = {
         touchIdFor: {}
       };
-      opts.touchIdFor[walletId] = newVal;
+      opts.touchIdFor[walletId] = $scope.touchidEnabled;
 
       fingerprintService.check(fc, function(err) {
         if (err) {
           $log.debug(err);
           $timeout(function() {
             $scope.touchidError = true;
-            $scope.touchid = oldVal;
+            $scope.touchidEnabled = false;
           }, 100);
           return;
         }
@@ -90,14 +87,9 @@ angular.module('copayApp.controllers').controller('preferencesController',
           if (err) {
             $log.debug(err);
             $scope.touchidError = true;
-            $scope.touchid = oldVal;
+            $scope.touchidEnabled = false;
           }
         });
       });
-    });
+    };
-
-    $scope.$on('$destroy', function() {
-      unwatchEncrypt();
-      unwatchRequestTouchid();
-    });
   });

src/js/controllers/preferencesGlobal.js

@@ -36,24 +36,22 @@ angular.module('copayApp.controllers').controller('preferencesGlobalController',
       });
     }
 
-    var unwatchSpendUnconfirmed = $scope.$watch('spendUnconfirmed', function(newVal, oldVal) {
+    $scope.spendUnconfirmedChange = function() {
-      if (newVal == oldVal) return;
       var opts = {
         wallet: {
-          spendUnconfirmed: newVal
+          spendUnconfirmed: $scope.spendUnconfirmed
         }
       };
       configService.set(opts, function(err) {
-        $rootScope.$emit('Local/SpendUnconfirmedUpdated', newVal);
+        $rootScope.$emit('Local/SpendUnconfirmedUpdated', $scope.spendUnconfirmed);
         if (err) $log.debug(err);
       });
-    });
+    };
 
-    var unwatchPushNotifications = $scope.$watch('pushNotifications', function(newVal, oldVal) {
+    $scope.pushNotificationsChange = function() {
-      if (newVal == oldVal) return;
       var opts = {
         pushNotifications: {
-          enabled: newVal
+          enabled: $scope.pushNotifications
         }
       };
       configService.set(opts, function(err) {
@@ -63,38 +61,29 @@ angular.module('copayApp.controllers').controller('preferencesGlobalController',
           pushNotificationsService.disableNotifications(profileService.walletClients);
         if (err) $log.debug(err);
       });
-    });
+    };
 
-    var unwatchGlideraEnabled = $scope.$watch('glideraEnabled', function(newVal, oldVal) {
+    $scope.glideraChange = function() {
-      if (newVal == oldVal) return;
       var opts = {
         glidera: {
-          enabled: newVal
+          enabled: $scope.glideraEnabled
         }
       };
       configService.set(opts, function(err) {
         $rootScope.$emit('Local/GlideraUpdated');
         if (err) $log.debug(err);
       });
-    });
+    };
 
-    var unwatchCoinbaseEnabled = $scope.$watch('coinbaseEnabled', function(newVal, oldVal) {
+    $scope.coinbaseChange = function() {
-      if (newVal == oldVal) return;
       var opts = {
         coinbase: {
-          enabled: newVal
+          enabled: $scope.coinbaseEnabled
         }
       };
       configService.set(opts, function(err) {
         $rootScope.$emit('Local/CoinbaseUpdated');
         if (err) $log.debug(err);
       });
-    });
+    };
-
-    $scope.$on('$destroy', function() {
-      unwatchSpendUnconfirmed();
-      unwatchGlideraEnabled();
-      unwatchCoinbaseEnabled();
-      unwatchPushNotifications();
-    });
   });