Use link and unlink to avoid confusion. Bind .on event to document not to be affected by navigation reload. Update title as functionality changes.

Signed-off-by: Madhura Jayaratne <madhura.cj@gmail.com>

js/messages.php

@@ -458,6 +458,8 @@ $js_messages['strMore'] = __('More');
 $js_messages['strShowPanel'] = __('Show Panel');
 $js_messages['strHidePanel'] = __('Hide Panel');
 $js_messages['strUnhideNavItem'] = __('Show hidden navigation tree items.');
+$js_messages['linkWithMain'] = __('Link with main panel');
+$js_messages['unlinkWithMain'] = __('Unlink with main panel');
 
 /* microhistory */
 $js_messages['strInvalidPage'] = __('The requested page was not found in the history, it may have expired.');

js/navigation.js

@@ -62,7 +62,7 @@ $(function () {
      * Register event handler for click on the collapse all
      * navigation icon at the top of the navigation tree
      */
-    $('#navigation_controls').on('click', '#pma_navigation_collapse', function (event) {
+    $(document).on('click', '#pma_navigation_collapse', function (event) {
         event.preventDefault();
         $('#pma_navigation_tree a.expander').each(function() {
             var $icon = $(this).find('img');
@@ -76,18 +76,26 @@ $(function () {
      * Register event handler to toggle
      * the linking with main panel behavior
      */
-    $('#navigation_controls').on('click', '#pma_navigation_sync', function (event) {
+    $(document).on('click', '#pma_navigation_sync', function (event) {
         event.preventDefault();
         var synced = $('#pma_navigation_tree').hasClass('synced');
         var $img = $('#pma_navigation_sync').children('img');
         if (synced) {
-            $img.removeClass('ic_s_synced').addClass('ic_s_unsynced');
+            $img
+                .removeClass('ic_s_unlink')
+                .addClass('ic_s_link')
+                .attr('alt', PMA_messages.linkWithMain)
+                .attr('title', PMA_messages.linkWithMain);
             $('#pma_navigation_tree')
                 .removeClass('synced')
                 .find('li.selected')
                 .removeClass('selected');
         } else {
-            $img.removeClass('ic_s_unsynced').addClass('ic_s_synced');
+            $img
+                .removeClass('ic_s_link')
+                .addClass('ic_s_unlink')
+                .attr('alt', PMA_messages.unlinkWithMain)
+                .attr('title', PMA_messages.unlinkWithMain);
             $('#pma_navigation_tree').addClass('synced');
             PMA_showCurrentNavigation();
         }

libraries/navigation/NavigationTree.class.php

@@ -1132,14 +1132,16 @@ class PMA_NavigationTree
             's_collapseall.png',
             'pma_navigation_collapse'
         );
-        $syncImage = 's_unsynced.png';
+        $syncImage = 's_link.png';
+        $title = __('Link with main panel');
         if ($GLOBALS['cfg']['NavigationLinkWithMainPanel']) {
-            $syncImage = 's_synced.png';
+            $syncImage = 's_unlink.png';
+            $title = __('Unlink with main panel');
         }
         $retval .= PMA_Util::getNavigationLink(
             '#',
             $showText,
-            __('Link with main panel'),
+            $title,
             $showIcon,
             $syncImage,
             'pma_navigation_sync'

themes/original/sprites.lib.php

@@ -675,7 +675,7 @@ function PMA_sprites()
             'width'    => '16',
             'height'   => '16'
         ),
-        's_synced' => array(
+        's_link' => array(
             'position' => '133',
             'width'    => '16',
             'height'   => '16'
@@ -695,7 +695,7 @@ function PMA_sprites()
             'width'    => '16',
             'height'   => '16'
         ),
-        's_unsynced' => array(
+        's_unlink' => array(
             'position' => '137',
             'width'    => '16',
             'height'   => '16'

themes/pmahomme/sprites.lib.php

@@ -760,7 +760,7 @@ function PMA_sprites()
             'width'    => '16',
             'height'   => '16'
         ),
-        's_synced' => array(
+        's_link' => array(
             'position' => '150',
             'width'    => '16',
             'height'   => '16'
@@ -780,7 +780,7 @@ function PMA_sprites()
             'width'    => '16',
             'height'   => '16'
         ),
-        's_unsynced' => array(
+        's_unlink' => array(
             'position' => '154',
             'width'    => '16',
             'height'   => '16'