mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-25 18:55:31 -06:00
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:
parent
1c623c56e7
commit
b80cd43ae6
@ -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);
|
||||
},
|
||||
/*
|
||||
|
@ -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;
|
||||
|
@ -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
|
||||
},
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user