From b80cd43ae6a24eef89cb3ece5bbfb12a0b69ce89 Mon Sep 17 00:00:00 2001 From: Ashesh Vashi Date: Mon, 26 Sep 2016 10:04:49 +0100 Subject: [PATCH] Misc changes - Setting the CodeMirror height when panel is resized, which you had mentioned. - Added a new CellEditor (DatetimePickerEditor) for datetime picker. --- .../browser/templates/browser/js/node.js | 19 ++++- web/pgadmin/static/css/overrides.css | 6 +- web/pgadmin/static/js/backform.pgadmin.js | 39 ++++++++-- .../static/js/backgrid/backgrid.pgadmin.js | 78 ++++++++++++++++++- 4 files changed, 128 insertions(+), 14 deletions(-) diff --git a/web/pgadmin/browser/templates/browser/js/node.js b/web/pgadmin/browser/templates/browser/js/node.js index f7addfc99..87a5fc7c2 100644 --- a/web/pgadmin/browser/templates/browser/js/node.js +++ b/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: '
{{ _('Please wait while we fetch information about the node from the server!') }}
', onCreate: function(myPanel, $container) { $container.addClass('pg-no-overflow'); - } - }); + }, + events: events + }); p.load(pgBrowser.docker); }, /* diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css index f0c5703ca..410f5ec60 100755 --- a/web/pgadmin/static/css/overrides.css +++ b/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; diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js index aa63d3e18..b2caec619 100644 --- a/web/pgadmin/static/js/backform.pgadmin.js +++ b/web/pgadmin/static/js/backform.pgadmin.js @@ -439,10 +439,10 @@ ' ', - ' <% if (helpMessage && helpMessage.length) { %>', - ' <%=helpMessage%>', - ' <% } %>', ' ', + ' <% if (helpMessage && helpMessage.length) { %>', + ' <%=helpMessage%>', + ' <% } %>', '', ].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 }, diff --git a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js index af58c06c7..5fee3b93d 100644 --- a/web/pgadmin/static/js/backgrid/backgrid.pgadmin.js +++ b/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;