BTCPrivate
/
copay
mirror of https://github.com/BTCPrivate/copay.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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:
Gustavo Cortez 2014-06-23 19:09:26 -03:00
parent 6f25ea8607
commit 6f9a175f26
5 changed files with 144 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
css/main.css
View File

@ -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;
}
}

50
css/mobile.css Normal file
View File

@ -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;
}
}

29
css/tpl-default.css
View File

@ -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
View File

@ -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 ? '' : '&middot; '}}</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&#45;copay" ng&#45;repeat="c in $root.wallet.getRegisteredPeerIds()" class="has&#45;tip" tooltip&#45;popup&#45;delay="1000" tooltip&#45;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>

4
js/controllers/header.js
View File

@ -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);