Misc changes

- Setting the CodeMirror height when panel is resized, which you had mentioned.
- Added a new CellEditor (DatetimePickerEditor) for datetime picker.
This commit is contained in:
Ashesh Vashi 2016-09-26 10:04:49 +01:00 committed by Dave Page
parent 1c623c56e7
commit b80cd43ae6
4 changed files with 128 additions and 14 deletions

View File

@ -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);
},
/*

View File

@ -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;

View File

@ -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
},

View File

@ -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;