Sever Variables Table UI Improvements

Signed-off-by: Madhura Jayaratne <madhura.cj@gmail.com>
This commit is contained in:
Madhura Jayaratne 2014-12-30 18:03:40 +05:30
parent 629e08cbc4
commit fc5bd53eba
4 changed files with 64 additions and 69 deletions

View File

@ -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('&nbsp;&nbsp;&nbsp;')
.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);
}
});

View File

@ -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' : '') . '">&nbsp;'
. 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">&nbsp;'
$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">&nbsp;'
. 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;
}

View File

@ -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;
}

View File

@ -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;
}