mirror of https://github.com/BTCPrivate/copay.git
Intermediate screen at wallet creation. Another fixes.
* Intermediate screen waiting for copayers. * Fix layout for small devices. * Improve tooltip styles. * Fixed size of comment input.
This commit is contained in:
parent
6f25ea8607
commit
6f9a175f26
89
css/main.css
89
css/main.css
|
@ -15,7 +15,7 @@ html, body {height: 100%;}
|
|||
|
||||
#main {
|
||||
overflow:auto;
|
||||
padding-bottom: 91px;} /* must be same height as the footer */
|
||||
padding-bottom: 80px;} /* must be same height as the footer */
|
||||
|
||||
.main-home {
|
||||
padding-bottom: 28px !important;
|
||||
|
@ -37,9 +37,8 @@ html, body {height: 100%;}
|
|||
|
||||
#footer {
|
||||
position: fixed;
|
||||
margin-top: -96px; /* negative value of footer height */
|
||||
|
||||
height: 80px;
|
||||
margin-top: -80px; /* negative value of footer height */
|
||||
height: 70px;
|
||||
clear:both;
|
||||
padding: 5px 2rem;
|
||||
bottom: 0;
|
||||
|
@ -65,7 +64,6 @@ html, body {height: 100%;}
|
|||
.logo {
|
||||
display: block;
|
||||
height: 51px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.top-bar-section li:not(.has-form) a:not(.button) {
|
||||
|
@ -173,12 +171,6 @@ h3 {
|
|||
border-right: 2px dashed #E3E3E3;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.line-dashed-v {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.line-dashed-h {
|
||||
margin: 1rem 0;
|
||||
border-bottom: 2px dashed #E3E3E3;
|
||||
|
@ -238,28 +230,13 @@ input[type=number]::-webkit-outer-spin-button {
|
|||
line-height: inherit;
|
||||
}
|
||||
|
||||
@media (max-width: 641px) {
|
||||
.hide_menu {
|
||||
display: none;
|
||||
}
|
||||
.show_menu {
|
||||
display: block;
|
||||
}
|
||||
.top-bar-section ul li {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 750px) {
|
||||
.top-bar-section ul li>a {
|
||||
font-size: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
.new-address {
|
||||
width: 220px;
|
||||
}
|
||||
|
||||
.transactions button, .transactions .button {
|
||||
padding: 0.5rem 2rem;
|
||||
}
|
||||
|
||||
hr { margin: 2.25rem 0;}
|
||||
|
||||
|
@ -406,10 +383,13 @@ hr { margin: 2.25rem 0;}
|
|||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
border: 3px solid #eee;
|
||||
opacity: 0.3;
|
||||
border-radius: 0.3rem;
|
||||
}
|
||||
|
||||
.box-setup-copay-required {
|
||||
border: 3px solid green;
|
||||
border: 3px solid #1ABC9C;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.tx-copayers {
|
||||
|
@ -655,52 +635,3 @@ ul.pagination li.current a:hover, ul.pagination li.current a:focus {
|
|||
color:white;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 40em) {
|
||||
|
||||
#main, .header-content {
|
||||
font-size: 80%;
|
||||
line-height: 140%;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
background: #1ABC9C;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
padding: 0.3rem 0rem 1rem 0.4rem;
|
||||
}
|
||||
|
||||
.logo {
|
||||
background-size: 90px 44px !important;
|
||||
float: left;
|
||||
margin-top: 0.7rem;
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.header-content .small-9 {
|
||||
text-align: right !important;
|
||||
}
|
||||
|
||||
.header-content .line-dashed-v {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.box-backup {
|
||||
margin: 0.6rem 0;
|
||||
}
|
||||
|
||||
#footer {
|
||||
font-size: 80%;
|
||||
padding: 0.2rem 0.5rem;
|
||||
}
|
||||
|
||||
.box-status {
|
||||
height: 71px;
|
||||
}
|
||||
|
||||
.box-copayers figure {
|
||||
height: 71px;
|
||||
width: 71px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -0,0 +1,50 @@
|
|||
@media (max-width: 1024px) {
|
||||
.logo {
|
||||
background-size: 90px 44px !important;
|
||||
height: 41px;
|
||||
}
|
||||
|
||||
.header-content {
|
||||
font-size: 70%;
|
||||
line-height: 120%;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.line-dashed-v {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
.top-bar-section ul li>a {
|
||||
font-size: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.hide_menu {
|
||||
display: none;
|
||||
}
|
||||
.show_menu {
|
||||
display: block;
|
||||
}
|
||||
.top-bar-section ul li {
|
||||
width: 100%;
|
||||
}
|
||||
.top-bar-section ul li>a {
|
||||
padding: 0 0 0 15px;
|
||||
}
|
||||
|
||||
.top-bar {
|
||||
background: #1ABC9C;
|
||||
}
|
||||
|
||||
.header-content .small-7 {
|
||||
text-align: right !important;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.box-copayers figure {
|
||||
height: 71px;
|
||||
width: 71px;
|
||||
}
|
||||
|
||||
}
|
|
@ -175,10 +175,6 @@ small.has-error {
|
|||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.transactions button, .transactions .button {
|
||||
padding: 0.5rem 2rem;
|
||||
}
|
||||
|
||||
button.radius, .button.radius {
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
|
@ -325,3 +321,28 @@ input.ng-invalid-wallet-secret {
|
|||
background: #fff;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
background: #16A085;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
font-size: 12px;
|
||||
padding: 3px 5px;
|
||||
-webkit-border-radius: 3px;
|
||||
-moz-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
border: 1px solid #16A085;
|
||||
}
|
||||
|
||||
.tooltip>.nub {
|
||||
border-color:transparent transparent #16A085 transparent;
|
||||
}
|
||||
.tooltip.tip-top>.nub {
|
||||
border-color:#16A085 transparent transparent transparent;
|
||||
}
|
||||
.tooltip.tip-right>.nub {
|
||||
border-color:transparent #16A085 transparent transparent;
|
||||
}
|
||||
.tooltip.tip-left>.nub {
|
||||
border-color:transparent transparent transparent #16A085;
|
||||
}
|
||||
|
||||
|
|
87
index.html
87
index.html
|
@ -9,6 +9,7 @@
|
|||
<link rel="stylesheet" href="css/foundation-icons.css">
|
||||
<link rel="stylesheet" href="lib/angular/angular-csp.css">
|
||||
<link rel="stylesheet" href="css/main.css">
|
||||
<link rel="stylesheet" href="css/mobile.css">
|
||||
<link rel="shortcut icon" href="img/favicon.ico">
|
||||
</head>
|
||||
<body ng-cloak class="ng-cloak">
|
||||
|
@ -16,10 +17,10 @@
|
|||
<div data-ng-init="init()" data-ng-controller="HeaderController">
|
||||
<div class="header">
|
||||
<div class="header-content">
|
||||
<div class="large-3 medium-3 small-3 columns">
|
||||
<div class="large-3 medium-3 small-5 columns">
|
||||
<span class="logo"></span>
|
||||
</div>
|
||||
<div class="large-9 medium-9 small-9 columns text-center p10t" ng-show="$root.wallet">
|
||||
<div class="large-9 medium-9 small-7 columns text-center p10t" ng-show="$root.wallet && $root.wallet.publicKeyRing.isComplete()">
|
||||
<div class="large-4 medium-4 columns line-dashed-v">
|
||||
<a href="#/addresses" class="has-tip" tooltip-placement="bottom" tooltip="ID: {{$root.wallet.id}}">
|
||||
<strong><span>{{$root.wallet.getName()}}</span></strong>
|
||||
|
@ -31,26 +32,26 @@
|
|||
ng-click="signout()"><i class="fi-power"></i></a>
|
||||
</div>
|
||||
<div class="large-4 medium-4 columns line-dashed-v">
|
||||
Balance<br>
|
||||
Balance<br class="hide-for-small">
|
||||
<span ng-if="$root.updatingBalance">
|
||||
<i class="fi-bitcoin-circle icon-rotate spinner"></i>
|
||||
</span>
|
||||
<span ng-if="!$root.updatingBalance" tooltip="{{totalBalanceBTC}} BTC" tooltip-trigger="mouseenter" tooltip-placement="bottom">{{totalBalance || 0 |number}} {{$root.unitName}}
|
||||
<span ng-if="!$root.updatingBalance" data-options="disable_for_touch:true" tooltip="{{totalBalanceBTC}} BTC" tooltip-trigger="mouseenter" tooltip-placement="bottom">{{totalBalance || 0 |number}} {{$root.unitName}}
|
||||
</span>
|
||||
</div>
|
||||
<div class="large-4 medium-4 columns">
|
||||
Available to Spend<br>
|
||||
Available to Spend<br class="hide-for-small">
|
||||
<span ng-if="$root.updatingBalance">
|
||||
<i class="fi-bitcoin-circle icon-rotate spinner"></i>
|
||||
</span>
|
||||
<span ng-show="!$root.updatingBalance" tooltip="{{availableBalanceBTC}} BTC" tooltip-trigger="mouseenter" tooltip-placement="bottom">{{availableBalance || 0|number}} {{$root.unitName}}
|
||||
<span ng-show="!$root.updatingBalance" data-options="disable_for_touch:true" tooltip="{{availableBalanceBTC}} BTC" tooltip-trigger="mouseenter" tooltip-placement="bottom">{{availableBalance || 0|number}} {{$root.unitName}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="top-bar" data-topbar ng-show="$root.wallet">
|
||||
<nav class="top-bar" data-topbar ng-show="$root.wallet && $root.wallet.publicKeyRing.isComplete()">
|
||||
<ul class="title-area">
|
||||
<li class="name"></li>
|
||||
<li class="toggle-topbar menu-icon">
|
||||
|
@ -99,9 +100,9 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div ng-if='$root.wallet && !$root.wallet.publicKeyRing.isComplete() && !loading'>
|
||||
<div class="medium-12 small-12 columns">
|
||||
<div ng-if='$root.wallet && !$root.wallet.publicKeyRing.isComplete() && !loading'>
|
||||
<div class="row">
|
||||
<div class="large-12 medium-12 small-12 columns">
|
||||
<div class="alert-box secondary radius" data-alert>
|
||||
<i class="fi-info"></i>
|
||||
Not all copayers have joined your wallet yet.
|
||||
|
@ -114,25 +115,36 @@
|
|||
yet to join.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="medium-12 small-12 columns ">
|
||||
<div class="panel radius m30v">
|
||||
<h3 class="m15b">Share this secret with your other copayers
|
||||
<small> for them to join your wallet</small>
|
||||
</h3>
|
||||
<div class="row">
|
||||
<div class="large-9 medium-12 small-12 columns line-dashed-v text-gray">
|
||||
<div class="panel input">
|
||||
<p class="ellipsis text-gray">{{$root.wallet.getSecret()}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-3 columns hide-for-medium hide-for-small" ng-show="$root.wallet">
|
||||
<h5 class="m0">{{$root.wallet.getName()}}</h5>
|
||||
<p class="text-gray">{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet</p>
|
||||
<div class="row">
|
||||
<div class="large-12 medium-12 small-12 columns ">
|
||||
<div class="panel radius m30v">
|
||||
<h3 class="m15b">Share this secret with your other copayers
|
||||
<small> for them to join your wallet</small>
|
||||
</h3>
|
||||
<div class="row">
|
||||
<div class="large-9 medium-12 small-12 columns line-dashed-v text-gray">
|
||||
<div class="panel input">
|
||||
<p class="ellipsis text-gray">{{$root.wallet.getSecret()}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-3 columns hide-for-medium hide-for-small" ng-show="$root.wallet">
|
||||
<h5 class="m0">{{$root.wallet.getName()}}</h5>
|
||||
<p class="text-gray">{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}} wallet</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="large-12 medium-12 small-12 columns ">
|
||||
<div class="box-setup-copayers">
|
||||
<div class="box-setup-copayers-fix">
|
||||
<img class="box-setup-copay" ng-repeat="i in getNumber($root.wallet.totalCopayers) track by $index" src="./img/satoshi.gif" alt="Copayer {{$index+1}}-{{totalCopayers}}" ng-class="{'box-setup-copay-required': ($index+1) <= $root.wallet.publicKeyRing.registeredCopayers()}">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
@ -140,12 +152,12 @@
|
|||
|
||||
<div notifications="middle right"></div>
|
||||
|
||||
<div id="main" class="row" ng-class="{'main-home': !$root.wallet}">
|
||||
<div id="main" class="row" ng-class="{'main-home': !$root.wallet || !$root.wallet.publicKeyRing.isComplete()}">
|
||||
<div class="large-12 columns" ng-view></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-ng-controller="FooterController" ng-class="{'footer-home': !$root.wallet}">
|
||||
<div id="footer" data-ng-controller="FooterController" ng-class="{'footer-home': !$root.wallet || !$root.wallet.publicKeyRing.isComplete()}">
|
||||
<link rel="stylesheet" ng-href="{{theme}}">
|
||||
<div ng-show="!$root.wallet">
|
||||
<div class="large-12 columns text-left">
|
||||
|
@ -153,8 +165,20 @@
|
|||
<small>v{{version}}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p10t" ng-show="$root.wallet">
|
||||
<div class="large-3 medium-3 hide-for-small columns">
|
||||
<div ng-show="$root.wallet && !$root.wallet.publicKeyRing.isComplete()">
|
||||
<div class="large-6 medium-6 small-6 columns">
|
||||
<strong>{{$root.wallet.getName()}}</strong>
|
||||
{{$root.wallet.requiredCopayers}}-of-{{$root.wallet.totalCopayers}}
|
||||
<small ng-if="$root.wallet.getNetworkName()=='livenet'">[LIVENET]</small>
|
||||
<small ng-if="$root.wallet.getNetworkName()=='testnet'">[TESTNET]</small>
|
||||
</div>
|
||||
<div class="large-6 medium-6 small-6 columns text-right">
|
||||
Copay
|
||||
<small>v{{version}}</small>
|
||||
</div>
|
||||
</div>
|
||||
<div ng-show="$root.wallet && $root.wallet.publicKeyRing.isComplete()">
|
||||
<div class="large-3 medium-4 hide-for-small columns">
|
||||
<div>
|
||||
<strong>{{$root.wallet.getName()}}</strong>
|
||||
</div>
|
||||
|
@ -171,8 +195,7 @@
|
|||
<a class="size-12" ng-click="change_theme(th)" ng-repeat="th in themes">{{th}} {{$last ? '' : '· '}}</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="large-9 medium-9 small-9 columns">
|
||||
<a href="#/addresses" > </a>
|
||||
<div class="large-9 medium-8 small-12 columns">
|
||||
<!-- <div class="bottom-copay" ng-repeat="c in $root.wallet.getRegisteredPeerIds()" class="has-tip" tooltip-popup-delay="1000" tooltip-placement="top" tooltip="{{c.nick}}"> -->
|
||||
<div class="bottom-copay" ng-repeat="c in $root.wallet.getRegisteredPeerIds()">
|
||||
<video ng-if="$root.videoInfo[c.peerId]"
|
||||
|
@ -312,7 +335,7 @@
|
|||
</label>
|
||||
</div>
|
||||
<div class="small-12 medium-6 large-6 columns">
|
||||
<label>Your Wallet Password <small class="has-tip" tooltip="doesn't need to be shared">Required</small>
|
||||
<label>Your Wallet Password <small data-options="disable_for_touch:true" class="has-tip" tooltip="doesn't need to be shared">Required</small>
|
||||
<input type="password" placeholder="Choose your password" class="form-control"
|
||||
ng-model="$parent.walletPassword" check-strength="passwordStrength" tooltip-html-unsafe="Password strength: {{passwordStrength}}<br/><small>Tip: Use lower and uppercase, numbers and symbols</small>" tooltip-trigger="focus" required>
|
||||
</label>
|
||||
|
@ -681,7 +704,7 @@
|
|||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="large-12 medium-6 columns">
|
||||
<div class="large-12 columns">
|
||||
<div class="row collapse">
|
||||
<label for="comment">Note
|
||||
<small ng-hide="!sendForm.comment.$pristine">optional</small>
|
||||
|
|
|
@ -21,6 +21,10 @@ angular.module('copayApp.controllers').controller('HeaderController',
|
|||
'link': '#/backup'
|
||||
}];
|
||||
|
||||
$scope.getNumber = function(num) {
|
||||
return new Array(num);
|
||||
}
|
||||
|
||||
$http.get('https://api.github.com/repos/bitpay/copay/tags').success(function(data){
|
||||
var toInt = function (s) { return parseInt(s); };
|
||||
var latestVersion = data[0].name.replace('v', '').split('.').map(toInt);
|
||||
|
|
Loading…
Reference in New Issue