Merge pull request #2754 from cmgustavo/feat/ux-wallets-1-1

Feat/ux wallets 1-1

public/views/create.html

@@ -6,7 +6,7 @@
 
 
 
-<div class="content p20v" ng-controller="createController as create">
+<div class="content p20v" ng-controller="createController as create" ng-init="create.setTotalCopayers(1)">
 
   <div class="onGoingProcess" ng-show="create.loading">
     <div class="onGoingProcess-content" ng-style="{'background-color':'#222'}">
@@ -21,6 +21,16 @@
     </div>
   </div>
 
+  <div class="row m20b">
+    <a href 
+      class="small-6 medium-6 large-6 columns text-center" 
+      ng-class="{'text-gray': totalCopayers == 1}"
+      ng-click="create.setTotalCopayers(1)">Personal</a>
+    <a href 
+      class="small-6 medium-6 large-6 columns text-center" 
+      ng-class="{'text-gray': totalCopayers != 1}"
+      ng-click="create.setTotalCopayers(3)">Multisignature</a>
+  </div>
 
   <form name="setupForm" ng-submit="create.create(setupForm)" novalidate>
     <div class="row">
@@ -47,10 +57,12 @@
             </label>
           </div>
         </div>
-        <div class="row">
+        <div class="row" ng-show="totalCopayers != 1">
           <div class="large-6 medium-6 columns">
             <label><span translate>Select total number of copayers</span>
-              <select class="m10t" ng-model="totalCopayers" ng-options="totalCopayers as totalCopayers for totalCopayers in create.TCValues">
+              <select class="m10t" ng-model="totalCopayers" 
+                ng-options="totalCopayers as totalCopayers for totalCopayers in create.TCValues"
+                ng-change="create.setTotalCopayers(totalCopayers)">
               </select>
             </label>
           </div>

public/views/includes/sidebar.html

@@ -8,15 +8,15 @@
     ng-repeat="item in sidebar.wallets track by $index"
     ng-class="{'selected': item.id == index.walletId}"
     class="nav-item">
-    <a ng-click="sidebar.switchWallet(item.id)">
+    <a ng-click="sidebar.switchWallet(item.id)" class="oh">
       <div class="avatar-wallet"
         ng-style="{'background-color':item.color}">{{(item.name || item.id) | limitTo: 1}}</div>
-      <div class="ellipsis name-wallet">{{item.name || item.id}}</div>
-      <div class="size-12">{{item.m}} <span translate>of</span> {{item.n}}</div>
+      <div class="name-wallet" ng-class="{'m8t':item.n == 1}">{{item.name || item.id}}</div>
+      <div class="size-12" ng-show="item.n > 1">{{item.m}} <span translate>of</span> {{item.n}}</div>
     </a>
     </li>
     <li>
-      <a ng-click="$root.go('add')">
+      <a ng-click="$root.go('add')" class="oh">
         <i class="icon-arrow-right3 size-18 right m10t"></i>
         <i class="fi-plus size-24 db left m20r m5t"></i>
         <div class="tu text-bold">

public/views/walletHome.html

@@ -113,18 +113,19 @@
           <div class="wallet-info">
             <div ng-show="index.isShared" ng-click="openCopayersModal(index.copayers, index.copayerId)">
               <p class="m0">
-              {{index.m}} <span translate>of</span>  {{index.n}}
+              {{(index.alias || index.walletName)}}
               </p>
               <div class="size-12 text-gray">
-                <span translate>Multisignature wallet</span> <span ng-if="index.network != 'livenet'">- Testnet</span>
+                <span translate>Multisignature wallet</span> ({{index.m}} <span translate>of</span> {{index.n}})
+                <span ng-if="index.network != 'livenet'">- Testnet</span>
               </div>
             </div>
             <div ng-show="!index.isShared">
               <p class="m0">
-              {{index.m}} <span translate>of</span>  {{index.n}}
+              {{(index.alias || index.walletName)}}
               </p>
-              <div class="size-12 text-gray">
-                <span translate>Personal Wallet</span> <span ng-if="index.network != 'livenet'">- Testnet</span>
+              <div class="size-12 text-gray" ng-if="index.network != 'livenet'">
+                Testnet
               </div>
             </div>
           </div>

src/css/main.css

@@ -338,6 +338,7 @@ ul.manage li {
 .size-72 { font-size: 72px; }
 .m5 {margin: 5px;}
 .m5t {margin-top: 5px;}
+.m8t {margin-top: 8px;}
 .m5b {margin-bottom: 5px;}
 .m5r {margin-right: 5px;}
 .m10 {margin: 10px;}

src/css/mobile.css

@@ -205,8 +205,8 @@ _:-ms-fullscreen, :root .main {
 .walletHome .wallet-info {
   margin-left: 85px;
   line-height: 110%;
-  float: left;
-  margin-bottom: 20px;
+  height: 60px;
+  overflow: hidden;
 }
 
 .copayers {
@@ -303,9 +303,7 @@ a.missing-copayers {
 }
 
 .sidebar header {
-  width: 100%;
   text-align: center;
-  height: 7rem;
   padding: 1.7rem;
   border-bottom: 1px solid #384B5F;
 }

src/js/controllers/create.js

@@ -29,18 +29,19 @@ angular.module('copayApp.controllers').controller('createController',
     }
 
     var updateRCSelect = function(n) {
+      $scope.totalCopayers = n;
       var maxReq = COPAYER_PAIR_LIMITS[n];
       self.RCValues = lodash.range(1, maxReq + 1);
       $scope.requiredCopayers = Math.min(parseInt(n / 2 + 1), maxReq);
     };
 
-    $scope.$watch('totalCopayers', function(tc) {
-      updateRCSelect(tc);
-    });
-
-    this.TCValues = lodash.range(1, defaults.limits.totalCopayers + 1);
+    this.TCValues = lodash.range(2, defaults.limits.totalCopayers + 1);
     $scope.totalCopayers = defaults.wallet.totalCopayers;
 
+    this.setTotalCopayers = function(tc) {
+      updateRCSelect(tc);
+    };
+
     this.create = function(form) {
       if (form && form.$invalid) {
         this.error = gettext('Please enter the required fields');