Misc changes

- Setting the CodeMirror height when panel is resized, which you had mentioned.
- Added a new CellEditor (DatetimePickerEditor) for datetime picker.

web/pgadmin/browser/templates/browser/js/node.js

@@ -334,6 +334,20 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
       if (p && p.length == 1)
         return;
 
+      var events = {};
+      events[wcDocker.EVENT.RESIZE_ENDED] = function() {
+        var $container = this.$container.find('.obj_properties').first(),
+            v = $container.data('obj-view');
+
+        if (v && v.model && v.model) {
+          v.model.trigger(
+            'pg-browser-resized', {
+              'view': v, 'panel': this, 'container': $container
+          });
+
+        }
+      };
+
       p = new pgBrowser.Panel({
           name: 'node_props',
           showTitle: true,
@@ -343,8 +357,9 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
           content: '<div class="obj_properties"><div class="alert alert-info pg-panel-message">{{ _('Please wait while we fetch information about the node from the server!') }}</div></div>',
           onCreate: function(myPanel, $container) {
             $container.addClass('pg-no-overflow');
-          }
+          },
-        });
+          events: events
+      });
       p.load(pgBrowser.docker);
     },
     /*

web/pgadmin/static/css/overrides.css

@@ -52,7 +52,7 @@ iframe {
 }
 
 /* Ensure the codemirror editor displays full height gutters when resized */
-.CodeMirror, .CodeMirror-gutters {
+.CodeMirror-gutters {
     height: 100% !important; 
 } 
 
@@ -996,10 +996,6 @@ ul.nav.nav-tabs {
   background-position: 0px 2px;
 }
 
-.pgadmin-controls.SQL>.CodeMirror {
-  height: 500px !important;
-}
-
 /* This rule will stop Chrome apply highlighting to elements such as DIV's used as modals */ 
 *:focus {
   outline: none;

web/pgadmin/static/js/backform.pgadmin.js

@@ -439,10 +439,10 @@
       '    <label>',
       '      <input type="checkbox" class="<%=extraClasses.join(\' \')%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
       '    </label>',
-      '   <% if (helpMessage && helpMessage.length) { %>',
-      '     <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
-      '   <% } %>',
       '  </div>',
+      '  <% if (helpMessage && helpMessage.length) { %>',
+      '    <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
+      '  <% } %>',
       '</div>',
     ].join("\n")),
     getValueFromDOM: function() {
@@ -1370,7 +1370,7 @@
       this.dialog = o.dialog;
       this.tabIndex = o.tabIndex;
 
-      _.bindAll(this, 'onTabChange');
+      _.bindAll(this, 'onTabChange', 'onPanelResized');
     },
     getValueFromDOM: function() {
         return this.formatter.toRaw(this.$el.find("textarea").val(), this.model);
@@ -1382,6 +1382,7 @@
         this.sqlCtrl = null;
         this.$el.empty();
         this.model.off('pg-property-tab-changed', this.onTabChange, this);
+        this.model.off('pg-browser-resized', this.onPanelResized, this);
       }
       // Use the Backform Control's render function
       Backform.Control.prototype.render.apply(this, arguments);
@@ -1401,6 +1402,7 @@
        * been clicked or, not.
        */
       this.model.on('pg-property-tab-changed', this.onTabChange, this);
+      this.model.on('pg-browser-resized', this.onPanelResized, this);
 
       return this;
     },
@@ -1448,6 +1450,29 @@
           this.sqlCtrl.setValue('-- ' + window.pgAdmin.Browser.messages.SQL_NO_CHANGE);
         }
         this.sqlCtrl.refresh.apply(this.sqlCtrl);
+
+        this.$el.find('.CodeMirror').css(
+            'cssText',
+            'height: ' + (
+              this.$el.closest('.tab-content').height() + 8
+              ) + 'px !important;'
+            );
+      }
+    },
+    onPanelResized: function(o) {
+      if (o && o.container) {
+        var $tabContent = o.container.find(
+              '.backform-tab > .tab-content'
+            ).first(),
+            $sqlPane = $tabContent.find(
+              'div[role=tabpanel].tab-pane.SQL'
+            );
+        if ($sqlPane.hasClass('active')) {
+          $sqlPane.find('.CodeMirror').css(
+            'cssText',
+            'height: ' + ($tabContent.height() + 8) + 'px !important;'
+          )
+        }
       }
     },
     remove: function() {
@@ -1459,6 +1484,8 @@
         this.$el.empty();
       }
       this.model.off('pg-property-tab-changed', this.onTabChange, this);
