Improvement in the look and feel of the whole application

Changed the SCSS/CSS for the below third party libraries to adopt the
new look 'n' feel:
- wcDocker
- Alertify dialogs, and notifications
- AciTree
- Bootstrap Navbar
- Bootstrap Tabs
- Bootstrap Drop-Down menu
- Backgrid
- Select2

Adopated the new the look 'n' feel for the dialogs, wizard, properties,
tab panels, tabs, fieldset, subnode control, spinner control, HTML
table, and other form controls.

- Font is changed to Roboto
- Using SCSS variables to define the look 'n' feel
- Designer background images for the Login, and Forget password pages in
  'web' mode
- Improved the look 'n' feel for the key selection in the preferences
  dialog
- Table classes consistency changes across the application
- File Open and Save dialog list view changes

Author(s): Aditya Toshniwal & Khushboo Vashi

web/pgadmin/browser/server_groups/servers/databases/schemas/fts_configurations/static/js/fts_configuration.js

@@ -203,7 +203,7 @@ define('pgadmin.node.fts_configuration', [
           '   </div>',
           '   <div class="col-6" header="token"></div>',
           '   <div class="col-2">',
-          '     <button class="btn btn-sm-sq btn-default add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> ></button>',
+          '     <button class="btn btn-sm-sq btn-secondary add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> ></button>',
           '   </div>',
           '  </div>',
           ' </div>',

web/pgadmin/browser/server_groups/servers/databases/schemas/functions/__init__.py

@@ -104,9 +104,7 @@ class FunctionModule(SchemaChildModule):
         """
         Returns a snippet of css
         """
-        snippets = [
-            render_template("function/css/function.css")
-        ]
+        snippets = []
         snippets.extend(
             super(SchemaChildModule, self).csssnippets
         )

web/pgadmin/browser/server_groups/servers/databases/schemas/functions/templates/trigger_function/css/function.css

@@ -1,3 +0,0 @@
-.functions_code {
-    height: 130px !important;
-}

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/exclusion_constraint/static/js/exclusion_constraint.js

@@ -389,15 +389,12 @@ define('pgadmin.node.exclusion_constraint', [
       generateHeader: function(data) {
         var header = [
           '<div class="subnode-header-form">',
-          ' <div class="container-fluid">',
+          ' <div>',
           '  <div class="row">',
           '   <div class="col-4">',
           '    <label class="control-label"><%-column_label%></label>',
           '   </div>',
           '   <div class="col-4" header="column"></div>',
-          '   <div class="col-4">',
-          '     <button class="btn btn-sm-sq btn-default add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> ></button>',
-          '   </div>',
           '  </div>',
           ' </div>',
           '</div>'].join('\n');
@@ -441,11 +438,15 @@ define('pgadmin.node.exclusion_constraint', [
 
       showGridControl: function(data) {
         var self = this,
-          titleTmpl = _.template('<div class=\'subnode-header\'></div>'),
+          titleTmpl = _.template([
+            '<div class="subnode-header">',
+            '  <label class="control-label pg-el-sm-10"><%-label%></label>',
+            '  <button class="btn btn-sm-sq btn-secondary add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + _('Add new row') + '"></button>',
+            '</div>'].join('\n')),
           $gridBody =
           $('<div class=\'pgadmin-control-group backgrid form-group col-12 object subnode\'></div>').append(
             // Append titleTmpl only if create/edit mode
-            data.mode !== 'properties' ? titleTmpl({label: data.label}) : ''
+            data.mode !== 'properties' ? titleTmpl({label: data.label, canAdd: data.canAdd}) : ''
           );
 
         $gridBody.append(self.generateHeader(data));
@@ -469,7 +470,7 @@ define('pgadmin.node.exclusion_constraint', [
         var grid = self.grid = new Backgrid.Grid({
           columns: gridColumns,
           collection: self.collection,
-          className: 'backgrid table-bordered',
+          className: 'backgrid table-bordered table-noouter-border table-hover',
         });
         self.$grid = grid.render().$el;
 
@@ -489,6 +490,7 @@ define('pgadmin.node.exclusion_constraint', [
           $gridBody.find('.subnode-header-form').removeClass('subnode-header-form');
 
         // Render node grid
+        self.$gridBody = $gridBody;
         return $gridBody;
       },
 
@@ -522,7 +524,7 @@ define('pgadmin.node.exclusion_constraint', [
           inSelected = true;
         }
 
-        self.$header.find('button.add').prop('disabled', inSelected);
+        self.$gridBody.find('button.add').prop('disabled', inSelected);
       },
 
       addColumns: function(ev) {

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/static/js/foreign_key.js

@@ -302,15 +302,12 @@ define('pgadmin.node.foreign_key', [
       generateHeader: function(data) {
         var header = [
           '<div class="subnode-header-form">',
-          ' <div class="container-fluid">',
+          ' <div>',
           '  <div class="row">',
           '   <div class="col-md-4">',
           '    <label class="control-label"><%-column_label%></label>',
           '   </div>',
           '   <div class="col-md-6" header="local_column"></div>',
-          '   <div class="col-md-2">',
-          '     <button class="btn btn-sm-sq btn-default add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> ></button>',
-          '   </div>',
           '  </div>',
           '  <div class="row">',
           '   <div class="col-md-4">',
@@ -370,13 +367,14 @@ define('pgadmin.node.foreign_key', [
 
         var self = this,
           titleTmpl = _.template([
-            '<div class=\'subnode-header\'>',
-            '<label class=\'control-label\'><%-label%></label>',
+            '<div class="subnode-header">',
+            '  <label class="control-label pg-el-sm-10"><%-label%></label>',
+            '  <button class="btn btn-sm-sq btn-secondary add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + _('Add new row') + '"></button>',
             '</div>'].join('\n')),
           $gridBody =
           $('<div class=\'pgadmin-control-group backgrid form-group col-12 object subnode\'></div>').append(
             // Append titleTmpl only if create/edit mode
-            data.mode !== 'properties' ? titleTmpl({label: data.label}) : ''
+            data.mode !== 'properties' ? titleTmpl({label: data.label, canAdd: data.canAdd}) : ''
           );
 
         // Clean up existing grid if any (in case of re-render)
@@ -401,7 +399,7 @@ define('pgadmin.node.foreign_key', [
         var grid = self.grid = new Backgrid.Grid({
           columns: gridSchema.columns,
           collection: self.collection,
-          className: 'backgrid table-bordered',
+          className: 'backgrid table-bordered table-noouter-border table-hover',
         });
         self.$grid = grid.render().$el;
 
@@ -430,6 +428,7 @@ define('pgadmin.node.foreign_key', [
           $gridBody.find('.subnode-header-form').removeClass('subnode-header-form');
 
         // Render node grid
+        self.$gridBody = $gridBody;
         return $gridBody;
       },
 
@@ -463,7 +462,7 @@ define('pgadmin.node.foreign_key', [
           inSelected = true;
         }
 
-        self.$header.find('button.add').prop('disabled', inSelected);
+        self.$gridBody.find('button.add').prop('disabled', inSelected);
       },
 
       addColumns: function(ev) {

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/static/css/rule.css

@@ -0,0 +1,7 @@
+.sql_field_height_140 {
+  height: 140px;
+}
+
+.sql_field_height_280 {
+  height: 280px;
+}

web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/templates/rules/css/rule.css

@@ -7,11 +7,3 @@
   vertical-align: middle;
   height: 1.3em;
 }
-
-.sql_field_height_140 {
-  height: 140px;
-}
-
-.sql_field_height_280 {
-  height: 280px;
-}

web/pgadmin/browser/server_groups/servers/databases/schemas/views/static/css/view.css

@@ -0,0 +1,7 @@
+.sql_field_height_140 {
+  height: 140px;
+}
+
+.sql_field_width_full {
+  width: 100%;
+}

web/pgadmin/browser/server_groups/servers/databases/schemas/views/templates/mview/css/mview.css

@@ -7,7 +7,3 @@
   vertical-align: middle;
   height: 1.3em;
 }
-
-.sql_field_width_full {
-  width: 100%;
-}

web/pgadmin/browser/server_groups/servers/databases/schemas/views/templates/view/css/view.css

@@ -6,7 +6,3 @@
   vertical-align: middle;
   height: 1.3em;
 }
-
-.sql_field_height_140 {
-  height: 140px;
-}

web/pgadmin/browser/server_groups/servers/pgagent/schedules/static/js/pga_schedule.js

@@ -345,8 +345,7 @@ define('pgadmin.node.pga_schedule', [
               );
 
               this.$el.prepend(
-                '<div class="set-group c ' +
-                  Backform.helpMessageClassName + '">' +
+                '<div class="set-group">' +
                   gettext('Schedules are specified using a <b>cron-style</b> format.<br/><ul><li>For each selected time or date element, the schedule will execute.<br/>e.g. To execute at 5 minutes past every hour, simply select ‘05’ in the Minutes list box.<br/></li><li>Values from more than one field may be specified in order to further control the schedule.<br/>e.g. To execute at 12:05 and 14:05 every Monday and Thursday, you would click minute 05, hours 12 and 14, and weekdays Monday and Thursday.</li><li>For additional flexibility, the Month Days check list includes an extra Last Day option. This matches the last day of the month, whether it happens to be the 28th, 29th, 30th or 31st.</li></ul>') +
                   '</div>'
               );

web/pgadmin/browser/server_groups/servers/pgagent/static/css/pga_job.css

@@ -0,0 +1,3 @@
+div[role=tabpanel] > .pgadmin-control-group.form-group.c.jscexceptions {
+  min-height: 400px;
+}

web/pgadmin/browser/server_groups/servers/pgagent/templates/pga_job/css/pga_job.css

@@ -15,16 +15,3 @@
   vertical-align: middle;
   height: 1.3em;
 }
-
-.pg-el-container[el=sm] .pga-round-border {
-  border: 1px solid darkgray;
-  border-radius: 12px;
-}
-
-.pg-el-container[el=sm] .pga-round-border {
-  margin: 5px;
-}
-
-div[role=tabpanel] > .pgadmin-control-group.form-group.c.jscexceptions {
-  min-height: 400px;
-}

web/pgadmin/browser/server_groups/servers/static/css/servers.css

@@ -6,3 +6,7 @@
   vertical-align: middle;
   height: 1.3em;
 }
+
+.change_password {
+  padding-left: 7px;
+}

web/pgadmin/browser/server_groups/servers/static/js/server.js

@@ -422,11 +422,11 @@ define('pgadmin.node.server', [
                 setup:function() {
                   return {
                     buttons: [{
-                      text: gettext('Ok'), key: 13, className: 'btn btn-primary',
-                      attrs: {name:'submit'},
-                    },{
                       text: gettext('Cancel'), key: 27,
-                      className: 'btn btn-danger', attrs: {name: 'cancel'},
+                      className: 'btn btn-secondary fa fa-times pg-alertify-button', attrs: {name: 'cancel'},
+                    },{
+                      text: gettext('OK'), key: 13, className: 'btn btn-primary fa fa-check pg-alertify-button',
+                      attrs: {name:'submit'},
                     }],
                     // Set options for dialog
                     options: {
@@ -451,7 +451,7 @@ define('pgadmin.node.server', [
                 prepare: function() {
                   var self = this;
                   // Disable Ok button until user provides input
-                  this.__internal.buttons[0].element.disabled = true;
+                  this.__internal.buttons[1].element.disabled = true;
 
                   var $container = $('<div class=\'change_password\'></div>'),
                     newpasswordmodel = new newPasswordModel(
@@ -479,9 +479,9 @@ define('pgadmin.node.server', [
                       (_.isUndefined(password) || _.isNull(password) || password == '')) ||
                         _.isUndefined(newPassword) || _.isNull(newPassword) || newPassword == '' ||
                         _.isUndefined(confirmPassword) || _.isNull(confirmPassword) || confirmPassword == '') {
-                      self.__internal.buttons[0].element.disabled = true;
+                      self.__internal.buttons[1].element.disabled = true;
                     } else if (newPassword != confirmPassword) {
-                      self.__internal.buttons[0].element.disabled = true;
+                      self.__internal.buttons[1].element.disabled = true;
 
                       this.errorTimeout && clearTimeout(this.errorTimeout);
                       this.errorTimeout = setTimeout(function() {
@@ -489,7 +489,7 @@ define('pgadmin.node.server', [
                       } ,400);
                     }else {
                       that.errorModel.clear();
-                      self.__internal.buttons[0].element.disabled = false;
+                      self.__internal.buttons[1].element.disabled = false;
                     }
                   });
                 },
@@ -1191,10 +1191,10 @@ define('pgadmin.node.server', [
             setup:function() {
               return {
                 buttons:[{
-                  text: gettext('OK'), key: 13, className: 'btn btn-primary',
-                },{
-                  text: gettext('Cancel'), className: 'btn btn-danger',
+                  text: gettext('Cancel'), className: 'btn btn-secondary fa fa-times pg-alertify-button',
                   key: 27,
+                },{
+                  text: gettext('OK'), key: 13, className: 'btn btn-primary fa fa-check pg-alertify-button',
                 }],
                 focus: {element: '#password', select: true},
                 options: {

web/pgadmin/browser/server_groups/servers/static/js/variable.js

@@ -328,7 +328,7 @@ define([
             titleTmpl = _.template([
               '<div class=\'subnode-header\'>',
               '<label class=\'control-label\'><%-label%></label>',
-              '<button class=\'btn btn-sm-sq btn-default add fa fa-plus\' title=\'' + _('Add new row') + '\' <%=canAdd ? \'\' : \'disabled="disabled"\'%>></button>',
+              '<button class=\'btn btn-sm-sq btn-secondary add fa fa-plus\' title=\'' + _('Add new row') + '\' <%=canAdd ? \'\' : \'disabled="disabled"\'%>></button>',
               '</div>'].join('\n')),
             $gridBody =
             $('<div class=\'pgadmin-control-group backgrid form-group col-12 object subnode\'></div>').append(
@@ -385,7 +385,7 @@ define([
             columns: gridSchema.columns,
             collection: self.collection,
             row: VariableRow,
-            className: 'backgrid table-bordered',
+            className: 'backgrid table presentation table-bordered table-noouter-border table-hover',
           });
           self.$grid = grid.render().$el;
 

web/pgadmin/browser/server_groups/servers/tablespaces/static/js/tablespace.js

@@ -180,13 +180,14 @@ define('pgadmin.node.tablespace', [
                 setup:function() {
                   return {
                     buttons: [{
-                      text: '', key: 112, className: 'btn btn-default pull-left fa fa-lg fa-question',
+                      text: '', key: 112,
+                      className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
                       attrs:{name:'dialog_help', type:'button', label: gettext('Users'),
                         url: url_for('help.static', {'filename': 'move_objects.html'})},
                     },{
-                      text: gettext('OK'), key: 13, className: 'btn btn-primary fa fa-lg fa-save pg-alertify-button',
+                      text: gettext('Cancel'), key: 27, className: 'btn btn-secondary fa fa-lg fa-times pg-alertify-button',
                     },{
-                      text: gettext('Cancel'), key: 27, className: 'btn btn-danger fa fa-lg fa-times pg-alertify-button',
+                      text: gettext('OK'), key: 13, className: 'btn btn-primary fa fa-lg fa-save pg-alertify-button',
                     }],
                     // Set options for dialog
                     options: {
@@ -214,7 +215,7 @@ define('pgadmin.node.tablespace', [
                   var self = this,
                     $container = $('<div class=\'move_objects\'></div>');
                   //Disbale Okay button
-                  this.__internal.buttons[1].element.disabled = true;
+                  this.__internal.buttons[2].element.disabled = true;
                   // Find current/selected node
                   var t = pgBrowser.tree,
                     i = t.selected(),
@@ -248,9 +249,9 @@ define('pgadmin.node.tablespace', [
                   this.view.model.on('change', function() {
                     if (!_.isUndefined(this.get('tblspc')) && this.get('tblspc') !== '') {
                       this.errorModel.clear();
-                      self.__internal.buttons[1].element.disabled = false;
+                      self.__internal.buttons[2].element.disabled = false;
                     } else {
-                      self.__internal.buttons[1].element.disabled = true;
+                      self.__internal.buttons[2].element.disabled = true;
                       this.errorModel.set('tblspc', gettext('Please select tablespace'));
                     }
                   });

web/pgadmin/browser/server_groups/servers/templates/css/servers.css

@@ -15,7 +15,3 @@
   vertical-align: middle;
   height: 1.3em;
 }
-
-.change_password {
-  padding-left: 7px;
-}