merge loading icon and reload button

static/js/loadingIcon.js

@@ -2,14 +2,64 @@
 
 pandora.ui.loadingIcon = function() {
 
-    var that = Ox.LoadingIcon({size: 'medium'});
+    var self = {},
+        that = Ox.LoadingIcon({
+            tooltip: 'Reload Application'
+        }, self)
+        .attr({
+            src: Ox.UI.getImageURL('symbolRedo')
+        })
+        .css(getCSS('stop'))
+        .bindEvent({
+            anyclick: function() {
+                pandora.$ui.appPanel.reload();
+            }
+        });
+
+    that.superStart = that.start;
+    that.superStop = that.stop;
+
+    that.start = function() {
+        if (!self.loadingInterval) {
+            that.css(getCSS('start'))
+                .attr({
+                    src: Ox.UI.getImageURL('symbolLoading')
+                });
+            that.superStart();
+        }
+    };
+
+    that.stop = function() {
+        if (self.loadingInterval) {
+            that.superStop(function() {
+                if (!self.loadingInterval) {
+                    that.css(getCSS('stop'))
+                        .attr({
+                            src: Ox.UI.getImageURL('symbolRedo')
+                        });
+                }
+            });
+        }
+    };
 
     that.update = function(requests) {
-        that[requests ? 'start' : 'stop']().options({
+        that[requests ? 'start' : 'stop']();
-            tooltip: (requests || 'No') + ' request' + (requests == 1 ? '' : 's')
-        });
     };
 
+    function getCSS(action) {
+        return action == 'start' ? {
+            width: '16px',
+            height: '16px',
+            margin: 0,
+            opacity: 0
+        } : {
+            width: '10px',
+            height: '10px',
+            margin: '3px',
+            opacity: 1
+        };
+    }
+
     return that;
 
 };

static/js/mainMenu.js

@@ -9,8 +9,7 @@ pandora.ui.mainMenu = function() {
         fullscreenState = Ox.Fullscreen.getState(),
         that = Ox.MainMenu({
             extras: [
-                pandora.$ui.loadingIcon = pandora.ui.loadingIcon(),
+                pandora.$ui.loadingIcon = pandora.ui.loadingIcon()
-                pandora.$ui.reloadButton = pandora.ui.reloadButton()
             ],
             id: 'mainMenu',
             menus: [].concat(
@@ -211,7 +210,6 @@ pandora.ui.mainMenu = function() {
                     ? [
                         { id: 'debugMenu', title: Ox._('Debug'), items: [
                             { id: 'clearcache', title: Ox._('Clear Cache')},
-                            { id: 'reloadapplication', title: Ox._('Reload Application')},
                             {},
                             { id: 'debugmode', title: Ox._((pandora.localStorage('enableDebugMode') ? 'Disable' : 'Enable') + ' Debug Mode') },
                             { id: 'eventlogging', title: Ox._((pandora.localStorage('enableEventLogging') ? 'Disable' : 'Enable') + ' Event Logging')},
@@ -421,8 +419,6 @@ pandora.ui.mainMenu = function() {
                     pandora.$ui.contentPanel.replaceElement(0, pandora.$ui.browser = pandora.ui.browser());
                 } else if (data.id == 'clearcache') {
                     Ox.Request.clearCache();
-                } else if (data.id == 'reloadapplication') {
-                    pandora.$ui.appPanel.reload();
                 } else if (data.id == 'debugmode') {
                     if (pandora.localStorage('enableDebugMode')) {
                         pandora.localStorage['delete']('enableDebugMode');

static/js/reloadButton.js

@@ -1,19 +0,0 @@
-'use strict';
-
-pandora.ui.reloadButton = function() {
-
-    var that = Ox.Button({
-            style: 'symbol',
-            title: 'reload',
-            tooltip: Ox._('Reload Application'),
-            type: 'image'
-        })
-        .bindEvent({
-            click: function() {
-                pandora.ui.appPanel.reload();
-            }
-        });
-
-    return that;
-
-};