openstack/horizon
Code Issues Proposed changes

Merge "JSCS cleanup - style guide cleanup for modal-wait-spinner"

Browse Source
This commit is contained in:
Jenkins 2015-06-18 18:21:07 +00:00 committed by Gerrit Code Review
commit cd4900f84c
8 changed files with 165 additions and 118 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
horizon/karma.conf.js
View File

@ -76,6 +76,7 @@ module.exports = function(config) {
'framework/util/tech-debt/tech-debt.module.js',
'framework/widgets/charts/charts.module.js',
'framework/widgets/modal/modal.module.js',
'framework/widgets/modal-wait-spinner/modal-wait-spinner.module.js',
'framework/widgets/metadata-tree/metadata-tree.module.js',
'framework/widgets/table/table.module.js',
'framework/widgets/toast/toast.module.js',

71
horizon/static/framework/widgets/modal-wait-spinner/modal-wait-spinner.directive.js Normal file
View File

@ -0,0 +1,71 @@
(function () {
'use strict';
/*
* @ngdoc directive
* @name horizon.framework.widgets.modal-wait-spinner.directive:waitSpinner
* @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.
*
* @example
* <example>
* <pre>
* 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();
* }
* }
* </pre>
* </example>
*/
angular
.module('horizon.framework.widgets.modal-wait-spinner')
.directive('waitSpinner', waitSpinner);
waitSpinner.$inject = ['horizon.framework.conf.spinner_options'];
function waitSpinner(spinnerOptions) {
var directive = {
scope: {
text: '@text' // One-direction binding (reads from parent)
},
restrict: 'A',
link: link,
template: '<p><i>{$text$}&hellip;</i></p>'
};
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%'});
}
}
})();

53
horizon/static/framework/widgets/modal-wait-spinner/modal-wait-spinner.factory.js Normal file
View File

@ -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 <div> for wait-spinner instead of a wait-spinner element
* because the existing Horizon spinner CSS styling expects a div
* for the modal-body
*/
template: '<div wait-spinner class="modal-body" text="' + spinnerText + '"></div>',
windowClass: 'modal-wait-spinner modal_wrapper loading'
};
spinner.modalInstance = $modal.open(modalOptions);
}
function hideModalSpinner() {
if (spinner.modalInstance) {
spinner.modalInstance.dismiss();
delete(spinner.modalInstance);
}
}
}
})();

115
horizon/static/framework/widgets/modal-wait-spinner/modal-wait-spinner.js
View File

@ -1,115 +0,0 @@
/*
* (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.
*
* @example
* <example>
* <pre>
* .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();
* }
* }
* ])
* </pre>
* </example>
*
* 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', [
'ui.bootstrap'
])
.factory('horizon.framework.widgets.modal-wait-spinner.service', [
'$modal',
function ($modal) {
var service = {
showModalSpinner: function (spinnerText) {
var modalOptions = {
backdrop: 'static',
/*
* Using <div> for wait-spinner instead of a wait-spinner element
* because the existing Horizon spinner CSS styling expects a div
* for the modal-body
*/
template: '<div wait-spinner class="modal-body" text="' + spinnerText + '"></div>',
windowClass: 'modal-wait-spinner modal_wrapper loading'
};
this.modalInstance = $modal.open(modalOptions);
},
hideModalSpinner: function () {
if (this.modalInstance) {
this.modalInstance.dismiss();
delete(this.modalInstance);
}
}
};
return service;
}
])
.directive('waitSpinner', [
'horizon.framework.conf.spinner_options',
function (spinnerOptions) {
return {
scope: {
text: '@text' // One-direction binding (reads from parent)
},
restrict: 'A',
link: link,
template: '<p><i>{$text$}&hellip;</i></p>'
};
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%'});
}
}]);
})();

34
horizon/static/framework/widgets/modal-wait-spinner/modal-wait-spinner.module.js Normal file
View File

@ -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']);
})();

1
horizon/static/framework/widgets/modal-wait-spinner/modal-wait-spinner.spec.js
View File

@ -95,5 +95,4 @@
});
});
})();

4
horizon/test/jasmine/jasmine_tests.py
View File

@ -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',

4
openstack_dashboard/templates/horizon/_scripts.html
View File

@ -58,7 +58,9 @@
<script src='{{ STATIC_URL }}framework/widgets/modal/modal.module.js'></script>
<script src='{{ STATIC_URL }}framework/widgets/modal/modal.controller.js'></script>
<script src='{{ STATIC_URL }}framework/widgets/modal/modal.factory.js'></script>
<script src='{{ STATIC_URL }}framework/widgets/modal-wait-spinner/modal-wait-spinner.js'></script>
<script src='{{ STATIC_URL }}framework/widgets/modal-wait-spinner/modal-wait-spinner.module.js'></script>
<script src='{{ STATIC_URL }}framework/widgets/modal-wait-spinner/modal-wait-spinner.directive.js'></script>
<script src='{{ STATIC_URL }}framework/widgets/modal-wait-spinner/modal-wait-spinner.factory.js'></script>
<script src='{{ STATIC_URL }}framework/widgets/transfer-table/transfer-table.js'></script>
<script src='{{ STATIC_URL }}framework/widgets/charts/charts.module.js'></script>
<script src='{{ STATIC_URL }}framework/widgets/charts/chart-tooltip.directive.js'></script>