From 9aed0ad63a20f3847e7c5bc0873e6e1d182e3b2c Mon Sep 17 00:00:00 2001 From: Joe Fiorini Date: Wed, 11 Mar 2015 14:57:50 -0400 Subject: [PATCH 1/4] Extract list actions to directive --- awx/ui/static/js/shared/generator-helpers.js | 4 + .../list-generator/list-generator.factory.js | 93 ++++++++++++------- .../static/js/shared/list-generator/main.js | 7 +- .../toolbar-button.directive.js | 39 ++++++++ 4 files changed, 107 insertions(+), 36 deletions(-) create mode 100644 awx/ui/static/js/shared/list-generator/toolbar-button.directive.js diff --git a/awx/ui/static/js/shared/generator-helpers.js b/awx/ui/static/js/shared/generator-helpers.js index 061503300b..1c8f67c372 100644 --- a/awx/ui/static/js/shared/generator-helpers.js +++ b/awx/ui/static/js/shared/generator-helpers.js @@ -188,9 +188,12 @@ angular.module('GeneratorHelpers', [systemStatus.name]) if (toolbar) { //if this is a toolbar button, set some defaults + console.log('toolbar button'); btn.class = 'btn-xs btn-primary'; btn.iconSize = 'fa-lg'; delete btn.label; + } else { + console.log('NOT A TOOLBAR BUTTON'); } html += " "; - - return html; - }; - } -]) - - .factory('NavigationLink', ['Attr', 'Icon', function (Attr, Icon) { return function (link) { diff --git a/awx/ui/static/js/shared/list-generator/list-actions.partial.html b/awx/ui/static/js/shared/list-generator/list-actions.partial.html new file mode 100644 index 0000000000..22982b8a60 --- /dev/null +++ b/awx/ui/static/js/shared/list-generator/list-actions.partial.html @@ -0,0 +1,29 @@ + + + + diff --git a/awx/ui/static/js/shared/list-generator/list-generator.factory.js b/awx/ui/static/js/shared/list-generator/list-generator.factory.js index 88852cb086..78856e4961 100644 --- a/awx/ui/static/js/shared/list-generator/list-generator.factory.js +++ b/awx/ui/static/js/shared/list-generator/list-generator.factory.js @@ -1,7 +1,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'PaginateWidget', 'Attr', 'Icon', - 'Column', 'DropDown', 'NavigationLink', 'Button', 'SelectIcon', 'Breadcrumbs', + 'Column', 'DropDown', 'NavigationLink', 'SelectIcon', 'Breadcrumbs', function ($location, $compile, $rootScope, SearchWidget, PaginateWidget, Attr, Icon, Column, DropDown, NavigationLink, - Button, SelectIcon, Breadcrumbs) { + SelectIcon, Breadcrumbs) { return { setList: function (list) { @@ -24,8 +24,6 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate $('#lookup-modal').modal('hide'); }, - button: Button, - buildHTML: function(list, options) { this.setList(list); return this.build(options); @@ -74,12 +72,11 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate this.scope.mode = options.mode; this.scope.performAction = function(action) { - console.log('performing:', action); this.scope.$eval(action); }.bind(this); this.scope.shouldHideAction = function(options) { - return _.tap(this.scope.$eval(options.ngHide), function(value) { console.log('shouldHide:', value, this.scope.selected_group_id, options); }.bind(this)); + return this.scope.$eval(options.ngHide); }.bind(this); this.scope.canShowAction = function(action) { var base = $location.path().replace(/^\//, '').split('/')[0]; @@ -92,12 +89,9 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate if (this.scope.shouldHideAction(action)) { return false; } else if (!scopeShow) { - console.log('scopeShow false', action.ngShow); return false; } else { - return _.tap(inActionMode && onScreenForAction, function(value) { - console.log('mode ', value, action); - }); + return inActionMode && onScreenForAction; } // return _.tap(scopeShow || , function(value) { @@ -154,7 +148,7 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate // var html = '', list = this.list, - base, size, action, btn, fld, cnt, field_action, fAction, itm; + base, size, action, fld, cnt, field_action, fAction, itm; if (options.activityStream) { // Breadcrumbs for activity stream widget @@ -254,32 +248,16 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate } html += "\">\n"; - html += "
\n"; - html += ''; - html += ''; - html += ''; - //select instructions - if (options.mode === 'select' && list.selectInstructions) { - btn = { - awPopOver: list.selectInstructions, - dataPlacement: 'left', - dataContainer: 'body', - 'class': 'btn-xs btn-help', - awToolTip: 'Click for help', - dataTitle: 'Help', - iconSize: 'fa-lg' - }; - //html += this.button(btn, 'select'); - html += this.button({ - btn: btn, - action: 'help', - toolbar: true - }); + html += "
\n"; + + for (action in list.actions) { + list.actions[action] = + _.defaults(list.actions[action], + { dataPlacement: "top" + }); } - - html += "
\n"; html += "
\n"; diff --git a/awx/ui/static/js/shared/list-generator/toolbar-button.directive.js b/awx/ui/static/js/shared/list-generator/toolbar-button.directive.js index 5b0e0288db..a997ab0776 100644 --- a/awx/ui/static/js/shared/list-generator/toolbar-button.directive.js +++ b/awx/ui/static/js/shared/list-generator/toolbar-button.directive.js @@ -1,39 +1,60 @@ -export default ['$compile', 'Button', function($compile, Button) { +export default ['$compile', 'Attr', 'SelectIcon', function($compile, Attr, SelectIcon) { return { - restrict: 'E', - scope: { - name: '=', - options: '=', - onSelected: '&' - }, + restrict: 'A', + scope: {}, link: function(scope, element, attrs) { - var html = ''; - // Save the ngClick property from - // legacy list actions - scope.action = scope.options.ngClick; + var toolbar = attrs.toolbar; + if (toolbar) { + //if this is a toolbar button, set some defaults + attrs.class = 'btn-xs btn-primary'; + attrs.iconSize = 'fa-lg'; + } - var btnOptions = _.clone(scope.options); - btnOptions.ngClick = "onSelected({ action: action })"; + element.addClass('btn'); - // These should be taken care of by - // using ng-show & ng-hide on this - // directive - delete btnOptions.ngHide; - delete btnOptions.ngShow; + // If no class specified, default + // to btn-sm + if (_.isEmpty(attrs.class)) { + element.addClass("btn-sm"); + } else { + element.addClass(attrs.class); + } - // console.log('options:', scope.options); + if (attrs.awPopOver) { + element.addClass("help-link-white"); + } - html += Button({ - btn: btnOptions, - action: scope.name, - toolbar: true - }); + if (attrs.iconName && _.isEmpty(attrs.id)) { + element.attr("id",attrs.iconName + "_btn"); + } - element.html(html); + if (!_.isEmpty(attrs.img)) { + $("") + .attr("src", $basePath + "img/" + attrs.img) + .css({ width: "12px", height: "12px" }) + .appendTo(element); + } + + if (!_.isEmpty(attrs.iconClass)) { + $("") + .addClass(attrs.iconClass) + .appendTo(element); + } + else { + var icon = SelectIcon({ + action: attrs.iconName, + size: attrs.iconSize + }); + + $(icon).appendTo(element); + } + + if (!toolbar && !_.isEmpty(attrs.label)) { + element.text(attrs.label); + } - $compile(element.contents())(scope); } }; }]; diff --git a/awx/ui/static/partials/home.html b/awx/ui/static/partials/home.html index dc70714683..421c2c2b6d 100644 --- a/awx/ui/static/partials/home.html +++ b/awx/ui/static/partials/home.html @@ -4,6 +4,24 @@
+ + +
diff --git a/awx/ui/static/partials/portal.html b/awx/ui/static/partials/portal.html index 604d36bacf..077eed49e3 100644 --- a/awx/ui/static/partials/portal.html +++ b/awx/ui/static/partials/portal.html @@ -3,6 +3,14 @@
+
From 9aba3bfa6acb6ebd394e82a6272fd5b3acc26779 Mon Sep 17 00:00:00 2001 From: Joe Fiorini Date: Fri, 13 Mar 2015 13:02:43 -0400 Subject: [PATCH 3/4] Remove accidental priority attribute from awToolTip --- awx/ui/static/js/shared/directives.js | 1 - 1 file changed, 1 deletion(-) diff --git a/awx/ui/static/js/shared/directives.js b/awx/ui/static/js/shared/directives.js index e751460fd6..9fa121b43c 100644 --- a/awx/ui/static/js/shared/directives.js +++ b/awx/ui/static/js/shared/directives.js @@ -404,7 +404,6 @@ angular.module('AWDirectives', ['RestServices', 'Utilities', 'AuthService', 'Job */ .directive('awToolTip', ['$sce', function($sce) { return { - priority: 1000, link: function(scope, element, attrs) { var delay = (attrs.delay !== undefined && attrs.delay !== null) ? attrs.delay : ($AnsibleConfig) ? $AnsibleConfig.tooltip_delay : {show: 500, hide: 100}, placement; From a33241e796502aa42696fe08d4fc1541f94da0b2 Mon Sep 17 00:00:00 2001 From: Joe Fiorini Date: Fri, 13 Mar 2015 16:07:31 -0400 Subject: [PATCH 4/4] Refactor show/hide on toolbar buttons --- .../list-generator/list-actions.partial.html | 6 +- .../list-generator/list-generator.factory.js | 60 ++++++++++++------- 2 files changed, 42 insertions(+), 24 deletions(-) diff --git a/awx/ui/static/js/shared/list-generator/list-actions.partial.html b/awx/ui/static/js/shared/list-generator/list-actions.partial.html index 22982b8a60..498d1dd316 100644 --- a/awx/ui/static/js/shared/list-generator/list-actions.partial.html +++ b/awx/ui/static/js/shared/list-generator/list-actions.partial.html @@ -9,8 +9,10 @@ class="options.class" data-title="{{options.dataTitle}}" icon-size="{{options.iconSize}}" - ng-click="performAction(options.ngClick)" - ng-show="canShowAction(options)" + ng-click="$eval(options.ngClick)" + ng-hide="isHiddenByOptions(options) || + hiddenOnCurrentPage(options.basePaths) || + hiddenInCurrentMode(options.mode)" toolbar="true"> diff --git a/awx/ui/static/js/shared/list-generator/list-generator.factory.js b/awx/ui/static/js/shared/list-generator/list-generator.factory.js index 78856e4961..a57a2cfc09 100644 --- a/awx/ui/static/js/shared/list-generator/list-generator.factory.js +++ b/awx/ui/static/js/shared/list-generator/list-generator.factory.js @@ -71,34 +71,50 @@ export default ['$location', '$compile', '$rootScope', 'SearchWidget', 'Paginate this.scope.list = list; this.scope.mode = options.mode; - this.scope.performAction = function(action) { - this.scope.$eval(action); - }.bind(this); + this.scope.isHiddenByOptions = function(options) { + var hiddenByNgHide = false, shownByNgShow = false; - this.scope.shouldHideAction = function(options) { - return this.scope.$eval(options.ngHide); - }.bind(this); - this.scope.canShowAction = function(action) { - var base = $location.path().replace(/^\//, '').split('/')[0]; - var inActionMode = options.mode === action.mode || action.mode === 'all'; - var onScreenForAction = - (!options.basePaths) || - (options.basePaths.indexOf(base) > -1); - var scopeShow = action.ngShow ? this.scope.$eval(action.ngShow) : true; - - if (this.scope.shouldHideAction(action)) { + // If neither ngHide nor ngShow are specified we + // know it.s not hidden by options + // + if (!options.ngHide && !options.ngShow) { return false; - } else if (!scopeShow) { - return false; - } else { - return inActionMode && onScreenForAction; } - // return _.tap(scopeShow || , function(value) { - // console.log('canShow:', value, options.mode, action.mode, scopeShow); - // }); + // If ngHide option is passed && evals to true + // it's hidden + if (options.ngHide && this.scope.$eval(options.ngHide)) { + return true; + } + + // If ngShow option is passed && evals to false + // it's hidden + if (options.ngShow && !this.scope.$eval(options.ngShow)) { + return true; + } + + // Otherwise, it's not hidden + return false; }.bind(this); + this.scope.hiddenOnCurrentPage = function(actionPages) { + var base = $location.path().replace(/^\//, '').split('/')[0]; + + if (!actionPages) { + return false; + } else if (actionPages.indexOf(base) > -1) { + return false; + } else { + return true; + } + + }; + + this.scope.hiddenInCurrentMode = function(actionMode) { + if (options.mode === actionMode || actionMode === 'all') { + return false; + } + }; $compile(element)(this.scope);