+      this.model.off('pg-browser-resized', this.onPanelResized, this);
+
       Backform.Control.__super__.remove.apply(this, arguments);
     }
 });
@@ -2300,12 +2327,12 @@
       type: "text",
       label: "",
       options: {
-        format: "MMM D YYYY HH:mm:ss.SSS Z",
+        format: "YYYY-MM-DD HH:mm:ss Z",
         showClear: true,
         showTodayButton: true,
         toolbarPlacement: 'top'
       },
-      placeholder: "MMM D YYYY HH:mm:ss.SSS Z",
+      placeholder: "YYYY-MM-DD HH:mm:ss Z",
       extraClasses: [],
       helpMessage: null
     },

web/pgadmin/static/js/backgrid/backgrid.pgadmin.js

@@ -1,7 +1,10 @@
 (function(root, factory) {
   // Set up Backform appropriately for the environment. Start with AMD.
   if (typeof define === 'function' && define.amd) {
-    define(['underscore', 'jquery', 'backbone', 'backform', 'backgrid', 'alertify', 'moment'],
+    define([
+      'underscore', 'jquery', 'backbone', 'backform', 'backgrid', 'alertify',
+      'moment', 'bootstrap.datetimepicker'
+    ],
      function(_, $, Backbone, Backform, Backgrid, Alertify, moment) {
       // Export global even in AMD case in case this script is loaded with
       // others that may still expect a global Backform.
@@ -1158,6 +1161,79 @@
     }
   });
 
+  var DatetimePickerEditor = Backgrid.Extension.DatetimePickerEditor = Backgrid.InputCellEditor.extend({
+    postRender: function() {
+      var self = this,
+          evalF = function() {
+            var args = [];
+            Array.prototype.push.apply(args, arguments);
+            var f = args.shift();
+
+            if (typeof(f) === 'function') {
+              return f.apply(self, args);
+            }
+            return f;
+          },
+          options = _.extend({
+            format: "YYYY-MM-DD HH:mm:ss Z",
+            showClear: true,
+            showTodayButton: true,
+            toolbarPlacement: 'top'
+          }, evalF(this.column.get('options')), {
+            keyBinds: {
+              "shift tab": function(widget) {
+                if (widget) {
+                  // blur the input
+                  setTimeout(
+                    function() {
+                      self.closeIt({keyCode: 9, shiftKey: true});
+                    }, 10
+                  );
+                }
+              },
+              tab: function(widget) {
+                if (widget) {
+                  // blur the input
+                  setTimeout(
+                    function() {
+                      self.closeIt({keyCode: 9});
+                    }, 10
+                  );
+                }
+              }
+            }
+          });
+      this.$el.datetimepicker(options);
+      this.$el.datetimepicker('show');
+      this.picker = this.$el.data('DateTimePicker');
+    },
+    events: {
+      'dp.hide': 'closeIt'
+    },
+    closeIt: function(ev) {
+      var formatter = this.formatter,
+          model = this.model;
+          column = this.column;
+          val = this.$el.val();
+          newValue = formatter.toRaw(val, model);
+
+      if (this.is_closing)
+        return;
+      this.is_closing = true;
+      this.$el.datetimepicker('destroy');
+      this.is_closing = false;
+
+      var command = new Backgrid.Command(ev);
+
+      if (_.isUndefined(newValue)) {
+        model.trigger("backgrid:error", model, column, val);
+      } else {
+        model.set(column.get("name"), newValue);
+        model.trigger("backgrid:edited", model, column, command);
+      }
+    }
+  });
+
   _.extend(MomentCell.prototype, MomentFormatter.prototype.defaults);
 
   return Backgrid;