Add column dragging hint & some css prettifier

js/makegrid.js

@@ -10,6 +10,7 @@
             actionSpan: 5,
             colOrder: new Array(),
             tableCreateTime: null,
+            hintShown: false,
             
             // functions
             dragStartRsz: function(e, obj) {    // start column resize
@@ -68,6 +69,7 @@
                     objLeft: objPos.left
                 };
                 $('body').css('cursor', 'move');
+                this.hideDraggableHint();
                 $('body').noSelect();
             },
             
@@ -324,6 +326,49 @@
                 } else {
                     $('.restore_column').show();
                 }
+            },
+            
+            /**
+             * Show draggable hint.
+             */
+            showDraggableHint: function() {
+                if (!this.colMov) {     // if not dragging
+                    $(this.dHint)
+                        .stop(true, true)
+                        .animate({
+                            width: 'show',
+                            height: 'show'
+                        }, 200, 'swing');
+                    this.hintShown = true;
+                }
+            },
+            
+            /**
+             * Hide draggable hint.
+             */
+            hideDraggableHint: function() {
+                if (this.hintShown) {
+                    $(this.dHint)
+                        .stop(true, true)
+                        .animate({
+                            width: 'hide',
+                            height: 'hide'
+                        }, 150, 'swing', function() {
+                            g.hintShown = false;
+                        });
+                }
+            },
+            
+            /**
+             * Update the draggable hint position.
+             */
+            updateDraggableHint: function(e) {
+                if (this.hintShown) {
+                    $(this.dHint).css({
+                        top: e.pageY - 10,
+                        left: e.pageX + 15
+                    });
+                }
             }
         }
         
@@ -331,6 +376,7 @@
         g.cRsz = document.createElement('div');     // column resizer
         g.cCpy = document.createElement('div');     // column copy, to store copy of dragged column header
         g.cPointer = document.createElement('div'); // column pointer, used when reordering column
+        g.dHint = document.createElement('div');    // draggable hint
         
         // assign the table alignment
         g.alignment = $("#top_direction_dropdown").val();
@@ -343,6 +389,11 @@
         g.cPointer.className = g.alignment != 'vertical' ? 'cPointer' : 'cPointerVer';
         $(g.cPointer).hide();
         
+        // adjust g.dHint
+        g.dHint.className = 'dHint';
+        $(g.dHint).html($('#col_order_hint').val());
+        $(g.dHint).hide();
+        
         // chain table and grid together
         t.grid = g;
         g.t = t;
@@ -396,11 +447,20 @@
             .wrapInner('<span />');
         
         // register events
-        $(t).find('th.draggable').mousedown(function(e) {
-            g.dragStartMove(e, this);
-        });
+        $(t).find('th.draggable')
+            .mousedown(function(e) {
+                g.dragStartMove(e, this);
+            })
+            // show/hide draggable column
+            .mouseenter(function(e) {
+                g.showDraggableHint();
+            })
+            .mouseleave(function(e) {
+                g.hideDraggableHint();
+            });
         $(document).mousemove(function(e) {
             g.dragMove(e);
+            g.updateDraggableHint(e);
         });
         $(document).mouseup(function(e) {
             g.dragEnd(e);
@@ -418,6 +478,7 @@
         $(g.gDiv).prepend(g.cRsz);
         $(g.gDiv).append(g.cCpy);
         $(g.gDiv).append(g.cPointer);
+        $(g.gDiv).append(g.dHint);
 
         // some adjustment
         g.refreshRestoreButton();

libraries/display_tbl.lib.php

@@ -386,6 +386,8 @@ function PMA_displayTableNavigation($pos_next, $pos_prev, $sql_query, $id_for_di
         // generate table create time
         echo '<input id="table_create_time" type="hidden" value="' .
              PMA_Table::sGetStatusInfo($GLOBALS['db'], $GLOBALS['table'], 'CREATE_TIME') . '" />';
+        // generate text for draggable column hint
+        echo '<input id="col_order_hint" type="hidden" value="' . __('Click to drag') . '" />';
         ?>
     </td>
 </tr>

themes/original/css/theme_right.css.php

@@ -1897,15 +1897,12 @@ span.mysql-number {
 .cCpy {
     background: #000;
     color: #FFF;
+    font-weight: bold;
     margin: 0.1em;
     padding: 0.3em;
     position: absolute;
 }
 
-.cCpy a {
-    color: #FFF;
-}
-
 .cPointer {
     background: url(<?php echo $_SESSION['PMA_Theme']->getImgPath(); ?>col_pointer.png);
     height: 20px;
@@ -1922,3 +1919,20 @@ span.mysql-number {
     position: absolute;
     width: 20px;
 }
+
+.dHint {
+    background: #333;
+    border:1px solid #000;
+    color: #FFF;
+    font-size: 8pt;
+    font-weight: bold;
+    height: 14px;
+    opacity: 0.8;
+    overflow: hidden;
+    padding: 5px 10px;
+    position: absolute;
+    text-shadow: -1px -1px #000;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+}

themes/pmahomme/css/theme_right.css.php

@@ -2231,9 +2231,18 @@ span.mysql-number {
 .cCpy {
     background: #333;
     color: #FFF;
+    font-weight: bold;
     margin: 0.1em;
     padding: 0.3em;
     position: absolute;
+    text-shadow: -1px -1px #000;
+
+    -moz-box-shadow: 0 0 8px #000;
+    -webkit-box-shadow: 0 0 8px #000;
+    box-shadow: 0 0 8px #000;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
 }
 
 .cPointer {
@@ -2252,3 +2261,20 @@ span.mysql-number {
     position: absolute;
     width: 20px;
 }
+
+.dHint {
+    background: #333;
+    border:1px solid #000;
+    color: #FFF;
+    font-size: 8pt;
+    font-weight: bold;
+    height: 14px;
+    opacity: 0.8;
+    overflow: hidden;
+    padding: 5px 10px;
+    position: absolute;
+    text-shadow: -1px -1px #000;
+    -moz-border-radius: 5px;
+    -webkit-border-radius: 5px;
+    border-radius: 5px;
+}