Hi Marc, ----- Original Message -----

From: Marc Delisle <marc@infomarc.info> To: phpmyadmin-devel@lists.sourceforge.net Cc: Sent: Wednesday, June 1, 2011 7:08 PM Subject: Re: [Phpmyadmin-devel] Column resizing & reordering

Aris Feryanto a écrit :

...

Hi all,

I pushed my work on two related features: column resizing & reordering. I tried (and struggled :) ) to make these features as compatible as possible with inline editing and vertical display mode. The features currently work in Browse, SQL and Search tab. I also integrate it with current ajax pagination and sorting.

You may try the demo at [0]. Your comments and suggestions are really appreciated.

Note: In vertical display mode, column reordering reorders the table header in the left of the table.

I made quick tests and it works fine, congratulations. I'll make more complete tests later.

Thank you for taking time to test the features.

I am wondering: if someone reorders the columns, doesn't he want to

1. keep the new order next time he browses 2. if so, have a button to revert to the original ordering?

I think these will be great and since the ordering is done using jQuery script in client side, I think ajax will be the best way to do it. -- Aris Feryanto

Hi Marc,

Marc Delisle a écrit :

Aris, I tested with sakila.actor.

Under IE 8 /Windows XP / pmahomme theme, after a column move I lose all column headers.

Fixed. The greying animation seem to be the problem, so I disabled the greying animation.

Under FF 4.0.1 / Windows XP / original theme

- when dragging the column I don't see the visual cue that I have with pmahomme; but if I drop the column at the desired landing place, the move happens

- when trying to resize I have no cue, therefore I cannot do the operation

Fixed. Please kindly test the new version. -- Aris Feryanto

From: Marc Delisle <marc@infomarc.info>

Aris Feryanto a écrit :

...

Hi Marc,

...

Marc Delisle a écrit :

...

Aris, I tested with sakila.actor.

Under IE 8 /Windows XP / pmahomme theme, after a column move I lose all

...

...

column headers.

Fixed. The greying animation seem to be the problem, so I disabled the greying animation.

...

Under FF 4.0.1 / Windows XP / original theme

- when dragging the column I don't see the visual cue that I have with pmahomme; but if I drop the column at the desired landing place, the move happens

- when trying to resize I have no cue, therefore I cannot do the operation

Fixed. Please kindly test the new version.

I confirm the fixes. I also like the arrow.

Another thing (and I confirmed this with another user). When a column moves, I expect that it stays at the new place at least when I click Next, End, Begin, etc.

Hi Marc, I will work on this. Like my previous work, the order remembering will be stored in session or, if available, in phpMyAdmin database (will use pma_uiprefs for the storage). I'll let you know once it is done. Thank you. -- Aris Feryanto

Aris Feryanto a écrit :

Hi all,

I pushed my work to git repo in [0]. My recent commits add functionality to remember the column order, so that when we press next, prev, or anything that refresh the table, we will get same column order. The commits also fix some bugs and implement some previous suggestions. If you have some time, you may test the demo at [1]. Any comment or suggestion is really appreciated. :)

Here is the list of what I did:

- Remember column order in session or phpMyAdmin configuration storage, if configured.

Aris, I had a little time to test today. I had a look at how you store the column order in pma_table_uiprefs. You are using column numbers. This gave me an idea for a possible bug which I tested and proved indeed a bug. If a structure change occurs in the table (let's say I add a column, either after an existing column or at the end), display problems happen. I also see Notice in ./libraries/display_tbl.lib.php#461 Undefined index: cf7e1a12c9f636989429f8e2d369eaa5 on a table on which I added a column.

- Add "Restore table" button to restore table order.

We'll have to find a better name for this button... but it works well. Also I'm not sure about showing it greyed when columns are in original order.

- Add compatibility of column reordering with custom "RowActionLinks" (where to show the actions column) and "RepeatCells" (repeat displaying table header every x cells). In current demo, if we set "RepeatCells" to a small number, we can see lines of headers, and we can drag any header to do the reordering. - Add different header pointer for vertical display when reordering. - Tried to remove the highlighting when we reorder column, but I see that some highlighting (row highlight in horizontal mode) is set from css.

And I have some bug fix for current official git:

- Commit 3e3234b156a300e5517d1239755ff49270f24000. Headers not shown correctly in horizontal mode, when we set RowActionLinks = Nowhere, RepeatCells = some value that enough to display repeated header. Header for checkbox is missing. - Commit b0717ff8d5aa263b572746711acc50f7996ea87d. "Hide" button (after clicking inline edit) not working correctly when we set RowActionLinks = Right.

[0] http://repo.or.cz/w/phpmyadmin/arisferyanto.git [1] http://demo.phpmyadmin.net/gsoc-aris/

Regards,

-- Aris Feryanto

------------------------------------------------------------------------------ EditLive Enterprise is the world's most technically advanced content authoring tool. Experience the power of Track Changes, Inline Image Editing and ensure content is compliant with Accessibility Checking. http://p.sf.net/sfu/ephox-dev2dev _______________________________________________ Phpmyadmin-devel mailing list Phpmyadmin-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel

-- Marc Delisle http://infomarc.info

Aris Feryanto a écrit :

Hi Marc,

----- Original Message -----

...

From: Marc Delisle <marc@infomarc.info>

Aris Feryanto a écrit :

...

Hi all,

I pushed my work to git repo in [0]. My recent commits add functionality to remember the column order, so that when we press next, prev, or anything that refresh the table, we will get same column order. The commits also fix some bugs and implement some previous suggestions. If you have some time, you may test the demo at [1]. Any comment or suggestion is really appreciated. :) Here is the list of what I did:

- Remember column order in session or phpMyAdmin configuration storage, if configured.

Aris, I had a little time to test today. I had a look at how you store the column order in pma_table_uiprefs. You are using column numbers. This gave me an idea for a possible bug which I tested and proved indeed a bug.

