anders/Wallet
1
0
Fork 0
Code Issues Projects Releases Packages Wiki Activity

waiting for copayers page

Browse source
This commit is contained in:
bechi 2014-07-22 17:40:12 -03:00
commit fb4c18147c
4 changed files with 120 additions and 70 deletions
Download patch file Download diff file Expand all files Collapse all files

32
css/main.css
View file

@ -169,6 +169,11 @@ a:hover {
padding: 0.2rem 0.4rem; padding: 0.2rem 0.4rem;
} }
.waiting {
border: 2px solid #fff;
}
.online { .online {
border: 2px solid #1ABC9C; border: 2px solid #1ABC9C;
} }
@ -302,11 +307,7 @@ a:hover {
} }
.button-setup a:hover { .button-setup a:hover {
background: #fff; background: #3C4E60;
}
.button-setup a:hover h1 {
color: #34495E;
} }
.footer-setup { .footer-setup {
@ -319,6 +320,7 @@ a:hover {
.dn {display: none;} .dn {display: none;}
.pr {position: relative;} .pr {position: relative;}
.pa {position: absolute;}
.m0 {margin: 0;} .m0 {margin: 0;}
.db {display: block;} .db {display: block;}
.size-12 { font-size: 12px; } .size-12 { font-size: 12px; }
@ -334,20 +336,25 @@ a:hover {
.m5t {margin-top: 5px;} .m5t {margin-top: 5px;}
.m10t {margin-top: 10px;} .m10t {margin-top: 10px;}
.m5b {margin-bottom: 5px;} .m5b {margin-bottom: 5px;}
.m5r {margin-right: 5px;}
.m10b {margin-bottom: 10px;} .m10b {margin-bottom: 10px;}
.m15b {margin-bottom: 20px;} .m15b {margin-bottom: 20px;}
.m10r {margin-right: 10px;} .m10r {margin-right: 10px;}
.m15l {margin-left: 15px;} .m15l {margin-left: 15px;}
.m15t {margin-top: 15px;}
.m20r {margin-right: 20px;} .m20r {margin-right: 20px;}
.m15r {margin-right: 15px;}
.m20t {margin-top: 20px;} .m20t {margin-top: 20px;}
.m10 {margin: 10px;} .m10 {margin: 10px;}
.m15 {margin: 15px;} .m15 {margin: 15px;}
.m15h {margin: 0 15px;}
.p10t {padding-top: 10px;} .p10t {padding-top: 10px;}
.p0r {padding-right: 0;} .p0r {padding-right: 0;}
.p70r {padding-right: 70px;} .p70r {padding-right: 70px;}
.p70l {padding-left: 70px;} .p70l {padding-left: 70px;}
.p5h {padding: 0 5px;} .p5h {padding: 0 5px;}
.p20h {padding: 0 20px;} .p20h {padding: 0 20px;}
.p15 {padding:15px;}
.p20 {padding:20px;} .p20 {padding:20px;}
.p10 {padding:10px;} .p10 {padding:10px;}
.m30v {margin: 30px 0;} .m30v {margin: 30px 0;}
@ -596,6 +603,8 @@ input[type=number]::-webkit-outer-spin-button {
color: #B4D455; color: #B4D455;
} }
.success {background-color: #1ABC9C !important;}
p.dr-notification-text { p.dr-notification-text {
margin-top: -5px; margin-top: -5px;
font-size: 12px; font-size: 12px;
@ -798,9 +807,9 @@ button[disabled].white:focus,
} }
.video-box { .video-box {
width: 90px; width: 70px;
text-align: center; text-align: center;
margin-right: 10px; margin-right: 20px;
padding-bottom: 5px; padding-bottom: 5px;
float: left; float: left;
} }
@ -856,7 +865,8 @@ input.ng-invalid-match, input.ng-invalid-match:focus {
overflow-y: hidden; overflow-y: hidden;
} }
.text-gray {color: #8597A7;} .text-light {font-weight: 100;}
.text-gray {color: #8597A7 !important;}
.text-primary {color: #1ABC9C;} .text-primary {color: #1ABC9C;}
.text-secondary {color: #3498DB;} .text-secondary {color: #3498DB;}
.text-white {color: #fff;} .text-white {color: #fff;}
@ -886,4 +896,10 @@ a.text-white:hover {color: #ccc;}
top: 40%; top: 40%;
} }
.box-setup .panel {
background-color: #2C3E50;
padding: 0.5rem;
border: 0;
}
/*-----------------------------------------------------------------*/ /*-----------------------------------------------------------------*/

143
views/includes/copayers.html
View file

@ -1,62 +1,95 @@
<div ng-controller="BackupController" ng-if='$root.wallet && !$root.wallet.isReady() && !loading'> <div ng-controller="BackupController" ng-if='$root.wallet && !$root.wallet.isReady() && !loading'>
<div ng-if="!$root.wallet.publicKeyRing.isComplete()"> <div class="row signin">
<h2>Share this secret with your other copayers</h2> <div class="large-4 columns logo-setup text-center">
<div class="panel input"> <img src="../img/logo-negative-beta.svg" alt="Copay">
<p class="ellipsis text-gray">{{$root.wallet.getSecret()}}</p>
</div> </div>
</div> <div class="large-8 columns line-dashed-setup-v">
<h2 ng-if="$root.wallet && $root.wallet.publicKeyRing.isComplete()"> <div class="box-setup oh">
New Wallet Created <div ng-if="!$root.wallet.publicKeyRing.isComplete()">
</h2> <h1 class="text-primary line-sidebar-b">Waiting copayers</h1>
<h3 ng-show="!$root.wallet.publicKeyRing.isComplete()">Waiting Copayers for {{$root.wallet.getName()}}</h3> <h3>Share this secret with your other copayers</h3>
<h4 <div class="panel">
ng-show="$root.wallet.publicKeyRing.isComplete()"> <p class="ellipsis text-gray size-14">{{$root.wallet.getSecret()}}</p>
{{$root.wallet.getName()}} - </div>
{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} </div>
</h4> <h1 class="text-white line-sidebar-b" ng-if="$root.wallet && $root.wallet.publicKeyRing.isComplete()">New Wallet Created </h1>
<span ng-show="$root.wallet && !$root.wallet.publicKeyRing.isComplete()"> <div class="row" ng-show="$root.wallet.publicKeyRing.isComplete()">
{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet <div class="large-6 columns text-left">
</span> <h3>Download Backup</h3>
<div ng-include="'views/includes/video.html'"></div> </div>
<div class="large-6 columns text-right">
<small class="text-gray">
<b>{{$root.wallet.getName()}}</b> :
{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}}
</small>
</div>
</div>
<div class="row">
<div class="large-8 columns text-left">
<h3 ng-show="!$root.wallet.publicKeyRing.isComplete()">Waiting Copayers for {{$root.wallet.getName()}}</h3>
</div>
<div class="large-4 columns text-right">
<small class="text-gray" ng-show="$root.wallet && !$root.wallet.publicKeyRing.isComplete()">
{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet
</small>
</div>
</div>
<div ng-if="!$root.wallet.publicKeyRing.isComplete()"> <div class="box-setup-copayers oh p20">
<i class="fi-bitcoin-circle icon-rotate spinner"></i> Waiting for other copayers to join <div ng-include="'views/includes/video.html'"></div>
</div> <div ng-if="!$root.wallet.publicKeyRing.isComplete()">
<img
class="waiting br100 no-video"
ng-if="!hasVideo(copayer)"
src="./img/satoshi.gif"
alt="{{copayer.nick}}"
width="70">
<p class="size-12 text-white text-light m0">
<i class="fi-loop icon-rotate spinner"></i>
Waiting...
</p>
</div>
</div>
<div ng-if="$root.wallet && $root.wallet.publicKeyRing.isComplete()"> <div class="text-gray left" ng-if="$root.wallet && $root.wallet.publicKeyRing.isComplete()">
<i class="fi-bitcoin-circle icon-rotate spinner"></i> Waiting for other <i class="text-white fi-loop icon-rotate spinner"></i> Waiting for other
copayers to make a Backup copayers to make a Backup
</div> </div>
<a ng-click="dowloadBackup()" <div class="text-right">
ng-show="!$root.wallet.publicKeyRing.isComplete()">Download seed backup</a> <a class="text-primary m20r" ng-click="dowloadBackup()"
<button class="button primary radius right" ng-show="!$root.wallet.publicKeyRing.isComplete()">Download seed backup</a>
ng-click="backup()" <button class="button primary m0"
ng-show="!$root.wallet.publicKeyRing.isBackupReady()" ng-click="backup()"
ng-disabled="!$root.wallet.publicKeyRing.isComplete()"> ng-show="!$root.wallet.publicKeyRing.isBackupReady()"
<span ng-show="$root.wallet.publicKeyRing.isComplete()" > ng-disabled="!$root.wallet.publicKeyRing.isComplete()">
Backup wallet <span ng-show="$root.wallet.publicKeyRing.isComplete()" >
</span> Backup wallet
<span ng-show="!$root.wallet.publicKeyRing.isComplete()" > </span>
<span ng-show="$root.wallet.publicKeyRing.remainingCopayers() > 1"> <span ng-show="!$root.wallet.publicKeyRing.isComplete()" >
{{ $root.wallet.publicKeyRing.remainingCopayers() }} people have <span ng-show="$root.wallet.publicKeyRing.remainingCopayers() > 1">
</span> {{ $root.wallet.publicKeyRing.remainingCopayers() }} people have
<span ng-show="$root.wallet.publicKeyRing.remainingCopayers() == 1"> </span>
One person has <span ng-show="$root.wallet.publicKeyRing.remainingCopayers() == 1">
</span> One person has
yet to join. </span>
</span> yet to join.
</button> </span>
<button class="button primary radius right" </button>
disabled="disabled" <button class="button primary"
ng-show="$root.wallet.publicKeyRing.isBackupReady()"> disabled="disabled"
<span ng-show="$root.wallet.publicKeyRing.remainingBackups() > 1"> ng-show="$root.wallet.publicKeyRing.isBackupReady()">
{{ $root.wallet.publicKeyRing.remainingBackups() }} people have <span ng-show="$root.wallet.publicKeyRing.remainingBackups() > 1">
<span ng-show="$root.wallet.publicKeyRing.remainingBackups() == 1"> {{ $root.wallet.publicKeyRing.remainingBackups() }} people have
One person has <span ng-show="$root.wallet.publicKeyRing.remainingBackups() == 1">
</span> One person has
yet to backup the wallet. </span>
</span> yet to backup the wallet.
</button> </span>
</button>
</div>
</div>
</div>
</div> <!-- end of row -->
</div> </div>

11
views/includes/video.html
View file

@ -7,20 +7,21 @@
ng-src="{{getVideoURL(copayer)}}"></video> ng-src="{{getVideoURL(copayer)}}"></video>
<img <img
class="no-video" class="br100 no-video"
ng-if="!hasVideo(copayer)" ng-if="!hasVideo(copayer)"
ng-class="isConnected(copayer) ? 'online' : 'offline'" ng-class="isConnected(copayer) ? 'online' : 'offline'"
src="./img/satoshi.gif" src="./img/satoshi.gif"
alt="{{copayer}}"> alt="{{copayer}}"
width="70">
<div <div
tooltip="ID: {{copayer.peerId}}" tooltip="ID: {{copayer.peerId}}"
tooltip-placement="bottom"> tooltip-placement="bottom">
<span ng-show="copayer.index == 0">you</span> <small class="text-gray" ng-show="copayer.index == 0"><i class="fi-check m5r"></i>you</small>
<span ng-show="copayer.index > 0">{{copayer.nick}}</span> <small class="text-gray" ng-show="copayer.index > 0"><i class="fi-check m5r"></i>{{copayer.nick}}</small>
</div> </div>
<div class="success label" ng-show="isBackupReady(copayer)"> <div class="success label m10t" ng-show="isBackupReady(copayer)">
Backup ready Backup ready
</div> </div>
</div> </div>

2
views/setup.html
View file

@ -32,7 +32,7 @@
class='size-12'>Tip: Use lower and uppercase, numbers and class='size-12'>Tip: Use lower and uppercase, numbers and
symbols</span>" symbols</span>"
tooltip-trigger="focus" required tooltip-trigger="focus" required
tooltip-placement="bottom"> tooltip-placement="left">
<input type="password" <input type="password"
placeholder="Repeat password" placeholder="Repeat password"