[Rt-commit] rt branch, 4.6/inline-edit, updated. rt-4.4.1-192-g62b7ef0

[Shawn Moore]

The branch, 4.6/inline-edit has been updated
       via  62b7ef03cebd0e0353d9d0908575eea3b2393323 (commit)
       via  81d902ae2c3e66629138f7443b2f96636177e3a6 (commit)
      from  d469680d28fe6d54996b9cf72036a5d990054641 (commit)

Summary of changes:
 share/html/Elements/CollectionList |  2 ++
 share/static/js/util.js            | 55 +++++++++++++++++++++-----------------
 2 files changed, 33 insertions(+), 24 deletions(-)

- Log -----------------------------------------------------------------
commit 81d902ae2c3e66629138f7443b2f96636177e3a6
Author: Shawn M Moore <shawn at bestpractical.com>
Date:   Tue Jan 31 23:46:56 2017 +0000

    Don't include .inline-edit for non-ticket tables
    
    We weren't showing inline edit UI anyway, due to both
    /Elements/CollectionAsTable/Row explicitly forbidding it, but it was
    being indicated on the <table> level

diff --git a/share/html/Elements/CollectionList b/share/html/Elements/CollectionList
index 5f3abd1..e923b02 100644
--- a/share/html/Elements/CollectionList
+++ b/share/html/Elements/CollectionList
@@ -116,6 +116,8 @@ if ($Class =~ /::/) { # older passed in value
     $Class =~ s/:/_/g;
 }
 
+$InlineEdit = 0 unless $Collection->isa('RT::Tickets');
+
 $m->out('<table cellspacing="0"');
 $m->out(' class="' .  ($Collection->isa('RT::Tickets') ? 'ticket-list' : 'collection') . ($InlineEdit ? ' inline-edit' : '') . ' collection-as-table"');
 $m->out(' data-display-format="' . $m->interp->apply_escapes($DisplayFormat, 'h') . '"');

commit 62b7ef03cebd0e0353d9d0908575eea3b2393323
Author: Shawn M Moore <shawn at bestpractical.com>
Date:   Tue Jan 31 22:58:28 2017 +0000

    Lock cell widths only during inline edit
    
    This avoids the host of issues around table-layout: fixed.
    
    We must set fixed widths on the table cells due to the browser
    aggressively recalculating widths. Specifying only one column's width
    gives the browser lots of leverage to layout the other columns
    differently. This means the invoking inline edit may dramatically affect
    the page layout, which among other things means a poor experience
    because the cell under the mouse cursor may have jumped away. This
    problem affects all tables that contain the inline edit cell as well,
    hence walking up the DOM to fix widths of all container table cells.
    
    This dramatically improves the logic for deciding to use the "wide"
    editor popout.

diff --git a/share/static/js/util.js b/share/static/js/util.js
index f07304e..a9dd22c 100644
--- a/share/static/js/util.js
+++ b/share/static/js/util.js
@@ -603,15 +603,41 @@ jQuery(function () {
             return;
         }
 
+        var table = cell.closest('table');
+        while (table.length) {
+            table.closest('tr').children().each(function () {
+                var cell = jQuery(this);
+                cell.attr('width', cell.width()).addClass('width-locked');
+            });
+
+            table = table.parent().closest('table');
+        }
+
+        cell.closest('tr').children().each(function () {
+            var other = jQuery(this);
+            if (cell[0] != this) {
+                other.attr('width', other.width()).addClass('width-locked');
+            }
+        });
+
         inlineEditPristineForm = cell.find('form').clone();
-        var height = cell.height();
+
+        var displayHeight = cell.height();
+        var displayWidth = cell.width();
 
         cell.addClass('editing');
         jQuery('body').addClass('inline-editing');
 
-        if (editor.find('textarea').length || editor[0].clientWidth > cell[0].clientWidth) {
-            cell.attr('height', height);
+        var editHeight = cell.height();
+        var editWidth = cell.width();
+
+        cell.attr('height', displayHeight);
+        cell.attr('width', displayWidth);
 
+        /* we add a fudge factor for height because a small height change
+         * is both more tolerable than a small width change, and more
+         * likely due to input fields being taller than labels */
+        if (editor.find('textarea').length || editHeight > displayHeight*1.4 || editWidth > displayWidth) {
             var rect = editor[0].getBoundingClientRect();
             editor.addClass('wide');
             var top = rect.top - parseInt(editor.css('padding-top')) - parseInt(editor.css('border-top-width'));
@@ -646,7 +672,8 @@ jQuery(function () {
         var cell = editor.closest('td');
 
         inlineEditingDate = false;
-        cell.removeClass('editing').removeAttr('height');
+        cell.removeClass('editing').removeAttr('height').removeAttr('width');
+        jQuery('.width-locked').removeClass('width-locked').removeAttr('width');
         editor.removeClass('wide');
         jQuery('body').removeClass('inline-editing');
 
@@ -769,26 +796,6 @@ jQuery(function () {
         editor.closest('form').trigger('submit');
     });
 
-    jQuery('table.collection-as-table').each(function () {
-        var table = jQuery(this);
-        var cols = table.find('colgroup col');
-        var firstRow = table.find('tr:first');
-
-        if (cols.length == 0 || firstRow.length == 0) {
-            return;
-        }
-
-        var totalWidth = firstRow.width();
-
-        cols.each(function (index) {
-            var col = jQuery(this);
-            var cell = firstRow.children().eq(index);
-            col.attr('width', (100 * cell.width() / totalWidth) + '%');
-        });
-
-        table.css('table-layout', 'fixed');
-    });
-
     /* inline edit on ticket display */
     var toggle_inline_edit = function (link) {
         var container = link.closest('.titlebox');

-----------------------------------------------------------------------