Button bar styling:

- Left justify the top button bar and match the style of the query tool
- Allow buttons to have tooltips and optional labels

web/pgadmin/browser/templates/browser/js/node.js

@@ -605,9 +605,8 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
               tmpl = _.template([
                 '<button type="<%= type %>" ',
                 'class="btn <%=extraClasses.join(\' \')%>"',
-                '<% if (disabled) { %> disabled="disabled"<% } %> >',
+                '<% if (disabled) { %> disabled="disabled"<% } %> title="<%-tooltip%>">',
-                '<i class="<%= icon %>"></i>&nbsp;',
+                '<span class="<%= icon %>"></span><% if (label != "") { %>&nbsp;<%-label%><% } %></button>'
-                '<%-label%></button>'
                 ].join(' '));
             if (location == "header"){
                 btnGroup.appendTo(that.header);
@@ -679,8 +678,9 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
 
             var buttons = [];
             buttons.push({
-              label: '{{ _("Edit") }}', type: 'edit',
+              label: '', type: 'edit',
-              extraClasses: ['btn-primary'],
+              tooltip: '{{ _("Edit") }}',
+              extraClasses: ['btn-default'],
               icon: 'fa fa-lg fa-pencil-square-o',
               disabled: false,
               register: function(btn) {
@@ -757,6 +757,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
             // Create proper buttons
             createButtons([{
               label: '{{ _("Save") }}', type: 'save',
+              tooltip: '{{ _("Save this object") }}',
               extraClasses: ['btn-primary'],
               icon: 'fa fa-lg fa-save',
               disabled: true,
@@ -787,6 +788,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
               }
             },{
               label: '{{ _('Cancel') }}', type: 'cancel',
+              tooltip: '{{ _("Cancel changes this object") }}',
               extraClasses: ['btn-danger'],
               icon: 'fa fa-lg fa-close',
               disabled: false,
@@ -799,6 +801,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
               }
             },{
               label: '{{ _('Reset') }}', type: 'reset',
+              tooltip: '{{ _("Reset the fields on this dialogue") }}',
               extraClasses: ['btn-warning'],
               icon: 'fa fa-lg fa-recycle',
               disabled: true,

web/pgadmin/static/css/overrides.css

@@ -364,22 +364,26 @@ iframe {
 }
 
 .pg-prop-btn-group {
-    text-align: right;
+  background-color: #D2D2D2;
-    background-color: #D2D2D2;
+  border: 2px solid #A9A9A9;
-    border: 2px solid #A9A9A9;
+  left: 0px;
-    left: 0px;
+  right: 0px;
-    right: 0px;
+  padding: 2px;
+}
+
+.pg-prop-btn-group button {
+  padding: 5px;
 }
 
 .pg-prop-btn-group-below {
+    text-align: right;
     border-color: #A9A9A9;
     border-width: 2px 1px 0px;
     border-style: inset;
     border-left-style: solid
 }
 
-.pg-prop-btn-group button {
+.pg-prop-btn-group-below .pg-prop-btn-group button {
-  padding: 5px;
   margin: 2px 5px;
 }
 
@@ -387,6 +391,15 @@ iframe {
     margin-left: 0px;
 }
 
+.pg-prop-btn-group-below button:not(:first-child):not(:last-child) {
+    margin-left: 2px;
+    margin-right: 5px;
+}
+
+.btn-primary{
+  margin: 2px 13px !important;
+}
+
 .pg-prop-content {
     position: absolute;
     overflow: auto;
@@ -913,10 +926,6 @@ ul.nav.nav-tabs {
   border-right: 0px;
 }
 
-.btn-primary{
-  margin: 2px 13px !important;
-}
-
 .pgadmin-control-group span.wcTabIcon {
   padding-left: 20px;
 }