gian/phpmyadmin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved layout for server variables page

Browse Source
This commit is contained in:
Rouslan Placella 2012-11-08 21:48:29 +00:00
parent 202a71e4b4
commit fc9becacb6
4 changed files with 174 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
js/server_variables.js
View File

@ -4,7 +4,7 @@
* Unbind all event handlers before tearing down a page
*/
AJAX.registerTeardown('server_variables.js', function() {
$('table.data tbody tr td:nth-child(2).editable').unbind('hover');
$('#serverVariables .variable_row').unbind('hover');
$('#filterText').unbind('keyup');
});
@ -17,11 +17,12 @@ AJAX.registerOnload('server_variables.js', function() {
$cancelLink = $('a.cancelLink');
/* Variable editing */
$('table.data tbody tr td:nth-child(2).editable').hover(
$('#serverVariables .variable_row').hover(
function() {
// Only add edit element if it is the global value, not session value and not when the element is being edited
if ($(this).parent().children('th').length > 0 && ! $(this).hasClass('edit')) {
$(this).prepend($editLink.clone().show());
var $elm = $(this).find('.variable_value');
// Only add edit element if the element is not being edited
if ($elm.hasClass('editable') && ! $elm.hasClass('edit')) {
$elm.prepend($editLink.clone().show());
}
},
function() {
@ -49,14 +50,12 @@ AJAX.registerOnload('server_variables.js', function() {
/* Filters the rows by the user given regexp */
function filterVariables() {
var mark_next = false, firstCell;
odd_row = false;
$('table.filteredData tbody tr').each(function() {
var mark_next = false, firstCell, odd_row = false;
$('#serverVariables .variable_row').not('.variable_header').each(function() {
firstCell = $(this).children(':first');
if (mark_next || textFilter == null || textFilter.exec(firstCell.text())) {
// If current global value is different from session value (=has class diffSession), then display that one too
// If current global value is different from session value
// (has class diffSession), then display that one too
mark_next = $(this).hasClass('diffSession') && ! mark_next;
odd_row = ! odd_row;
@ -78,7 +77,7 @@ AJAX.registerOnload('server_variables.js', function() {
/* Called by inline js. Allows the user to edit a server variable */
function editVariable(link)
{
var varName = $(link).parent().parent().find('th:first').first().text().replace(/ /g,'_');
var varName = $(link).closest('.variable_row').find('.variable_name').text().replace(/ /g,'_');
var $mySaveLink = $saveLink.clone().show();
var $myCancelLink = $cancelLink.clone().show();
var $cell = $(link).parent();
@ -98,10 +97,11 @@ function editVariable(link)
}, function(data) {
if (data.success) {
$cell.html(data.variable);
$cell.data('content', data.variable);
PMA_ajaxRemoveMessage($msgbox);
} else {
PMA_ajaxShowMessage(data.error, false);
$cell.html($cell.find('span.oldContent').html());
$cell.html($cell.data('content'));
}
$cell.removeClass('edit');
}, 'json');
@ -110,7 +110,7 @@ function editVariable(link)
});
$myCancelLink.click(function() {
$cell.html($cell.find('span.oldContent').html());
$cell.html($cell.data('content'));
$cell.removeClass('edit');
return false;
});
@ -121,18 +121,21 @@ function editVariable(link)
varName: varName
}, function(data) {
if (data.success == true) {
// hide original content
$cell.html('<span class="oldContent" style="display:none;">' + $cell.html() + '</span>');
$cell.data('content', $cell.html()).html('');
// put edit field and save/cancel link
$cell.prepend('<table class="serverVariableEditTable" border="0"><tr><td></td><td style="width:100%;">' +
'<input type="text" id="variableEditArea" value="' + data.message + '" /></td></tr></table>');
$cell.find('table td:first').append($mySaveLink);
$cell.find('table td:first').append(' ');
$cell.find('table td:first').append($myCancelLink);
$cell.prepend(
'<table class="serverVariableEditTable" border="0">'
+ '<tr><td><input type="text" value="' + data.message + '" /></td>'
+ '<td></td></tr>'
+ '</table>'
);
$cell.find('table td:last').append($mySaveLink);
$cell.find('table td:last').append(' ');
$cell.find('table td:last').append($myCancelLink);
// Keyboard shortcuts to the rescue
$('input#variableEditArea').focus();
$('input#variableEditArea').keydown(function(event) {
$cell.find('input').focus().keydown(function(event) {
// Enter key
if (event.keyCode == 13) {
$mySaveLink.trigger('click');

73
server_variables.php
View File

@ -123,7 +123,7 @@ $output = '<h2>' . PMA_Util::getImage('s_vars.png')
/**
* Link templates
*/
$url = htmlspecialchars('server_variables.php?' . PMA_generate_common_url($db));
$url = htmlspecialchars('server_variables.php?' . PMA_generate_common_url());
$output .= '<a style="display: none;" href="#" class="editLink" onclick="return editVariable(this);">';
$output .= PMA_Util::getIcon('b_edit.png', __('Edit')) . '</a>';
$output .= '<a style="display: none;" href="' . $url . '" class="ajax saveLink">';
@ -151,52 +151,61 @@ $output .= '<fieldset id="tableFilter">'
. '</div>'
. '</fieldset>';
$output .= '<table id="serverVariables" class="data filteredData noclick">'
. '<thead>'
. '<tr><th>' . __('Variable') . '</th>'
. '<th class="valueHeader">'
$output .= '<div id="serverVariables" class="data filteredData noclick">'
. '<div class="variable_header variable_row">'
. '<div class="variable_name">' . __('Variable') . '</div>'
. '<div class="variable_value valueHeader">'
. __('Session value') . ' / ' . __('Global value')
. '</th>'
. '</tr>'
. '</thead>'
. '<tbody>';
. '</div>'
. '<div style="clear:both"></div>'
. '</div>';
$odd_row = true;
foreach ($serverVars as $name => $value) {
$has_session_value = isset($serverVarsSession[$name])
&& $serverVarsSession[$name] != $value;
$row_class = ($odd_row ? 'odd' : 'even') . ' '
. ($has_session_value ? 'diffSession' : '');
$row_class = ($odd_row ? ' odd' : ' even')
. ($has_session_value ? ' diffSession' : '');
$output .= '<tr class="' . $row_class . '">'
. '<th class="nowrap">' . htmlspecialchars(str_replace('_', ' ', $name));
$output .= '<div class="variable_row ' . $row_class . '">'
. '<div class="variable_name">';
// To display variable documentation link
if (isset($VARIABLE_DOC_LINKS[$name])) {
$output .= PMA_Util::showMySQLDocu(
$VARIABLE_DOC_LINKS[$name][1],
$VARIABLE_DOC_LINKS[$name][1],
false,
$VARIABLE_DOC_LINKS[$name][2] . '_' . $VARIABLE_DOC_LINKS[$name][0]
);
}
$output .= '</th>'
. '<td class="value' . (PMA_isSuperuser() ? ' editable' : '') . '">'
// To display variable documentation link
if (isset($VARIABLE_DOC_LINKS[$name])) {
$output .= '<span title="' . htmlspecialchars(str_replace('_', ' ', $name)) . '">';
$output .= PMA_Util::showMySQLDocu(
$VARIABLE_DOC_LINKS[$name][1],
$VARIABLE_DOC_LINKS[$name][1],
false,
$VARIABLE_DOC_LINKS[$name][2] . '_' . $VARIABLE_DOC_LINKS[$name][0],
true
);
$output .= htmlspecialchars(str_replace('_', ' ', $name));
$output .= PMA_Util::getImage('b_help.png', __('Documentation'));
$output .= '</a>';
$output .= '</span>';
} else {
$output .= htmlspecialchars(str_replace('_', ' ', $name));
}
$output .= '</div>'
. '<div class="variable_value value' . (PMA_isSuperuser() ? ' editable' : '') . '">&nbsp;'
. formatVariable($name, $value)
. '</td></tr>';
. '</div>'
. '<div style="clear:both"></div>'
. '</div>';
if ($has_session_value) {
$output .= '<tr class="' . ($odd_row ? 'odd' : 'even') . '">'
. '<td>(' . __('Session value') . ')</td>'
. '<td class="value">' . formatVariable($name, $serverVarsSession[$name]) . '</td>'
. '</tr>';
$output .= '<div class="variable_row ' . ($odd_row ? ' odd' : ' even') . '">'
. '<div class="variable_name session">(' . __('Session value') . ')</div>'
. '<div class="variable_value value">&nbsp;' . formatVariable($name, $serverVarsSession[$name]) . '</div>'
. '<div class="variable_doc value"></div>'
. '<div style="clear:both"></div>'
. '</div>';
}
$odd_row = ! $odd_row;
}
$output .= '</tbody>'
. '</table>';
$output .= '</div>';
$response->addHtml($output);

77
themes/original/css/common.css.php
View File

@ -1161,36 +1161,69 @@ div#logTable table {
/* end serverstatus */
/* server variables */
#serverVariables {
min-width: 30em;
}
#serverVariables .variable_row > div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
a.editLink {
#serverVariables .variable_header {
font-weight: bold;
color: <?php echo $GLOBALS['cfg']['ThColor']; ?>;
background: <?php echo $GLOBALS['cfg']['ThBackground']; ?>;
}
#serverVariables .variable_header .variable_value {
text-align: <?php echo $left; ?>;
}
#serverVariables .variable_row {
padding: 0.5em;
min-height: 18px;
}
#serverVariables .variable_name {
width: 45%;
float: <?php echo $left; ?>;
font-weight: bold;
}
#serverVariables .variable_name.session {
font-weight: normal;
font-style: italic;
}
#serverVariables .variable_value {
width: 50%;
float: <?php echo $right; ?>;
text-align: <?php echo $right; ?>;
}
/* server variables editor */
#serverVariables .editLink {
padding-<?php echo $right; ?>: 1em;
float: <?php echo $left; ?>;
font-family: sans-serif;
}
table.serverVariableEditTable {
#serverVariables .serverVariableEditTable {
border: 0;
margin: 0;
padding: 0;
width: 100%;
}
table.serverVariableEditTable td {
#serverVariables .serverVariableEditTable td {
border: 0;
margin: 0;
padding: 0;
}
table.serverVariableEditTable td:first-child {
white-space: nowrap;
vertical-align: middle;
text-align: <?php echo $left; ?>;
}
table.serverVariableEditTable input {
width: 95%;
#serverVariables .serverVariableEditTable input {
width: 90%;
box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
table#serverVariables td {
height: 18px;
}
/* end server variables */
/* querywindow */
@ -2450,12 +2483,12 @@ body .ui-widget {
}
.jqplot-yaxis-tick.jqplot-breakTick {
right: -20px;
margin-right: 0px;
padding:1px 5px 1px 5px;
/* background-color: white;*/
z-index: 2;
font-size: 1.5em;
right: -20px;
margin-right: 0px;
padding:1px 5px 1px 5px;
/* background-color: white;*/
z-index: 2;
font-size: 1.5em;
}
.jqplot-y2axis-tick, .jqplot-y3axis-tick, .jqplot-y4axis-tick, .jqplot-y5axis-tick, .jqplot-y6axis-tick, .jqplot-y7axis-tick, .jqplot-y8axis-tick, .jqplot-y9axis-tick {
@ -2642,6 +2675,6 @@ div.jqplot-bubble-label.jqplot-bubble-label-highlight {
}
div.jqplot-noData-container {
text-align: center;
background-color: rgba(96%, 96%, 96%, 0.3);
text-align: center;
background-color: rgba(96%, 96%, 96%, 0.3);
}

66
themes/pmahomme/css/common.css.php
View File

@ -1429,36 +1429,74 @@ div#queryAnalyzerDialog table.queryNums {
/* end serverstatus */
/* server variables */
#serverVariables {
min-width: 30em;
}
#serverVariables .variable_row > div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
#serverVariables .variable_header {
color: <?php echo $GLOBALS['cfg']['ThColor']; ?>;
background: #f3f3f3;
<?php echo $_SESSION['PMA_Theme']->getCssGradient('ffffff', 'cccccc'); ?>
font-weight: bold;
}
#serverVariables .variable_header .variable_value {
text-align: <?php echo $left; ?>;
}
#serverVariables .variable_row {
padding: 0.5em;
min-height: 18px;
}
#serverVariables .variable_name {
width: 45%;
float: <?php echo $left; ?>;
font-weight: bold;
}
#serverVariables .variable_name.session {
font-weight: normal;
font-style: italic;
}
#serverVariables .variable_value {
width: 50%;
float: <?php echo $right; ?>;
text-align: <?php echo $right; ?>;
}
#serverVariables .variable_doc {
overflow:visible;
float: <?php echo $right; ?>;
}
a.editLink {
/* server variables editor */
#serverVariables .editLink {
padding-<?php echo $right; ?>: 1em;
float: <?php echo $left; ?>;
font-family: sans-serif;
}
table.serverVariableEditTable {
#serverVariables .serverVariableEditTable {
border: 0;
margin: 0;
padding: 0;
width: 100%;
}
table.serverVariableEditTable td {
#serverVariables .serverVariableEditTable td {
border: 0;
margin: 0;
padding: 0;
}
table.serverVariableEditTable td:first-child {
white-space: nowrap;
vertical-align: middle;
text-align: <?php echo $left; ?>;
}
table.serverVariableEditTable input {
width: 95%;
#serverVariables .serverVariableEditTable input {
width: 90%;
margin: 0 0.5em;
box-sizing: border-box;
-ms-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
table#serverVariables td {
height: 18px;
}
/* end server variables */