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;
|
border-right: 2px dashed #E3E3E3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@media (max-width: 1025px) {
|
||||||
|
.line-dashed-v {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.line-dashed-h {
|
.line-dashed-h {
|
||||||
margin: 1rem 0;
|
margin: 1rem 0;
|
||||||
border-bottom: 2px dashed #E3E3E3;
|
border-bottom: 2px dashed #E3E3E3;
|
||||||
|
@ -224,6 +230,7 @@ hr { margin: 2.25rem 0;}
|
||||||
.size-60 { font-size: 60px; }
|
.size-60 { font-size: 60px; }
|
||||||
.size-72 { font-size: 72px; }
|
.size-72 { font-size: 72px; }
|
||||||
.m10t {margin-top: 10px;}
|
.m10t {margin-top: 10px;}
|
||||||
|
.m10b {margin-bottom: 10px;}
|
||||||
.m10r {margin-right: 10px;}
|
.m10r {margin-right: 10px;}
|
||||||
.m10 {margin: 10px !important;}
|
.m10 {margin: 10px !important;}
|
||||||
.m15 {margin: 15px !important;}
|
.m15 {margin: 15px !important;}
|
||||||
|
@ -301,6 +308,63 @@ hr { margin: 2.25rem 0;}
|
||||||
padding: 2.7px;
|
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 {
|
.tx-copayers {
|
||||||
background: #F8F8F8;
|
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);
|
-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);
|
||||||
|
|
34
index.html
34
index.html
|
@ -211,36 +211,44 @@
|
||||||
</div>
|
</div>
|
||||||
<div ng-show="!loading">
|
<div ng-show="!loading">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="large-6 large-centered columns">
|
<div class="small-12 medium-8 medium-centered large-8 large-centered columns box-setup">
|
||||||
<h3>Create new multisig wallet</h3>
|
<div class="large-6 columns line-dashed-v">
|
||||||
<hr>
|
|
||||||
<h6>Select total number of copayers</h6>
|
<h6>Select total number of copayers</h6>
|
||||||
<select ng-model="totalCopayers"
|
<select ng-model="totalCopayers"
|
||||||
ng-options="totalCopayers as totalCopayers for totalCopayers in TCValues">
|
ng-options="totalCopayers as totalCopayers for totalCopayers in TCValues">
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="large-6 columns">
|
||||||
<div class="row">
|
|
||||||
<div class="large-6 large-centered columns m30v">
|
|
||||||
<h6>Select required number of signatures</h6>
|
<h6>Select required number of signatures</h6>
|
||||||
<select ng-model="requiredCopayers"
|
<select ng-model="requiredCopayers"
|
||||||
ng-options="requiredCopayers as requiredCopayers for requiredCopayers in RCValues">
|
ng-options="requiredCopayers as requiredCopayers for requiredCopayers in RCValues">
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
<div class="large-6 large-centered columns m30v">
|
</div>
|
||||||
|
</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>
|
<h6>Wallet name (optional)</h6>
|
||||||
<input ng-model="walletName" placeholder="My multisig wallet" class="size-24" style="width:100%">
|
<input type="text" class="form-control" ng-model="walletName" placeholder="Enter wallet name">
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="large-6 large-centered columns m30v">
|
<div class="row">
|
||||||
<hr>
|
<div class="large-12 columns line-dashed">
|
||||||
<button class="button primary radius right" type="button"
|
<button class="button primary radius right" type="button"
|
||||||
ng-click="create(totalCopayers, requiredCopayers, walletName)">
|
ng-click="create(totalCopayers, requiredCopayers, walletName)">
|
||||||
Create {{requiredCopayers}}-of-{{totalCopayers}} wallet
|
Create {{requiredCopayers}}-of-{{totalCopayers}} wallet
|
||||||
</button>
|
</button>
|
||||||
<div class="left">
|
<a class="button secondary radius" href="#signin">Go back</a>
|
||||||
<a href="#signin">Go back</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -5,6 +5,11 @@ angular.module('copay.setup').controller('SetupController',
|
||||||
|
|
||||||
$scope.loading = false;
|
$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.totalCopayers = config.wallet.totalCopayers;
|
||||||
$scope.TCValues = [];
|
$scope.TCValues = [];
|
||||||
for (var n = 1; n <= config.limits.totalCopayers; n++)
|
for (var n = 1; n <= config.limits.totalCopayers; n++)
|
||||||
|
|
Loading…
Reference in New Issue