Ref copayers view

src/js/controllers/copayers.js

@@ -3,15 +3,11 @@
 angular.module('copayApp.controllers').controller('copayersController',
   function($scope, $log, $timeout, $stateParams, $state, $rootScope, $ionicHistory, lodash, profileService, walletService, popupService, platformInfo, gettextCatalog, ongoingProcess) {
 
+    $scope.isCordova = platformInfo.isCordova;
     $scope.$on("$ionicView.beforeEnter", function(event, data) {
-      init();
+      $scope.wallet = profileService.getWallet(data.stateParams.walletId);
-    });
-
-    var init = function() {
-      $scope.isCordova = platformInfo.isCordova;
-      $scope.wallet = profileService.getWallet($stateParams.walletId);
       updateWallet();
-    };
+    });
 
     $rootScope.$on('bwsEvent', function() {
       updateWallet();
@@ -40,7 +36,9 @@ angular.module('copayApp.controllers').controller('copayersController',
     };
 
     $scope.showDeletePopup = function() {
-      popupService.showConfirm(gettextCatalog.getString('Confirm'), gettextCatalog.getString('Are you sure you want to delete this wallet?'), null, null, function(res) {
+      var title = gettextCatalog.getString('Confirm');
+      var msg = gettextCatalog.getString('Are you sure you want to cancel and delete this wallet?');
+      popupService.showConfirm(title, msg, null, null, function(res) {
         if (res) deleteWallet();
       });
     };

src/sass/views/copayers.scss

@@ -1,7 +1,13 @@
 .copayers-secret {
-  overflow-wrap: break-word;
-  word-wrap: break-word;
   text-align: center;
-  font-size: 14px;
+  font-size: 12px;
   margin: 10px;
+  white-space: -moz-pre-wrap !important;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  white-space: -webkit-pre-wrap;
+  word-break: break-all;
+  white-space: normal;
 }

www/views/copayers.html

@@ -4,26 +4,29 @@
     <ion-nav-back-button>
     </ion-nav-back-button>
     <ion-nav-title>{{wallet.name}}</ion-nav-title>
+    <ion-nav-buttons side="secondary">
+      <button class="button button-clear" ng-click="showDeletePopup()">
+        Cancel
+      </button>
+    </ion-nav-buttons>
   </ion-nav-bar>
 
   <ion-content>
     <div ng-show="!wallet.notAuthorized">
       <div class="list card text-center">
-        <a class="item item-heading" ng-style="{'border-width': 0}" translate>
+        <div class="item item-heading item-text-wrap" translate>
           Share this invitation with your copayers
-        </a>
+        </div>
-        <div ng-click="copySecret()" ng-class="{'enable_text_select': !isCordova}">
+        <div class="item text-center" copy-to-clipboard="secret" ng-click="copySecret()">
-          <div class="text-center" copy-to-clipboard="secret">
+          <qrcode size="220" error-correction-level="L" data="{{secret}}"></qrcode>
-            <qrcode size="220" error-correction-level="L" data="{{secret}}"></qrcode>
+          <div ng-show="!secret" style="position:relative; top:-226px; height:0px">
-            <div ng-show="!secret" style="position:relative; top:-226px; height:0px">
+            <div style="height:220px; width:220px; margin:auto; background: white">
-              <div style="height:220px; width:220px; margin:auto; background: white">
+              <ion-spinner class="spinner-dark" icon="lines"></ion-spinner>
-                <ion-spinner class="spinner-dark" icon="lines"></ion-spinner>
-              </div>
-            </div>
-            <div class="copayers-secret">
-              {{secret || ('Loading...'|translate)}}
             </div>
           </div>
+          <div class="copayers-secret">
+            {{secret || ('Loading...'|translate)}}
+          </div>
         </div>
       </div>
 
@@ -36,30 +39,24 @@
           </button>
         </div>
 
-        <div class="m30v line-t">
+        <div class="list">
-          <h4 class="size-14 p10h m10t">
+          <div class="item item-heading">
-            <span translate>Waiting for copayers</span>
             <span class="text-gray right">
               [ <span translate>{{wallet.m}}-of-{{wallet.n}}</span> ]
             </span>
-          </h4>
+            <span translate>Waiting for copayers</span>
+          </div>
           <div ng-include="'views/includes/copayers.html'"></div>
-          <div ng-if="!wallet.isComplete()" class="line-b p10 white size-12">
+          <div ng-if="!wallet.isComplete()" class="item item-icon-left">
             <i class="icon ion-loop"></i>
-            <span translate>Waiting...</span>
+            {{'Waiting...'|translate}}
           </div>
         </div>
 
-        <div class="m20b text-center" ng-show="wallet.notAuthorized">
+        <div class="m30v text-center" ng-show="wallet.notAuthorized">
           <h1 translate>Wallet incomplete and broken</h1>
           <h4 translate>Delete it and create a new one</h4>
         </div>
-
-        <div class="text-center">
-          <button class="button button-block button-assertive" ng-click="showDeletePopup()">
-            <i class="fi-trash"></i> <span translate>Cancel and delete the wallet</span>
-          </button>
-        </div>
       </div>
     </div>
   </ion-content>

www/views/includes/copayers.html

@@ -1,8 +1,10 @@
-<div ng-repeat="copayer in copayers">
+<div class="item item-icon-left" ng-repeat="copayer in copayers">
-  <span class="item size-12" ng-show="copayer.id == wallet.copayerId">
+  <span ng-show="copayer.id == wallet.copayerId">
-    <i class="icon ion-checkmark"></i> {{'Me'|translate}}
+    <i class="icon ion-checkmark"></i>
+    {{'Me'|translate}}
   </span>
-  <span class="item size-12 text-gray" ng-show="copayer.id != wallet.copayerId">
+  <span ng-show="copayer.id != wallet.copayerId">
-    <i class="icon ion-checkmark"></i> {{copayer.name}}
+    <i class="icon ion-checkmark"></i>
+    {{copayer.name}}
   </span>
 </div>