If a structure change occurs in the table (let's say I add a column, either after an existing column or at the end), display problems happen.

I also see Notice in ./libraries/display_tbl.lib.php#461 Undefined index: cf7e1a12c9f636989429f8e2d369eaa5

on a table on which I added a column.

Fixed. To solve the problem caused by changing table structure, I add some checking of table creation time, so everytime a table is modified, the column order will be reset (any better way?). Please check it in my git repo or test in the demo server [0].

I wonder if the logic should handle the structure changes made outside of phpMyAdmin?

In my last commit, I also fix a bug for "Remember table sorting". I add checking whether the remembered sorted-column still exist in the table.

[0] http://demo.phpmyadmin.net/gsoc-aris

...

...

- Add "Restore table" button to restore table order. We'll have to find a better name for this button... but it works well. Also I'm not sure about showing it greyed when columns are in original order.

How about "Restore column" ? At first, I only set property "disabled" for the button and expect it will be rendered differently from other buttons. But, it just rendered similar with other buttons. So, I greyed the button manually.

I suggest "Restore column order". I would prefer to make this button disappear completely when not appropriate. I am also wondering how to "publicize" these two new features (how to make more apparent that these are available). -- Marc Delisle http://infomarc.info

----- Original Message -----

From: Tyron Madlener <tyronx@gmail.com>

On Thu, Jun 9, 2011 at 2:22 PM, Marc Delisle <marc@infomarc.info> wrote:

...

I am also wondering how to "publicize" these two new features

(how to

...

make  more apparent that these are available).

Ideas: - A dragging indicator like gmail emails have on their left end - A border around each column that fades in and out when hovering over - When pma db is available, a speech bubble pointing at the columns explaining the new feature (which appears only one time) - 'Tip of the day' or 'Did you know?' - Box on the pma main window

Good ideas. Another idea: how about small popup balloon when hovering table header? (like in http://www.apple.com/why-mac/compare/)

Btw.: Column reordering behaves weird when you try to drag the column while your mouse is over the column text.

I think it is because the browser think we are dragging a link. Will find some way to make this better.

And one feature suggestion: A small 'x' on each column corner allowing you to hide them.

Yes, this is the next feature I would like to implement. Show/hide column. -- Aris Feryanto

On Fri, Jun 10, 2011 at 3:30 AM, Aris Feryanto <aris_feryanto@yahoo.com> wrote:

----- Original Message -----

...

From: Tyron Madlener <tyronx@gmail.com>

On Thu, Jun 9, 2011 at 2:22 PM, Marc Delisle <marc@infomarc.info> wrote:

...

 I am also wondering how to "publicize" these two new features

(how to

...

 make  more apparent that these are available).

Ideas: - A dragging indicator like gmail emails have on their left end - A border around each column that fades in and out when hovering over - When pma db is available, a speech bubble pointing at the columns explaining the new feature (which appears only one time) - 'Tip of the day' or 'Did you know?' - Box on the pma main window

Good ideas. Another idea: how about small popup balloon when hovering table header? (like in http://www.apple.com/why-mac/compare/)

Indeed, that's a good idea. On that apple site, it looks nice how that shadow around the element appears while dragging. Maybe that's possible for the column dragging too?

...

Btw.: Column reordering behaves weird when you try to drag the column while your mouse is over the column text.

I think it is because the browser think we are dragging a link. Will find some way to make this better.

...

And one feature suggestion: A small 'x' on each column corner allowing you to hide them.

Yes, this is the next feature I would like to implement. Show/hide column.

-- Aris Feryanto

------------------------------------------------------------------------------ EditLive Enterprise is the world's most technically advanced content authoring tool. Experience the power of Track Changes, Inline Image Editing and ensure content is compliant with Accessibility Checking. http://p.sf.net/sfu/ephox-dev2dev _______________________________________________ Phpmyadmin-devel mailing list Phpmyadmin-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel

On Fri, Jun 10, 2011 at 10:48 AM, Aris Feryanto <aris_feryanto@yahoo.com> wrote:

----- Original Message -----

...

From: Tyron Madlener <tyronx@gmail.com>

On Fri, Jun 10, 2011 at 3:30 AM, Aris Feryanto <aris_feryanto@yahoo.com> wrote:

...

  ----- Original Message -----

...

  From: Tyron Madlener <tyronx@gmail.com>

  On Thu, Jun 9, 2011 at 2:22 PM, Marc Delisle <marc@infomarc.info>

wrote:

...

...

...

   I am also wondering how to "publicize" these two new

features   (how to

...

   make  more apparent that these are available).

  Ideas:   - A dragging indicator like gmail emails have on their left end   - A border around each column that fades in and out when hovering over   - When pma db is available, a speech bubble pointing at the columns   explaining the new feature (which appears only one time)   - 'Tip of the day' or 'Did you know?' - Box on the pma main   window

  Good ideas. Another idea: how about small popup balloon when hovering table header?   (like in http://www.apple.com/why-mac/compare/)

Indeed, that's a good idea. On that apple site, it looks nice how that shadow around the element appears while dragging. Maybe that's possible for the column dragging too?

This is rather complicated. I checked the site and found that every columns is built in its own div, so it's easy to animate one column at once. While, in phpMyAdmin browse-mode, what we have is a <table> structure.

Oh I was actually referring to the floating column header alone. But yea, floating the whole column would look nicer. It shouldn't be so hard though. It would only need to clone that one column into the floated element and afterwards discard it when dropped, i think.

-- Aris Feryanto

------------------------------------------------------------------------------ EditLive Enterprise is the world's most technically advanced content authoring tool. Experience the power of Track Changes, Inline Image Editing and ensure content is compliant with Accessibility Checking. http://p.sf.net/sfu/ephox-dev2dev _______________________________________________ Phpmyadmin-devel mailing list Phpmyadmin-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel

On Fri, Jun 10, 2011 at 11:46 AM, Aris Feryanto <aris_feryanto@yahoo.com> wrote:

----- Original Message -----

...

From: Tyron Madlener <tyronx@gmail.com>

On Fri, Jun 10, 2011 at 10:48 AM, Aris Feryanto <aris_feryanto@yahoo.com> wrote:

...

 ----- Original Message -----

...

 From: Tyron Madlener <tyronx@gmail.com>

 On Fri, Jun 10, 2011 at 3:30 AM, Aris Feryanto

<aris_feryanto@yahoo.com>

...

...

 wrote:

...

  ----- Original Message -----

...

  From: Tyron Madlener <tyronx@gmail.com>

  On Thu, Jun 9, 2011 at 2:22 PM, Marc Delisle

<marc@infomarc.info>  wrote:

...

...

> >    I am also wondering how to "publicize" these t wo new  features   (how to >    make  more apparent that these are available). >

  Ideas:   - A dragging indicator like gmail emails have on their left end   - A border around each column that fades in and out when hovering over   - When pma db is available, a speech bubble pointing at the columns   explaining the new feature (which appears only one time)   - 'Tip of the day' or 'Did you know?' - Box on the pma  main   window

  Good ideas. Another idea: how about small popup balloon when hovering table  header?   (like in http://www.apple.com/why-mac/compare/)

 Indeed, that's a good idea.  On that apple site, it looks nice how that shadow around the element  appears while dragging. Maybe that's possible for the column dragging  too?

 This is rather complicated. I checked the site and found that every columns is built in its own div, so it's easy to animate one column at once. While, in phpMyAdmin browse-mode, what we have is a <table> structure.

Oh I was actually referring to the floating column header alone. But yea, floating the whole column would look nicer. It shouldn't be so hard though. It would only need to clone that one column into the floated element and afterwards discard it when dropped, i think.

Oh. I see. I thought that you said about the whole column. Yes, I agree it would make the column header prettier.

And about the whole column, I'm also thinking about performance issue, especially when we have lots of rows to clone (e.g. when we press "Show all" button in a huge table) or the column contains a lot of transformed data (e.g. image).

Performance might be an issue indeed.

-- Aris Feryanto

------------------------------------------------------------------------------ EditLive Enterprise is the world's most technically advanced content authoring tool. Experience the power of Track Changes, Inline Image Editing and ensure content is compliant with Accessibility Checking. http://p.sf.net/sfu/ephox-dev2dev _______________________________________________ Phpmyadmin-devel mailing list Phpmyadmin-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel

Aris Feryanto a écrit :

----- Original Message -----

...

From: Marc Delisle <marc@infomarc.info>

Aris Feryanto a écrit :

...

Hi Marc,

----- Original Message -----

...

From: Marc Delisle <marc@infomarc.info>

Aris Feryanto a écrit :

...

Hi all,

I pushed my work to git repo in [0]. My recent commits add functionality to remember the column order, so that when we press next, prev, or anything that refresh the table, we will get same column order. The commits also fix some bugs and implement some previous suggestions. If you have some time, you may test the demo at [1]. Any comment or suggestion is really appreciated. :) Here is the list of what I did:

- Remember column order in session or phpMyAdmin configuration storage, if configured.

Aris, I had a little time to test today. I had a look at how you store the column order in pma_table_uiprefs. You are using column numbers. This gave me an idea for a possible bug which I tested and proved indeed a bug.

If a structure change occurs in the table (let's say I add a column, either after an existing column or at the end), display problems happen.

I also see Notice in ./libraries/display_tbl.lib.php#461 Undefined index: cf7e1a12c9f636989429f8e2d369eaa5

on a table on which I added a column. Fixed. To solve the problem caused by changing table structure, I add some checking of table creation time, so everytime a table is modified, the column order will be reset (any better way?). Please check it in my git repo or test in the demo server [0]. I wonder if the logic should handle the structure changes made outside of phpMyAdmin?

I've tested that the table creation time also gets updated when we make changes outside phpMyAdmin. In my test, I used MySQL command line to make some changes and can be detected from 'CREATE_TIME' info.

...

...

In my last commit, I also fix a bug for "Remember table sorting". I add checking whether the remembered sorted-column still exist in the table.

[0] http://demo.phpmyadmin.net/gsoc-aris

...

...

- Add "Restore table" button to restore table order. We'll have to find a better name for this button... but it works well. Also I'm not sure about showing it greyed when columns are in original order.

How about "Restore column" ? At first, I only set property "disabled" for the button and expect it will be rendered differently from other buttons. But, it just rendered similar with other buttons. So, I greyed the button manually. I suggest "Restore column order". I would prefer to make this button disappear completely when not appropriate.

Done in my git.

...

I am also wondering how to "publicize" these two new features (how to make more apparent that these are available).

Aris, do you believe this feature is ready to be merged to the official tree? -- Marc Delisle http://infomarc.info

Aris Feryanto a écrit :

----- Original Message -----

...

From: Marc Delisle <marc@infomarc.info>

Aris Feryanto a écrit :

...

Done in my git.

...

I am also wondering how to "publicize" these two new features (how to make more apparent that these are available). Aris, do you believe this feature is ready to be merged to the official tree?

Hi Marc,

How about the way to publicize the features? Should we implement it first? There were several suggestions from Tyron and me regarding this.

Yes, please try to find something. -- Marc Delisle http://infomarc.info

On Sat, 2011-06-11 at 10:58 +0700, Aris Feryanto wrote:

On 10 Jun 2011, at 20:31, Marc Delisle <marc@infomarc.info> wrote:

...

Aris Feryanto a écrit :

...

----- Original Message -----

...

From: Marc Delisle <marc@infomarc.info>

Aris Feryanto a écrit :

...

Done in my git.

...

I am also wondering how to "publicize" these two new features (how to make more apparent that these are available). Aris, do you believe this feature is ready to be merged to the official tree?

Hi Marc,

How about the way to publicize the features? Should we implement it first? There were several suggestions from Tyron and me regarding this.

Yes, please try to find something.

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

----- Original Message -----

From: Rouslan Placella <rouslan@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

On Sat, 2011-06-11 at 21:23 -0700, Aris Feryanto wrote:

Hi Rouslan,

----- Original Message -----

...

From: Rouslan Placella <rouslan@placella.com>

On Sat, 2011-06-11 at 10:58 +0700, Aris Feryanto wrote:

...

On 10 Jun 2011, at 20:31, Marc Delisle <marc@infomarc.info> 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

Thank you for reporting this. It is nice to show that in the video. I tested in some browsers (chrome, firefox, IE) and found that the bug only occurred in firefox/ubuntu. I've fixed this in my git repo.

It works great now. By the way, I found another few small issues that you might want to look at :) You hard-coded a lot of sizes in CSS in px units. So now items don't really scale. For example, go to main PMA page and from the dropdown select font size of, for example, 132%. Now go to browse a table and hover the column header. You will see your "Drag to reorder" hint is the same as when the font size was set to 82%, but instead it should be bigger. You can use the 'em' unit instead of the 'px' unit in CSS to fix this. Also, while resizing a column, the "Drag to reorder" hint keeps trying to pop out when you hover the label of the column. And when you resize the column to a small size, about 10px, and then hold the mouse still a bit both the hints for sorting and reordering pop out (see attached screenshot). And at this point I think that "Sort" alone doesn't mean much any more, so in my opinion the two hints should be merged into one like "Drag to Reorder <br /> Click to Sort". Rouslan

Rouslan Placella a écrit :

On Sat, 2011-06-11 at 21:23 -0700, Aris Feryanto wrote:

...

Hi Rouslan,

----- Original Message -----

...

From: Rouslan Placella <rouslan@placella.com>

On Sat, 2011-06-11 at 10:58 +0700, Aris Feryanto wrote:

...

On 10 Jun 2011, at 20:31, Marc Delisle <marc@infomarc.info> 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

Thank you for reporting this. It is nice to show that in the video. I tested in some browsers (chrome, firefox, IE) and found that the bug only occurred in firefox/ubuntu. I've fixed this in my git repo.

It works great now. By the way, I found another few small issues that you might want to look at :)

You hard-coded a lot of sizes in CSS in px units. So now items don't really scale. For example, go to main PMA page and from the dropdown select font size of, for example, 132%. Now go to browse a table and hover the column header. You will see your "Drag to reorder" hint is the same as when the font size was set to 82%, but instead it should be bigger. You can use the 'em' unit instead of the 'px' unit in CSS to fix this.

Also, while resizing a column, the "Drag to reorder" hint keeps trying to pop out when you hover the label of the column. And when you resize the column to a small size, about 10px, and then hold the mouse still a bit both the hints for sorting and reordering pop out (see attached screenshot). And at this point I think that "Sort" alone doesn't mean much any more, so in my opinion the two hints should be merged into one like "Drag to Reorder <br /> Click to Sort".

Just one hint could be confusing because there are many possibilities: - click on link to sort - click in the <th> (but not on the link) to mark/unmark the column - drag the <th> -- Marc Delisle http://infomarc.info

Rouslan Placella a écrit :

On Mon, 2011-06-13 at 08:09 -0400, Marc Delisle wrote:

...

Rouslan Placella a écrit :

...

On Sat, 2011-06-11 at 21:23 -0700, Aris Feryanto wrote:

...

Hi Rouslan,

----- Original Message -----

...

From: Rouslan Placella <rouslan@placella.com>

On Sat, 2011-06-11 at 10:58 +0700, Aris Feryanto wrote:

...

On 10 Jun 2011, at 20:31, Marc Delisle <marc@infomarc.info> 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

Thank you for reporting this. It is nice to show that in the video. I tested in some browsers (chrome, firefox, IE) and found that the bug only occurred in firefox/ubuntu. I've fixed this in my git repo.

It works great now. By the way, I found another few small issues that you might want to look at :)

You hard-coded a lot of sizes in CSS in px units. So now items don't really scale. For example, go to main PMA page and from the dropdown select font size of, for example, 132%. Now go to browse a table and hover the column header. You will see your "Drag to reorder" hint is the same as when the font size was set to 82%, but instead it should be bigger. You can use the 'em' unit instead of the 'px' unit in CSS to fix this.

Also, while resizing a column, the "Drag to reorder" hint keeps trying to pop out when you hover the label of the column. And when you resize the column to a small size, about 10px, and then hold the mouse still a bit both the hints for sorting and reordering pop out (see attached screenshot). And at this point I think that "Sort" alone doesn't mean much any more, so in my opinion the two hints should be merged into one like "Drag to Reorder <br /> Click to Sort". Just one hint could be confusing because there are many possibilities:

- click on link to sort - click in the <th> (but not on the link) to mark/unmark the column - drag the <th>

Looks like Aris already picked up on my suggestion about the combined hint. I think it works quite nice in that it only shows "Click to sort" when you hover the link. I guess that at this point maybe the hint could contain the same way "Click to mark" when one is over a <th>, but not the link.

BTW, is there any practical use for "marking" columns, like performing an operation on marked columns, or is it just a visual aid?

It's only visual for now; could be used when someone is doing a presentation. -- Marc Delisle http://infomarc.info

Aris Feryanto a écrit :

Hi,

Just realized my previous email seem not delivered successfully to phpMyAdmin-devel list. I've previously sent an email telling that I will work on merging the tooltip as suggested by Rouslan. I'm still working and testing on this and will add the 'Click to mark'.

I am also fixing the previous code, as it hasn't checked whether we are under Browse tab, before calling the column-order remembering function.

I wonder if there is any existing exact way to check if we are under Browse tab? Current code do the checking using requested url pattern and analyzed SQL query (you may see function PMA_isBrowsing in file libraries/display_tbl.lib.php in my git repo). But, this is not enough for handling load from AJAX request under other tabs (e.g. AJAX request to sql.php caused by pagination of results under SQL tab)

Yes, this is difficult to solve with current code; maybe it's time for a new tbl_browse.php that could set some constant, then require sql.php. Further down the code, either the constant is checked directly or is used to generate a hidden span with some id that can be checked at the js level. -- Marc Delisle http://infomarc.info

----- Original Message -----

From: Marc Delisle <marc@infomarc.info>

Marc Delisle a écrit :

...

  Aris Feryanto a écrit :

...

  Hi,

  Just realized my previous email seem not delivered successfully to   phpMyAdmin-devel list. I've previously sent an email telling that I   will work on merging the tooltip as suggested by Rouslan. I'm still   working and testing on this and will add the 'Click to mark'.

  I am also fixing the previous code, as it hasn't checked whether we   are under Browse tab, before calling the column-order remembering   function.

  I wonder if there is any existing exact way to check if we are under   Browse tab? Current code do the checking using requested url pattern   and analyzed SQL query (you may see function PMA_isBrowsing in file   libraries/display_tbl.lib.php in my git repo). But, this is not   enough for handling load from AJAX request under other tabs (e.g.   AJAX request to sql.php caused by pagination of results under SQL   tab)

  Yes, this is difficult to solve with current code; maybe it's time for a   new tbl_browse.php that could set some constant, then require sql.php.   Further down the code, either the constant is checked directly or is   used to generate a hidden span with some id that can be checked at the   js level.

By the way, I'm not sure why you strictly want to do some verifications while under the Browse tab. Some actions, for example Search, will generate results in which in a user might want to reorder the columns.

Hi Marc, You are right. User may want to reorder columns in Search tab. I found a way to make PMA_isBrowsing() better, IMO. I add some rule so that it will return true on any SQL expression in the form of "SELECT * FROM <a table> WHERE ...". Not depending on whether we are under "Browse" tab anymore. I've updated this in my git. The complete function: =========================== function PMA_isBrowsing() {     // global variables set from sql.php     global $is_count, $is_export, $is_func, $is_analyse;     global $analyzed_sql;     return ! ($is_count || $is_export || $is_func || $is_analyse)         && count($analyzed_sql[0]['select_expr']) == 0         && isset($analyzed_sql[0]['queryflags']['select_from'])         && count($analyzed_sql[0]['table_ref']) == 1; } =========================== I've do some test and it is working good so far. Please kindly check this and let me know what do you think about this. I also found that column reordering and resizing still not work under db_search.php. I'm working to fix this. -- Aris Feryanto

Aris Feryanto a écrit :

----- Original Message -----

...

From: Marc Delisle <marc@infomarc.info>

Marc Delisle a écrit :

...

Aris Feryanto a écrit :

...

Hi,

Just realized my previous email seem not delivered successfully to phpMyAdmin-devel list. I've previously sent an email telling that I will work on merging the tooltip as suggested by Rouslan. I'm still working and testing on this and will add the 'Click to mark'.

I am also fixing the previous code, as it hasn't checked whether we are under Browse tab, before calling the column-order remembering function.

I wonder if there is any existing exact way to check if we are under Browse tab? Current code do the checking using requested url pattern and analyzed SQL query (you may see function PMA_isBrowsing in file libraries/display_tbl.lib.php in my git repo). But, this is not enough for handling load from AJAX request under other tabs (e.g. AJAX request to sql.php caused by pagination of results under SQL tab) Yes, this is difficult to solve with current code; maybe it's time for a new tbl_browse.php that could set some constant, then require sql.php. Further down the code, either the constant is checked directly or is used to generate a hidden span with some id that can be checked at the js level.

By the way, I'm not sure why you strictly want to do some verifications while under the Browse tab. Some actions, for example Search, will generate results in which in a user might want to reorder the columns.

Hi Marc,

You are right. User may want to reorder columns in Search tab.

I found a way to make PMA_isBrowsing() better, IMO. I add some rule so that it will return true on any SQL expression in the form of "SELECT * FROM <a table> WHERE ...". Not depending on whether we are under "Browse" tab anymore. I've updated this in my git. The complete function:

=========================== function PMA_isBrowsing() { // global variables set from sql.php global $is_count, $is_export, $is_func, $is_analyse; global $analyzed_sql;

return ! ($is_count || $is_export || $is_func || $is_analyse) && count($analyzed_sql[0]['select_expr']) == 0 && isset($analyzed_sql[0]['queryflags']['select_from']) && count($analyzed_sql[0]['table_ref']) == 1; } ===========================

I've do some test and it is working good so far. Please kindly check this and let me know what do you think about this.

Aris, Looks fine but I suggest naming this PMA_isSelect() and changing the function's comment. Two other things. 1. I get a notice when browsing sakila.actor. I'm not sure when this notice started to show but here it is: Notice in ./libraries/display_tbl.lib.php#492 Undefined index: 14b4d4f7c160f209e980cfb221bb3117 Backtrace ./libraries/display_tbl.lib.php#2255: PMA_displayTableHeaders( array, array, integer 4, array, string `actor`.`first_name` DESC, string `actor`.`first_name`, string DESC, ) ./sql.php#925: PMA_displayTable( object, string urdr111111, array, ) 2. "Restore column order" is not persistent. After restoring and clicking anything (next, end, Browse), the modified column order comes back. -- Marc Delisle http://infomarc.info

Le 2011-06-14 20:39, Aris Feryanto a écrit :

...

Two other things.

1. I get a notice when browsing sakila.actor. I'm not sure when this notice started to show but here it is:

Notice in ./libraries/display_tbl.lib.php#492 Undefined index: 14b4d4f7c160f209e980cfb221bb3117

Backtrace

./libraries/display_tbl.lib.php#2255: PMA_displayTableHeaders( array, array, integer 4, array, string `actor`.`first_name` DESC, string `actor`.`first_name`, string DESC, ) ./sql.php#925: PMA_displayTable( object, string urdr111111, array, )

The first issue above also fixed. It was caused by "Remember sorting" feature. Previously, I changed the $sql_query directly to get the ORDER BY syntax printed. I've changed the code to follow same logic as appending LIMIT to fix this issue. Changes can be found under "tablesort" branch in my git.

Fix confirmed.

...

2. "Restore column order" is not persistent. After restoring and clicking anything (next, end, Browse), the modified column order comes back.

Odd, the restore column order always work for me. Could you give details of the scenario? Maybe it caused by some delay in the connection, so the AJAX request to restore the column order has not sent successfully before you clicked next, end, or Browse.

I'm at home now and cannot reproduce with FF 4.0.1 under Vista. I saw this at work under XP so I'll try it tomorrow. -- Marc Delisle http://infomarc.info

Bug: column reordering is enabled for EXPLAIN queries - should be disabled. And a small glitch: when the qtip animation expands tooltip, text inside tooltip is wrapped - if you look close enough, you can see that at the beginning it has three lines, and only when fully expanded has two (the wrapped sentence is "Click to mark/unmark"). -- Piotr Przybylski

On Fri, 2011-06-17 at 19:57 +0200, Piotr Przybylski wrote:

2011/6/17 Piotr Przybylski <piotr.prz@gmail.com>:

...

Bug: column reordering is enabled for EXPLAIN queries - should be disabled.

And a small glitch: when the qtip animation expands tooltip, text inside tooltip is wrapped - if you look close enough, you can see that at the beginning it has three lines, and only when fully expanded has two (the wrapped sentence is "Click to mark/unmark").

The same applies to SHOW queries

Also the tooltip with "click to mark" is shown for queries like these ones: SET @a = 1; SELECT @a; But there is nothing to mark (or unmark) in the result. Rouslan

2011/6/18 Aris Feryanto <aris_feryanto@yahoo.com>:

Hi,

----- Original Message -----

...

From: Rouslan Placella <rouslan@placella.com>

On Fri, 2011-06-17 at 19:57 +0200, Piotr Przybylski wrote:

...

 2011/6/17 Piotr Przybylski <piotr.prz@gmail.com>:  > Bug: column reordering is enabled for EXPLAIN queries - should be disabled.  >

...

...

 > And a small glitch: when the qtip animation expands tooltip, text  > inside tooltip is wrapped - if you look close enough, you can see that  > at the beginning it has three lines, and only when fully expanded has  > two (the wrapped sentence is "Click to mark/unmark").  >

Yes, you are right. It has three lines at the beginning. I also noticed this, but just can't find a better way to do this. I tried with other animations, such as fadeIn and slideDown, but the animation is not better than current animation.

Is it possible to set overflow: hidden on containing layer? Or white-space: nowrap. -- Piotr Przybylski

On 13 Jun 2011, at 20:31, Rouslan Placella <rouslan@placella.com> wrote:

On Mon, 2011-06-13 at 08:09 -0400, Marc Delisle wrote:

...

Rouslan Placella a écrit :

...

On Sat, 2011-06-11 at 21:23 -0700, Aris Feryanto wrote:

...

Hi Rouslan,

----- Original Message -----

...

From: Rouslan Placella <rouslan@placella.com>

On Sat, 2011-06-11 at 10:58 +0700, Aris Feryanto wrote:

...

On 10 Jun 2011, at 20:31, Marc Delisle <marc@infomarc.info> 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

Thank you for reporting this. It is nice to show that in the video. I tested in some browsers (chrome, firefox, IE) and found that the bug only occurred in firefox/ubuntu. I've fixed this in my git repo.

It works great now. By the way, I found another few small issues that you might want to look at :)

You hard-coded a lot of sizes in CSS in px units. So now items don't really scale. For example, go to main PMA page and from the dropdown select font size of, for example, 132%. Now go to browse a table and hover the column header. You will see your "Drag to reorder" hint is the same as when the font size was set to 82%, but instead it should be bigger. You can use the 'em' unit instead of the 'px' unit in CSS to fix this.

Also, while resizing a column, the "Drag to reorder" hint keeps trying to pop out when you hover the label of the column. And when you resize the column to a small size, about 10px, and then hold the mouse still a bit both the hints for sorting and reordering pop out (see attached screenshot). And at this point I think that "Sort" alone doesn't mean much any more, so in my opinion the two hints should be merged into one like "Drag to Reorder <br /> Click to Sort".

Just one hint could be confusing because there are many possibilities:

- click on link to sort - click in the <th> (but not on the link) to mark/unmark the column - drag the <th>

Looks like Aris already picked up on my suggestion about the combined hint. I think it works quite nice in that it only shows "Click to sort" when you hover the link. I guess that at this point maybe the hint could contain the same way "Click to mark" when one is over a <th>, but not the link.

Hi, Just realized my previous email seem not delivered successfully to phpMyAdmin-devel list. I've previously sent an email telling that I will work on merging the tooltip as suggested by Rouslan. I'm still working and testing on this and will add the 'Click to mark'. I am also fixing the previous code, as it hasn't checked whether we are under Browse tab, before calling the column-order remembering function. I wonder if there is any existing exact way to check if we are under Browse tab? Current code do the checking using requested url pattern and analyzed SQL query (you may see function PMA_isBrowsing in file libraries/display_tbl.lib.php in my git repo). But, this is not enough for handling load from AJAX request under other tabs (e.g. AJAX request to sql.php caused by pagination of results under SQL tab)

-- Aris Feryanto

Hi Marc, ----- Original Message -----

From: Marc Delisle <marc@infomarc.info>

Le 2011-06-10 23:58, Aris Feryanto a écrit :

...

On 10 Jun 2011, at 20:31, Marc Delisle <marc@infomarc.info> 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.

Yes, I believe that this is good advertising. Also, people should already know how to sort by column so they will discover the new dragging pointer and now with the balloon they will know that it's possible to drag.

One thing: when the pointer is over the column name and a click would sort instead of drag, the balloon still says Click to drag. The balloon says something different that the tooltip who is saying Sort.

I suggest changing the text, then. How about "Drag to reorder" as updated in my current git repo?

I cannot reproduce the bug in Rouslan's video with my setup (Firefox 4.1.0 under Vista).

By the way, Rouslan, nice idea to show a video like this.

-- Aris Feryanto

----- Original Message -----

From: Marc Delisle <marc@infomarc.info>

Aris Feryanto a écrit :

...

Hi Marc,

----- Original Message -----

...

From: Marc Delisle <marc@infomarc.info>

Le 2011-06-10 23:58, Aris Feryanto a écrit :

...

  On 10 Jun 2011, at 20:31, Marc Delisle <marc@infomarc.info> 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.

Yes, I believe that this is good advertising. Also, people should already know how to sort by column so they will discover the new dragging pointer and now with the balloon they will know that it's possible to drag.

One thing: when the pointer is over the column name and a click would sort instead of drag, the balloon still says Click to drag. The balloon says something different that the tooltip who is saying Sort.

I suggest changing the text, then. How about "Drag to reorder" as updated in my current git repo?

The new message and the combined new messages are fine.

Hi, I added 'Click to mark/unmark' in the popup balloon. You may check this in my git.

By the way, the new features under IE 8 (Windows XP) seems to be limited, it this expected?

- no balloons - no indicator for the destination column when dragging - column reorder does not work at all

makegrid.js line 49, expected identified, string or number

sql.js line 222 character 9, object doesn't support this property or method

Fixed. Thanks for pointing this out, Marc. -- Aris Feryanto

On Tue, 2011-06-14 at 07:28 -0400, Marc Delisle wrote:

Aris Feryanto a écrit :

...

----- Original Message -----

...

From: Marc Delisle <marc@infomarc.info>

Aris Feryanto a écrit :

...

Hi Marc,

----- Original Message -----

...

From: Marc Delisle <marc@infomarc.info>

Le 2011-06-10 23:58, Aris Feryanto a écrit :

...

On 10 Jun 2011, at 20:31, Marc Delisle <marc@infomarc.info> 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.

Yes, I believe that this is good advertising. Also, people should already know how to sort by column so they will discover the new dragging pointer and now with the balloon they will know that it's possible to drag.

One thing: when the pointer is over the column name and a click would sort instead of drag, the balloon still says Click to drag. The balloon says something different that the tooltip who is saying Sort. I suggest changing the text, then. How about "Drag to reorder" as updated in my current git repo?

The new message and the combined new messages are fine.

Hi,

I added 'Click to mark/unmark' in the popup balloon. You may check this in my git.

Looks nice.

...

...

By the way, the new features under IE 8 (Windows XP) seems to be limited, it this expected?

- no balloons - no indicator for the destination column when dragging - column reorder does not work at all

makegrid.js line 49, expected identified, string or number

sql.js line 222 character 9, object doesn't support this property or method

Fixed. Thanks for pointing this out, Marc.

I confirm the fix.

Another thing: when I disable Javascript in my Firefox 4.0.1:

- hovering over the column's th should not change the pointer to the dragging 4-arrow pointer

- hovering over the column's name should show me the (old) Sort title

The "Restore column order" button shouldn't be there either with JS disabled ;)

Le 2011-06-14 20:29, Aris Feryanto a écrit :

----- Original Message -----

...

From: Rouslan Placella <rouslan@placella.com>

On Tue, 2011-06-14 at 07:28 -0400, Marc Delisle wrote:

...

Aris Feryanto a écrit :

...

----- Original Message -----

...

From: Marc Delisle <marc@infomarc.info>

Aris Feryanto a écrit :

...

Hi Marc,

----- Original Message ----- > From: Marc Delisle <marc@infomarc.info> > > Le 2011-06-10 23:58, Aris Feryanto a écrit : >> On 10 Jun 2011, at 20:31, Marc Delisle

<marc@infomarc.info>

...

...

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. > > Yes, I believe that this is good advertising. Also, people should > already know how to sort by column so they will discover the new > dragging pointer and now with the balloon they will know that it's > possible to drag. > > One thing: when the pointer is over the column name and a click would > sort instead of drag, the balloon still says Click to drag. The balloon > says something different that the tooltip who is saying Sort. I suggest changing the text, then. How about "Drag to reorder" as updated in my current git repo?

The new message and the combined new messages are fine.

Hi,

I added 'Click to mark/unmark' in the popup balloon. You may check this in my git.

Looks nice.

...

...

By the way, the new features under IE 8 (Windows XP) seems to be limited, it this expected?

- no balloons - no indicator for the destination column when dragging - column reorder does not work at all

makegrid.js line 49, expected identified, string or number

sql.js line 222 character 9, object doesn't support this

property or method

...

...

Fixed. Thanks for pointing this out, Marc.

I confirm the fix.

Another thing: when I disable Javascript in my Firefox 4.0.1:

- hovering over the column's th should not change the pointer to the dragging 4-arrow pointer

- hovering over the column's name should show me the (old) Sort title

The "Restore column order" button shouldn't be there either with JS disabled ;)

Hi,

Fixed in my git. I also noted that the recent tables is not working when javascript is disabled. Will fix this soon.

Aris, did you push your repo? -- Marc Delisle http://infomarc.info

Le 2011-06-14 20:53, Aris Feryanto a écrit :

...

...

...

...

Another thing: when I disable Javascript in my Firefox 4.0.1:

- hovering over the column's th should not change the pointer to the dragging 4-arrow pointer

- hovering over the column's name should show me the (old) Sort title

The "Restore column order" button shouldn't be there either with JS disabled ;)

Hi,

Fixed in my git. I also noted that the recent tables is not working when javascript is disabled. Will fix this soon.

Aris, did you push your repo?

Sorry, I almost forgot. Pushed now. :)

