Thursday, April 4, 2013

Re: Changes Opacity for vertical scrollbar inside 2.4 DataGrid?


Hi Andrea,
Thanks a lot for the reply. I have tried your suggestions and it worked perfectly. I am copying code here so that others can use it if needed.

--As you said, following code is part of constructor of the class which extends DataGrid

 final CustomScrollPanel  scrollPanel = (CustomScrollPanel ) headerPanel.getContentWidget();
             NativeVerticalScrollbar.Resources resources = GWT.create(VerticalResources.class);
             NativeVerticalScrollbar nativeVerticalScrollbar = new NativeVerticalScrollbar( resources);
           
             scrollPanel.setVerticalScrollbar(nativeVerticalScrollbar, 16);


VerticalResources is the resources I declared as following:
    public interface VerticalResources extends NativeVerticalScrollbar.Resources
    {
        @Override
        @Source( { "CustomNativeVerticalScrollbarTransparent.css", NativeVerticalScrollbar.Style.DEFAULT_CSS } )
        NativeVerticalScrollbar.Style nativeVerticalScrollbarStyle();
    }


and the CSS file is as follows:
@def OPACITY_DURATION 350ms;

.nativeVerticalScrollbar {
  opacity: 1.0;
  filter: literal("alpha(opacity = 100)");
  -webkit-transition: opacity OPACITY_DURATION;
  -moz-transition: opacity OPACITY_DURATION;
  -o-transition: opacity OPACITY_DURATION;
  transition: opacity OPACITY_DURATION;
}

.nativeVerticalScrollbar:hover {
  opacity: 1.0;
  filter: literal("alpha(opacity = 100)");
}




On Wednesday, April 3, 2013 1:40:45 PM UTC-4, Andrea Boscolo wrote:
DataGrid uses a CustomScrollPanel for its data table. Such panel uses transparent-style native scrollbars, but the resources used (NativeVerticalScrollbar.ResourcesTransparant) are hardcoded in the CustomScrollPanel constructor. I guess you can:

- extend the DataGrid to obtain a reference of the inner CustomScrollPanel. See [1] on how to do that;
- extend the default NativeVerticalScrollbar.ResourcesTransparant to provide your own style (or use the no-op NativeVerticalScrollbar.Resources to remove any opacity);
- in the extended DataGrid constructor, after super(), use the CustomScrollPanel reference to set up a new scrollbar using the method setVerticalScrollbar(...) passing in a new NativeHorizontalScrollbar with your new resources.

The same applies for the horizontal scrollbar.

Or you can look at the DOM and figure out some hack to obtain the scrollbar container (as you tried).

[1] https://groups.google.com/forum/#!msg/google-web-toolkit/cdB07DEtmXU/9TNb72MI3Q4J

--
You received this message because you are subscribed to the Google Groups "Google Web Toolkit" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-web-toolkit+unsubscribe@googlegroups.com.
To post to this group, send email to google-web-toolkit@googlegroups.com.
Visit this group at http://groups.google.com/group/google-web-toolkit?hl=en.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

No comments:

Post a Comment