mirror of https://github.com/BTCPrivate/copay.git
Merge pull request #241 from cmgustavo/feature/06-new-design
Setup page based on new design #228
This commit is contained in:
commit
de7a7d99a0
64
css/main.css
64
css/main.css
|
@ -149,6 +149,12 @@ h3 {
|
|||
border-right: 2px dashed #E3E3E3;
|
||||
}
|
||||
|
||||
@media (max-width: 1025px) {
|
||||
.line-dashed-v {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.line-dashed-h {
|
||||
margin: 1rem 0;
|
||||
border-bottom: 2px dashed #E3E3E3;
|
||||
|
@ -224,6 +230,7 @@ hr { margin: 2.25rem 0;}
|
|||
.size-60 { font-size: 60px; }
|
||||
.size-72 { font-size: 72px; }
|
||||
.m10t {margin-top: 10px;}
|
||||
.m10b {margin-bottom: 10px;}
|
||||
.m10r {margin-right: 10px;}
|
||||
.m10 {margin: 10px !important;}
|
||||
.m15 {margin: 15px !important;}
|
||||
|
@ -301,6 +308,63 @@ hr { margin: 2.25rem 0;}
|
|||
padding: 2.7px;
|
||||
}
|
||||
|
||||
.box-setup {
|
||||
padding: 20px 30px;
|
||||
border: 1px solid #eee;
|
||||
background: #fff;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.box-setup-copayers {
|
||||
position: relative;
|
||||
background: #ffffff;
|
||||
border: 2px solid #eee;
|
||||
}
|
||||
|
||||
.box-setup-copayers:after, .box-setup-copayers:before {
|
||||
bottom: 100%;
|
||||
left: 50%;
|
||||
border: solid transparent;
|
||||
content: " ";
|
||||
height: 0;
|
||||
width: 0;
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.box-setup-copayers:after {
|
||||
border-color: rgba(255, 255, 255, 0);
|
||||
border-bottom-color: #ffffff;
|
||||
border-width: 30px;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.box-setup-copayers:before {
|
||||
border-color: rgba(238, 238, 238, 0);
|
||||
border-bottom-color: #eee;
|
||||
border-width: 33px;
|
||||
margin-left: -33px;
|
||||
}
|
||||
|
||||
.box-setup-copayers-fix {
|
||||
overflow: hidden;
|
||||
padding: 10px 10px 0 10px;
|
||||
}
|
||||
|
||||
.box-setup-copay {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
float: left;
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 3px solid #eee;
|
||||
}
|
||||
|
||||
.box-setup-copay-required {
|
||||
border: 3px solid green;
|
||||
}
|
||||
|
||||
.tx-copayers {
|
||||
background: #F8F8F8;
|
||||
-moz-box-shadow: inset 0px 0px 4px 0px rgba(0,0,0,0.05), inset 0px 1px 1px 0px rgba(0,0,0,0.05);
|
||||
|
|
38
index.html
38
index.html
|
@ -211,36 +211,44 @@
|
|||
</div>
|
||||
<div ng-show="!loading">
|
||||
<div class="row">
|
||||
<div class="large-6 large-centered columns">
|
||||
<h3>Create new multisig wallet</h3>
|
||||
<hr>
|
||||
<div class="small-12 medium-8 medium-centered large-8 large-centered columns box-setup">
|
||||
<div class="large-6 columns line-dashed-v">
|
||||
<h6>Select total number of copayers</h6>
|
||||
<select ng-model="totalCopayers"
|
||||
ng-options="totalCopayers as totalCopayers for totalCopayers in TCValues">
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="large-6 large-centered columns m30v">
|
||||
<div class="large-6 columns">
|
||||
<h6>Select required number of signatures</h6>
|
||||
<select ng-model="requiredCopayers"
|
||||
ng-options="requiredCopayers as requiredCopayers for requiredCopayers in RCValues">
|
||||
</select>
|
||||
</div>
|
||||
<div class="large-6 large-centered columns m30v">
|
||||
<h6>Wallet name (optional)</h6>
|
||||
<input ng-model="walletName" placeholder="My multisig wallet" class="size-24" style="width:100%">
|
||||
</div>
|
||||
|
||||
<div class="large-6 large-centered columns m30v">
|
||||
<hr>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="small-12 medium-6 medium-centered large-6 large-centered columns m30v">
|
||||
<div class="box-setup-copayers">
|
||||
<div class="box-setup-copayers-fix">
|
||||
<img class="box-setup-copay" ng-repeat="i in getNumber(totalCopayers) track by $index" src="./img/satoshi.gif" alt="Copayer {{$index+1}}-{{totalCopayers}}" ng-class="{'box-setup-copay-required': ($index+1) <= requiredCopayers}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="small-12 medium-6 medium-centered large-6 large-centered columns m30v">
|
||||
<h6>Wallet name (optional)</h6>
|
||||
<input type="text" class="form-control" ng-model="walletName" placeholder="Enter wallet name">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="large-12 columns line-dashed">
|
||||
<button class="button primary radius right" type="button"
|
||||
ng-click="create(totalCopayers, requiredCopayers, walletName)">
|
||||
Create {{requiredCopayers}}-of-{{totalCopayers}} wallet
|
||||
</button>
|
||||
<div class="left">
|
||||
<a href="#signin">Go back</a>
|
||||
</div>
|
||||
<a class="button secondary radius" href="#signin">Go back</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -5,6 +5,11 @@ angular.module('copay.setup').controller('SetupController',
|
|||
|
||||
$scope.loading = false;
|
||||
|
||||
// ng-repeat defined number of times instead of repeating over array?
|
||||
$scope.getNumber = function(num) {
|
||||
return new Array(num);
|
||||
}
|
||||
|
||||
$scope.totalCopayers = config.wallet.totalCopayers;
|
||||
$scope.TCValues = [];
|
||||
for (var n = 1; n <= config.limits.totalCopayers; n++)
|
||||
|
|
Loading…
Reference in New Issue