Fixes confirmed. -- Marc Delisle http://infomarc.info

On Tue, Jun 21, 2011 at 3:31 AM, Aris Feryanto <aris_feryanto@yahoo.com> wrote:

Hi,

----- Original Message -----

...

From: Aris Feryanto <aris_feryanto@yahoo.com>

Hi,

Fixed in my git. I also noted that the recent tables is not working when javascript is disabled. Will fix this soon.

Fixed in my git (commit: 7e5fddf4ae2893cc08428b3c3f37241ff85d2457). The recent tables now works for browser without javascript.

But, without javascript, the recent table list won't be always correctly updated. When we jump into a table, the whole page will get reloaded and the code to add/shift the list is on the right frame. So, it depends on what frame gets reloaded first.

We can copy the logic to add/shift the list to the left frame, but I think it will be redundant. Any comment or suggestion?

I think we can safely assume that every pma user has javascript enabled. That's at least the assumption I make the work on the status page.

-- Aris Feryanto

------------------------------------------------------------------------------ EditLive Enterprise is the world's most technically advanced content authoring tool. Experience the power of Track Changes, Inline Image Editing and ensure content is compliant with Accessibility Checking. http://p.sf.net/sfu/ephox-dev2dev _______________________________________________ Phpmyadmin-devel mailing list Phpmyadmin-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel

