diff --git a/web/pgadmin/browser/templates/browser/js/node.js b/web/pgadmin/browser/templates/browser/js/node.js index afce2884b..74fa976da 100644 --- a/web/pgadmin/browser/templates/browser/js/node.js +++ b/web/pgadmin/browser/templates/browser/js/node.js @@ -136,7 +136,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) { newModel = new (this.model.extend({urlRoot: urlBase})) ( attrs, {node_info: info} ), - groups = Backform.generateViewSchema( + fields = Backform.generateViewSchema( info, newModel, type, this, node ); @@ -175,18 +175,10 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) { newModel.on('pgadmin-session:invalid', onSessionInvalid); } // 'schema' has the information about how to generate the form. - if (groups) { - var fields = []; - + if (_.size(fields)) { // This will contain the actual view var view; - // Create an array from the dictionary with proper required - // structure. - _.each(groups, function(val, key) { - fields.push({label: key, fields: val}); - }); - if (formType == 'fieldset') { // It is used to show, edit, create the object in the // properties tab. @@ -668,6 +660,12 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) { // Create a view to show the properties in fieldsets view = that.getView(item, 'properties', content, data, 'fieldset'); if (view) { + panel.icon( + _.isFunction(that['node_image']) ? + (that['node_image']).apply(that, [data, view.model]) : + (that['node_image'] || ('icon-' + that.type)) + ); + // Save it for release it later j.data('obj-view', view); @@ -747,6 +745,12 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) { // Save it to release it later j.data('obj-view', view); + panel.icon( + _.isFunction(that['node_image']) ? + (that['node_image']).apply(that, [data, view.model]) : + (that['node_image'] || ('icon-' + that.type)) + ); + // Create proper buttons createButtons([{ label: '{{ _("Save") }}', type: 'save', diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css index 7b0fa3117..631e2a816 100755 --- a/web/pgadmin/static/css/overrides.css +++ b/web/pgadmin/static/css/overrides.css @@ -532,7 +532,7 @@ fieldset[disabled] .form-control { } .subnode-footer { - height:38px;; + height:38px; margin: 0px, 15px; min-height:40px; vertical-align: bottom; @@ -653,3 +653,68 @@ div.rolmembership { border: 1.5px solid #faebd7; margin-top: 15px; } + +fieldset.inline-fieldset { + margin: 0px; margin-left: 2px; margin-right: 2px; + padding-right: 10px; padding-left: 10px; padding-top: 6px; padding-bottom: 12px; + border: 2px solid; border-radius: 5px; +} + +fieldset.inline-fieldset > legend { + display: block; border: 0px solid black; box-shadow: none; + box-sizing: content-box; top: auto; bottom: auto; left: auto; + font-size: 16px; font-style: normal; font-weight: 600; + height: 20px; line-height: 20px; margin: 0px; padding-bottom: 0px; + padding-left: 5px; padding-right: 5px; padding-top: 0px; + vertical-align: middle; width: auto; +} + + +fieldset.inline-fieldset > div { + padding: 0px; margin: 0px; border: 0px; +} + +div.inline-tab-panel { + float: left; width: 100%; +} + +div.inline-tab-panel > ul.nav-tabs > li { + background-color: lightgrey; border-top-left-radius: 10px; border-top-right-radius: 10px; +} + +div.inline-tab-panel > ul.nav-tabs > li:first-child { + background-color: lightgrey; border-top-left-radius: 3px; border-top-right-radius: 10px; +} + +div.inline-tab-panel > ul.nav-tabs > li > a, +div.inline-tab-panel > ul.nav-tabs > li > a:active, +div.inline-tab-panel > ul.nav-tabs > li > a:hover, +div.inline-tab-panel > ul.nav-tabs > li > a:focus { + border-top-left-radius: 10px; border-top-right-radius: 10px; +} + +div.inline-tab-panel > ul.nav-tabs > li:first-child > a, +div.inline-tab-panel > ul.nav-tabs > li:first-child > a:active, +div.inline-tab-panel > ul.nav-tabs > li:first-child > a:hover, +div.inline-tab-panel > ul.nav-tabs > li:first-child > a:focus { + border-top-left-radius: 3px; border-top-right-radius: 10px; +} + +div.inline-tab-panel > ul.tab-content { + padding-left: 5px; padding-right: 5px; border-color: #DDD; + border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; + border-width: 1px; border-bottom-right-radius: 8px; + border-bottom-left-radius: 8px; border-style: solid solid outset; +} + +div.inline-tab-panel > ul.tab-content > div.tab-pane { + min-height: 300px; padding: 0px !important; +} + +div.inline-tab-panel > ul.tab-content > div.tab-pane > *:first-child { + margin-top: 5px; +} + +div.inline-tab-panel > ul.tab-content > div.tab-pane > *:last-child { + margin-bottom: 5px; +} diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js index 59edf8399..3fbd0c560 100644 --- a/web/pgadmin/static/js/backform.pgadmin.js +++ b/web/pgadmin/static/js/backform.pgadmin.js @@ -107,8 +107,7 @@ return m[idx > len ? 0 : idx]; } - alert ("Developer: did you forget to put/implement the control type - '" + type + "' in mapper"); - return null; + return type; } @@ -379,6 +378,7 @@ tabPanelClassName: function() { return Backform.tabClassName; }, + tabIndex: 0, initialize: function(opts) { var s = opts.schema; if (s && _.isArray(s)) { @@ -415,12 +415,12 @@ controls = this.controls, tmpls = this.template, self = this, - idx=1; + idx=(this.tabIndex * 100); this.$el .empty() .attr('role', 'tabpanel') - .attr('class', this.tabPanelClassName()); + .attr('class', _.result(this, 'tabPanelClassName')); m.panelEl = this.$el; var tabHead = $('
') @@ -445,6 +445,7 @@ controls.push(cntr); }); idx++; + tabHead.find('a[data-toggle="tab"]').off( 'shown.bs.tab' ).off('hidden.bs.tab').on( @@ -475,23 +476,40 @@ }); var Fieldset = Backform.Fieldset = Backform.Dialog.extend({ + className: function() { + return 'set-group col-xs-12'; + }, + tabPanelClassName: function() { + return Backform.tabClassName; + }, + fieldsetClass: Backform.setGroupClassName, + legendClass: 'badge', + contentClass: Backform.setGroupContentClassName + ' collapse in', template: { 'header': _.template([ - '