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

Merge pull request #195 from cmgustavo/feature/01-theme-support

Browse source 
Copay Support CSS Style Themes
This commit is contained in:
Matias Alejo Garcia 2014-04-26 11:28:01 -03:00
commit 3199c8abcf
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
},
verbose: 1,
theme: ['default', 'clean']
};
var log = function () {

110
css/main.css
View file

@ -25,58 +25,63 @@
* {
font-family: 'Ubuntu', Helvetica, sans-serif !important;
margin:0;
padding:0;
}
body {
background: #F5F5F5;
html, body {height: 100%;}
#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) {
line-height: 60px;
background: #FAE448;
}
.top-bar-section li.active:not(.has-form) a:not(.button) {
line-height: 60px;
background: #f5f5f5;
color: #111;
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 {
color: #111;
text-transform: uppercase;
font-weight: 100;
font-size: 0.9rem;
}
.top-bar-section ul li {
width: 20%;
}
.header {
background: #111;
color: white;
margin-bottom: 30px;
}
.header-content {
padding: 1.5rem 3rem 1.5rem 0;
padding: 1.5rem;
overflow: hidden;
}
.header h1, h5 {
color: #fff;
}
.top-bar {
height: auto;
width: 100%;
}
.panel {
color: #333;
background: #FFFFFF;
padding: 0.7rem 1rem;
border:0;
}
@ -85,6 +90,14 @@ body {
margin: 0;
}
.connection-info {
margin-bottom: 10px;
}
.balance-info {
font-size: 14px;
}
/*.panel:hover {
background: #efefef;
color: #111;
@ -95,12 +108,10 @@ body {
}
.transactions .panel {
background: #f5f5f5;
border: 1px solid #eee;
}
.transactions .panel.pending {
background-color: #fff;
padding: 1rem;
}
@ -117,10 +128,6 @@ body {
font-size: 12px;
}
.btransactions .panel {
background: #fff;
}
.btransactions .txheader {
font-size: 12px;
margin-bottom: 10px;
@ -140,10 +147,6 @@ body {
border: none;
}
.addresses .panel:hover {
background: #efefef;
}
.box-backup {
margin: 2rem 0;
padding: 2rem 1rem;
@ -151,7 +154,6 @@ body {
a.box-backup {
display: block;
color: #111;
}
.box-backup i {
@ -184,16 +186,6 @@ span.panel-res {
border-radius: 1rem;
}
.panel-sign {
color: #111;
background: #FAE448;
}
.panel-ignore {
color: #fff;
background: #111;
}
.pending button {
margin: 0;
}
@ -203,28 +195,11 @@ span.panel-res {
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 {
color: #04B404;
font-weight: bold;
}
small.has-error {
color: #f04124;
font-weight: bold;
}
@ -235,24 +210,23 @@ small.has-error {
.show_menu {
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;}
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 {
display: none !important;
}
.dn {display: none;}
.text-gray { color: #999 !important;}
.pr {position: relative;}
.m0 {margin: 0;}
.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">
</head>
<body ng-cloak class="ng-cloak">
<div data-ng-init="init()" data-ng-controller="HeaderController">
<div class="header">
<div class="header-content">
<figure class="left">
<a href="#"><img src="./img/logo-negative.svg" alt="Copay" width="130" /></a>
</figure>
<div class="text-right" ng-show="$root.wallet">
<div>
<h5 >
<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>
[{{$root.wallet.requiredCopayers}}-{{$root.wallet.totalCopayers}}]<br>
</h5>
<div id="wrap">
<div data-ng-init="init()" data-ng-controller="HeaderController">
<div class="header">
<div class="header-content">
<div class="left">
<a href="#" class="logo" title="copay"></a>
</div>
<div class="right text-right" ng-show="$root.wallet">
<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">Wallet: {{$root.wallet.name}} &lt;{{$root.wallet.id}}&gt;</span>
[{{$root.wallet.requiredCopayers}}/{{$root.wallet.totalCopayers}}]
<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>
<p>
Balance: {{totalBalance || 0}} <i class="fi-bitcoin"></i><br>
Available to Spend: {{availableBalance || 0}} <i class="fi-bitcoin"></i>
</p>
</div>
</div>
<nav class="top-bar" data-topbar ng-show="$root.wallet">
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon">
<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>
<nav class="top-bar" data-topbar ng-show="$root.wallet">
<ul class="title-area">
<li class="name"></li>
<li class="toggle-topbar menu-icon">
<a ng-click="isCollapsed=!isCollapsed"> Menu</a>
</li>
</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 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 id="main" class="row">
<div class="large-12 columns" ng-view></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 id="footer" class="row" data-ng-controller="FooterController">
<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>
</div>
<div class="row">
<div class="large-12 columns" ng-view></div>
</div>
<!-- Templates -->
@ -524,6 +528,7 @@
<script src="js/services/controllerUtils.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/transactions.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',
'monospaced.qrcode',
'copay.header',
'copay.footer',
'copay.addresses',
'copay.transactions',
'copay.send',
@ -19,6 +20,7 @@ var copayApp = window.copayApp = angular.module('copay',[
]);
angular.module('copay.header', []);
angular.module('copay.footer', []);
angular.module('copay.addresses', []);
angular.module('copay.transactions', []);
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';
};
});