webui: activity indicators

https://fedorahosted.org/freeipa/ticket/4177
https://fedorahosted.org/freeipa/ticket/4255

Reviewed-By: Endi Sukma Dewata <edewata@redhat.com>

7 files changed, 73 insertions, 46 deletions

diff --git a/install/ui/src/freeipa/app_container.js b/install/ui/src/freeipa/app_container.js
index c56fc3bfe..ec2d71e44 100644
--- a/install/ui/src/freeipa/app_container.js
+++ b/install/ui/src/freeipa/app_container.js
@@ -24,8 +24,9 @@ define([
     'dojo/when',
     './plugin_loader',
     './phases',
-    './Application_controller'
-],function(lang, Deferred, when, plugin_loader, phases, Application_controller) {
+    './Application_controller',
+    'exports'
+],function(lang, Deferred, when, plugin_loader, phases, Application_controller, app) {
 
     /**
      * Application wrapper
@@ -35,7 +36,7 @@ define([
      * @class app
      * @singleton
      */
-    var app = {
+    lang.mixin(app, {
 
         /**
          * Application instance
@@ -89,7 +90,7 @@ define([
                 phases.controller.run();
             }));
         }
-    };
+    });
 
     return app;
 });
\ No newline at end of file
diff --git a/install/ui/src/freeipa/dialog.js b/install/ui/src/freeipa/dialog.js
index 459933336..578acb55d 100644
--- a/install/ui/src/freeipa/dialog.js
+++ b/install/ui/src/freeipa/dialog.js
@@ -277,6 +277,14 @@ IPA.dialog = function(spec) {
         that.create_footer();
         that.footer_node.appendTo(that.content_node);
 
+        that.activity_indicator = IPA.activity_widget({
+            text: text.get('@i18n:status.working', 'Working'),
+            mode: 'icon',
+            visible: false
+        });
+        that.activity_indicator_node = $('<div/>').appendTo(that.dom_node);
+        that.activity_indicator.create(that.activity_indicator_node);
+
         that.policies.post_create();
         return that.dom_node;
     };
diff --git a/install/ui/src/freeipa/hbactest.js b/install/ui/src/freeipa/hbactest.js
index a936029b6..7a9d85ab3 100644
--- a/install/ui/src/freeipa/hbactest.js
+++ b/install/ui/src/freeipa/hbactest.js
@@ -318,8 +318,6 @@ IPA.hbac.test_select_facet = function(spec) {
             }
         }).appendTo(filter_container);
 
-        header.append(IPA.create_network_spinner());
-
         var content = $('<div/>', {
             'class': 'hbac-test-content'
         }).appendTo(container);
diff --git a/install/ui/src/freeipa/ipa.js b/install/ui/src/freeipa/ipa.js
index ad70f9f71..d74881924 100644
--- a/install/ui/src/freeipa/ipa.js
+++ b/install/ui/src/freeipa/ipa.js
@@ -318,7 +318,6 @@ var IPA = function () {
      */
     that.display_activity_icon = function() {
         that.network_call_count++;
-        $('.network-activity-indicator').css('display', '');
         if (that.network_call_count === 1) {
             topic.publish('network-activity-start');
         }
@@ -333,7 +332,6 @@ var IPA = function () {
         that.network_call_count--;
 
         if (0 === that.network_call_count) {
-            $('.network-activity-indicator').css('display', 'none');
             topic.publish('network-activity-end');
         }
     };
@@ -725,21 +723,6 @@ IPA.get_member_attribute = function(obj_name, member) {
 };
 
 /**
- * Create HTML representation of network spinner.
- * @member IPA
- * @return {HTMLElement} Network spinner node
- */
-IPA.create_network_spinner = function(){
-    var span = $('<span/>', {
-        'class': 'network-activity-indicator'
-    });
-    $('<img/>', {
-        src: 'images/spinner-small.gif'
-    }).appendTo(span);
-    return span;
-};
-
-/**
  * Dirty dialog
  *
  * Should be used as an indication of unsaved changes on page when leaving the
diff --git a/install/ui/src/freeipa/search.js b/install/ui/src/freeipa/search.js
index f9739f4c2..9c0676313 100644
--- a/install/ui/src/freeipa/search.js
+++ b/install/ui/src/freeipa/search.js
@@ -109,8 +109,6 @@ IPA.search_facet = function(spec, no_init) {
             'class': 'right-aligned-facet-controls'
         }).appendTo(that.controls);
 
-        div.append(IPA.create_network_spinner());
-
         that.filter_container = $('<div/>', {
             'class': 'search-filter'
         }).appendTo(div);
diff --git a/install/ui/src/freeipa/widget.js b/install/ui/src/freeipa/widget.js
index d4c9cb366..08270e319 100644
--- a/install/ui/src/freeipa/widget.js
+++ b/install/ui/src/freeipa/widget.js
@@ -164,6 +164,7 @@ IPA.widget = function(spec) {
      * @param {HTMLElement} container - Container node
      */
     that.create = function(container) {
+        container = $(container);
         container.addClass(that.base_css_class);
         container.addClass(that.css_class);
         that.container = container;
@@ -5464,6 +5465,8 @@ exp.activity_widget = IPA.activity_widget = function(spec) {
 
     that.text_node = null;
 
+    that.row_node = null;
+
     that.dots = spec.dots || 0;
 
     that.step = spec.step || 1;
@@ -5474,16 +5477,41 @@ exp.activity_widget = IPA.activity_widget = function(spec) {
 
     that.speed = spec.speed || 800;
 
+    that.icon = spec.icon || 'fa fa-spinner fa-spin';
+
+    /**
+     * Operation mode
+     *
+     * ['dots', 'icon']
+     *
+     * @property {string}
+     */
+    that.mode = spec.mode || "dots";
+
     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.row_node = $("<div/>", { 'class': 'activity-row' }).appendTo(that.container);
         that.text_node = $("<div/>", {
-            text: that.text
-        }).appendTo(that.container);
-        if (that.visible) that.start();
+            text: that.text,
+            'class': 'activity-text'
+        }).appendTo(that.row_node);
+
+        if (that.mode === 'icon') {
+            that.text_node.prepend(' ');
+            $('<i/>', {
+                'class': that.icon
+            }).prependTo(that.text_node);
+        }
+
+        if (that.visible) {
+            that.show();
+        } else {
+            that.hide();
+        }
         that.set_visible(that.visible);
         topic.subscribe(that.activate_event, function() {
             that.show();
@@ -5493,25 +5521,29 @@ exp.activity_widget = IPA.activity_widget = function(spec) {
         });
     };
 
-    that.start = function() {
+    that.toggle_timer = function(start) {
 
-        that.timer = window.setInterval( function() {
-            that.make_step();
-        }, that.speed);
-    };
+        if (that.mode === 'icon') return;
 
-    that.stop = function() {
-        if (that.timer) window.clearInterval(that.timer);
+        if (start) {
+            that.timer = window.setInterval( function() {
+                that.make_step();
+            }, that.speed);
+        } else {
+            if (that.timer) window.clearInterval(that.timer);
+        }
     };
 
     that.hide = function() {
         that.toggle_class('closed', true);
-        that.stop();
+        that.row_node.detach(); // to save CPU time (spinner icon)
+        that.toggle_timer(false);
     };
 
     that.show = function() {
         that.toggle_class('closed', false);
-        that.start();
+        that.row_node.appendTo(that.container);
+        that.toggle_timer(true);
     };
 
     that.make_step = function() {
diff --git a/install/ui/src/freeipa/widgets/App.js b/install/ui/src/freeipa/widgets/App.js
index c7924e8df..b70b14a94 100644
--- a/install/ui/src/freeipa/widgets/App.js
+++ b/install/ui/src/freeipa/widgets/App.js
@@ -31,11 +31,13 @@ define(['dojo/_base/declare',
         './Menu',
         './DropdownWidget',
         './FacetContainer',
+        '../text',
+        '../widget',
         'dojo/NodeList-dom'
        ],
        function(declare, lang, array, dom, construct, prop, dom_class,
                 dom_style, query, on, Menu, DropdownWidget,
-                FacetContainer) {
+                FacetContainer, text, widgets) {
 
     /**
      * Main application widget
@@ -63,10 +65,14 @@ define(['dojo/_base/declare',
 
         menu_node: null,
 
+        indicator_node: null,
+
         id: 'container',
 
         logged: false,
 
+        use_activity_indicator: true,
+
         _loggedSetter: function(value) {
             this.logged = value;
             //TODO show/hide menu
@@ -97,6 +103,11 @@ define(['dojo/_base/declare',
             this.content_node = construct.create('div', {
                 'class': 'content'
             }, this.dom_node);
+
+            if (this.use_activity_indicator) {
+                this.indicator_node = construct.create('div', {}, this.dom_node);
+                this.activity_indicator.create(this.indicator_node);
+            }
         },
 
         _render_navigation: function() {
@@ -162,14 +173,6 @@ define(['dojo/_base/declare',
                 'class': 'header-passwordexpires'
             }, this.nav_util_tool_node);
 
-            var network_activity = construct.create('li', {
-                'class': 'header-network-activity-indicator network-activity-indicator'
-            }, this.nav_util_tool_node);
-
-            construct.create('img', {
-                src: 'images/spinner-header-1.gif'
-            }, network_activity);
-
             var user_toggle = this._render_user_toggle_nodes();
             this.user_menu.set('toggle_content', user_toggle);
             construct.place(this.user_menu.render(), this.nav_util_tool_node);
@@ -241,6 +244,10 @@ define(['dojo/_base/declare',
         constructor: function(spec) {
             spec = spec || {};
             this.menu_widget = new Menu();
+            this.activity_indicator = widgets.activity_widget({
+                mode: 'icon',
+                text: text.get('@i18n:status.working', 'Working')
+            });
             this.user_menu = new DropdownWidget({
                 el_type:  'li',
                 name: 'profile-menu',