diff options
| -rw-r--r-- | install/ui/less/rcue.less | 1 | ||||
| -rw-r--r-- | install/ui/less/widgets.less | 31 | ||||
| -rw-r--r-- | install/ui/src/freeipa/widget.js | 90 |
3 files changed, 120 insertions, 2 deletions
diff --git a/install/ui/less/rcue.less b/install/ui/less/rcue.less index d3b75c158..60e41d95f 100644 --- a/install/ui/less/rcue.less +++ b/install/ui/less/rcue.less @@ -9,4 +9,5 @@ @import "dialog"; @import "brand"; @import "forms-override"; +@import "widgets"; @import "plugins/otp"; diff --git a/install/ui/less/widgets.less b/install/ui/less/widgets.less new file mode 100644 index 000000000..f76c043c8 --- /dev/null +++ b/install/ui/less/widgets.less @@ -0,0 +1,31 @@ + + +.global-activity-indicator { + + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: rgba(0, 0, 0, 0.3); + + max-height: 22px; + text-shadow: none; + color: white; + font-size: 20px; + font-weight: 300; + width: 200px; + padding: 20px; + margin: auto; +} + +.slider{ + overflow-y: hidden; + transition-property: all; + transition-duration: .5s; + transition-timing-function: cubic-bezier(0, 1, 0.5, 1); +} + +.slider.closed { + max-height: 0; + padding: 0 20px; +} diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js index 7a32eac3a..a074c4f72 100644 --- a/install/ui/src/freeipa/widget.js +++ b/install/ui/src/freeipa/widget.js @@ -28,6 +28,8 @@ define(['dojo/_base/array', 'dojo/has', 'dojo/keys', 'dojo/on', + 'dojo/string', + 'dojo/topic', './builder', './datetime', './ipa', @@ -39,8 +41,8 @@ define(['dojo/_base/array', './text', './util' ], - function(array, lang, Evented, has, keys, on, builder, datetime, - IPA, $, navigation, phases, reg, rpc, text, util) { + function(array, lang, Evented, has, keys, on, string, topic, builder, + datetime, IPA, $, navigation, phases, reg, rpc, text, util) { /** * Widget module @@ -5351,6 +5353,89 @@ IPA.value_map_widget = function(spec) { }; /** + * Activity widget + * + * Displays spinner with optional text. + * + * @class IPA.activity_widget + * @extends IPA.widget + */ +exp.activity_widget = IPA.activity_widget = function(spec) { + + var that = IPA.widget(spec); + + /** + * Optional text to display next to spinner + * @property {string} + */ + that.text = spec.text || ''; + + that.dots_node = null; + + that.text_node = null; + + that.dots = spec.dots || 0; + + that.step = spec.step || 1; + + that.max_dots = spec.max_dots || 3; + + that.timer = null; + + that.speed = spec.speed || 800; + + that.activate_event = spec.activate_event || 'network-activity-start'; + that.deactivate_event = spec.deactivate_event || 'network-activity-end'; + + that.create = function(container) { + that.widget_create(container); + that.add_class('global-activity-indicator slider closed'); + that.text_node = $("<div/>", { + text: that.text + }).appendTo(that.container); + if (that.visible) that.start(); + that.set_visible(that.visible); + topic.subscribe(that.activate_event, function() { + that.show(); + }); + topic.subscribe(that.deactivate_event, function() { + that.hide(); + }); + }; + + that.start = function() { + + that.timer = window.setInterval( function() { + that.make_step(); + }, that.speed); + }; + + that.stop = function() { + if (that.timer) window.clearInterval(that.timer); + }; + + that.hide = function() { + that.toggle_class('closed', true); + that.stop(); + }; + + that.show = function() { + that.toggle_class('closed', false); + that.start(); + }; + + that.make_step = function() { + + that.dots += that.step; + if (that.dots > that.max_dots) that.dots = 0; + var dot_str = string.rep('.', that.dots); + that.text_node.text(that.text + " " + dot_str); + }; + + return that; +}; + +/** * pre_op operations for widgets * - sets facet and entity if present in context * @member widget @@ -5410,6 +5495,7 @@ exp.register = function() { var f = reg.formatter; w.register('action_panel', IPA.action_panel); + w.register('activity', IPA.activity_widget); w.register('attribute_table', IPA.attribute_table_widget); w.register('button', IPA.button_widget); w.register('checkbox', IPA.checkbox_widget); |