Further styling fixes.

web/pgadmin/browser/static/js/node.js

@@ -368,7 +368,7 @@ define('pgadmin.browser.node', [
           if (formType == 'fieldset') {
             // It is used to show, edit, create the object in the
             // properties tab.
-            view = new Backform.Fieldset({
+            view = new Backform.Accordian({
               el: el,
               model: newModel,
               schema: fields,

web/pgadmin/misc/file_manager/__init__.py

@@ -221,14 +221,13 @@ def file_manager_js():
         mimetype="application/javascript")
 
 
-@blueprint.route("/en.js")
+@blueprint.route("/en.json")
 @login_required
 def language():
     """render the required javascript"""
     return Response(response=render_template(
-        "file_manager/js/languages/en.js", _=gettext),
+        "file_manager/js/languages/en.json", _=gettext),
-        status=200,
+        status=200)
-        mimetype="application/javascript")
 
 
 @blueprint.route("/file_manager_config.js")

web/pgadmin/misc/file_manager/static/js/utility.js

@@ -36,7 +36,7 @@ define([
   };
 
   /* Common function to load:
-   * en.js language file
+   * en.json language file
    * file_manager_config.js config file
    * return transaction id
    */
@@ -585,7 +585,7 @@ define([
 
           result += '</ul>';
         } else {
-          result += '<table id="contents" class="table table-bordered table-noouter-border table-bottom-border table-hover tablesorter">';
+          result += '<table id="contents" class="table table-bordered table-noouter-border table-bottom-border table-hover tablesorter file_listing_table">';
           result += '<thead><tr><th>';
           result += '<span>' + lg.name + '</span></th>';
           result += '<th><span>' + lg.size + '</span></th><th>';
@@ -1096,8 +1096,8 @@ define([
        */
 
       var lg = [],
-        enjs = url_for('file_manager.index') + 'en.js',
+        enjson = url_for('file_manager.index') + 'en.json',
-        lgf = loadData(enjs);
+        lgf = loadData(enjson);
 
       if (lgf.readyState == 4) {
         this.lg = lg = JSON.parse(lgf.responseText);

web/pgadmin/misc/file_manager/static/scss/_file_manager.scss

@@ -5,6 +5,58 @@
 
 .file_listing {
   min-width: 100%;
+
+  .file_listing_table {
+    height: 100%;
+    display: block;
+    padding: 0;
+    overflow-y: hidden !important;
+  }
+
+  .file_listing_table thead {
+    display: table;
+    width: 100%;
+  }
+
+  .file_listing_table thead tr {
+    position: relative;
+    display: block;
+    width: 100%;
+    border-bottom: $panel-border;
+  }
+
+  .file_listing_table tbody {
+    display: block;
+    overflow: auto;
+    width: 100%;
+    /* 100% minus thead height */
+    height: calc(100% - 30px);
+  }
+
+  .file_listing_table tbody tr {
+    max-width: 100%;
+    width: 100%;
+  }
+
+  .file_listing_table tbody tr td:nth-child(1),
+  .file_listing_table thead tr th:nth-child(1) {
+    width: 100%;
+    min-width: 100%;
+  }
+
+  .file_listing_table tbody tr td:nth-child(2),
+  .file_listing_table thead tr th:nth-child(2) {
+    width: 100px;
+    min-width: 100px;
+    max-width: 100px;
+  }
+
+  .file_listing_table tbody tr td:nth-child(3),
+  .file_listing_table thead tr th:nth-child(3) {
+    width: 200px;
+    min-width: 200px;
+    max-width: 200px;
+  }
 }
 
 .file_listing #contents.grid li:hover,

web/pgadmin/misc/file_manager/templates/file_manager/js/languages/en.json

@@ -1,12 +1,3 @@
-/////////////////////////////////////////////////////////////
-//
-// pgAdmin 4 - PostgreSQL Tools
-//
-// Copyright (C) 2013 - 2019, The pgAdmin Development Team
-// This software is released under the PostgreSQL Licence
-//
-//////////////////////////////////////////////////////////////
-
 {
     "LANGUAGE_FILE_NOT_FOUND": "Language file not found.",
     "upload_success": "File uploaded successfully.",

web/pgadmin/static/js/backform.pgadmin.js

@@ -38,6 +38,8 @@ define([
     setGroupClassName: 'set-group pg-el-12',
     tabClassName: 'backform-tab pg-el-12',
     setGroupContentClassName: 'fieldset-content pg-el-12',
+    accordianGroupClassName: 'accordian-group pg-el-12',
+    accordianContentClassName: 'accordian-content pg-el-12',
     hiddenClassName: 'd-none',
   });
 
@@ -429,12 +431,14 @@ define([
         offColor: 'primary',
         size: 'small',
       },
+      controlLabelClassName: Backform.controlLabelClassName,
+      controlsClassName: Backform.controlsClassName,
       extraClasses: [],
       helpMessage: null,
     },
     template: _.template([
-      '<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>',
+      '<label class="<%=controlLabelClassName%>"><%=label%></label>',
-      '<div class="<%=Backform.controlsClassName%>">',
+      '<div class="<%=controlsClassName%>">',
       '  <div class="checkbox">',
       '    <label>',
       '      <input type="checkbox" class="<%=extraClasses.join(\' \')%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
@@ -636,6 +640,80 @@ define([
     },
   });
 
+  Backform.Accordian = Backform.Dialog.extend({
+    className: function() {
+      return 'set-group pg-el-12';
+    },
+    tabPanelClassName: function() {
+      return Backform.tabClassName;
+    },
+    legendClass: 'badge',
+    contentClass: Backform.accordianContentClassName + ' collapse show',
+    template: {
+      'header': _.template([
+        '<div class="<%=Backform.accordianGroupClassName%>" <%=disabled ? "disabled" : ""%>>',
+        ' <% if (legend != false) { %>',
+        '  <div class="<%=legendClass%>" <%=collapse ? "data-toggle=\'collapse\'" : ""%> data-target="#<%=cId%>"><%=collapse ? "<span class=\'caret\'></span>" : "" %><%=label%></legend>',
+        ' <% } %>',
+        '</div>',
+      ].join('\n')),
+      'content': _.template(
+        '  <div id="<%= cId %>" class="<%=contentClass%>"></div>'
+      ),
+    },
+    collapse: true,
+    render: function() {
+      this.cleanup();
+
+      var m = this.model,
+        $el = this.$el,
+        tmpl = this.template,
+        controls = this.controls,
+        data = {
+          'className': _.result(this, 'className'),
+          'legendClass': _.result(this, 'legendClass'),
+          'contentClass': _.result(this, 'contentClass'),
+          'collapse': _.result(this, 'collapse'),
+        },
+        idx = (this.tabIndex * 100),
+        evalF = function(f, d, m) {
+          return (_.isFunction(f) ? !!f.apply(d, [m]) : !!f);
+        };
+
+      this.$el.empty();
+
+      _.each(this.schema, function(o) {
+        idx++;
+        if (!o.version_compatible || !evalF(o.visible, o, m)) {
+          return;
+        }
+
+        if (!o.fields)
+          return;
+
+        var d = _.extend({}, data, o),
+          h = $((tmpl['header'])(d)).appendTo($el),
+          el = $((tmpl['content'])(d)).appendTo(h);
+
+        o.fields.each(function(f) {
+          var cntr = new(f.get('control'))({
+            field: f,
+            model: m,
+            tabIndex: idx,
+          });
+          el.append(cntr.render().$el);
+          controls.push(cntr);
+        });
+      });
+
+      return this;
+    },
+    getValueFromDOM: function() {
+      return '';
+    },
+    events: {},
+  });
+
   Backform.Fieldset = Backform.Dialog.extend({
     className: function() {
       return 'set-group pg-el-12';
@@ -650,7 +728,7 @@ define([
       'header': _.template([
         '<fieldset class="<%=fieldsetClass%>" <%=disabled ? "disabled" : ""%>>',
         ' <% if (legend != false) { %>',
-        '  <div><legend class="<%=legendClass%>" <%=collapse ? "data-toggle=\'collapse\'" : ""%> data-target="#<%=cId%>"><%=collapse ? "<span class=\'caret\'></span>" : "" %><%=label%></legend></div>',
+        '  <legend class="<%=legendClass%>" <%=collapse ? "data-toggle=\'collapse\'" : ""%> data-target="#<%=cId%>"><%=collapse ? "<span class=\'caret\'></span>" : "" %><%=label%></legend>',
         ' <% } %>',
         '</fieldset>',
       ].join('\n')),

web/pgadmin/static/scss/_backform.overrides.scss

@@ -48,16 +48,11 @@
 }
 
 .backform_control_notes {
-	background-color: $color-gray-lighter;
+	border: $panel-border;
-	border: 1px solid $color-gray-light;
+	border-radius: $border-radius;
-	border-radius: 3px;
-	color: $color-gray-dark;
-	display: block;
 	font-family: $font-family-editor;
-	font-size: 12px;
+	font-size: 0.8rem;
-	line-height: 1.42857;
 	margin: 0 0 10px;
-	overflow: auto;
 	padding: 5px 10px;
 	word-wrap: break-word;
 }
@@ -69,6 +64,6 @@ div.backform_control_notes label.control-label {
   max-width: 90% !important;
 }
 
-.set-group {
+.set-group, .accordian-group {
   margin-bottom: $form-group-margin-bottom;
-}
+}

web/pgadmin/static/scss/_backgrid.overrides.scss

@@ -268,13 +268,18 @@ table.backgrid {
 }
 
 .backgrid tbody {
-  & td.editor {
+  & td.edit-cell.editor {
     background-color: $color-gray-light !important;
     border-bottom-color: $color-gray-light !important;
     outline: none !important;
   }
 
+  & td.editor {
+    background-color: $color-bg-theme !important;
+  }
+
   tr.editor-row  {
+    background-color: $color-gray-light !important;
     & > td {
       padding: 15px !important;
       background-color: $color-gray-light !important;

web/pgadmin/static/scss/_codemirror.overrides.scss

@@ -127,18 +127,27 @@
   list-style: none;
 
   margin: 0;
-  padding: 2px;
+  padding: 0px;
 
-  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  -webkit-box-shadow: $dropdown-box-shadow;
-  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  -moz-box-shadow: $dropdown-box-shadow;
-  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
+  box-shadow: $dropdown-box-shadow;
-  border-radius: 3px;
+  border-radius: $border-radius;
-  border: 1px solid $border-color;
+  border: $panel-border;
 
-  background: $color-bg-theme;
+  background: $sql-hint-bg;
   font-size: 90%;
   font-family: $font-family-editor;
 
   max-height: 20em;
   overflow-y: auto;
-}
+
+  & li {
+    padding: 0.125rem;
+    border-radius: 0rem;
+    &.CodeMirror-hint-active {
+      background: $sql-hint-active-bg;
+      color: $sql-hint-active-fg;
+    }
+  }
+}

web/pgadmin/static/scss/_pgadmin.style.scss

@@ -363,6 +363,10 @@
   padding: 5px 10px;
 }
 
+.obj_properties .accordian-group > .accordian-content {
+  padding: 5px 10px;
+}
+
 .obj_properties .badge {
   display: block;
   text-align: left;
@@ -409,15 +413,21 @@
 .obj_properties .set-group {
   margin: 0.5rem 0rem;
   padding: 0rem;
+}
+
+.obj_properties .accordian-group {
+  margin: 0.5rem 0rem;
+  padding: 0rem;
   border: $panel-border;
   border-radius: $card-border-radius;
-  background-color: $color-bg;
+  background-color: $color-bg-theme;
 }
 
 fieldset.inline-fieldset {
     padding: 10px;
     border-radius: $card-border-radius;
     background: $color-gray-light;
+    border: $panel-border;
     & legend {
       font-size: 0.875rem;
       font-weight: bold;

web/pgadmin/static/scss/resources/_default.variables.scss

@@ -174,6 +174,9 @@ $sql-history-success-bg: $color-primary-light;
 $sql-history-success-fg: $color-primary;
 $sql-history-error-bg: $color-danger-lighter;
 $sql-history-error-fg: $color-danger;
+$sql-hint-bg: $color-bg-theme;
+$sql-hint-active-bg: $color-primary;
+$sql-hint-active-fg: $white;
 
 $negative-bg: $color-gray-light;
 $dialog-box-shadow: $box-shadow;

web/pgadmin/templates/security/change_password.html

@@ -8,7 +8,7 @@
         <div class="col-md-4">
             <div class="panel-header h4"><i class="app-icon pg-icon-blue"></i> {{ _('%(appname)s', appname=config.APP_NAME) }}</div>
             <div class="panel-body">
-                <div class="d-block text-color pb-3 h5">{{ _('Password Change', appname=config.APP_NAME) }}</div>
+                <div class="d-block text-color pb-3 h5">{{ _('Password Change') }}</div>
                 {% if config.SERVER_MODE %}
                     <form action="{{ url_for('browser.change_password') }}" method="POST" name="change_password_form">
                         {{ change_password_form.hidden_tag() }}

web/pgadmin/tools/backup/static/js/backup.js

@@ -45,8 +45,8 @@ define([
 
   Backform.CustomSwitchControl = Backform.SwitchControl.extend({
     template: _.template([
-      '<label class="<%=Backform.controlLabelClassName%> custom_switch_label_class"><%=label%></label>',
+      '<label class="<%=controlLabelClassName%> custom_switch_label_class"><%=label%></label>',
-      '<div class="<%=Backform.controlsClassName%> custom_switch_control_class">',
+      '<div class="<%=controlsClassName%> custom_switch_control_class">',
       '  <div class="checkbox">',
       '    <label>',
       '      <input type="checkbox" class="<%=extraClasses.join(\' \')%>"',
@@ -93,6 +93,7 @@ define([
       type: 'nested',
       control: 'fieldset',
       label: gettext('Miscellaneous'),
+      contentClass: 'row',
       schema: [{
         id: 'verbose',
         label: gettext('Verbose messages'),
@@ -105,6 +106,8 @@ define([
         control: Backform.CustomSwitchControl,
         disabled: false,
         group: gettext('Miscellaneous'),
+        controlLabelClassName: 'control-label pg-el-sm-6 pg-el-12',
+        controlsClassName: 'pgadmin-controls pg-el-sm-6 pg-el-12',
       }],
     }, {
       id: 'globals_note',

web/pgadmin/tools/debugger/static/js/debugger_ui.js

@@ -949,7 +949,7 @@ define([
             this.grid.listenTo(this.debuggerInputArgsColl, 'backgrid:error',
               (function(obj) {
                 return function() {
-                  obj.__internal.buttons[0].element.disabled = true;
+                  obj.__internal.buttons[1].element.disabled = true;
                 };
               })(this)
             );

web/pgadmin/tools/sqleditor/static/js/sqleditor.js

@@ -3435,6 +3435,9 @@ define('tools.querytool', [
       disable_tool_buttons: function(disabled) {
         $('#btn-clear').prop('disabled', disabled);
         $('#btn-query-dropdown').prop('disabled', disabled);
+        $('#btn-explain').prop('disabled', disabled);
+        $('#btn-explain-analyze').prop('disabled', disabled);
+        $('#btn-explain-options-dropdown').prop('disabled', disabled);
         $('#btn-edit-dropdown').prop('disabled', disabled);
         $('#btn-edit').prop('disabled', disabled);
         $('#btn-load-file').prop('disabled', disabled);