[icinga-checkins] icinga.org: icinga-web/master: * Adding a loading mask to reduce eye pain . ...

git at icinga.org git at icinga.org
Tue Apr 13 13:17:35 CEST 2010


Module: icinga-web
Branch: master
Commit: e31b64675bc8b7477932d9097448bef3a26c2b6e
URL:    https://git.icinga.org/?p=icinga-web.git;a=commit;h=e31b64675bc8b7477932d9097448bef3a26c2b6e

Author: Marius Hein <marius.hein at netways.de>
Date:   Fri Apr  9 14:41:29 2010 +0200

* Adding a loading mask to reduce eye pain ....

---

 .../Cronks/templates/System/CronkPortalSuccess.php |   27 +++++++++++--------
 app/templates/ICINGAWireFrameMaster.php            |    8 ------
 lib/appkit/js/ext/ExtJs.js                         |   15 +++++++++++
 pub/images/ajax/wait.gif                           |  Bin 0 -> 9427 bytes
 pub/styles/Icinga.css                              |   23 +++++++++++++++++
 5 files changed, 54 insertions(+), 19 deletions(-)

diff --git a/app/modules/Cronks/templates/System/CronkPortalSuccess.php b/app/modules/Cronks/templates/System/CronkPortalSuccess.php
index 69c867d..838c80a 100644
--- a/app/modules/Cronks/templates/System/CronkPortalSuccess.php
+++ b/app/modules/Cronks/templates/System/CronkPortalSuccess.php
@@ -1,12 +1,19 @@
 <?php 
 	$parentid = $rd->getParameter('parentid');
 ?>
-<div id="<?php echo $parentid; ?>"></div>
+<div id="<?php echo $parentid; ?>">
+</div>
 <script type="text/javascript">
 <!-- // <![CDATA[
 
 Ext.onReady(function() {
 
+AppKit.Ext.pageLoadingMask();
+
+setTimeout(function() {
+	AppKit.Ext.pageLoadingMask(true);
+}, 3000);
+
 var SlidingTabs = (new(Ext.extend(Object, {
 	
 	init: function(tabpanel){
@@ -356,15 +363,18 @@ var container = new Ext.Panel({
 });
 
 container.on('afterrender', function() {
-	container.setHeight(Ext.lib.Dom.getViewHeight() - 68);
+	container.setHeight(Ext.lib.Dom.getViewHeight()-50);
 }, container, { single: true });
 
+// Fix lay problems later
+container.on('afterrender', function() { this.doLayout(false, true) }, container, { delay: 2000 });
+
 // Render the container
 container.render("<?php echo $parentid; ?>");
 
 // Resize the container on windowResize
 Ext.EventManager.onWindowResize(function(w,h) {
-	this.setHeight(h-68);
+	this.setHeight(h-50);
 	this.doLayout(false);
 }, container);
 
@@ -391,7 +401,7 @@ if ((search = Ext.getCmp(cronk_search_id))) {
 		crname: 'icingaSearch'
 	});
 
-	search.add(cSearch);	
+	search.add(cSearch);
 }
 
 // Status-summary component
@@ -404,6 +414,7 @@ if ((status_summary = Ext.getCmp(cronk_status_summary_id))) {
 	});
 
 	status_summary.add(cStatusSummary);
+	cStatusSummary.show();
 }
 
 if ((status_summary_chart = Ext.getCmp(cronk_status_summary_chart_id))) {
@@ -414,6 +425,7 @@ if ((status_summary_chart = Ext.getCmp(cronk_status_summary_chart_id))) {
 	});
 	
 	status_summary_chart.add(cStatusSummaryChart);
+	cStatusSummaryChart.show();
 }
 
 
@@ -462,13 +474,6 @@ if ((south = Ext.getCmp('south-frame'))) {
 	south.add(cLog);
 }
 
-container.doLayout(false, true);
-
-// Okay redraw all after a while (if all events are gone)
-(function() {
-	this.doLayout(false, true);
-}).defer(3000, container);
-
 });
 
 // ]]> -->
diff --git a/app/templates/ICINGAWireFrameMaster.php b/app/templates/ICINGAWireFrameMaster.php
index 79a4d07..f0a5675 100755
--- a/app/templates/ICINGAWireFrameMaster.php
+++ b/app/templates/ICINGAWireFrameMaster.php
@@ -32,15 +32,7 @@
 				
 				<?php echo $inner; ?>
 				</div>
-				
-				<div class="clear"></div>
-			</div>
-			
-			<?php if (isset($slots['footer'])) { ?>
-			<div id="frameBottom">
-				<?php echo $slots['footer']; ?>
 			</div>
-			<?php } ?>
 		
 		</div>
 	</body>
diff --git a/lib/appkit/js/ext/ExtJs.js b/lib/appkit/js/ext/ExtJs.js
index b0b8694..9f08173 100644
--- a/lib/appkit/js/ext/ExtJs.js
+++ b/lib/appkit/js/ext/ExtJs.js
@@ -94,6 +94,21 @@ AppKit.Ext = function() {
 	// Our public interface
 	Ext.override(pub, {
 		
+		pageLoadingMask : function(remove) {
+			remove = (remove || false);
+			var ids = ['icinga-portal-loading-mask', 'icinga-portal-loading']
+			if (remove) {
+				Ext.iterate(ids, function(v) {
+					Ext.get(v).fadeOut({remove: true});
+				});
+			}
+			else {
+				Ext.iterate(ids, function(v) {
+					Ext.DomHelper.append(Ext.getBody(), {tag: 'div', id: v});
+				});
+			}
+		},
+		
 		getTr : function() {
 			return taskRunner;
 		},
diff --git a/pub/images/ajax/wait.gif b/pub/images/ajax/wait.gif
new file mode 100644
index 0000000..e2a116c
Binary files /dev/null and b/pub/images/ajax/wait.gif differ
diff --git a/pub/styles/Icinga.css b/pub/styles/Icinga.css
index 8cfe20d..dde3ccf 100644
--- a/pub/styles/Icinga.css
+++ b/pub/styles/Icinga.css
@@ -5,6 +5,29 @@ body * {
 	font-size: 7pt;	
 }
 
+/** MISC **/
+
+div#icinga-portal-loading-mask {
+    position:absolute;
+    left:0;
+    top:0;
+    width:100%;
+    height:100%;
+    z-index:90000;
+    background-color:white;	
+}
+
+div#icinga-portal-loading {
+    position:absolute;
+    left:45%;
+    top:40%;
+    padding:2px;
+    z-index:90001;
+    height:32px;
+    width: 32px;
+    background: transparent url("../images/ajax/wait.gif") center center;
+}
+
 /** CRONKS **/
 
 div.icinga-osearch-frame div.icinga-osearch-wrap {





More information about the icinga-checkins mailing list