Bug 311169

Comment 1 Ivan Furnadjiev 2010-05-03 03:12:11 EDT

Currently, the TableRow extends qx.ui.embed.HtmlEmbed (Terminator), which is not patched by the GraphicsMixin. Additional changes are need in order to support gradients in TableItem (TableRow).

Comment 2 Ivan Furnadjiev 2010-09-06 07:39:42 EDT

*** Bug 324565 has been marked as a duplicate of this bug. ***

Comment 3 Istvan Ballok 2010-09-16 15:33:04 EDT

Created attachment 179062 [details]
patch for the 1.3 Maintenance branch

tested with FF, IE, Chrome, Safari on Win
please see the commit message in the patch

the approach needs further refinements before it can be integrated in the framework.
- e.g. consider setting the background-image property on the TableItem directly,
instead of introducing a new CSS element (as I did, for now), to keep it consistent
- using a separate composite instance for each TableRow might result in performance implications (doubles the number of instances in the Table)
(reason: patching the TableRow with the Graphics Mixin did not work)

Comment 4 Istvan Ballok 2010-09-16 15:35:54 EDT

Created attachment 179063 [details]
patch for the CVS HEAD

I rebased the previous patch on to the current CVS HEAD.
it works fine in FF, Chrome, Safari,
but unfortunately, it does not work in IE (exception during the VML creation is thrown - I could not track it down)

Comment 5 Tim Buschtoens 2010-09-23 11:31:17 EDT

We will not create duplicate widgets for each row, it should be possible to use the GraphicsMixin with TableRow. I investigated this option and there are (as of now) 3 issues:

- Broken layout (all browser): This is because TableItem uses "getElement" instead of "_getTargetNode". Easy to fix.
- Error in prepareEnhancedBorder in IE: This is due to a value in styleProperties being null. Fixable using this lines in the right place:
              var value = this._styleProperties[ i ];
              cs[i] = ( value === null ) ? "" : value;
- "copyData" eror: This is difficult. Apparently this is because VML.handleAppear is called too early while the Widget is not actually in DOM already. After some investigation, i suspect that because Table.js creates the rows during the appear of its clientArea (_onClientAppear), qooxdoo gets confused and incorrectly marks the rows as seeable.

Comment 6 Tim Buschtoens 2010-09-23 11:41:23 EDT

Test to reproduce these problems:

    testTableItemGradient : function() {
      var testUtil = org.eclipse.rwt.test.fixture.TestUtil;
      testUtil.fakeAppearance( "table-row", {
        style : function( states ) {
          var result = {
            cursor : "default"
          };
          if( states.linesvisible ) {
            var border = new qx.ui.core.Border( 0 );
            var horizontalState = { "horizontal" : true };
            var tvGrid = new org.eclipse.swt.theme.ThemeValues( horizontalState );
            var gridColor = "red";        
            border.setColor( gridColor );
            border.setWidthBottom( 1 );
            result.border = border;
          } else {
            result.border = "undefined";
          }
          result.textColor = "black";
          result.backgroundColor 
            = "undefined";
          result.backgroundGradient = [ [ 0, "red" ], [ 1, "yellow" ] ];
          return result;

        }
      } );      
      var table = this._createDefaultTable( true );
      table.setLinesVisible( true );
      var item = new org.eclipse.swt.widgets.TableItem( table, 0 );
      item.setTexts( "Test0", "Test1" );
      testUtil.flush();
      var row = table._rows[ 0 ];
      testUtil.flush();
      table.updateRows();
      testUtil.flush();
      assertTrue( row._gfxBackgroundEnabled );
      assertTrue( row.getElement() !== row._getTargetNode() );
      assertEquals( 2, row.getElement().childNodes.length );
      assertEquals( 2, row._getTargetNode().childNodes.length );
    },
    
    _createDefaultTable : function( noflush ) {
      var testUtil = org.eclipse.rwt.test.fixture.TestUtil;
      var result = new org.eclipse.swt.widgets.Table( "w3", "" );
      result.setWidth( 100 );
      result.setHeight( 90 );
      result.setItemHeight( 20 );
      result.setItemMetrics( 0, 0, 100, 2, 10, 15, 70 );
      result.setItemMetrics( 1, 100, 100, 102, 10, 115, 70 );
      result.addToDocument();
      new org.eclipse.swt.widgets.TableColumn( result );
      new org.eclipse.swt.widgets.TableColumn( result );
      if( noflush !== false ) {
        testUtil.flush();
      }
      return result;
    }

Comment 7 Istvan Ballok 2010-11-09 05:32:46 EST

Created attachment 182692 [details]
fix for the patch for the 1.3 Maintenance branch

the problem was: the resize line was below the rows. If the row had a
backround, the resize line was visually covered by the row.

Comment 8 Istvan Ballok 2010-11-17 05:35:13 EST

Created attachment 183280 [details]
one more fix for the patch for the 1.3 Maintenance branch

the problem once again was: the checkbox had an unset z-index and was below the row. If the row had a backround, the checkbox was visually covered by the row.

And the checkbox could not be clicked at all independent of the background of the row.

Comment 9 Ivan Furnadjiev 2011-11-03 09:31:45 EDT

TreeItem and TableItem now support background-image CSS property (image and gradient).