From 08e4eaf5e0de09942be210cd5b16f3f1c8dbe50c Mon Sep 17 00:00:00 2001 From: Gustavo Cortez Date: Fri, 25 Apr 2014 17:22:51 -0300 Subject: [PATCH] CSS Style themes support in Copay --- config.template.js | 1 + css/main.css | 110 +++++++++++----------------- css/tpl-clean.css | 3 + css/tpl-default.css | 105 +++++++++++++++++++++++++++ img/logo-negative.png | Bin 0 -> 3072 bytes img/logo.png | Bin 0 -> 2890 bytes index.html | 153 ++++++++++++++++++++------------------- js/app.js | 2 + js/controllers/footer.js | 19 +++++ 9 files changed, 251 insertions(+), 142 deletions(-) create mode 100644 css/tpl-clean.css create mode 100644 css/tpl-default.css create mode 100644 img/logo-negative.png create mode 100644 img/logo.png create mode 100644 js/controllers/footer.js diff --git a/config.template.js b/config.template.js index b4565387b..683f6bee3 100644 --- a/config.template.js +++ b/config.template.js @@ -36,6 +36,7 @@ var config = { port: 3001 }, verbose: 1, + theme: ['default', 'clean'] }; var log = function () { diff --git a/css/main.css b/css/main.css index 0911eefe5..93b5be4e2 100644 --- a/css/main.css +++ b/css/main.css @@ -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;} diff --git a/css/tpl-clean.css b/css/tpl-clean.css new file mode 100644 index 000000000..7dd7f76d6 --- /dev/null +++ b/css/tpl-clean.css @@ -0,0 +1,3 @@ +.logo { + background: transparent url('../img/logo.png'); +} diff --git a/css/tpl-default.css b/css/tpl-default.css new file mode 100644 index 000000000..cea2d8238 --- /dev/null +++ b/css/tpl-default.css @@ -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;} + diff --git a/img/logo-negative.png b/img/logo-negative.png new file mode 100644 index 0000000000000000000000000000000000000000..6f5733c291e7acc440d3cff6a520e8da196e2f2a GIT binary patch literal 3072 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 ou3 -
-
-
-
- Copay -
-
-
-
- Wallet ID: {{$root.wallet.id}} - Wallet: {{$root.wallet.name}} <{{$root.wallet.id}}> - [{{$root.wallet.requiredCopayers}}-{{$root.wallet.totalCopayers}}]
-
+
+
+
+
+
+ +
+
+
+ Wallet ID: {{$root.wallet.id}} + Wallet: {{$root.wallet.name}} <{{$root.wallet.id}}> + [{{$root.wallet.requiredCopayers}}/{{$root.wallet.totalCopayers}}] + +
+
+ Balance: {{totalBalance || 0}}
+ Available to Spend: {{availableBalance || 0}} +
-

- Balance: {{totalBalance || 0}}
- Available to Spend: {{availableBalance || 0}} -

-
- - + +
+ +
+ + +
+ +
+
+
+ {{$root.flashMessage.message}} + × +
+
+
+ +
+
+ + +
+ +
+ +
+ Note: Your wallet is not complete yet. + + {{$root.wallet.publicKeyRing.totalCopayers - $root.wallet.publicKeyRing.registeredCopayers() }} keys are + + + One key is + + missing. +
+ +
+ Share this secret with your other copayers for them to join your wallet
+
+
+ {{$root.wallet.getMyCopayerId()}} +
+
+
+
-
-
-
- {{$root.flashMessage.message}} - × -
+
+
-
-
- - -
- -
- -
- Note: Your wallet is not complete yet. - - {{$root.wallet.publicKeyRing.totalCopayers - $root.wallet.publicKeyRing.registeredCopayers() }} keys are - - - One key is - - missing. -
- -
- Share this secret with your other copayers for them to join your wallet
-
-
- {{$root.wallet.getMyCopayerId()}} -
-
+ - -
-
@@ -524,6 +528,7 @@ + diff --git a/js/app.js b/js/app.js index bcfce8f2c..54891ef3f 100644 --- a/js/app.js +++ b/js/app.js @@ -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', []); diff --git a/js/controllers/footer.js b/js/controllers/footer.js new file mode 100644 index 000000000..b07562713 --- /dev/null +++ b/js/controllers/footer.js @@ -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'; + }; + + });