On Sat, 2011-06-11 at 21:18 -0400, Marc Delisle wrote:

Le 2011-06-10 23:58, Aris Feryanto a écrit :

...

On 10 Jun 2011, at 20:31, Marc Delisle <marc@infomarc.info> wrote:

...

Aris Feryanto a écrit :

...

----- Original Message -----

...

From: Marc Delisle <marc@infomarc.info>

Aris Feryanto a écrit :

...

Done in my git. > I am also wondering how to "publicize" these two new features (how to > make more apparent that these are available). Aris, do you believe this feature is ready to be merged to the official tree?

Hi Marc,

How about the way to publicize the features? Should we implement it first? There were several suggestions from Tyron and me regarding this.

Yes, please try to find something.

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.

Yes, I believe that this is good advertising. Also, people should already know how to sort by column so they will discover the new dragging pointer and now with the balloon they will know that it's possible to drag.

One thing: when the pointer is over the column name and a click would sort instead of drag, the balloon still says Click to drag. The balloon says something different that the tooltip who is saying Sort.

I cannot reproduce the bug in Rouslan's video with my setup (Firefox 4.1.0 under Vista).

By the way, Rouslan, nice idea to show a video like this.

I just couldn't think of any way to explain that behaviour with words, so that's why I made a video :) Rouslan

