diff options
author | Madhura Jayaratne <madhura.cj@gmail.com> | 2014-12-30 15:33:40 +0300 |
---|---|---|
committer | Madhura Jayaratne <madhura.cj@gmail.com> | 2014-12-30 15:33:40 +0300 |
commit | fc5bd53eba7fed075ce97ec264537787f287b894 (patch) | |
tree | e09d0d8a6e175116e8f2adfd58770c62240e08c5 | |
parent | 629e08cbc44948a7095db23384fa3bcd0407ead5 (diff) |
Sever Variables Table UI Improvements
Signed-off-by: Madhura Jayaratne <madhura.cj@gmail.com>
-rw-r--r-- | js/server_variables.js | 50 | ||||
-rw-r--r-- | libraries/server_variables.lib.php | 61 | ||||
-rw-r--r-- | themes/original/css/common.css.php | 11 | ||||
-rw-r--r-- | themes/pmahomme/css/common.css.php | 11 |
4 files changed, 64 insertions, 69 deletions
diff --git a/js/server_variables.js b/js/server_variables.js index 52935f149b..22f759f6f8 100644 --- a/js/server_variables.js +++ b/js/server_variables.js @@ -4,8 +4,6 @@ * Unbind all event handlers before tearing down a page */ AJAX.registerTeardown('server_variables.js', function () { - $('#serverVariables .var-row').unbind('mouseenter'); - $('#serverVariables .var-row').unbind('mouseleave'); $('#filterText').unbind('keyup'); $(document).off('click', 'a.editLink'); $('#serverVariables').find('.var-name').find('a img').remove(); @@ -17,19 +15,8 @@ AJAX.registerOnload('server_variables.js', function () { var $cancelLink = $('a.cancelLink'); var $filterField = $('#filterText'); - /* Show edit link on hover */ - $('#serverVariables').delegate('.var-row', 'mouseenter', function (event) { - var $elm = $(this).find('.var-value'); - // Only add edit element if the element is not being edited - if ($elm.hasClass('editable') && ! $elm.hasClass('edit')) { - $elm.prepend($editLink.clone().show()); - } - }); - $('#serverVariables').delegate('.var-row', 'mouseleave', function (event) { - $(this).find('a.editLink').remove(); - }) - .find('.var-name').find('a').append( + $('#serverVariables').find('.var-name').find('a').append( $('#docImage').clone().show() ); @@ -81,15 +68,15 @@ AJAX.registerOnload('server_variables.js', function () { /* Allows the user to edit a server variable */ function editVariable(link) { var $cell = $(link).parent(); + var $valueCell = $(link).parents('.var-row').find('.var-value'); var varName = $cell.parent().find('.var-name').text().replace(/ /g, '_'); var $mySaveLink = $saveLink.clone().show(); var $myCancelLink = $cancelLink.clone().show(); var $msgbox = PMA_ajaxShowMessage(); + var $myEditLink = $cell.find('a.editLink'); - $cell - .addClass('edit') // variable is being edited - .find('a.editLink') - .remove(); // remove edit link + $cell.addClass('edit'); // variable is being edited + $myEditLink.remove(); // remove edit link $mySaveLink.click(function () { var $msgbox = PMA_ajaxShowMessage(PMA_messages.strProcessingRequest); @@ -97,26 +84,25 @@ AJAX.registerOnload('server_variables.js', function () { ajax_request: true, type: 'setval', varName: varName, - varValue: $cell.find('input').val() + varValue: $valueCell.find('input').val() }, function (data) { if (data.success) { - $cell + $valueCell .html(data.variable) .data('content', data.variable); PMA_ajaxRemoveMessage($msgbox); } else { PMA_ajaxShowMessage(data.error, false); - $cell.html($cell.data('content')); + $valueCell.html($valueCell.data('content')); } - $cell.removeClass('edit'); + $cell.removeClass('edit').html($myEditLink); }); return false; }); $myCancelLink.click(function () { - $cell - .html($cell.data('content')) - .removeClass('edit'); + $valueCell.html($valueCell.data('content')); + $cell.removeClass('edit').html($myEditLink); return false; }); @@ -126,11 +112,11 @@ AJAX.registerOnload('server_variables.js', function () { varName: varName }, function (data) { if (typeof data !== 'undefined' && data.success === true) { - var $editor = $('<div />', {'class': 'serverVariableEditor'}) + var $links = $('<div />') .append($myCancelLink) - .append(' ') - .append($mySaveLink) - .append(' ') + .append(' ') + .append($mySaveLink); + var $editor = $('<div />', {'class': 'serverVariableEditor'}) .append( $('<div/>').append( $('<input />', {type: 'text'}).val(data.message) @@ -138,7 +124,9 @@ AJAX.registerOnload('server_variables.js', function () { ); // Save and replace content $cell - .data('content', $cell.html()) + .html($links); + $valueCell + .data('content', $valueCell.html()) .html($editor) .find('input') .focus() @@ -151,7 +139,7 @@ AJAX.registerOnload('server_variables.js', function () { }); PMA_ajaxRemoveMessage($msgbox); } else { - $cell.removeClass('edit'); + $cell.removeClass('edit').html($myEditLink); PMA_ajaxShowMessage(data.error); } }); diff --git a/libraries/server_variables.lib.php b/libraries/server_variables.lib.php index 4b30281bcb..30a81eb77c 100644 --- a/libraries/server_variables.lib.php +++ b/libraries/server_variables.lib.php @@ -150,9 +150,7 @@ function PMA_formatVariable($name, $value, $variable_doc_links) function PMA_getHtmlForLinkTemplates() { $url = 'server_variables.php' . PMA_URL_getCommon(); - $output = '<a style="display: none;" href="#" class="editLink">'; - $output .= PMA_Util::getIcon('b_edit.png', __('Edit')) . '</a>'; - $output .= '<a style="display: none;" href="' + $output = '<a style="display: none;" href="' . $url . '" class="ajax saveLink">'; $output .= PMA_Util::getIcon('b_save.png', __('Save')) . '</a> '; $output .= '<a style="display: none;" href="#" class="cancelLink">'; @@ -160,12 +158,8 @@ function PMA_getHtmlForLinkTemplates() $output .= PMA_Util::getImage( 'b_help.png', __('Documentation'), - array( - 'style' => 'display:none', - 'id' => 'docImage' - ) + array('style' => 'display:none', 'id' => 'docImage') ); - return $output; } @@ -190,18 +184,19 @@ function PMA_getHtmlForServerVariables($variable_doc_links) . '</div>' . '</fieldset>'; - $output .= '<div id="serverVariables" class="data filteredData noclick">' - . '<div class="var-header var-row">' - . '<div class="var-name">' . __('Variable') . '</div>' - . '<div class="var-value valueHeader">' + $output .= '<table id="serverVariables" class="data filteredData noclick">' + . '<thead><tr class="var-header var-row">' + . '<td class="var-action">' . __('Action') . '</td>' + . '<td class="var-name">' . __('Variable') . '</td>' + . '<td class="var-value">' . __('Session value') . ' / ' . __('Global value') - . '</div>' - . '<div style="clear:both"></div>' - . '</div>'; + . '</td>' + . '</tr>' + . '</thead>'; $output .= PMA_getHtmlForServerVariablesItems($variable_doc_links); - $output .= '</div>'; + $output .= '</table>'; return $output; } @@ -223,7 +218,7 @@ function PMA_getHtmlForServerVariablesItems($variable_doc_links) = $GLOBALS['dbi']->fetchResult('SHOW SESSION VARIABLES;', 0, 1); $serverVars = $GLOBALS['dbi']->fetchResult('SHOW GLOBAL VARIABLES;', 0, 1); - $output = ''; + $output = '<tbody>'; $odd_row = true; foreach ($serverVars as $name => $value) { $has_session_value = isset($serverVarsSession[$name]) @@ -231,9 +226,14 @@ function PMA_getHtmlForServerVariablesItems($variable_doc_links) $row_class = ($odd_row ? ' odd' : ' even') . ($has_session_value ? ' diffSession' : ''); - $output .= '<div class="var-row' . $row_class . '">' - . '<div class="var-name">'; + $output .= '<tr class="var-row' . $row_class . '">'; + $output .= '<td class="var-action">'; + $output .= '<a href="#" class="editLink">' + . PMA_Util::getIcon('b_edit.png', __('Edit')) . '</a>'; + $output .= '</td>'; + + $output .= '<td class="var-name">'; // To display variable documentation link if (isset($variable_doc_links[$name])) { $output .= '<span title="' @@ -250,29 +250,30 @@ function PMA_getHtmlForServerVariablesItems($variable_doc_links) } else { $output .= htmlspecialchars(str_replace('_', ' ', $name)); } - $output .= '</div>' - . '<div class="var-value value' + $output .= '</td>'; + + $output .= '<td class="var-value value' . ($GLOBALS['dbi']->isSuperuser() ? ' editable' : '') . '"> ' . PMA_formatVariable($name, $value, $variable_doc_links) - . '</div>' - . '<div style="clear:both"></div>' - . '</div>'; + . '</td>' + . '</tr>'; if ($has_session_value) { - $output .= '<div class="var-row' . ($odd_row ? ' odd' : ' even') . '">' - . '<div class="var-name session">(' . __('Session value') . ')</div>' - . '<div class="var-value value"> ' + $output .= '<tr class="var-row' . ($odd_row ? ' odd' : ' even') . '">' + . '<td class="var-action"></td>' + . '<td class="var-name session">(' . __('Session value') . ')</td>' + . '<td class="var-value value"> ' . PMA_formatVariable( $name, $serverVarsSession[$name], $variable_doc_links - ) . '</div>' - . '<div style="clear:both"></div>' - . '</div>'; + ) . '</td>' + . '</tr>'; } $odd_row = ! $odd_row; } + $output .= '</tbody>'; return $output; } diff --git a/themes/original/css/common.css.php b/themes/original/css/common.css.php index d8c92ae428..ffd4851008 100644 --- a/themes/original/css/common.css.php +++ b/themes/original/css/common.css.php @@ -1106,9 +1106,10 @@ div#logTable table { /* server variables */ #serverVariables { - min-width: 30em; + table-layout: fixed; + width: 100%; } -#serverVariables .var-row > div { +#serverVariables .var-row > tr { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -1120,15 +1121,17 @@ div#logTable table { color: <?php echo $GLOBALS['cfg']['ThColor']; ?>; background: <?php echo $GLOBALS['cfg']['ThBackground']; ?>; } -#serverVariables .var-header .var-value { +#serverVariables .var-header { text-align: <?php echo $left; ?>; } #serverVariables .var-row { padding: 0.5em; min-height: 18px; } +#serverVariables .var-action { + width: 120px; +} #serverVariables .var-name { - width: 45%; float: <?php echo $left; ?>; font-weight: bold; } diff --git a/themes/pmahomme/css/common.css.php b/themes/pmahomme/css/common.css.php index 257d73ab14..ff47d11454 100644 --- a/themes/pmahomme/css/common.css.php +++ b/themes/pmahomme/css/common.css.php @@ -1459,9 +1459,10 @@ div#queryAnalyzerDialog table.queryNums { /* server variables */ #serverVariables { - min-width: 30em; + table-layout: fixed; + width: 100%; } -#serverVariables .var-row > div { +#serverVariables .var-row > td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; @@ -1473,15 +1474,17 @@ div#queryAnalyzerDialog table.queryNums { <?php echo $_SESSION['PMA_Theme']->getCssGradient('ffffff', 'cccccc'); ?> font-weight: bold; } -#serverVariables .var-header .var-value { +#serverVariables .var-header { text-align: <?php echo $left; ?>; } #serverVariables .var-row { padding: 0.5em; min-height: 18px; } +#serverVariables .var-action { + width: 120px; +} #serverVariables .var-name { - width: 45%; float: <?php echo $left; ?>; font-weight: bold; } |