[Rt-commit] rt branch, 4.6/inline-edit, updated. rt-4.4.1-139-g49711a2

[Shawn Moore]

The branch, 4.6/inline-edit has been updated
       via  49711a28091ea4658a95476c181de7c4dc167c55 (commit)
       via  d4f1896adb755fa27b9f158912402c1b835136ce (commit)
      from  02bc760859b2d2828646289cc11fc91b2d3848fb (commit)

Summary of changes:
 share/static/css/base/collection.css |  8 ++++++++
 share/static/js/util.js              | 24 +++++++++++++++++++-----
 2 files changed, 27 insertions(+), 5 deletions(-)

- Log -----------------------------------------------------------------
commit d4f1896adb755fa27b9f158912402c1b835136ce
Author: Shawn M Moore <shawn at bestpractical.com>
Date:   Mon Sep 12 21:30:38 2016 +0000

    Scope each JS rule to match CSS

diff --git a/share/static/js/util.js b/share/static/js/util.js
index b256fe1..8143ed0 100644
--- a/share/static/js/util.js
+++ b/share/static/js/util.js
@@ -600,11 +600,11 @@ jQuery(function () {
         editor.find(':input:visible:enabled:first').focus();
     });
 
-    jQuery(document).on('change', 'td.editable form :input', function () {
+    jQuery(document).on('change', 'td.editable.editing form :input', function () {
         jQuery(this).closest('form').data('changed', true);
     });
 
-    jQuery(document).on('focusout', 'td.editing form', function () {
+    jQuery(document).on('focusout', 'td.editable.editing form', function () {
         if (!inlineEditEnabled) {
             return;
         }
@@ -654,12 +654,12 @@ jQuery(function () {
         });
     });
 
-    jQuery(document).on('submit', 'td.editing form', function (e) {
+    jQuery(document).on('submit', 'td.editable.editing form', function (e) {
         e.preventDefault();
         jQuery(this).find(':input:focus').blur();
     });
 
-    jQuery(document).on('change', 'td.editing form select', function () {
+    jQuery(document).on('change', 'td.editable.editing form select', function () {
         jQuery(this).closest('form').trigger('submit');
     });
 

commit 49711a28091ea4658a95476c181de7c4dc167c55
Author: Shawn M Moore <shawn at bestpractical.com>
Date:   Mon Sep 12 22:51:19 2016 +0000

    Modal edit for edit forms too wide for the table cell they're in
    
        Initially this attempted to use jQuery.modal, but this more lightweight
        approach proved more robust.

diff --git a/share/static/css/base/collection.css b/share/static/css/base/collection.css
index 58ebba3..a0cb272 100644
--- a/share/static/css/base/collection.css
+++ b/share/static/css/base/collection.css
@@ -61,6 +61,14 @@ td.editable.loading > form.editor > .loading {
     display: inline-block;
 }
 
+td.editable form.editor.wide {
+    position: fixed;
+    background: white;
+    border: 1px solid black;
+    padding: 10px;
+    z-index: 2;
+}
+
 tbody.list-item.refreshing {
     opacity: 0.5;
 }
diff --git a/share/static/js/util.js b/share/static/js/util.js
index 8143ed0..da41729 100644
--- a/share/static/js/util.js
+++ b/share/static/js/util.js
@@ -596,7 +596,20 @@ jQuery(function () {
         var value = cell.find('.value');
         var editor = cell.find('.editor');
 
+        var height = cell.height();
+
         cell.addClass('editing');
+
+        if (editor.find('textarea').length || editor[0].clientWidth > cell[0].clientWidth) {
+            cell.attr('height', height);
+
+            var rect = editor[0].getBoundingClientRect();
+            editor.addClass('wide');
+            var top = rect.top - parseInt(editor.css('padding-top')) - parseInt(editor.css('border-top-width'));
+            var left = rect.left - parseInt(editor.css('padding-left')) - parseInt(editor.css('border-left-width'));
+            editor.css({ top: top, left: left });
+        }
+
         editor.find(':input:visible:enabled:first').focus();
     });
 
@@ -616,7 +629,8 @@ jQuery(function () {
         var value = cell.find('.value');
 
         if (!editor.data('changed')) {
-            cell.removeClass('editing');
+            editor.removeClass('wide');
+            cell.removeClass('editing').removeAttr('height');
             return;
         }
 

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