From 73ffd1414d5967f60abc35cec10fd36789ef95d8 Mon Sep 17 00:00:00 2001 From: plondon Date: Fri, 23 Sep 2016 16:31:30 -0400 Subject: [PATCH 1/2] feat(Themes): dev themes --- app/index.jade | 3 +- app/partials/navigation.jade | 6 +- app/partials/settings/preferences.jade | 8 + assets/css/blockchain.css.scss | 4 + assets/css/themes/_dev.scss | 28 +++ assets/css/themes/_filters.scss | 7 + .../js/controllers/navigation.controller.js | 2 + .../settings/preferences.controller.js | 4 +- assets/js/controllers/wallet.controller.js | 1 + assets/js/services/theme.service.js | 30 +++ assets/js/services/wallet.service.js | 10 +- img/blockchain-wallet-logo-dev.svg | 188 ++++++++++++++++++ img/refresh-dev.svg | 12 ++ 13 files changed, 297 insertions(+), 6 deletions(-) create mode 100644 assets/css/themes/_dev.scss create mode 100644 assets/css/themes/_filters.scss create mode 100644 assets/js/services/theme.service.js create mode 100644 img/blockchain-wallet-logo-dev.svg create mode 100644 img/refresh-dev.svg diff --git a/app/index.jade b/app/index.jade index dd59731786..44ae808ab3 100644 --- a/app/index.jade +++ b/app/index.jade @@ -60,7 +60,8 @@ head body( ui-view="body" ng-mousemove="onAction()" - ng-click="onAction()") + ng-click="onAction()" + ng-class="getTheme()") noscript img(src="/img/logo-bw.png") h3 Please enable JavaScript to use the Blockchain Wallet diff --git a/app/partials/navigation.jade b/app/partials/navigation.jade index e9f8a29444..b4e394e181 100644 --- a/app/partials/navigation.jade +++ b/app/partials/navigation.jade @@ -6,7 +6,8 @@ span.sr-only Toggle navigation span.ti-menu.white a.navbar-brand(ui-sref="wallet.common.home") - img#logo(src="img/blockchain-wallet-logo.svg", alt="Blockchain") + img#logo(src="img/blockchain-wallet-logo.svg", alt="Blockchain" ng-show="getTheme().name !== 'dev'") + img#logo(src="img/blockchain-wallet-logo-dev.svg", alt="Blockchain" ng-show="getTheme().name === 'dev'") a#wallet-nav-toggle(title="Wallet Navigation Menu", ng-click="navCollapsed = !navCollapsed") span.ti-angle-down.white.h4(ng-show="navCollapsed") span.ti-angle-up.white.h4(ng-show="!navCollapsed") @@ -53,6 +54,7 @@ span {{ nLatestFeats() }} li.item a(ng-click="refresh()" ng-class="{'rotating': refreshing}").refresh - img(src="img/refresh.svg") + img(src="img/refresh.svg" ng-show="getTheme().name !== 'dev'") + img(src="img/refresh-dev.svg" ng-show="getTheme().name === 'dev'") li.item a(ng-click="logout()", translate="SIGNOUT") diff --git a/app/partials/settings/preferences.jade b/app/partials/settings/preferences.jade index d47b2acb86..40f698ac36 100644 --- a/app/partials/settings/preferences.jade +++ b/app/partials/settings/preferences.jade @@ -92,3 +92,11 @@ h5.well.em-400.type-h5.hidden-xs(translate="PREFERENCES_EXPLAIN") a.button-primary.display-inline-block(ng-click="activate()", translate="CHANGE") .col-sm-12.col-md-6(ng-show="active") include ./change-logout.jade + + .form-group.mbn.border-bottom.clearfix.pvl + .col-sm-12.col-md-6 + label.em-400.type-h5(translate="Themes") + p.text.em-300.line-height.hidden-xs(translate="Try out different themes for the wallet.") + .col-sm-6.col-md-3 + .col-sm-6.col-md-3.setting-result + async-select.capitalize(selected="settings.theme" range="themes" display-prop="display-name" on-change="changeTheme") diff --git a/assets/css/blockchain.css.scss b/assets/css/blockchain.css.scss index e52e4a28b3..c523b52453 100644 --- a/assets/css/blockchain.css.scss +++ b/assets/css/blockchain.css.scss @@ -22,6 +22,10 @@ @import 'elements/tables'; @import 'elements/carousel'; +// import themes +@import 'themes/dev'; +@import 'themes/filters'; + //import components @import 'components/forms'; @import 'components/video-container'; diff --git a/assets/css/themes/_dev.scss b/assets/css/themes/_dev.scss new file mode 100644 index 0000000000..228b36b203 --- /dev/null +++ b/assets/css/themes/_dev.scss @@ -0,0 +1,28 @@ +body.dev-theme { + * { + color: #76FF03 !important; + background: #1e1e1e !important; + background-color: #1e1e1e !important; + } +} + +.dev-theme { + .blocket-loading { + background-color: #1e1e1e !important; + } +} + +// ctas +body.dev-theme { + button, + .button, + .button-primary, + .button-success, + .button-default, + .button-info, + .button-danger, + .button-transfer { + border-radius: 5px !important; + border: 1px solid #ddd !important; + } +} diff --git a/assets/css/themes/_filters.scss b/assets/css/themes/_filters.scss new file mode 100644 index 0000000000..ef7627d1ca --- /dev/null +++ b/assets/css/themes/_filters.scss @@ -0,0 +1,7 @@ +body.inverted-theme { + -webkit-filter: invert(100%); + -moz-filter: invert(100%); + -ms-filter: invert(100%); + -o-filter: invert(100%); + filter: invert(100%); +} diff --git a/assets/js/controllers/navigation.controller.js b/assets/js/controllers/navigation.controller.js index 72a9bdb420..20085064cf 100644 --- a/assets/js/controllers/navigation.controller.js +++ b/assets/js/controllers/navigation.controller.js @@ -10,6 +10,8 @@ function NavigationCtrl ($scope, $rootScope, $interval, $timeout, $cookies, Wall $scope.lastViewedWhatsNew = null; + $scope.getTheme = () => $scope.settings.theme; + const lastViewedDefaultTime = 1231469665000; $scope.initialize = (mockFailure) => { diff --git a/assets/js/controllers/settings/preferences.controller.js b/assets/js/controllers/settings/preferences.controller.js index 7a8cd977bd..a899f58aaf 100644 --- a/assets/js/controllers/settings/preferences.controller.js +++ b/assets/js/controllers/settings/preferences.controller.js @@ -2,11 +2,12 @@ angular .module('walletApp') .controller('SettingsPreferencesCtrl', SettingsPreferencesCtrl); -function SettingsPreferencesCtrl ($scope, Wallet, Alerts, currency, $uibModal, $filter, $translate, $window, languages, bcPhoneNumber) { +function SettingsPreferencesCtrl ($scope, Wallet, Alerts, currency, $uibModal, $filter, $translate, $window, languages, bcPhoneNumber, theme) { $scope.user = Wallet.user; $scope.settings = Wallet.settings; $scope.notifications = $scope.settings.notifications; $scope.languages = languages; + $scope.themes = theme.themes; $scope.currencies = currency.currencies; $scope.btcCurrencies = currency.bitCurrencies; $scope.btc = currency.bitCurrencies[0]; @@ -14,6 +15,7 @@ function SettingsPreferencesCtrl ($scope, Wallet, Alerts, currency, $uibModal, $ $scope.changeLanguage = Wallet.changeLanguage; $scope.changeCurrency = Wallet.changeCurrency; $scope.changeBTCCurrency = Wallet.changeBTCCurrency; + $scope.changeTheme = Wallet.changeTheme; $scope.updateNotificationsType = () => { Wallet.updateNotificationsType($scope.notifications).then(() => { diff --git a/assets/js/controllers/wallet.controller.js b/assets/js/controllers/wallet.controller.js index 7b7f3617c1..4ee7721eba 100644 --- a/assets/js/controllers/wallet.controller.js +++ b/assets/js/controllers/wallet.controller.js @@ -24,6 +24,7 @@ function WalletCtrl ($scope, $rootScope, Wallet, $uibModal, $timeout, Alerts, $i $scope.lastAction = Date.now(); $scope.onAction = () => $scope.lastAction = Date.now(); + $scope.getTheme = () => $scope.settings.theme.class; $scope.inactivityCheck = () => { if (!Wallet.status.isLoggedIn) return; diff --git a/assets/js/services/theme.service.js b/assets/js/services/theme.service.js new file mode 100644 index 0000000000..750a3d4b33 --- /dev/null +++ b/assets/js/services/theme.service.js @@ -0,0 +1,30 @@ + +angular + .module('walletApp') + .factory('theme', theme); + +function theme () { + const themes = [ + { + 'name': 'default', + 'class': '', + 'display-name': 'Default' + }, + { + 'name': 'dev', + 'class': 'dev-theme', + 'display-name': 'Dev Theme' + }, + { + 'name': 'inverted', + 'class': 'inverted-theme', + 'display-name': 'Invert Colors' + } + ]; + + var service = { + themes: themes + }; + + return service; +} diff --git a/assets/js/services/wallet.service.js b/assets/js/services/wallet.service.js index 20cbafa670..c0680237b4 100644 --- a/assets/js/services/wallet.service.js +++ b/assets/js/services/wallet.service.js @@ -4,9 +4,9 @@ angular .module('walletServices', []) .factory('Wallet', Wallet); -Wallet.$inject = ['$http', '$window', '$timeout', '$location', '$injector', 'Alerts', 'MyWallet', 'MyBlockchainApi', 'MyBlockchainRng', 'MyBlockchainSettings', 'MyWalletStore', 'MyWalletPayment', 'MyWalletHelpers', '$rootScope', 'ngAudio', '$cookies', '$translate', '$filter', '$state', '$q', 'languages', 'currency', 'MyWalletMetadata']; +Wallet.$inject = ['$http', '$window', '$timeout', '$location', '$injector', 'Alerts', 'MyWallet', 'MyBlockchainApi', 'MyBlockchainRng', 'MyBlockchainSettings', 'MyWalletStore', 'MyWalletPayment', 'MyWalletHelpers', '$rootScope', 'ngAudio', '$cookies', '$translate', '$filter', '$state', '$q', 'languages', 'currency', 'MyWalletMetadata', 'theme']; -function Wallet ($http, $window, $timeout, $location, $injector, Alerts, MyWallet, MyBlockchainApi, MyBlockchainRng, MyBlockchainSettings, MyWalletStore, MyWalletPayment, MyWalletHelpers, $rootScope, ngAudio, $cookies, $translate, $filter, $state, $q, languages, currency, MyWalletMetadata) { +function Wallet ($http, $window, $timeout, $location, $injector, Alerts, MyWallet, MyBlockchainApi, MyBlockchainRng, MyBlockchainSettings, MyWalletStore, MyWalletPayment, MyWalletHelpers, $rootScope, ngAudio, $cookies, $translate, $filter, $state, $q, languages, currency, MyWalletMetadata, theme) { const wallet = { goal: { auth: false, @@ -134,6 +134,7 @@ function Wallet ($http, $window, $timeout, $location, $injector, Alerts, MyWalle wallet.setLanguage($filter('getByProperty')('code', result.language, languages)); wallet.settings.btcCurrency = $filter('getByProperty')('serverCode', result.btc_currency, currency.bitCurrencies); wallet.settings.displayCurrency = wallet.settings.btcCurrency; + wallet.settings.theme = $filter('getByProperty')('name', $cookies.get('theme'), theme.themes) || theme.themes[0]; wallet.settings.feePerKB = wallet.my.wallet.fee_per_kb; wallet.settings.blockTOR = !!result.block_tor_ips; wallet.status.didLoadSettings = true; @@ -871,6 +872,11 @@ function Wallet ($http, $window, $timeout, $location, $injector, Alerts, MyWalle }, reject); }); + wallet.changeTheme = (theme) => $q((resolve, reject) => { + $cookies.put('theme', theme.name); + resolve(true); + }); + wallet.changeCurrency = (curr) => $q((resolve, reject) => { wallet.settings_api.changeLocalCurrency(curr.code, () => { wallet.settings.currency = curr; diff --git a/img/blockchain-wallet-logo-dev.svg b/img/blockchain-wallet-logo-dev.svg new file mode 100644 index 0000000000..af7f352462 --- /dev/null +++ b/img/blockchain-wallet-logo-dev.svg @@ -0,0 +1,188 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/refresh-dev.svg b/img/refresh-dev.svg new file mode 100644 index 0000000000..b180699e7e --- /dev/null +++ b/img/refresh-dev.svg @@ -0,0 +1,12 @@ + + + + + + From b1998921ad41736837e01c217fa9cc33dde09fb8 Mon Sep 17 00:00:00 2001 From: plondon Date: Sun, 25 Sep 2016 22:49:40 -0400 Subject: [PATCH 2/2] feat(themes): add x-ray theme --- assets/css/themes/_filters.scss | 8 ++++++++ assets/js/services/theme.service.js | 5 +++++ 2 files changed, 13 insertions(+) diff --git a/assets/css/themes/_filters.scss b/assets/css/themes/_filters.scss index ef7627d1ca..fb9beaf16d 100644 --- a/assets/css/themes/_filters.scss +++ b/assets/css/themes/_filters.scss @@ -5,3 +5,11 @@ body.inverted-theme { -o-filter: invert(100%); filter: invert(100%); } + +body.x-ray { + -webkit-filter: grayscale(100%) invert(100%); + -moz-filter: grayscale(100%) invert(100%); + -ms-filter: grayscale(100%) invert(100%); + -o-filter: grayscale(100%) invert(100%); + filter: grayscale(100%) invert(100%); +} diff --git a/assets/js/services/theme.service.js b/assets/js/services/theme.service.js index 750a3d4b33..eaaebf6b88 100644 --- a/assets/js/services/theme.service.js +++ b/assets/js/services/theme.service.js @@ -19,6 +19,11 @@ function theme () { 'name': 'inverted', 'class': 'inverted-theme', 'display-name': 'Invert Colors' + }, + { + 'name': 'x-ray', + 'class': 'x-ray', + 'display-name': 'X-Ray' } ];