----- Original Message -----

From: Rouslan Placella <rouslan@placella.com> To: phpmyadmin-devel@lists.sourceforge.net Cc: Sent: Wednesday, June 1, 2011 8:47 PM Subject: Re: [Phpmyadmin-devel] Column resizing & reordering

On Wed, 2011-06-01 at 15:10 +0200, Tyron Madlener wrote:

...

On Wed, Jun 1, 2011 at 1:56 PM, Aris Feryanto <aris_feryanto@yahoo.com> wrote:

...

Hi all,

I pushed my work on two related features: column resizing & reordering. I tried (and struggled :) ) to make these features as compatible as possible with inline editing and vertical display mode. The features currently work in Browse, SQL and Search tab. I also integrate it with current ajax pagination and sorting.

You may try the demo at [0]. Your comments and suggestions are really appreciated.

Note: In vertical display mode, column reordering reorders the table header in the left of the table.

[0] http://demo.phpmyadmin.net/gsoc-aris

I would find it great if you could reorder them without moving the column downwards or graying out the table and directly, without releasing the mouse first.

The same type of reordering that google chrome has for tabs.  

Hi, Thank you for testing. I've tried to reorder them directly without releasing the mouse first. But, it cause some bug, since the columns are not in equal width (unlike chrome tabs).  

