In Synchronize panel, make image changes independant from the original theme

This commit is contained in:
Marc Delisle
2011-03-11 13:16:36 -05:00
parent 4fdae9a0e0
commit 8d2531d658
4 changed files with 91 additions and 64 deletions

View File

@@ -401,22 +401,26 @@ var row_class = 'even';
function showDetails(i, update_size, insert_size, remove_size, insert_index, remove_index, img_obj, table_name)
{
// The path of the image is split to facilitate comparison
var relative_path = (img_obj.src).split("themes/");
// a jQuery object
var $img = $(img_obj);
$img.toggleClass('selected');
// The image source is changed when the showDetails function is called.
if (relative_path[1] == 'original/img/new_data_hovered.jpg') {
img_obj.src = "./themes/original/img/new_data_selected_hovered.jpg";
img_obj.alt = PMA_messages['strClickToUnselect']; //only for IE browser
} else if (relative_path[1] == 'original/img/new_struct_hovered.jpg') {
img_obj.src = "./themes/original/img/new_struct_selected_hovered.jpg";
img_obj.alt = PMA_messages['strClickToUnselect'];
} else if (relative_path[1] == 'original/img/new_struct_selected_hovered.jpg') {
img_obj.src = "./themes/original/img/new_struct_hovered.jpg";
img_obj.alt = PMA_messages['strClickToSelect'];
} else if (relative_path[1] == 'original/img/new_data_selected_hovered.jpg') {
img_obj.src = "./themes/original/img/new_data_hovered.jpg";
img_obj.alt = PMA_messages['strClickToSelect'];
if ($img.hasClass('selected')) {
if ($img.hasClass('struct_img')) {
$img.attr('src', pmaThemeImage + 'new_struct_selected.jpg');
}
if ($img.hasClass('data_img')) {
$img.attr('src', pmaThemeImage + 'new_data_selected.jpg');
}
} else {
if ($img.hasClass('struct_img')) {
$img.attr('src', pmaThemeImage + 'new_struct.jpg');
}
if ($img.hasClass('data_img')) {
$img.attr('src', pmaThemeImage + 'new_data.jpg');
}
}
var div = document.getElementById("list");
@@ -430,8 +434,7 @@ function showDetails(i, update_size, insert_size, remove_size, insert_index, rem
row_class = 'even';
}
// If the red or green button against a table name is pressed then append a new row to show the details of differences of this table.
if ((relative_path[1] != 'original/img/new_struct_selected_hovered.jpg') && (relative_path[1] != 'original/img/new_data_selected_hovered.jpg')) {
if ($img.hasClass('selected')) {
var newRow = document.createElement("tr");
newRow.setAttribute("class", row_class);
newRow.className = row_class;
@@ -469,7 +472,7 @@ function showDetails(i, update_size, insert_size, remove_size, insert_index, rem
insert_rows.align = "center";
var tick_image = document.createElement("img");
tick_image.src = "./themes/original/img/s_success.png";
tick_image.src = pmaThemeImage + "s_success.png";
if (update_size == '' && insert_size == '' && remove_size == '') {
/**
@@ -562,7 +565,7 @@ function showDetails(i, update_size, insert_size, remove_size, insert_index, rem
}
table_body.appendChild(newRow);
} else if ((relative_path[1] != 'original/img/new_struct_hovered.jpg') && (relative_path[1] != 'original/img/new_data_hovered.jpg')) {
} else {
//The case when the row showing the details need to be removed from the table i.e. the difference button is deselected now.
var table_rows = table_body.getElementsByTagName("tr");
var j;
@@ -589,35 +592,6 @@ function showDetails(i, update_size, insert_size, remove_size, insert_index, rem
}
}
/**
* Changes the image on hover effects
*
* @param img_obj the image object whose source needs to be changed
*
*/
function change_Image(img_obj)
{
var relative_path = (img_obj.src).split("themes/");
if (relative_path[1] == 'original/img/new_data.jpg') {
img_obj.src = "./themes/original/img/new_data_hovered.jpg";
} else if (relative_path[1] == 'original/img/new_struct.jpg') {
img_obj.src = "./themes/original/img/new_struct_hovered.jpg";
} else if (relative_path[1] == 'original/img/new_struct_hovered.jpg') {
img_obj.src = "./themes/original/img/new_struct.jpg";
} else if (relative_path[1] == 'original/img/new_data_hovered.jpg') {
img_obj.src = "./themes/original/img/new_data.jpg";
} else if (relative_path[1] == 'original/img/new_data_selected.jpg') {
img_obj.src = "./themes/original/img/new_data_selected_hovered.jpg";
} else if(relative_path[1] == 'original/img/new_struct_selected.jpg') {
img_obj.src = "./themes/original/img/new_struct_selected_hovered.jpg";
} else if (relative_path[1] == 'original/img/new_struct_selected_hovered.jpg') {
img_obj.src = "./themes/original/img/new_struct_selected.jpg";
} else if (relative_path[1] == 'original/img/new_data_selected_hovered.jpg') {
img_obj.src = "./themes/original/img/new_data_selected.jpg";
}
}
/**
* Generates the URL containing the list of selected table ids for synchronization and
* a variable checked for confirmation of deleting previous rows from target tables

View File

@@ -126,6 +126,9 @@ foreach ($js_messages as $name => $js_message) {
/* Calendar */
echo "var themeCalendarImage = '" . $GLOBALS['pmaThemeImage'] . 'b_calendar.png' . "';\n";
/* Image path */
echo "var pmaThemeImage = '" . $GLOBALS['pmaThemeImage'] . "';\n";
/* Version */
echo "var pmaversion = '" . PMA_VERSION . "';\n";

View File

@@ -24,4 +24,53 @@ $(document).ready(function() {
$(this).closest('tbody').find('.server-db').val(parts[4])
}
});
$('.struct_img').hover(
// pmaThemeImage comes from js/messages.php
function() {
// mouse enters the element
var $img = $(this);
$img.addClass('hover');
if ($img.hasClass('selected')) {
$img.attr('src', pmaThemeImage + 'new_struct_selected_hovered.jpg');
} else {
$img.attr('src', pmaThemeImage + 'new_struct_hovered.jpg');
}
},
function() {
// mouse leaves the element
var $img = $(this);
$img.removeClass('hover');
if ($img.hasClass('selected')) {
$img.attr('src', pmaThemeImage + 'new_struct_selected.jpg');
} else {
$img.attr('src', pmaThemeImage + 'new_struct.jpg');
}
}
);
$('.data_img').hover(
// pmaThemeImage comes from js/messages.php
function() {
// mouse enters the element
var $img = $(this);
$img.addClass('hover');
if ($img.hasClass('selected')) {
$img.attr('src', pmaThemeImage + 'new_data_selected_hovered.jpg');
} else {
$img.attr('src', pmaThemeImage + 'new_data_hovered.jpg');
}
},
function() {
// mouse leaves the element
var $img = $(this);
$img.removeClass('hover');
if ($img.hasClass('selected')) {
$img.attr('src', pmaThemeImage + 'new_data_selected.jpg');
} else {
$img.attr('src', pmaThemeImage + 'new_data.jpg');
}
}
);
});

View File

@@ -277,6 +277,7 @@ if ((isset($_REQUEST['submit_connect']))) {
*/
PMA_syncDisplayHeaderSource($src_db);
$odd_row = false;
/**
* Display the matching tables' names and difference, first
*/
@@ -339,8 +340,8 @@ if ((isset($_REQUEST['submit_connect']))) {
*/
if (($num_alter_cols > 0) || ($num_insert_cols > 0) || ($num_remove_cols > 0) || ($num_add_index > 0) || ($num_remove_index > 0)) {
echo '<img class="icon" src="' . $pmaThemeImage . 'new_struct.jpg" width="29" height="29"
alt="' . __('Click to select') . '" onmouseover="change_Image(this);" onmouseout="change_Image(this);"
echo '<img class="icon struct_img" src="' . $pmaThemeImage . 'new_struct.jpg" width="29" height="29"
alt="' . __('Click to select') . '"
onclick="showDetails(' . "'MS" . $i . "','" . $num_alter_cols . "','" .$num_insert_cols .
"','" . $num_remove_cols . "','" . $num_add_index . "','" . $num_remove_index . "'"
. ', this ,' . "'" . htmlspecialchars($matching_tables[$i]) . "'" . ')"/>';
@@ -351,8 +352,8 @@ if ((isset($_REQUEST['submit_connect']))) {
if (isset($update_array[$i]) || isset($insert_array[$i])) {
if (isset($update_array[$i][0][$matching_tables_keys[$i][0]]) || isset($insert_array[$i][0][$matching_tables_keys[$i][0]])) {
echo '<img class="icon" src="' . $pmaThemeImage . 'new_data.jpg" width="29" height="29"
alt="' . __('Click to select') . '" onmouseover="change_Image(this);" onmouseout="change_Image(this);"
echo '<img class="icon data_img" src="' . $pmaThemeImage . 'new_data.jpg" width="29" height="29"
alt="' . __('Click to select') . '"
onclick="showDetails('. "'MD" . $i . "','" . $num_of_updates . "','" . $num_of_insertions .
"','" . null . "','" . null . "','" . null . "'" . ', this ,' . "'" . htmlspecialchars($matching_tables[$i]) . "'" . ')" />';
}
@@ -367,15 +368,15 @@ if ((isset($_REQUEST['submit_connect']))) {
$odd_row = PMA_syncDisplayBeginTableRow($odd_row);
echo '<td> + ' . htmlspecialchars($source_tables_uncommon[$j]) . '</td> ';
echo '<td align="center"><img class="icon" src="' . $pmaThemeImage . 'new_struct.jpg" width="29" height="29"
alt="' . __('Click to select') . '" onmouseover="change_Image(this);" onmouseout="change_Image(this);"
echo '<td align="center"><img class="icon struct_img" src="' . $pmaThemeImage . 'new_struct.jpg" width="29" height="29"
alt="' . __('Click to select') . '"
onclick="showDetails(' . "'US" . $j . "','" . null . "','" . null . "','" . null . "','" . null . "','" . null . "'" . ', this ,'
. "'" . htmlspecialchars($source_tables_uncommon[$j]) . "'" . ')"/>';
if ($row_count[$j] > 0)
{
echo '<img class="icon" src="' . $pmaThemeImage . 'new_data.jpg" width="29" height="29"
alt="' . __('Click to select') . '" onmouseover="change_Image(this);" onmouseout="change_Image(this);"
echo '<img class="icon data_img" src="' . $pmaThemeImage . 'new_data.jpg" width="29" height="29"
alt="' . __('Click to select') . '"
onclick="showDetails(' . "'UD" . $j . "','" . null . "','" . $row_count[$j] . "','" . null .
"','" . null . "','" . null . "'" . ', this ,' . "'" . htmlspecialchars($source_tables_uncommon[$j]) . "'" . ')" />';
}
@@ -733,8 +734,8 @@ if (isset($_REQUEST['Table_ids'])) {
}
if (($num_alter_cols > 0) || ($num_insert_cols > 0) || ($num_remove_cols > 0) || ($num_add_index > 0) || ($num_remove_index > 0)) {
echo '<img class="icon" src="' . $pmaThemeImage . 'new_struct.jpg" width="29" height="29"
alt="' . __('Click to select') . '" onmouseover="change_Image(this);" onmouseout="change_Image(this);"
echo '<img class="icon struct_img" src="' . $pmaThemeImage . 'new_struct.jpg" width="29" height="29"
alt="' . __('Click to select') . '"
onclick="showDetails(' . "'MS" . $i . "','" . $num_alter_cols . "','" . $num_insert_cols . "','" . $num_remove_cols . "','" . $num_add_index . "','" . $num_remove_index . "'" .',
this ,' . "'" . htmlspecialchars($matching_tables[$i]) . "'" . ')"/>';
}
@@ -761,8 +762,8 @@ if (isset($_REQUEST['Table_ids'])) {
if ((isset($matching_tables_keys[$i][0]) && isset($update_array[$i][0][$matching_tables_keys[$i][0]]))
|| (isset($matching_tables_keys[$i][0]) && isset($insert_array[$i][0][$matching_tables_keys[$i][0]]))) {
echo '<img class="icon" src="' . $pmaThemeImage . 'new_data.jpg" width="29" height="29"
alt="' . __('Click to select') . '" onmouseover="change_Image(this);" onmouseout="change_Image(this);"
echo '<img class="icon data_img" src="' . $pmaThemeImage . 'new_data.jpg" width="29" height="29"
alt="' . __('Click to select') . '"
onclick="showDetails(' . "'MD" . $i . "','" . $num_of_updates . "','" . $num_of_insertions .
"','" . null . "','" . null . "','" . null . "'" .', this ,' . "'" . htmlspecialchars($matching_tables[$i]) . "'" . ')" />';
}
@@ -789,8 +790,8 @@ if (isset($_REQUEST['Table_ids'])) {
*/
if (!(in_array($j, $uncommon_table_structure_diff))) {
if (isset($uncommon_tables[$j])) {
echo '<img class="icon" src="' . $pmaThemeImage . 'new_struct.jpg" width="29" height="29"
alt="' . __('Click to select') . '" onmouseover="change_Image(this);" onmouseout="change_Image(this);"
echo '<img class="icon struct_img" src="' . $pmaThemeImage . 'new_struct.jpg" width="29" height="29"
alt="' . __('Click to select') . '"
onclick="showDetails(' . "'US" . $j . "','" . null . "','" . null . "','" . null . "','" . null . "','" . null . "'" . ', this ,' . "'" . htmlspecialchars($source_tables_uncommon[$j]) . "'" . ')"/>' .' ';
}
} else {
@@ -801,8 +802,8 @@ if (isset($_REQUEST['Table_ids'])) {
*/
if (!(in_array($j, $uncommon_table_data_diff))) {
if (isset($row_count[$j]) && ($row_count > 0)) {
echo '<img class="icon" src="' . $pmaThemeImage . 'new_data.jpg" width="29" height="29"
alt="' . __('Click to select') . '" onmouseover="change_Image(this);" onmouseout="change_Image(this);"
echo '<img class="icon data_img" src="' . $pmaThemeImage . 'new_data.jpg" width="29" height="29"
alt="' . __('Click to select') . '"
onclick="showDetails(' . "'UD" . $j . "','" . null ."','" . $row_count[$j] ."','"
. null . "','" . null . "','" . null . "'" . ', this ,' . "'". htmlspecialchars($source_tables_uncommon[$j]) . "'" . ')" />';
}