You are viewing a plain text version of this content. The canonical link for it is here.
Posted to xap-commits@incubator.apache.org by jm...@apache.org on 2006/11/17 03:25:35 UTC
svn commit: r476037 - in /incubator/xap/trunk: css/arrow_down.gif
css/arrow_up.gif css/xapDefault.css
src/xap/bridges/basic/AbstractWidgetBridge.js
src/xap/bridges/dojo/ColumnBridge.js src/xap/widgets/Label.js
src/xap/widgets/dojo/TreeTable.js
Author: jmargaris
Date: Thu Nov 16 19:25:34 2006
New Revision: 476037
URL: http://svn.apache.org/viewvc?view=rev&rev=476037
Log:
updated table sorting and fixed IE issue with flickering
mouse over colors
Added:
incubator/xap/trunk/css/arrow_down.gif (with props)
incubator/xap/trunk/css/arrow_up.gif (with props)
Modified:
incubator/xap/trunk/css/xapDefault.css
incubator/xap/trunk/src/xap/bridges/basic/AbstractWidgetBridge.js
incubator/xap/trunk/src/xap/bridges/dojo/ColumnBridge.js
incubator/xap/trunk/src/xap/widgets/Label.js
incubator/xap/trunk/src/xap/widgets/dojo/TreeTable.js
Added: incubator/xap/trunk/css/arrow_down.gif
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/css/arrow_down.gif?view=auto&rev=476037
==============================================================================
Binary file - no diff available.
Propchange: incubator/xap/trunk/css/arrow_down.gif
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Added: incubator/xap/trunk/css/arrow_up.gif
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/css/arrow_up.gif?view=auto&rev=476037
==============================================================================
Binary file - no diff available.
Propchange: incubator/xap/trunk/css/arrow_up.gif
------------------------------------------------------------------------------
svn:mime-type = application/octet-stream
Modified: incubator/xap/trunk/css/xapDefault.css
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/css/xapDefault.css?view=diff&rev=476037&r1=476036&r2=476037
==============================================================================
--- incubator/xap/trunk/css/xapDefault.css (original)
+++ incubator/xap/trunk/css/xapDefault.css Thu Nov 16 19:25:34 2006
@@ -144,6 +144,25 @@
}
+/* TABLE SORT ARROWS */
+
+.xapSortAscendingImage{
+ background-image: url(arrow_up.gif);
+ background-repeat: no-repeat;
+ background-position: center center;
+ padding: 8px;
+}
+
+.xapSortDescendingImage{
+ background-image: url(arrow_down.gif);
+ background-repeat: no-repeat;
+ background-position: center center;
+ padding: 8px;
+}
+
+.xapSortNoneImage{
+ padding: 8px;
+}
BODY {
Modified: incubator/xap/trunk/src/xap/bridges/basic/AbstractWidgetBridge.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/src/xap/bridges/basic/AbstractWidgetBridge.js?view=diff&rev=476037&r1=476036&r2=476037
==============================================================================
--- incubator/xap/trunk/src/xap/bridges/basic/AbstractWidgetBridge.js (original)
+++ incubator/xap/trunk/src/xap/bridges/basic/AbstractWidgetBridge.js Thu Nov 16 19:25:34 2006
@@ -724,6 +724,24 @@
}
xap.bridges.basic.AbstractWidgetBridge.prototype.onMouseOut= function(e){
+
+ //if we did not get the mouseout on us we could have gotten
+ //it moving from one descendent to another, so check for that.
+ //In that case we are still in the mouseOver style as the mouse just
+ //moved internally. This is only an issue in IE
+ if (e.srcElement && e.srcElement != this.getRootDomNode())
+ if (e.toElement){
+ var element = e.toElement;
+ while(element && (element!=this.getRootDomNode()) ){
+ element = element.parentNode;
+ }
+
+ //broke because the mouse out was us, so don't bother removing
+ //the style
+ if (element){
+ return;
+ }
+ }
//TODO fire event?
if (!this._disabled){
this.removeStyleState("MouseOver");
Modified: incubator/xap/trunk/src/xap/bridges/dojo/ColumnBridge.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/src/xap/bridges/dojo/ColumnBridge.js?view=diff&rev=476037&r1=476036&r2=476037
==============================================================================
--- incubator/xap/trunk/src/xap/bridges/dojo/ColumnBridge.js (original)
+++ incubator/xap/trunk/src/xap/bridges/dojo/ColumnBridge.js Thu Nov 16 19:25:34 2006
@@ -60,7 +60,7 @@
}
xap.bridges.dojo.ColumnBridge.prototype.addChild = function(childHandler, index){
- this.getPeer().setHeader(childHandler.getRootDomNode());
+ this.getPeer().setHeader(childHandler.getPeer());
}
Modified: incubator/xap/trunk/src/xap/widgets/Label.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/src/xap/widgets/Label.js?view=diff&rev=476037&r1=476036&r2=476037
==============================================================================
--- incubator/xap/trunk/src/xap/widgets/Label.js (original)
+++ incubator/xap/trunk/src/xap/widgets/Label.js Thu Nov 16 19:25:34 2006
@@ -72,6 +72,15 @@
this.setAutoWrap("false");
}
+xap.widgets.Label.prototype._createHintImg = function(){
+ if (!this.hintImg ){
+ this.hintImg = document.createElement("span");
+ this.hintImg.style.verticalAlign="middle";
+ this.td.appendChild(this.hintImg);
+ this.hintImg.innerHTML = " "
+ }
+}
+
xap.widgets.styleSet = function(el, properties) {
var style = el.style;
@@ -159,8 +168,15 @@
this._showImg();
}
-xap.widgets.Label.prototype.setImgHint = function(text) {
- // TODO: implement later
+/**
+ * Returns the placeholder for where the "hint image" is,
+ * which is always to the right of the text/image. It is supposed to float
+ * far right as in a menuItem with a child indicated by an arrow, but right now
+ * it appears next to which is ok for table headers.
+ */
+xap.widgets.Label.prototype.getImgHint = function( ) {
+ this._createHintImg();
+ return this.hintImg;
}
xap.widgets.Label.prototype.setAlignHorizontal = function(direction) {
Modified: incubator/xap/trunk/src/xap/widgets/dojo/TreeTable.js
URL: http://svn.apache.org/viewvc/incubator/xap/trunk/src/xap/widgets/dojo/TreeTable.js?view=diff&rev=476037&r1=476036&r2=476037
==============================================================================
--- incubator/xap/trunk/src/xap/widgets/dojo/TreeTable.js (original)
+++ incubator/xap/trunk/src/xap/widgets/dojo/TreeTable.js Thu Nov 16 19:25:34 2006
@@ -295,8 +295,8 @@
var cell = document.createElement("td");
this.headerRow.appendChild(cell);
cell.style.whiteSpace = "nowrap";
- if (this._columns[i]._header){
- cell.appendChild(this._columns[i]._header);
+ if (this._columns[i]._header._rootDomNode){
+ cell.appendChild(this._columns[i]._header._rootDomNode);
}
cell.style.visibility = this._headerVisibility;
}
@@ -482,7 +482,14 @@
sortColumn: function( column ){
- //TODO support different types
+ //blank out the sort icon on the column we previously sorted
+ if (this._lastSortedColumn && (this._lastSortedColumn != column)){
+ var oldHint = this._lastSortedColumn ._header.getImgHint();
+ dojo.html.removeClass(oldHint,'xapSortDescendingImage');
+ dojo.html.removeClass(oldHint,'xapSortAscendingImage');
+ dojo.html.addClass(oldHint,'xapSortNoneImage');
+ }
+
var dataType = column._dataType || "string";
//figure out what index the column is
@@ -508,27 +515,32 @@
if (dataType=="number"){
sortFunction = this._sortNumbersFunction;
}
+
+
//sort the array and change _rows to match
- //TODO choose different functions based on data types!
this._rows.sort(sortFunction);
-
- if (!column._sort){
+ var headerHint = column._header.getImgHint();
+ if (!column._sort || column._sort=='descending'){
column._sort = "ascending";
+ dojo.html.removeClass(headerHint,'xapSortDescendingImage');
+ dojo.html.addClass(headerHint,'xapSortAscendingImage');
}
- else if (column._sort && column._sort == "ascending"){
+ else{
column._sort = "descending";
+ dojo.html.removeClass(headerHint,'xapSortAscendingImage');
+ dojo.html.addClass(headerHint,'xapSortDescendingImage');
this._rows.reverse();
}
- else{
- column._sort = "ascending";
- }
+
//before we do anything set the widths of first row of cells
//so IE won't freak out
if (dojo.render.html.ie){
this._fixColumnWidths();
}
+
+ this._lastSortedColumn = column;
this._rebuildRowsLater();
},
@@ -578,10 +590,10 @@
this.domNode = document.createElement("col");
},
- setHeader: function( domNode ){
- this._header = domNode;
- dojo.event.connect(domNode, "onclick", this, "onClickCallback");
- dojo.html.addClass(domNode,"header");
+ setHeader: function( xapLabel ){
+ this._header = xapLabel;
+ dojo.html.addClass(xapLabel.getImgHint(),'xapSortNoneImage');
+ dojo.event.connect(xapLabel._rootDomNode, "onclick", this, "onClickCallback");
},
setTable: function(table){