Firefox's tab reordering also is nice, you get an arrow indicating where the tab is about to be dropped so that the user is not guessing where it will land.

Sounds good. I'll try this tomorrow. -- Aris Feryanto

On Fri, Jun 3, 2011 at 5:13 AM, Aris Feryanto <aris_feryanto@yahoo.com> wrote:

Hi all,

----- Original Message -----

...

From: Aris Feryanto <aris_feryanto@yahoo.com>

----- Original Message -----

...

 From: Rouslan Placella <rouslan@placella.com>  To: phpmyadmin-devel@lists.sourceforge.net  Cc:  Sent: Wednesday, June 1, 2011 8:47 PM  Subject: Re: [Phpmyadmin-devel] Column resizing & reordering

 On Wed, 2011-06-01 at 15:10 +0200, Tyron Madlener wrote:

...

  I would find it great if you could reorder them without moving the   column downwards or graying out the table and directly, without   releasing the mouse first.

  The same type of reordering that google chrome has for tabs.

Hi,

Thank you for testing.

I've tried to reorder them directly without releasing the mouse first. But, it cause some bug, since the columns are not in equal width (unlike chrome tabs).

...

 Firefox's tab reordering also is nice, you get an arrow indicating where  the tab is about to be dropped so that the user is not guessing where it  will land.

