+ * angular
+ * .controller('MyController', MyController);
+ *
+ * MyController.$inject = [
+ * '$scope',
+ * 'horizon.framework.widgets.modal.modal-wait-spinner.service'
+ * ];
+ *
+ * function MyController($scope, modalWaitSpinnerService) {
+ * $scope.showSpinner = function () {
+ * modalWaitSpinnerService.showModalSpinner(gettext("Loading"));
+ * }
+ *
+ * $scope.hideSpinner = function () {
+ * modalWaitSpinnerService.hideModalSpinner();
+ * }
+ * }
+ *
+ * {$text$}…
' + }; + + return directive; + + //////////////////// + + /* + * At the time link is executed, element may not have been sized by the browser. + * Spin.js may mistakenly places the spinner at 50% of 0 (left:0, top:0). To work around + * this, explicitly set 50% left and top to center the spinner in the parent + * container + */ + function link(scope, element) { + element.spin(spinnerOptions.modal); + element.find('.spinner').css({'left': '50%', 'top': '50%'}); + } + } +})(); diff --git a/horizon/static/framework/widgets/modal-wait-spinner/modal-wait-spinner.factory.js b/horizon/static/framework/widgets/modal-wait-spinner/modal-wait-spinner.factory.js new file mode 100644 index 0000000000..6406636c70 --- /dev/null +++ b/horizon/static/framework/widgets/modal-wait-spinner/modal-wait-spinner.factory.js @@ -0,0 +1,53 @@ +(function () { + 'use strict'; + + /* + * @ngdoc factory + * @name horizon.framework.widgets.modal-wait-spinner.factory:WaitSpinnerService + * @description + * In order to provide a seamless transition to a Horizon that uses more Angular + * based pages, the service is currently implemented using the existing + * Spin.js library and the corresponding JQuery plugin (jquery.spin.js). This widget + * looks and feels the same as the existing spinner we are familiar with in Horizon. + * Over time, uses of the existing Horizon spinner ( horizon.modals.modal_spinner() ) + * can be phased out, or refactored to use this component. + */ + angular + .module('horizon.framework.widgets.modal-wait-spinner') + .factory('horizon.framework.widgets.modal-wait-spinner.service', WaitSpinnerService); + + WaitSpinnerService.$inject = ['$modal']; + + function WaitSpinnerService ($modal) { + var spinner = this; + var service = { + showModalSpinner: showModalSpinner, + hideModalSpinner: hideModalSpinner + }; + + return service; + + //////////////////// + + function showModalSpinner(spinnerText) { + var modalOptions = { + backdrop: 'static', + /* + * Using
- * .controller('MyController', [
- * '$scope',
- * 'horizon.framework.widgets.modal.modal-wait-spinner.service',
- * function (modalWaitSpinnerService) {
- * $scope.showSpinner = function () {
- * modalWaitSpinnerService.showModalSpinner(gettext("Loading"));
- * }
- * $scope.hideSpinner = function () {
- * modalWaitSpinnerService.hideModalSpinner();
- * }
- * }
- * ])
- *
- * {$text$}…
' - }; - - function link($scope, element) { - element.spin(spinnerOptions.modal); - /* - * At the time link is executed, element may not have been sized by the browser. - * Spin.js may mistakenly places the spinner at 50% of 0 (left:0, top:0). To work around - * this, explicitly set 50% left and top to center the spinner in the parent - * container - */ - element.find('.spinner').css({'left': '50%', 'top': '50%'}); - } - }]); -})(); diff --git a/horizon/static/framework/widgets/modal-wait-spinner/modal-wait-spinner.module.js b/horizon/static/framework/widgets/modal-wait-spinner/modal-wait-spinner.module.js new file mode 100644 index 0000000000..94cd157a01 --- /dev/null +++ b/horizon/static/framework/widgets/modal-wait-spinner/modal-wait-spinner.module.js @@ -0,0 +1,34 @@ +/* + * (c) Copyright 2015 Hewlett-Packard Development Company, L.P. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +(function () { + 'use strict'; + + /* + * @ngdoc overview + * @name horizon.framework.widgets.modal-wait-spinner + * @description + * A "global" wait spinner that displays a line of text followed by "...". + * + * Requires {@link http://angular-ui.github.io/bootstrap/ `Angular-bootstrap`} + * + * Used when the user must wait before any additional action is possible. Can be + * launched from modal dialogs. + */ + + angular + .module('horizon.framework.widgets.modal-wait-spinner', ['ui.bootstrap']); +})(); diff --git a/horizon/static/framework/widgets/modal-wait-spinner/modal-wait-spinner.spec.js b/horizon/static/framework/widgets/modal-wait-spinner/modal-wait-spinner.spec.js index 5c58592cda..e6d5c363f6 100644 --- a/horizon/static/framework/widgets/modal-wait-spinner/modal-wait-spinner.spec.js +++ b/horizon/static/framework/widgets/modal-wait-spinner/modal-wait-spinner.spec.js @@ -95,5 +95,4 @@ }); }); - })(); diff --git a/horizon/test/jasmine/jasmine_tests.py b/horizon/test/jasmine/jasmine_tests.py index 4ca529e479..fe6c0a6d4f 100644 --- a/horizon/test/jasmine/jasmine_tests.py +++ b/horizon/test/jasmine/jasmine_tests.py @@ -62,7 +62,9 @@ class ServicesTests(test.JasmineTests): 'framework/widgets/modal/modal.module.js', 'framework/widgets/modal/modal.controller.js', 'framework/widgets/modal/modal.factory.js', - 'framework/widgets/modal-wait-spinner/modal-wait-spinner.js', + 'framework/widgets/modal-wait-spinner/modal-wait-spinner.module.js', + 'framework/widgets/modal-wait-spinner/modal-wait-spinner.directive.js', + 'framework/widgets/modal-wait-spinner/modal-wait-spinner.factory.js', 'framework/widgets/table/table.module.js', 'framework/widgets/table/basic-table.js', 'framework/widgets/transfer-table/transfer-table.js', diff --git a/openstack_dashboard/templates/horizon/_scripts.html b/openstack_dashboard/templates/horizon/_scripts.html index e712437492..8935367688 100644 --- a/openstack_dashboard/templates/horizon/_scripts.html +++ b/openstack_dashboard/templates/horizon/_scripts.html @@ -58,7 +58,9 @@ - + + +