diff --git a/js/makegrid.js b/js/makegrid.js
index 1a6bfab2fc..c081c6ec75 100644
--- a/js/makegrid.js
+++ b/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('');
// 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();
diff --git a/libraries/display_tbl.lib.php b/libraries/display_tbl.lib.php
index d69cebe0af..535799890c 100644
--- a/libraries/display_tbl.lib.php
+++ b/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 '';
+ // generate text for draggable column hint
+ echo '';
?>
diff --git a/themes/original/css/theme_right.css.php b/themes/original/css/theme_right.css.php
index 6e64fe4976..13c859877d 100644
--- a/themes/original/css/theme_right.css.php
+++ b/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(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;
+}
\ No newline at end of file
diff --git a/themes/pmahomme/css/theme_right.css.php b/themes/pmahomme/css/theme_right.css.php
index 56e57f2a81..9e55f4200b 100644
--- a/themes/pmahomme/css/theme_right.css.php
+++ b/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;
+}
\ No newline at end of file