Sounds good. I'll try this tomorrow.

I pushed some improvement on this. I added an arrow indicator like in firefox tab reordering. You may try this in [0]. If you have any comment or suggestion, please let me know.

[0] http://demo.phpmyadmin.net/gsoc-aris

Works nicely now :) Maybe you want to give the hovering item and arrow indicator the same silverish style like pmahomme has (or more generally let the style be adjusted by the theme) When dragging and the mouse is over the column title you mark each cell of the column as selected. But when you drag and the mouse is above or below it's not being selected. Maybe this should behave the same in either way.

-- Aris Feryanto

------------------------------------------------------------------------------ Simplify data backup and recovery for your virtual environment with vRanger. Installation's a snap, and flexible recovery options mean your data is safe, secure and there when you need it. Discover what all the cheering's about. Get your free trial download today. http://p.sf.net/sfu/quest-dev2dev2 _______________________________________________ Phpmyadmin-devel mailing list Phpmyadmin-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel

On Fri, Jun 3, 2011 at 8:53 AM, Aris Feryanto <aris_feryanto@yahoo.com> wrote:

Hi Tyron,

...

From: Tyron Madlener <tyronx@gmail.com>

...

Works nicely now :) Maybe you want to give the hovering item and arrow indicator the same silverish style like pmahomme has (or more generally let the style be adjusted by the theme)

