Merge pull request #208 from gabrielbazan7/feat/pushNotifSettings

add notifications settings

public/views/preferencesNotifications.html

@@ -0,0 +1,29 @@
+<ion-view id="tab-notifications" class="settings">
+  <ion-nav-bar class="bar-royal">
+    <ion-nav-title>{{'Notifications' | translate}}</ion-nav-title>
+    <ion-nav-back-button>
+    </ion-nav-back-button>
+  </ion-nav-bar>
+
+  <ion-content>
+    <div class="list">
+      <div ng-show="PNEnabledByUser">
+        <div class="item item-divider" translate>Notifications</div>
+
+        <ion-toggle ng-model="pushNotifications.value" toggle-class="toggle-balanced" ng-change="pushNotificationsChange()">
+          <span class="toggle-label" translate>Enable push notifications</span>
+        </ion-toggle>
+      </div>
+
+      <div ng-show="!PNEnabledByUser && isIOSApp">
+        <div class="item item-divider" translate>Notifications</div>
+        <div class="padding text-light" translate>
+          Push notifications for Copay are currently disabled. Enable them in the Settings app.
+        </div>
+        <a class="item" ng-click="openSettings()">
+          <span translate>Open Settings app</span>
+        </a>
+      </div>
+    </div>
+  </ion-content>
+</ion-view>

public/views/tab-settings.html

@@ -14,6 +14,12 @@
 
       <div class="item item-divider" translate>Preferences</div>
 
+      <a class="item item-icon-left item-icon-right" ui-sref="tabs.notifications" ng-show="usePushNotifications">
+        <i class="icon ion-ios-bell-outline"></i>
+        <span translate>Notifications</span>
+        <i class="icon nav-item-arrow-right"></i>
+      </a>
+
       <a class="item item-icon-left item-icon-right" ui-sref="tabs.language">
         <i class="icon ion-ios-chatbubble-outline"></i>
         <span translate>Language</span>
@@ -50,24 +56,6 @@
         <i class="icon nav-item-arrow-right"></i>
       </a>
 
-      <div ng-show="usePushNotifications && PNEnabledByUser">
-        <div class="item item-divider" translate>Notifications</div>
-
-        <ion-toggle ng-model="pushNotifications.value" toggle-class="toggle-balanced" ng-change="pushNotificationsChange()">
-          <span class="toggle-label" translate>Enable push notifications</span>
-        </ion-toggle>
-      </div>
-
-      <div ng-show="usePushNotifications && !PNEnabledByUser && isIOSApp">
-        <div class="item item-divider" translate>Notifications</div>
-        <div class="padding text-light" translate>
-          Push notifications for Copay are currently disabled. Enable them in the Settings app.
-        </div>
-        <a class="item" ng-click="openSettings()">
-          <span translate>Open Settings app</span>
-        </a>
-      </div>
-
       <div class="item item-divider" translate>Wallets Preferences</div>
       <a class="item item-icon-left item-icon-right" href
            ui-sref="tabs.preferences({'walletId': item.id})"
@@ -83,13 +71,6 @@
         <i class="icon nav-item-arrow-right"></i>
       </a>
 
-      <div class="item item-divider"></div>
-      <a class="item item-icon-left item-icon-right" href ui-sref="tabs.about">
-        <i class="icon ion-ios-information-outline"></i>
-        <span translate>About</span> {{appName}}
-        <i class="icon nav-item-arrow-right"></i>
-      </a>
-
       <div class="item item-divider"></div>
       <a class="item item-icon-right" href ui-sref="tabs.advanced">
         <span translate>Advanced</span>
@@ -97,6 +78,11 @@
       </a>
 
       <div class="item item-divider"></div>
+      <a class="item item-icon-left item-icon-right" href ui-sref="tabs.about">
+        <i class="icon ion-ios-information-outline"></i>
+        <span translate>About</span> {{appName}}
+        <i class="icon nav-item-arrow-right"></i>
+      </a>
     </div>
   </ion-content>
 </ion-view>

src/js/controllers/preferencesNotifications.js

