[Phpmyadmin-devel] Column reordering

[Aris Feryanto]

----- Original Message -----
> From: Rouslan Placella <rouslan at placella.com>
> 
> On Sat, 2011-06-11 at 14:05 +0100, Rouslan Placella wrote:
>>  On Sat, 2011-06-11 at 10:58 +0700, Aris Feryanto wrote:
>>  > 
>>  > I've updated my repo and it should be available in the demo soon. 
> I add small popup balloon when we hover the column header. I also add some css 
> code to prettify the column dragging. Please kindly check this.
>>  > 
>>  > P.S.: All my changes for column resize and reorder can be found under 
> "colresize" branch in my git repo.
>> 
>>  I found a small bug with the tooltip. See video here:
>>  http://www.placella.com/pma/colreorder_bug.avi
>> 
>>  Rouslan
> 
> I also found another small issue that you might want to look into. The
> pointer image that shows the user where the column that is being
> reordered is about to be dropped is not loaded until it's class is
> attached to the display element by jQuery. So this means that the
> pointer does not appear instantly when you move a column for the first
> time, but has to be downloaded first (about a second on my crappy
> internet connection on the demo server). There are two ways (that I know
> of) to fix this. You can attach the base64 encoded images inline with
> the data URI scheme (both, directly in the stylesheet or through jQuery)
> [1] or make a sprite from the two pointers that you have and load 1
> transparent pixel from the sprite at page load (this will force the
> whole sprite to load) [2].
> Also those pointer images that you used could be smaller. Currently they
> are saved in PNG format with an unnecessary comment that reads "Created
> with GIMP", an sRGB profile which is pointless since you only have black
> and transparent pixels and compression level 1. By removing the comment,
> the sRGB profile and by using compression level 9 you can get each image
> down from ~200bytes to ~100bytes. Or you could just save the images in
> GIF format which would bring the size down from ~200bytes to ~60bytes
> each. Hope this helps.
> 


Again, thanks for reporting this, Rouslan.

Actually, I assigned the css class that contain the pointer image directly after the document is loaded. But, at first, I use jQuery to hide it and it seems that firefox has some mechanism that prevent image to be downloaded when the "display" property is set to "none". (In chrome, the pointer image just downloaded directly after the document is ready. I checked this using chrome's developer tools)

About the suggestions:
- Use data URI scheme. I went to the wikipedia link you gave about URI scheme and read that some browsers (e.g. IE7) do not support the URI scheme.
- Use sprite. This is okay, but I found easier solution. :)

I googled a while and found that we can just set the visibility property instead of using jQuery's hide() and show(). By setting the visibility to 'hidden', firefox still loads the image. I've updated my code in my git repo.

I also removed comment and sRGB profile in the PNG image. The new size is now ~120 bytes.


--
Aris Feryanto