Merge pull request #13905 from mauriciofauth/menuresizer

Use CSS to hide table structure action buttons

js/tbl_structure.js

@@ -18,38 +18,6 @@
  *
  */
 
-/**
- * This function returns the horizontal space available for the menu in pixels.
- * To calculate this value we start we the width of the main panel, then we
- * substract the margin of the page content, then we substract any cellspacing
- * that the table may have (original theme only) and finally we substract the
- * width of all columns of the table except for the last one (which is where
- * the menu will go). What we should end up with is the distance between the
- * start of the last column on the table and the edge of the page, again this
- * is the space available for the menu.
- *
- * In the case where the table cell where the menu will be displayed is already
- * off-screen (the table is wider than the page), a negative value will be returned,
- * but this will be treated as a zero by the menuResizer plugin.
- *
- * @return int
- */
-function PMA_tbl_structure_menu_resizer_callback () {
-    var pagewidth = $('body').width();
-    var $page = $('#page_content');
-    pagewidth -= $page.outerWidth(true) - $page.outerWidth();
-    var columnsWidth = 0;
-    var $columns = $('#tablestructure').find('tr:eq(1)').find('td,th');
-    $columns.not(':last').each(function () {
-        columnsWidth += $(this).outerWidth(true);
-    });
-    var totalCellSpacing = $('#tablestructure').width();
-    $columns.each(function () {
-        totalCellSpacing -= $(this).outerWidth(true);
-    });
-    return pagewidth - columnsWidth - totalCellSpacing - 15; // 15px extra margin
-}
-
 /**
  * Reload fields table
  */
@@ -60,13 +28,6 @@ function reloadFieldForm () {
         $('#addColumns').replaceWith($temp_div.find('#addColumns'));
         $('#move_columns_dialog').find('ul').replaceWith($temp_div.find('#move_columns_dialog ul'));
         $('#moveColumns').removeClass('move-active');
-        /* reinitialise the more options in table */
-        var windowWidth = $(window).width();
-        if (windowWidth > 768) {
-            if ($('#fieldsForm').hasClass('HideStructureActions')) {
-                $('#fieldsForm').find('ul.table-structure-actions').menuResizer(PMA_tbl_structure_menu_resizer_callback);
-            }
-        }
     });
     $('#page_content').show();
 }
@@ -358,9 +319,6 @@ AJAX.registerOnload('tbl_structure.js', function () {
                             buttons: button_options_error
                         }); // end dialog options
                 } else {
-                    if ($('#fieldsForm').hasClass('HideStructureActions')) {
-                        $('#fieldsForm').find('ul.table-structure-actions').menuResizer('destroy');
-                    }
                     // sort the fields table
                     var $fields_table = $('table#tablestructure tbody');
                     // remove all existing rows and remember them
@@ -386,12 +344,6 @@ AJAX.registerOnload('tbl_structure.js', function () {
                     }
                     PMA_ajaxShowMessage(data.message);
                     $this.dialog('close');
-                    var windowWidth = $(window).width();
-                    if (windowWidth > 768) {
-                        if ($('#fieldsForm').hasClass('HideStructureActions')) {
-                            $('#fieldsForm').find('ul.table-structure-actions').menuResizer(PMA_tbl_structure_menu_resizer_callback);
-                        }
-                    }
                 }
             });
         };
@@ -519,9 +471,7 @@ AJAX.registerOnload('tbl_structure.js', function () {
 AJAX.registerOnload('tbl_structure.js', function () {
     var windowwidth = $(window).width();
     if (windowwidth > 768) {
-        if ($('#fieldsForm').hasClass('HideStructureActions')) {
-            $('#fieldsForm').find('ul.table-structure-actions').menuResizer(PMA_tbl_structure_menu_resizer_callback);
-        } else {
+        if (! $('#fieldsForm').hasClass('HideStructureActions')) {
             $('.table-structure-actions').width(function () {
                 var width = 5;
                 $(this).find('li').each(function () {
@@ -550,15 +500,3 @@ AJAX.registerOnload('tbl_structure.js', function () {
         }
     });
 });
-AJAX.registerTeardown('tbl_structure.js', function () {
-    if ($('#fieldsForm').hasClass('HideStructureActions')) {
-        $('#fieldsForm').find('ul.table-structure-actions').menuResizer('destroy');
-    }
-});
-$(function () {
-    $(window).resize($.throttle(function () {
-        if ($('#fieldsForm').length && $('#fieldsForm').hasClass('HideStructureActions')) {
-            $('#fieldsForm').find('ul.table-structure-actions').menuResizer('resize');
-        }
-    }));
-});

libraries/classes/Controllers/Table/TableStructureController.php

@@ -1170,12 +1170,6 @@ class TableStructureController extends TableController
         array $cfgRelation, array $columns_with_unique_index, $url_params,
         $primary_index, array $fields, array $columns_with_index
     ) {
-        /* TABLE INFORMATION */
-        $HideStructureActions = '';
-        if ($GLOBALS['cfg']['HideStructureActions'] === true) {
-            $HideStructureActions .= ' HideStructureActions';
-        }
-
         // prepare comments
         $comments_map = array();
         $mime_map = array();
@@ -1272,9 +1266,14 @@ class TableStructureController extends TableController
         }
         // END - Calc Table Space
 
+        $hideStructureActions = false;
+        if ($GLOBALS['cfg']['HideStructureActions'] === true) {
+            $hideStructureActions = true;
+        }
+
         return Template::get('table/structure/display_structure')->render(
             array(
-                'hide_structure_actions' => $HideStructureActions,
+                'hide_structure_actions' => $hideStructureActions,
                 'db' => $this->db,
                 'table' => $this->table,
                 'db_is_system_schema' => $this->_db_is_system_schema,

templates/table/structure/actions_in_table_structure.twig

@@ -1,4 +1,9 @@
 <td class="print_ignore"><ul class="table-structure-actions resizable-menu">
+    {% if hide_structure_actions %}
+        <li class="submenu shown">
+            <a href="#" class="tab nowrap">{{ Util_getIcon('b_more', 'More'|trans) }}</a>
+            <ul>
+    {% endif %}
     {# Add primary #}
     {% include 'table/structure/action_row_in_structure_table.twig' with {
         'type': type,
@@ -128,4 +133,8 @@
         {% endif %}
         </li>
     {% endif %}
+    {% if hide_structure_actions %}
+            </ul>
+        </li>
+    {% endif %}
 </ul></td>

templates/table/structure/display_structure.twig

@@ -1,5 +1,5 @@
 <form method="post" action="tbl_structure.php" name="fieldsForm" id="fieldsForm"
-    class="ajax{{ hide_structure_actions }}">
+    class="ajax{{ hide_structure_actions ? ' HideStructureActions' }}">
     {{ Url_getHiddenInputs(db, table) }}
     <input type="hidden" name="table_type" value=
         {%- if db_is_system_schema -%}
@@ -107,6 +107,7 @@
                     'is_in_central_columns': row['Field'] in central_list ? true : false,
                     'central_columns_work': central_columns_work,
                     'table': table,
+                    'hide_structure_actions': hide_structure_actions,
                     'mysql_int_version': mysql_int_version
                 } only %}
             {% endif %}