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