@@ -0,0 +1,52 @@
+'use strict';
+
+angular.module('copayApp.controllers').controller('preferencesNotificationsController',
+  function($scope, $rootScope, $log, $window, lodash, configService, uxLanguage, platformInfo, pushNotificationsService, profileService, feeService) {
+
+    var updateConfig = function() {
+
+      var config = configService.getSync();
+      var isCordova = platformInfo.isCordova;
+      var isIOS = platformInfo.isIOS;
+
+      $scope.PNEnabledByUser = true;
+      $scope.isIOSApp = isIOS && isCordova;
+      if ($scope.isIOSApp) {
+        cordova.plugins.diagnostic.isRemoteNotificationsEnabled(function(isEnabled) {
+          $scope.PNEnabledByUser = isEnabled;
+          $scope.$digest();
+        });
+      }
+
+      $scope.pushNotifications = {
+        value: config.pushNotifications.enabled
+      };
+    };
+
+    $scope.openSettings = function() {
+      cordova.plugins.diagnostic.switchToSettings(function() {
+        $log.debug('switched to settings');
+      }, function(err) {
+        $log.debug(err);
+      });
+    };
+
+    $scope.pushNotificationsChange = function() {
+      var opts = {
+        pushNotifications: {
+          enabled: $scope.pushNotifications.value
+        }
+      };
+      configService.set(opts, function(err) {
+        if (opts.pushNotifications.enabled)
+          pushNotificationsService.enableNotifications(profileService.walletClients);
+        else
+          pushNotificationsService.disableNotifications(profileService.walletClients);
+        if (err) $log.debug(err);
+      });
+    };
+
+    $scope.$on("$ionicView.enter", function(event, data) {
+      updateConfig();
+    });
+  });

src/js/controllers/tab-settings.js

@@ -9,6 +9,8 @@ angular.module('copayApp.controllers').controller('tabSettingsController', funct
     var isWP = platformInfo.isWP;
     var isIOS = platformInfo.isIOS;
 
+    $scope.usePushNotifications = isCordova && !isWP;
+
     $scope.appName = $window.appConfig.nameCase;
 
     $scope.unitName = config.wallet.settings.unitName;
@@ -19,48 +21,13 @@ angular.module('copayApp.controllers').controller('tabSettingsController', funct
     };
     $scope.feeOpts = feeService.feeOpts;
     $scope.currentFeeLevel = feeService.getCurrentFeeLevel();
-    $scope.usePushNotifications = isCordova && !isWP;
-    $scope.PNEnabledByUser = true;
-    $scope.isIOSApp = isIOS && isCordova;
-    if ($scope.isIOSApp) {
-      cordova.plugins.diagnostic.isRemoteNotificationsEnabled(function(isEnabled) {
-        $scope.PNEnabledByUser = isEnabled;
-        $scope.$digest();
-      });
-    }
 
-    $scope.pushNotifications = {
-      value: config.pushNotifications.enabled
-    };
     $scope.otherWallets = lodash.filter(profileService.getWallets(self.network), function(w) {
       return w.id != self.walletId;
     });
     $scope.wallets = profileService.getWallets();
   };
 
-  $scope.openSettings = function() {
-    cordova.plugins.diagnostic.switchToSettings(function() {
-      $log.debug('switched to settings');
-    }, function(err) {
-      $log.debug(err);
-    });
-  };
-
-  $scope.pushNotificationsChange = function() {
-    var opts = {
-      pushNotifications: {
-        enabled: $scope.pushNotifications.value
-      }
-    };
-    configService.set(opts, function(err) {
-      if (opts.pushNotifications.enabled)
-        pushNotificationsService.enableNotifications(profileService.walletClients);
-      else
-        pushNotificationsService.disableNotifications(profileService.walletClients);
-      if (err) $log.debug(err);
-    });
-  };
-
   $scope.$on("$ionicView.enter", function(event, data) {
     updateConfig();
   });

src/js/routes.js

@@ -318,7 +318,16 @@ angular.module('copayApp').config(function(historicLogProvider, $provide, $logPr
      *
      */
 
-    .state('tabs.language', {
+    .state('tabs.notifications', {
+        url: '/notifications',
+        views: {
+          'tab-settings@tabs': {
+            controller: 'preferencesNotificationsController',
+            templateUrl: 'views/preferencesNotifications.html'
+          }
+        }
+      })
+      .state('tabs.language', {
         url: '/language',
         views: {
           'tab-settings@tabs': {

src/sass/views/notifications.scss

@@ -0,0 +1,43 @@
+.settings {
+  .item {
+    color: #444;
+    border-color: rgba(221, 221, 221, 0.3);
+  }
+}
+
+#tab-notifications {
+  .list {
+    .item {
+      color: #444;
+      border-top: none;
+      padding-top: 1.5rem;
+      padding-bottom: 1.5rem;
+      &:before {
+        display: block;
+        position: absolute;
+        width: 100%;
+        height: 1px;
+        background: rgba(221, 221, 221, 0.3);
+        top: 0;
+        right: 0;
+        content: '';
+      }
+      &.item-divider {
+        color: rgba(74, 74, 74, .8);
+      }
+      &.item-heading {
+        &:before {
+          top: 99%
+        }
+      }
+      &:nth-child(2) {
+        &:before {
+          width: 0;
+        }
+      }
+      .item-note {
+        color: rgb(58, 58, 58);
+      }
+    }
+  }
+}