Thanks. I think it would be nice. Will do it later.

...

When dragging and the mouse is over the column title you mark each cell of the column as selected. But when you drag and the mouse is above or below it's not being selected. Maybe this should behave the same in either way.

This is the default behaviour when we hover a table header. I didn't add any code to it. I will try to find some way to uniformly highlight column while we dragging.

Maybe its better to just disable highlighting while dragging?

-- Aris Feryanto

------------------------------------------------------------------------------ Simplify data backup and recovery for your virtual environment with vRanger. Installation's a snap, and flexible recovery options mean your data is safe, secure and there when you need it. Discover what all the cheering's about. Get your free trial download today. http://p.sf.net/sfu/quest-dev2dev2 _______________________________________________ Phpmyadmin-devel mailing list Phpmyadmin-devel@lists.sourceforge.net https://lists.sourceforge.net/lists/listinfo/phpmyadmin-devel

On Thu, 2011-06-02 at 23:53 -0700, Aris Feryanto wrote:

Hi Tyron,

...

From: Tyron Madlener <tyronx@gmail.com>

...

Works nicely now :) Maybe you want to give the hovering item and arrow indicator the same silverish style like pmahomme has (or more generally let the style be adjusted by the theme)

Thanks. I think it would be nice. Will do it later.

I also think that in vertical display mode the arrow indicator should be displayed horizontally, just like in horizontal mode it's displayed vertically :) Rouslan

Hi Rouslan, ----- Original Message -----

From: Rouslan Placella <rouslan@placella.com> To: phpmyadmin-devel@lists.sourceforge.net Cc: Sent: Wednesday, June 1, 2011 8:46 PM Subject: Re: [Phpmyadmin-devel] Column resizing & reordering

On Wed, 2011-06-01 at 04:56 -0700, Aris Feryanto wrote:

...

Hi all,

I pushed my work on two related features: column resizing & reordering. I tried (and struggled :) ) to make these features as compatible as possible with inline editing and vertical display mode. The features currently work in Browse, SQL and Search tab. I also integrate it with current ajax pagination and sorting.

You may try the demo at [0]. Your comments and suggestions are really appreciated.    

I was able to move the action links column, which screwed up the table headers (see attached screenshot). I think this should not be allowed.

Thank you. I missed that one. Fixed in my repo and will be updated in the demo soon.

Also I found the column resizing to be buggy (Firefox 4.0.1/Linux).  

Could you describe more detail where is the buggy part? -- Aris Feryanto

Hi Rouslan,

From: Rouslan Placella <rouslan@placella.com>

I click and drag on the double horizontal arrow and try to make a column wider. When I release the mouse button, the column is correctly resized. I click and drag again on the same column separator to make the column thinner. Now, after I release the mouse, the column is not resized. The mouse is still locked in resize mode and the vertical line that shows what size the column will be is still visible. I click the mouse once more and that exits the resize mode, though the column is not resized.

Firefox 4.0.1/Linux, didn't try other browsers or OS. Hope this helps.

Rouslan

Fixed. This one is really tricky. It seem that firefox 4 has some mechanism to generate "system's drag and drop" if the same column separator is dragged twice. So, I added javascript to hide and then show again the column separator when a mouse click is released. I found that jQuery plugin like "flexigrid" also done it this way. Please kindly test the new version in [0]. [0] http://demo.phpmyadmin.net/gsoc-aris -- Aris Feryanto

Hi Rouslan, ----- Original Message -----

From: Rouslan Placella <rouslan@placella.com>   On Thu, 2011-06-02 at 20:31 -0700, Aris Feryanto wrote:

...

  Hi Rouslan,       > From: Rouslan Placella <rouslan@placella.com>   >    > I click and drag on the double horizontal arrow and try to make a  column   > wider. When I release the mouse button, the column is correctly  resized.   > I click and drag again on the same column separator to make the column   > thinner. Now, after I release the mouse, the column is not resized.  The   > mouse is still locked in resize mode and the vertical line that shows   > what size the column will be is still visible. I click the mouse once   > more and that exits the resize mode, though the column is not resized.   >    > Firefox 4.0.1/Linux, didn't try other browsers or OS. Hope this  helps.   >    > Rouslan   >      Fixed. This one is really tricky. It seem that firefox 4 has some mechanism  to generate "system's drag and drop" if the same column separator  is dragged twice. So, I added javascript to hide and then show again the column  separator when a mouse click is released. I found that jQuery plugin like  "flexigrid" also done it this way.   Please kindly test the new version in [0].   Looks like it's working great :D   Now you're going to start hating me, but I found another problem. You assume that the first column in the result set will contain the action links. Not true. Go to 'Settings' -> 'Main frame' ->  'Browse mode' -> 'Where to show the table row links' Change from 'Left' to any of  the other options like 'Nowhere', 'Right' or 'Both'. Go back  to browsing mode and you see that the action links are displayed differently, but only column 1 is locked from reordering.  

I've just found this one an hour ago. Currently fixing it, hoping it will finish before you all tested it. But, you already tested it first. :p Anyway, thanks. Really appreciated. P.S.: Weird. I sent this email few minutes ago. And got failure notice telling the email was not sent successfully. This is the first time I got failure sending to phpmyadmin devel list. -- Aris Feryanto

From: Marc Delisle <marc@infomarc.info>

Aris Feryanto a écrit :

...

  Hi Rouslan,

  ----- Original Message -----

...

  From: Rouslan Placella <rouslan@placella.com>     Looks like it's working great :D     Now you're going to start hating me, but I found another problem. You   assume that the first column in the result set will contain the action   links. Not true. Go to 'Settings' -> 'Main frame' ->   'Browse mode' ->   'Where to show the table row links' Change from 'Left' to any of   the   other options like 'Nowhere', 'Right' or 'Both'. Go back   to browsing   mode and you see that the action links are displayed differently, but   only column 1 is locked from reordering.  

  I've just found this one an hour ago. Currently fixing it, hoping it will finish before you all tested it. But, you already tested it first. :p   Anyway, thanks. Really appreciated.

Aris, the "draggable" class should be set at the PHP level where you're sure whether it refers to data or actions.

Thanks, Marc. I will try this. -- Aris Feryanto