10:40 a.m.
Author: eallen
Date: 2009-04-30 11:40:42 -0400 (Thu, 30 Apr 2009)
New Revision: 3351
Modified:
mgmt/trunk/cumin/python/cumin/stat.strings
mgmt/trunk/cumin/python/cumin/visualizations.strings
mgmt/trunk/cumin/resources/ie.css
mgmt/trunk/wooly/python/wooly/pages.strings
Log:
Separated styles that are now supported in IE8 into a new style sheet.
Added "Loading" animation when switiching durations on charts (if it takes
longer than 1 second).
Modified: mgmt/trunk/cumin/python/cumin/stat.strings
===================================================================
--- mgmt/trunk/cumin/python/cumin/stat.strings 2009-04-30 15:10:19 UTC (rev 3350)
+++ mgmt/trunk/cumin/python/cumin/stat.strings 2009-04-30 15:40:42 UTC (rev 3351)
@@ -57,6 +57,7 @@
div.StatValueChart {
font-size: 0.9em;
margin: 0 0 1.5em 0;
+ position: relative;
width: 30em;
}
@@ -76,7 +77,42 @@
cursor: wait;
}
+div.loading {
+ background-color: #EEE;
+ border: 1px solid #CCC;
+ -moz-border-radius: 0.2em;
+
+ top: 40%;
+ left: 25%;
+
+ cursor: wait;
+ font-weight: bold;
+ text-align: center;
+ padding: 0.75em;
+
+ opacity: 0.75;
+ position: absolute;
+ visibility: hidden;
+ z-index: 10;
+}
+
+div.loading span {
+ background-position: 0% 40%;
+ background-repeat: no-repeat;
+ background-image: url("resource?name=loading.gif");
+ padding-left: 26px;
+ padding-right: 1em;
+ vertical-align: bottom;
+}
+
[JSDurationSwitch.javascript]
+function showLoading(id) {
+ var loading = $(id).getElement(".loading");
+ if (loading.loading) {
+ loading.setStyle('display', 'block');
+ }
+}
+
function changeDuration(state, a, id) {
li = a.parentNode;
ul = li.parentNode;
@@ -100,6 +136,10 @@
hash[id] = state;
wooly.session.setHash(hash);
}
+ var loading = $(id).getElement(".loading");
+ loading.loading = true;
+ setTimeout("showLoading('"+id+"')", 1000);
+
return false;
}
@@ -130,15 +170,25 @@
<div class="duration">{duration}</div>
<img id="{id}" src="{href}" height="{height}"
width="{width}" alt="stats" />
+ <div class="loading"
style="display:none;"><span>Loading...</span></div>
</div>
<script type="text/javascript">
//<![CDATA[
+(function() {
wooly.addPageUpdateListener(
function () {
if (document.images["{id}"].className == "Loading")
return;
cumin.updateChart("{id}");
});
+ var oImg = document.images['{id}'];
+ $(oImg).addEvent('load', function () {
+ var loading = $("{id}").getElement(".loading");
+ loading.setStyle('display', 'none');
+ loading.setStyle('visibility', 'visible');
+ loading.loading = false
+ });
+}())
//]]>
</script>
@@ -174,6 +224,7 @@
<div class="duration">{duration}</div>
<img id="{id}" src="{href}" alt="Stacked Value Chart"
/>
+ <div class="loading"
style="display:none;"><span>Loading...</span></div>
</div>
<script type="text/javascript">
//<![CDATA[
@@ -194,6 +245,15 @@
this.removeAttribute("height");
this.className = "";
});
+ $(oImg).addEvent('mousedown', function(event){
+ event.stop();
+ });
+ $(oImg).addEvent('load', function () {
+ var loading = $("{id}").getElement(".loading");
+ loading.setStyle('display', 'none');
+ loading.setStyle('visibility', 'visible');
+ loading.loading = false
+ });
}())
//]]>
</script>
Modified: mgmt/trunk/cumin/python/cumin/visualizations.strings
===================================================================
--- mgmt/trunk/cumin/python/cumin/visualizations.strings 2009-04-30 15:10:19 UTC (rev
3350)
+++ mgmt/trunk/cumin/python/cumin/visualizations.strings 2009-04-30 15:40:42 UTC (rev
3351)
@@ -401,10 +401,8 @@
oControls.style.display = "none";
}
}
- var oVis = document.getElementById("slot_visualization");
- if (oVis) {
- oVis.style.visibility = "visible";
- }
+ $("slot_visualization").style.visibility = "visible";
+ cumin.makeFullPageable($("slot_visualization"));
slot_zoom_initialized = true;
function set_text(odiv, text, className) {
Modified: mgmt/trunk/cumin/resources/ie.css
===================================================================
--- mgmt/trunk/cumin/resources/ie.css 2009-04-30 15:10:19 UTC (rev 3350)
+++ mgmt/trunk/cumin/resources/ie.css 2009-04-30 15:40:42 UTC (rev 3351)
@@ -9,19 +9,12 @@
border-left: 0;
}
-ul.radiotabs li a {
- background-image: url(resource?name=radio-button.png);
- background-repeat: no-repeat;
- background-position: 0 1px;
- padding-left: 1.4em;
-}
-
-ul.radiotabs li a.selected {
- background-image: url(resource?name=radio-button-checked.png);
-}
-
/* force ie to honor mouse events on empty div */
div#slot_glass {
background-color: white;
filter:alpha(opacity=0);
}
+
+div.loading {
+ filter:alpha(opacity=75);
+}
Modified: mgmt/trunk/wooly/python/wooly/pages.strings
===================================================================
--- mgmt/trunk/wooly/python/wooly/pages.strings 2009-04-30 15:10:19 UTC (rev 3350)
+++ mgmt/trunk/wooly/python/wooly/pages.strings 2009-04-30 15:40:42 UTC (rev 3351)
@@ -11,6 +11,7 @@
<link rel="stylesheet" type="text/css"
href="resource?name=app.css"/>
<link rel="stylesheet" type="text/css"
href="{base_name}.css"/>
<!--[if IE]><link rel="stylesheet" type="text/css"
href="resource?name=ie.css"/><![endif]-->
+ <!--[if lte IE 7]><link rel="stylesheet" type="text/css"
href="resource?name=ielte7.css"/><![endif]-->
<script type="text/javascript"
src="resource?name=mootools.js"> </script>
<script type="text/javascript"
src="resource?name=wooly.js"> </script>