diff --git a/web/pgadmin/browser/static/js/frame.js b/web/pgadmin/browser/static/js/frame.js index 8fc535873..135db6b9a 100644 --- a/web/pgadmin/browser/static/js/frame.js +++ b/web/pgadmin/browser/static/js/frame.js @@ -7,7 +7,7 @@ function(_, pgAdmin) { pgAdmin.Browser.Frame = function(options) { var defaults = [ 'name', 'title', 'width', 'height', 'showTitle', 'isCloseable', - 'isPrivate', 'url', 'icon']; + 'isPrivate', 'url', 'icon', 'onCreate']; _.extend(this, _.pick(options, defaults)); } @@ -23,6 +23,7 @@ function(_, pgAdmin) { icon: '', panel: null, frame: null, + onCreate: null, load: function(docker) { var that = this; if (!that.panel) { @@ -85,6 +86,10 @@ function(_, pgAdmin) { wcDocker.EVENT.SCROLLED], function(ev) { myPanel.on(ev, that.eventFunc.bind(myPanel, ev)); }); + + if (that.onCreate && _.isFunction(that.onCreate)) { + that.onCreate.apply(that, [myPanel, frame, $container]); + } } }); } diff --git a/web/pgadmin/browser/static/js/panel.js b/web/pgadmin/browser/static/js/panel.js index 73302331f..8d6ffcb6a 100644 --- a/web/pgadmin/browser/static/js/panel.js +++ b/web/pgadmin/browser/static/js/panel.js @@ -7,7 +7,7 @@ function(_, pgAdmin) { pgAdmin.Browser.Panel = function(options) { var defaults = [ 'name', 'title', 'width', 'height', 'showTitle', 'isCloseable', - 'isPrivate', 'content', 'icon', 'events']; + 'isPrivate', 'content', 'icon', 'events', 'onCreate']; _.extend(this, _.pick(options, defaults)); } @@ -22,6 +22,7 @@ function(_, pgAdmin) { content: '', icon: '', panel: null, + onCreate: null, load: function(docker, title) { var that = this; if (!that.panel) { @@ -40,13 +41,12 @@ function(_, pgAdmin) { myPanel.icon(that.icon) } + var $container = $('
', { + 'class': 'pg-panel-content' + }).append($(that.content)); + myPanel.closeable(!!that.isCloseable); - myPanel.layout().addItem( - $('
', { - 'class': 'pg-panel-content' - }) - .append($(that.content)) - ); + myPanel.layout().addItem($container); that.panel = myPanel; if (that.events && _.isObject(that.events)) { _.each(that.events, function(v, k) { @@ -67,6 +67,10 @@ function(_, pgAdmin) { wcDocker.EVENT.SCROLLED], function(ev) { myPanel.on(ev, that.eventFunc.bind(myPanel, ev)); }); + + if (that.onCreate && _.isFunction(that.onCreate)) { + that.onCreate.apply(that, [myPanel, $container]); + } } }); } diff --git a/web/pgadmin/browser/templates/browser/js/browser.js b/web/pgadmin/browser/templates/browser/js/browser.js index 9f3d248cc..885eaf57a 100644 --- a/web/pgadmin/browser/templates/browser/js/browser.js +++ b/web/pgadmin/browser/templates/browser/js/browser.js @@ -69,7 +69,10 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) { isCloseable: false, isPrivate: true, content: '
{{ _('Please select an object in the tree view.') }}
', - events: panelEvents + events: panelEvents, + onCreate: function(myPanel, $container) { + $container.addClass('pg-no-overflow'); + } }), // Statistics of the object 'statistics': new pgAdmin.Browser.Panel({ diff --git a/web/pgadmin/browser/templates/browser/js/node.js b/web/pgadmin/browser/templates/browser/js/node.js index 890c3dc1e..23d559c1a 100644 --- a/web/pgadmin/browser/templates/browser/js/node.js +++ b/web/pgadmin/browser/templates/browser/js/node.js @@ -241,7 +241,10 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) { showTitle: true, isCloseable: true, isPrivate: true, - content: '
{{ _('Please select an object in the tree view.') }}
' + content: '
{{ _('Please wait while we fetch information about the node from the server!') }}
', + onCreate: function(myPanel, $container) { + $container.addClass('pg-no-overflow'); + } }); p.load(pgBrowser.docker); }, diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css index e90603d19..662805d7b 100755 --- a/web/pgadmin/static/css/overrides.css +++ b/web/pgadmin/static/css/overrides.css @@ -375,14 +375,23 @@ iframe { padding-top: 0; padding-right: 0; padding-left: 0; + height: 100%; } +/* A generic class to make the overflow hidden of a DOM element */ +.pg-no-overflow { + overflow: hidden; +} + + .pg-prop-has-btn-group-below { margin-bottom: 33px; } .has-pg-prop-btn-group { - top: 48px; + top: 39px; + padding-top: 8px; + height: calc(100% - 39px); } .pg-prop-content > div {