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

CSS Style themes support in Copay

Browse source
This commit is contained in:
Gustavo Cortez 2014-04-25 17:22:51 -03:00
commit 08e4eaf5e0
9 changed files with 246 additions and 137 deletions
Download patch file Download diff file Expand all files Collapse all files

1
config.template.js
View file

@ -36,6 +36,7 @@ var config = {
port: 3001 port: 3001
}, },
verbose: 1, verbose: 1,
theme: ['default', 'clean']
}; };
var log = function () { var log = function () {

110
css/main.css
View file

@ -25,58 +25,63 @@
* { * {
font-family: 'Ubuntu', Helvetica, sans-serif !important; font-family: 'Ubuntu', Helvetica, sans-serif !important;
margin:0;
padding:0;
} }
body { html, body {height: 100%;}
background: #F5F5F5;
#wrap {min-height: 100%;}
#main {overflow:auto;
padding-bottom: 20px;} /* must be same height as the footer */
#footer {position: relative;
margin-top: -20px; /* negative value of footer height */
height: 20px;
clear:both;
}
.logo {
display: block;
width: 130px;
height: 51px;
} }
.top-bar-section li:not(.has-form) a:not(.button) { .top-bar-section li:not(.has-form) a:not(.button) {
line-height: 60px; line-height: 60px;
background: #FAE448;
} }
.top-bar-section li.active:not(.has-form) a:not(.button) { .top-bar-section li.active:not(.has-form) a:not(.button) {
line-height: 60px; line-height: 60px;
background: #f5f5f5;
color: #111;
font-weight: 700; font-weight: 700;
} }
.top-bar-section li.active:not(.has-form) a:not(.button):hover, .top-bar-section li:not(.has-form) a:not(.button):hover {
background: #111;
color: white;
}
.top-bar-section ul li>a { .top-bar-section ul li>a {
color: #111;
text-transform: uppercase; text-transform: uppercase;
font-weight: 100; font-weight: 100;
font-size: 0.9rem; font-size: 0.9rem;
} }
.top-bar-section ul li {
width: 20%;
}
.header { .header {
background: #111;
color: white;
margin-bottom: 30px; margin-bottom: 30px;
} }
.header-content { .header-content {
padding: 1.5rem 3rem 1.5rem 0; padding: 1.5rem;
overflow: hidden; overflow: hidden;
} }
.header h1, h5 {
color: #fff;
}
.top-bar { .top-bar {
height: auto; height: auto;
width: 100%;
} }
.panel { .panel {
color: #333;
background: #FFFFFF;
padding: 0.7rem 1rem; padding: 0.7rem 1rem;
border:0; border:0;
} }
@ -85,6 +90,14 @@ body {
margin: 0; margin: 0;
} }
.connection-info {
margin-bottom: 10px;
}
.balance-info {
font-size: 14px;
}
/*.panel:hover { /*.panel:hover {
background: #efefef; background: #efefef;
color: #111; color: #111;
@ -95,12 +108,10 @@ body {
} }
.transactions .panel { .transactions .panel {
background: #f5f5f5;
border: 1px solid #eee; border: 1px solid #eee;
} }
.transactions .panel.pending { .transactions .panel.pending {
background-color: #fff;
padding: 1rem; padding: 1rem;
} }
@ -117,10 +128,6 @@ body {
font-size: 12px; font-size: 12px;
} }
.btransactions .panel {
background: #fff;
}
.btransactions .txheader { .btransactions .txheader {
font-size: 12px; font-size: 12px;
margin-bottom: 10px; margin-bottom: 10px;
@ -140,10 +147,6 @@ body {
border: none; border: none;
} }
.addresses .panel:hover {
background: #efefef;
}
.box-backup { .box-backup {
margin: 2rem 0; margin: 2rem 0;
padding: 2rem 1rem; padding: 2rem 1rem;
@ -151,7 +154,6 @@ body {
a.box-backup { a.box-backup {
display: block; display: block;
color: #111;
} }
.box-backup i { .box-backup i {
@ -184,16 +186,6 @@ span.panel-res {
border-radius: 1rem; border-radius: 1rem;
} }
.panel-sign {
color: #111;
background: #FAE448;
}
.panel-ignore {
color: #fff;
background: #111;
}
.pending button { .pending button {
margin: 0; margin: 0;
} }
@ -203,28 +195,11 @@ span.panel-res {
margin: 0.5rem 0 1rem; margin: 0.5rem 0 1rem;
} }
.share-wallet.panel {
background-color: #111;
color: #FBE500;
}
.alert-box.warning, .alert-box.error {
background-color: #C0392A;
border-color: #C0392A;
color: #fff;
}
.text-warning {
color:#C0392A;
}
small.is-valid { small.is-valid {
color: #04B404;
font-weight: bold; font-weight: bold;
} }
small.has-error { small.has-error {
color: #f04124;
font-weight: bold; font-weight: bold;
} }
@ -235,24 +210,23 @@ small.has-error {
.show_menu { .show_menu {
display: block; display: block;
} }
.top-bar-section ul li {
width: 100%;
}
}
@media (max-width: 750px) {
.top-bar-section ul li>a {
font-size: 70%;
}
} }
tr { background: none !important;}
table tr th, table tr td { padding: 0.5625rem 0rem; }
hr { margin: 2.25rem 0;} hr { margin: 2.25rem 0;}
table { margin-bottom: 0.25rem;}
button.primary { background-color: #111; }
button.secondary { background-color: #FAE448 !important; }
button.primary:hover { background-color: #333;}
button.secondary:hover { background-color: #FFDF00 !important;}
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important; display: none !important;
} }
.dn {display: none;} .dn {display: none;}
.text-gray { color: #999 !important;}
.pr {position: relative;} .pr {position: relative;}
.m0 {margin: 0;} .m0 {margin: 0;}
.db {display: block;} .db {display: block;}

3
css/tpl-clean.css Normal file
View file

@ -0,0 +1,3 @@
.logo {
background: transparent url('../img/logo.png');
}

105
css/tpl-default.css Normal file
View file

@ -0,0 +1,105 @@
body {
background: #F5F5F5;
}
.logo {
background: transparent url('../img/logo-negative.png');
}
.top-bar-section li:not(.has-form) a:not(.button) {
background: #FAE448;
}
.top-bar-section li.active:not(.has-form) a:not(.button) {
background: #f5f5f5;
color: #111;
}
.top-bar-section li.active:not(.has-form) a:not(.button):hover, .top-bar-section li:not(.has-form) a:not(.button):hover {
background: #111;
color: white;
}
.top-bar-section ul li>a {
color: #111;
}
.header {
background: #111;
color: white;
}
.header h1, h5 {
color: #fff;
}
.panel {
color: #333;
background: #FFFFFF;
}
.transactions .panel {
background: #f5f5f5;
}
.transactions .panel.pending {
background-color: #fff;
}
.pending .txbottom {
border-top: 1px solid #eee;
}
.btransactions .panel {
background: #fff;
}
.addresses .panel:hover {
background: #efefef;
}
a.box-backup {
color: #111;
}
.panel-sign {
color: #111;
background: #FAE448;
}
.panel-ignore {
color: #fff;
background: #111;
}
.share-wallet.panel {
background-color: #111;
color: #FBE500;
}
.alert-box.warning, .alert-box.error {
background-color: #C0392A;
border-color: #C0392A;
color: #fff;
}
.text-warning {
color:#C0392A;
}
small.is-valid {
color: #04B404;
}
small.has-error {
color: #f04124;
}
button.primary { background-color: #111; }
button.secondary { background-color: #FAE448 !important; }
button.primary:hover { background-color: #333;}
button.secondary:hover { background-color: #FFDF00 !important;}
.text-gray { color: #999;}

BIN
img/logo-negative.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 3 KiB

BIN
img/logo.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 2.8 KiB

153
index.html
View file

@ -10,91 +10,95 @@
<link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/main.css">
</head> </head>
<body ng-cloak class="ng-cloak"> <body ng-cloak class="ng-cloak">
<div data-ng-init="init()" data-ng-controller="HeaderController"> <div id="wrap">
<div class="header"> <div data-ng-init="init()" data-ng-controller="HeaderController">
<div class="header-content"> <div class="header">
<figure class="left"> <div class="header-content">
<a href="#"><img src="./img/logo-negative.svg" alt="Copay" width="130" /></a> <div class="left">
</figure> <a href="#" class="logo" title="copay"></a>
<div class="text-right" ng-show="$root.wallet"> </div>
<div> <div class="right text-right" ng-show="$root.wallet">
<h5 > <div class="connection-info">
<span ng-if="!$root.wallet.name && $root.wallet.id">Wallet ID: {{$root.wallet.id}}</span> <span ng-if="!$root.wallet.name && $root.wallet.id">Wallet ID: {{$root.wallet.id}}</span>
<span ng-if="$root.wallet.name">Wallet: {{$root.wallet.name}} &lt;{{$root.wallet.id}}&gt;</span> <span ng-if="$root.wallet.name">Wallet: {{$root.wallet.name}} &lt;{{$root.wallet.id}}&gt;</span>
[{{$root.wallet.requiredCopayers}}-{{$root.wallet.totalCopayers}}]<br> [{{$root.wallet.requiredCopayers}}/{{$root.wallet.totalCopayers}}]
</h5> <a href="#" ng-click="signout()"><i class="fi-power"></i></a>
</div>
<div class="balance-info">
Balance: {{totalBalance || 0}} <i class="fi-bitcoin"></i><br>
Available to Spend: {{availableBalance || 0}} <i class="fi-bitcoin"></i>
</div>
</div> </div>
<p>
Balance: {{totalBalance || 0}} <i class="fi-bitcoin"></i><br>
Available to Spend: {{availableBalance || 0}} <i class="fi-bitcoin"></i>
</p>
</div> </div>
</div>
<nav class="top-bar" data-topbar ng-show="$root.wallet"> <nav class="top-bar" data-topbar ng-show="$root.wallet">
<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">
<a ng-click="isCollapsed=!isCollapsed"> Menu</a> <a ng-click="isCollapsed=!isCollapsed"> Menu</a>
</li>
</ul>
<section class="top-bar-section {{isCollapsed && 'hide_menu' || 'show_menu'}}">
<ul>
<li data-ng-repeat="item in menu" ui-route="/{{item.link}}" class="large-2 text-center" data-ng-class="{active: isActive(item)}">
<a href="{{item.link}}"> <i class="{{item.icon}}"></i> {{item.title}}</a>
</li>
<li class="large-2 text-center">
<a href="#" ng-click="signout()"> <i class="fi-power"></i> Signout</a>
</li> </li>
</ul> </ul>
</section>
</nav> <section class="top-bar-section {{isCollapsed && 'hide_menu' || 'show_menu'}}">
<ul>
<li data-ng-repeat="item in menu" ui-route="/{{item.link}}" class="large-2 text-center" data-ng-class="{active: isActive(item)}">
<a href="{{item.link}}"> <i class="{{item.icon}}"></i> {{item.title}}</a>
</li>
</ul>
</section>
</nav>
</div>
<div class="row" ng-if='$root.flashMessage.message' notification>
<div class="small-8 large-centered columns">
<div data-alert class="alert-box round {{$root.flashMessage.type}}">
{{$root.flashMessage.message}}
<a ng-click="clearFlashMessage()" class="close">&times;</a>
</div>
</div>
</div>
<div class="row">
<div ng-if='$root.wallet && !$root.wallet.publicKeyRing.isComplete() && !loading' data-alert class="alert-box warn round size-18" >
<div style="float:left; margin:0 15px">
<i class="fi-alert size-60"></i>
</div>
<div class="size-18">
Note: Your wallet is not complete yet.
<span ng-show="$root.wallet.publicKeyRing.totalCopayers - $root.wallet.publicKeyRing.registeredCopayers()>1">
{{$root.wallet.publicKeyRing.totalCopayers - $root.wallet.publicKeyRing.registeredCopayers() }} keys are
</span>
<span ng-show="$root.wallet.publicKeyRing.totalCopayers - $root.wallet.publicKeyRing.registeredCopayers()==1">
One key is
</span>
missing.
</div>
<div class="size-18">
Share this secret with your other copayers for them to join your wallet <br>
</div>
<div class="size-24">
<b>{{$root.wallet.getMyCopayerId()}}</b>
</div>
</div>
</div>
</div> </div>
<div class="row" ng-if='$root.flashMessage.message' notification> <div id="main" class="row">
<div class="small-8 large-centered columns"> <div class="large-12 columns" ng-view></div>
<div data-alert class="alert-box round {{$root.flashMessage.type}}">
{{$root.flashMessage.message}}
<a ng-click="clearFlashMessage()" class="close">&times;</a>
</div>
</div> </div>
</div> </div>
<div class="row"> <div id="footer" class="row" data-ng-controller="FooterController">
<div ng-if='$root.wallet && !$root.wallet.publicKeyRing.isComplete() && !loading' data-alert class="alert-box warn round size-18" > <div class="large-12 columns text-center">
<link rel="stylesheet" ng-href="{{theme}}">
<a class="size-12" ng-if="themes.length > 1" ng-click="change_theme(th)" ng-repeat="th in themes">{{th}} {{$last ? '' : '&middot; '}}</a>
<div style="float:left; margin:0 15px">
<i class="fi-alert size-60"></i>
</div>
<div class="size-18">
Note: Your wallet is not complete yet.
<span ng-show="$root.wallet.publicKeyRing.totalCopayers - $root.wallet.publicKeyRing.registeredCopayers()>1">
{{$root.wallet.publicKeyRing.totalCopayers - $root.wallet.publicKeyRing.registeredCopayers() }} keys are
</span>
<span ng-show="$root.wallet.publicKeyRing.totalCopayers - $root.wallet.publicKeyRing.registeredCopayers()==1">
One key is
</span>
missing.
</div>
<div class="size-18">
Share this secret with your other copayers for them to join your wallet <br>
</div>
<div class="size-24">
<b>{{$root.wallet.getMyCopayerId()}}</b>
</div>
</div>
</div> </div>
</div>
<div class="row">
<div class="large-12 columns" ng-view></div>
</div> </div>
<!-- Templates --> <!-- Templates -->
@ -524,6 +528,7 @@
<script src="js/services/controllerUtils.js"></script> <script src="js/services/controllerUtils.js"></script>
<script src="js/controllers/header.js"></script> <script src="js/controllers/header.js"></script>
<script src="js/controllers/footer.js"></script>
<script src="js/controllers/addresses.js"></script> <script src="js/controllers/addresses.js"></script>
<script src="js/controllers/transactions.js"></script> <script src="js/controllers/transactions.js"></script>
<script src="js/controllers/send.js"></script> <script src="js/controllers/send.js"></script>

2
js/app.js
View file

@ -5,6 +5,7 @@ var copayApp = window.copayApp = angular.module('copay',[
'mm.foundation', 'mm.foundation',
'monospaced.qrcode', 'monospaced.qrcode',
'copay.header', 'copay.header',
'copay.footer',
'copay.addresses', 'copay.addresses',
'copay.transactions', 'copay.transactions',
'copay.send', 'copay.send',
@ -19,6 +20,7 @@ var copayApp = window.copayApp = angular.module('copay',[
]); ]);
angular.module('copay.header', []); angular.module('copay.header', []);
angular.module('copay.footer', []);
angular.module('copay.addresses', []); angular.module('copay.addresses', []);
angular.module('copay.transactions', []); angular.module('copay.transactions', []);
angular.module('copay.send', []); angular.module('copay.send', []);

19
js/controllers/footer.js Normal file
View file

@ -0,0 +1,19 @@
'use strict';
angular.module('copay.footer').controller('FooterController',
function($scope) {
if (config.themes && Array.isArray(config.themes) && config.themes[0]) {
$scope.themes = config.themes;
}
else {
$scope.themes = ['default'];
}
$scope.theme = 'css/tpl-' + $scope.themes[0] + '.css';
$scope.change_theme = function(name) {
$scope.theme = 'css/tpl-' + name + '.css';
};
});