From e6785335a9c4a1a0025bb0f6d726cc0cc0f97c51 Mon Sep 17 00:00:00 2001 From: Kosta Korenkov <7r0ggy@gmail.com> Date: Sat, 4 Jul 2015 13:02:46 +0300 Subject: [PATCH] Addon support Addons are simple Angular modules with views, controllers, services etc. Addons can register themselves in Copay using pluginManagerProvider. It allows them to add extra items to the bottom menu and as well as extra tab-views: ```` addonManagerProvider.registerAddon({ menuItem: { 'title': 'Assets', 'icon': 'icon-pricetag', 'link': 'assets' }, view: { id: 'assets', 'class': 'assets', template: 'colored-coins/views/assets.html' } }); ```` Addons can consume core Copay services and listen for events to react on changes. For this very first addon system inplementation Copay emits additional BalanceUpdated event so that interested addons can react on new transactions (see plugin reference implementation below). As bottom menu can accomodate only 6 items without sacrificing usability, so it was reworked to have second layer of items. Now If menu has more than 6 items, toggle button will be added to the menu allowing to reveal extra items in a sliding panel. Bottom menu in this case will show only 5 items, the rest will be rendered on sliding panel. This changes addresses issue #2949 and reference implementation of addon could be found here: https://github.com/troggy/copay-colored-coins-plugin --- public/views/includes/menu-toggle.html | 5 +++++ public/views/includes/menu.html | 28 ++++++++++++++++++++++++-- public/views/walletHome.html | 3 +++ src/css/mobile.css | 14 +++++++++++++ src/js/app.js | 5 ++++- src/js/controllers/index.js | 9 +++++++-- src/js/directives/directives.js | 7 +++++++ src/js/services/addonManager.js | 26 ++++++++++++++++++++++++ src/js/services/pluginManager.js | 10 --------- 9 files changed, 92 insertions(+), 15 deletions(-) create mode 100644 public/views/includes/menu-toggle.html create mode 100644 src/js/services/addonManager.js delete mode 100644 src/js/services/pluginManager.js diff --git a/public/views/includes/menu-toggle.html b/public/views/includes/menu-toggle.html new file mode 100644 index 000000000..dcb1b5cff --- /dev/null +++ b/public/views/includes/menu-toggle.html @@ -0,0 +1,5 @@ +
+ + + +
diff --git a/public/views/includes/menu.html b/public/views/includes/menu.html index 5993029e8..451f67074 100644 --- a/public/views/includes/menu.html +++ b/public/views/includes/menu.html @@ -1,5 +1,21 @@ -
-
+
+
+ + +
+ {{item.title|translate}} +
+ +
+
+ +
+ + +
+ +
+
@@ -10,4 +26,12 @@
+ +
+ +
+ +
+ + diff --git a/public/views/walletHome.html b/public/views/walletHome.html index 406b86608..da8da5591 100644 --- a/public/views/walletHome.html +++ b/public/views/walletHome.html @@ -505,6 +505,9 @@
+
+
+
diff --git a/src/css/mobile.css b/src/css/mobile.css index 8b0538674..9471f4215 100644 --- a/src/css/mobile.css +++ b/src/css/mobile.css @@ -151,6 +151,20 @@ _:-ms-fullscreen, :root .main { background: #2C3E50; } +.second-bottom-bar { + z-index: 6; +} + +.second-bottom-bar.animated.slideInRight, +.second-bottom-bar.animated.slideInLeft { + -webkit-animation-duration: 0.3s; + animation-duration: 0.3s; +} + +.menu-toggle { + padding-top: 1rem !important; +} + .amount { width: 100%; text-align: center; diff --git a/src/js/app.js b/src/js/app.js index cb2e8fb89..748099a7d 100644 --- a/src/js/app.js +++ b/src/js/app.js @@ -12,7 +12,8 @@ var modules = [ 'copayApp.filters', 'copayApp.services', 'copayApp.controllers', - 'copayApp.directives' + 'copayApp.directives', + 'copayApp.plugins' ]; var copayApp = window.copayApp = angular.module('copayApp', modules); @@ -21,3 +22,5 @@ angular.module('copayApp.filters', []); angular.module('copayApp.services', []); angular.module('copayApp.controllers', []); angular.module('copayApp.directives', []); +angular.module('copayApp.plugins', []); + diff --git a/src/js/controllers/index.js b/src/js/controllers/index.js index faf3a335c..857549eb5 100644 --- a/src/js/controllers/index.js +++ b/src/js/controllers/index.js @@ -1,6 +1,6 @@ 'use strict'; -angular.module('copayApp.controllers').controller('indexController', function($rootScope, $scope, $log, $filter, $timeout, lodash, go, profileService, configService, isCordova, rateService, storageService, addressService, gettextCatalog, gettext, amMoment, nodeWebkit) { +angular.module('copayApp.controllers').controller('indexController', function($rootScope, $scope, $log, $filter, $timeout, lodash, go, profileService, configService, isCordova, rateService, storageService, addressService, gettextCatalog, gettext, amMoment, nodeWebkit, addonManager) { var self = this; self.isCordova = isCordova; self.onGoingProcess = {}; @@ -34,6 +34,10 @@ angular.module('copayApp.controllers').controller('indexController', function($r 'link': 'history' }]; + self.addonViews = addonManager.addonViews(); + self.menu = self.menu.concat(addonManager.addonMenuItems()); + self.menuItemSize = self.menu.length > 4 ? 2 : 3; + self.tab = 'walletHome'; self.availableLanguages = [{ @@ -274,6 +278,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r self.walletScanStatus = walletStatus.wallet.scanStatus; self.copayers = walletStatus.wallet.copayers; self.preferences = walletStatus.preferences; + $rootScope.$emit('Local/BalanceUpdated', walletStatus.balance); self.setBalance(walletStatus.balance); self.otherWallets = lodash.filter(profileService.getWallets(self.network), function(w) { return w.id != self.walletId; @@ -548,7 +553,7 @@ angular.module('copayApp.controllers').controller('indexController', function($r } }); }, false); - chooser.click(); + chooser.click(); } function formatDate(date) { diff --git a/src/js/directives/directives.js b/src/js/directives/directives.js index 69433e59b..5696fd116 100644 --- a/src/js/directives/directives.js +++ b/src/js/directives/directives.js @@ -296,4 +296,11 @@ angular.module('copayApp.directives') }); } }; + }) + .directive('menuToggle', function() { + return { + restrict: 'E', + replace: true, + templateUrl: 'views/includes/menu-toggle.html' + } }); diff --git a/src/js/services/addonManager.js b/src/js/services/addonManager.js new file mode 100644 index 000000000..6a3aba52d --- /dev/null +++ b/src/js/services/addonManager.js @@ -0,0 +1,26 @@ +'use strict'; + +angular.module('copayApp.services').provider('addonManager', function () { + var addonMenuItems = []; + var addonViews = []; + + this.registerAddon = function(addonSpec) { + addonMenuItems.push(addonSpec.menuItem); + addonViews.push(addonSpec.view); + }; + + this.$get = function() { + var manager = {}; + + manager.addonMenuItems = function() { + return addonMenuItems; + }; + + manager.addonViews = function() { + return addonViews; + }; + + return manager; + } + +}); diff --git a/src/js/services/pluginManager.js b/src/js/services/pluginManager.js deleted file mode 100644 index 76b6361e2..000000000 --- a/src/js/services/pluginManager.js +++ /dev/null @@ -1,10 +0,0 @@ -'use strict'; - -angular.module('copayApp.services').factory('pluginManager', function() { - var root = {}; - root.getInstance = function(config){ - return new copay.PluginManager(config); - }; - - return root; -});