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 {
|
#main {
|
||||||
overflow:auto;
|
overflow:auto;
|
||||||
padding-bottom: 91px;} /* must be same height as the footer */
|
padding-bottom: 80px;} /* must be same height as the footer */
|
||||||
|
|
||||||
.main-home {
|
.main-home {
|
||||||
padding-bottom: 28px !important;
|
padding-bottom: 28px !important;
|
||||||
|
@ -37,9 +37,8 @@ html, body {height: 100%;}
|
||||||
|
|
||||||
#footer {
|
#footer {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
margin-top: -96px; /* negative value of footer height */
|
margin-top: -80px; /* negative value of footer height */
|
||||||
|
height: 70px;
|
||||||
height: 80px;
|
|
||||||
clear:both;
|
clear:both;
|
||||||
padding: 5px 2rem;
|
padding: 5px 2rem;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
@ -65,7 +64,6 @@ html, body {height: 100%;}
|
||||||
.logo {
|
.logo {
|
||||||
display: block;
|
display: block;
|
||||||
height: 51px;
|
height: 51px;
|
||||||
margin: 0 auto;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-bar-section li:not(.has-form) a:not(.button) {
|
.top-bar-section li:not(.has-form) a:not(.button) {
|
||||||
|
@ -173,12 +171,6 @@ h3 {
|
||||||
border-right: 2px dashed #E3E3E3;
|
border-right: 2px dashed #E3E3E3;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 640px) {
|
|
||||||
.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;
|
||||||
|
@ -238,28 +230,13 @@ input[type=number]::-webkit-outer-spin-button {
|
||||||
line-height: inherit;
|
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 {
|
.new-address {
|
||||||
width: 220px;
|
width: 220px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.transactions button, .transactions .button {
|
||||||
|
padding: 0.5rem 2rem;
|
||||||
|
}
|
||||||
|
|
||||||
hr { margin: 2.25rem 0;}
|
hr { margin: 2.25rem 0;}
|
||||||
|
|
||||||
|
@ -406,10 +383,13 @@ hr { margin: 2.25rem 0;}
|
||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
border: 3px solid #eee;
|
border: 3px solid #eee;
|
||||||
|
opacity: 0.3;
|
||||||
|
border-radius: 0.3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
.box-setup-copay-required {
|
.box-setup-copay-required {
|
||||||
border: 3px solid green;
|
border: 3px solid #1ABC9C;
|
||||||
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tx-copayers {
|
.tx-copayers {
|
||||||
|
@ -655,52 +635,3 @@ ul.pagination li.current a:hover, ul.pagination li.current a:focus {
|
||||||
color:white;
|
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;
|
border-radius: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.transactions button, .transactions .button {
|
|
||||||
padding: 0.5rem 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
button.radius, .button.radius {
|
button.radius, .button.radius {
|
||||||
-webkit-border-radius: 5px;
|
-webkit-border-radius: 5px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
|
@ -325,3 +321,28 @@ input.ng-invalid-wallet-secret {
|
||||||
background: #fff;
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
59
index.html
59
index.html
|
@ -9,6 +9,7 @@
|
||||||
<link rel="stylesheet" href="css/foundation-icons.css">
|
<link rel="stylesheet" href="css/foundation-icons.css">
|
||||||
<link rel="stylesheet" href="lib/angular/angular-csp.css">
|
<link rel="stylesheet" href="lib/angular/angular-csp.css">
|
||||||
<link rel="stylesheet" href="css/main.css">
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
<link rel="stylesheet" href="css/mobile.css">
|
||||||
<link rel="shortcut icon" href="img/favicon.ico">
|
<link rel="shortcut icon" href="img/favicon.ico">
|
||||||
</head>
|
</head>
|
||||||
<body ng-cloak class="ng-cloak">
|
<body ng-cloak class="ng-cloak">
|
||||||
|
@ -16,10 +17,10 @@
|
||||||
<div data-ng-init="init()" data-ng-controller="HeaderController">
|
<div data-ng-init="init()" data-ng-controller="HeaderController">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="header-content">
|
<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>
|
<span class="logo"></span>
|
||||||
</div>
|
</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">
|
<div class="large-4 medium-4 columns line-dashed-v">
|
||||||
<a href="#/addresses" class="has-tip" tooltip-placement="bottom" tooltip="ID: {{$root.wallet.id}}">
|
<a href="#/addresses" class="has-tip" tooltip-placement="bottom" tooltip="ID: {{$root.wallet.id}}">
|
||||||
<strong><span>{{$root.wallet.getName()}}</span></strong>
|
<strong><span>{{$root.wallet.getName()}}</span></strong>
|
||||||
|
@ -31,26 +32,26 @@
|
||||||
ng-click="signout()"><i class="fi-power"></i></a>
|
ng-click="signout()"><i class="fi-power"></i></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="large-4 medium-4 columns line-dashed-v">
|
<div class="large-4 medium-4 columns line-dashed-v">
|
||||||
Balance<br>
|
Balance<br class="hide-for-small">
|
||||||
<span ng-if="$root.updatingBalance">
|
<span ng-if="$root.updatingBalance">
|
||||||
<i class="fi-bitcoin-circle icon-rotate spinner"></i>
|
<i class="fi-bitcoin-circle icon-rotate spinner"></i>
|
||||||
</span>
|
</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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="large-4 medium-4 columns">
|
<div class="large-4 medium-4 columns">
|
||||||
Available to Spend<br>
|
Available to Spend<br class="hide-for-small">
|
||||||
<span ng-if="$root.updatingBalance">
|
<span ng-if="$root.updatingBalance">
|
||||||
<i class="fi-bitcoin-circle icon-rotate spinner"></i>
|
<i class="fi-bitcoin-circle icon-rotate spinner"></i>
|
||||||
</span>
|
</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>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</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">
|
<ul class="title-area">
|
||||||
<li class="name"></li>
|
<li class="name"></li>
|
||||||
<li class="toggle-topbar menu-icon">
|
<li class="toggle-topbar menu-icon">
|
||||||
|
@ -99,9 +100,9 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
|
||||||
<div ng-if='$root.wallet && !$root.wallet.publicKeyRing.isComplete() && !loading'>
|
<div ng-if='$root.wallet && !$root.wallet.publicKeyRing.isComplete() && !loading'>
|
||||||
<div class="medium-12 small-12 columns">
|
<div class="row">
|
||||||
|
<div class="large-12 medium-12 small-12 columns">
|
||||||
<div class="alert-box secondary radius" data-alert>
|
<div class="alert-box secondary radius" data-alert>
|
||||||
<i class="fi-info"></i>
|
<i class="fi-info"></i>
|
||||||
Not all copayers have joined your wallet yet.
|
Not all copayers have joined your wallet yet.
|
||||||
|
@ -114,8 +115,10 @@
|
||||||
yet to join.
|
yet to join.
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="medium-12 small-12 columns ">
|
<div class="row">
|
||||||
|
<div class="large-12 medium-12 small-12 columns ">
|
||||||
<div class="panel radius m30v">
|
<div class="panel radius m30v">
|
||||||
<h3 class="m15b">Share this secret with your other copayers
|
<h3 class="m15b">Share this secret with your other copayers
|
||||||
<small> for them to join your wallet</small>
|
<small> for them to join your wallet</small>
|
||||||
|
@ -134,18 +137,27 @@
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div notifications="middle right"></div>
|
<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 class="large-12 columns" ng-view></div>
|
||||||
</div>
|
</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}}">
|
<link rel="stylesheet" ng-href="{{theme}}">
|
||||||
<div ng-show="!$root.wallet">
|
<div ng-show="!$root.wallet">
|
||||||
<div class="large-12 columns text-left">
|
<div class="large-12 columns text-left">
|
||||||
|
@ -153,8 +165,20 @@
|
||||||
<small>v{{version}}</small>
|
<small>v{{version}}</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p10t" ng-show="$root.wallet">
|
<div ng-show="$root.wallet && !$root.wallet.publicKeyRing.isComplete()">
|
||||||
<div class="large-3 medium-3 hide-for-small columns">
|
<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>
|
<div>
|
||||||
<strong>{{$root.wallet.getName()}}</strong>
|
<strong>{{$root.wallet.getName()}}</strong>
|
||||||
</div>
|
</div>
|
||||||
|
@ -171,8 +195,7 @@
|
||||||
<a class="size-12" ng-click="change_theme(th)" ng-repeat="th in themes">{{th}} {{$last ? '' : '· '}}</a>
|
<a class="size-12" ng-click="change_theme(th)" ng-repeat="th in themes">{{th}} {{$last ? '' : '· '}}</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="large-9 medium-9 small-9 columns">
|
<div class="large-9 medium-8 small-12 columns">
|
||||||
<a href="#/addresses" > </a>
|
|
||||||
<!-- <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()" class="has-tip" tooltip-popup-delay="1000" tooltip-placement="top" tooltip="{{c.nick}}"> -->
|
||||||
<div class="bottom-copay" ng-repeat="c in $root.wallet.getRegisteredPeerIds()">
|
<div class="bottom-copay" ng-repeat="c in $root.wallet.getRegisteredPeerIds()">
|
||||||
<video ng-if="$root.videoInfo[c.peerId]"
|
<video ng-if="$root.videoInfo[c.peerId]"
|
||||||
|
@ -312,7 +335,7 @@
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="small-12 medium-6 large-6 columns">
|
<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"
|
<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>
|
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>
|
</label>
|
||||||
|
@ -681,7 +704,7 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="large-12 medium-6 columns">
|
<div class="large-12 columns">
|
||||||
<div class="row collapse">
|
<div class="row collapse">
|
||||||
<label for="comment">Note
|
<label for="comment">Note
|
||||||
<small ng-hide="!sendForm.comment.$pristine">optional</small>
|
<small ng-hide="!sendForm.comment.$pristine">optional</small>
|
||||||
|
|
|
@ -21,6 +21,10 @@ angular.module('copayApp.controllers').controller('HeaderController',
|
||||||
'link': '#/backup'
|
'link': '#/backup'
|
||||||
}];
|
}];
|
||||||
|
|
||||||
|
$scope.getNumber = function(num) {
|
||||||
|
return new Array(num);
|
||||||
|
}
|
||||||
|
|
||||||
$http.get('https://api.github.com/repos/bitpay/copay/tags').success(function(data){
|
$http.get('https://api.github.com/repos/bitpay/copay/tags').success(function(data){
|
||||||
var toInt = function (s) { return parseInt(s); };
|
var toInt = function (s) { return parseInt(s); };
|
||||||
var latestVersion = data[0].name.replace('v', '').split('.').map(toInt);
|
var latestVersion = data[0].name.replace('v', '').split('.').map(toInt);
|
||||||
|
|
Loading…
Reference in New Issue