Icon and toolbar cleanup/consistency.

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'];
+      'isPrivate', 'url', 'icon'];
     _.extend(this, _.pick(options, defaults));
   }
 
@@ -20,6 +20,7 @@ function(_, pgAdmin) {
     isClosable: true,
     isPrivate: false,
     url: '',
+    icon: '',
     panel: null,
     frame: null,
     load: function(docker) {
@@ -31,8 +32,12 @@ function(_, pgAdmin) {
           onCreate: function(myPanel) {
             $(myPanel).data('pgAdminName', that.name);
             myPanel.initSize(that.width, that.height);
+
             if (myPanel.showTitle == false)
               myPanel.title(false);
+
+            myPanel.icon(that.icon)
+
             myPanel.closeable(!!that.isCloseable);
 
             var $frameArea = $('<div style="width:100%;height:100%;position:relative;display:table">');

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', 'events'];
+      'isPrivate', 'content', 'icon', 'events'];
     _.extend(this, _.pick(options, defaults));
   }
 
@@ -20,6 +20,7 @@ function(_, pgAdmin) {
     isCloseable: true,
     isPrivate: false,
     content: '',
+    icon: '',
     panel: null,
     load: function(docker, title) {
       var that = this;
@@ -30,10 +31,15 @@ function(_, pgAdmin) {
           onCreate: function(myPanel) {
             $(myPanel).data('pgAdminName', that.name);
             myPanel.initSize(that.width, that.height);
+
             if (!that.showTitle)
               myPanel.title(false);
-            else
+            else {
               myPanel.title(title || that.title);
+              if (that.icon != '')
+                myPanel.icon(that.icon)
+            }
+
             myPanel.closeable(!!that.isCloseable);
             myPanel.layout().addItem(
               $('<div>', {

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

@@ -64,6 +64,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
       'properties': new pgAdmin.Browser.Panel({
         name: 'properties',
         title: '{{ _('Properties') }}',
+        icon: 'fa fa-cogs',
         width: 500,
         isCloseable: false,
         isPrivate: true,
@@ -74,6 +75,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
       'statistics': new pgAdmin.Browser.Panel({
         name: 'statistics',
         title: '{{ _('Statistics') }}',
+        icon: 'fa fa-line-chart',
         width: 500,
         isCloseable: false,
         isPrivate: true,
@@ -84,6 +86,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
       'sql': new pgAdmin.Browser.Panel({
         name: 'sql',
         title: '{{ _('SQL') }}',
+        icon: 'fa fa-file-text-o',
         width: 500,
         isCloseable: false,
         isPrivate: true,
@@ -93,6 +96,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
       'dependencies': new pgAdmin.Browser.Panel({
         name: 'dependencies',
         title: '{{ _('Dependencies') }}',
+        icon: 'fa fa-hand-o-up',
         width: 500,
         isCloseable: false,
         isPrivate: true,
@@ -103,6 +107,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
       'dependents': new pgAdmin.Browser.Panel({
         name: 'dependents',
         title: '{{ _('Dependents') }}',
+        icon: 'fa fa-hand-o-down',
         width: 500,
         isCloseable: false,
         isPrivate: true,
@@ -111,6 +116,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
       })/* Add hooked-in panels by extensions */{% for panel_item in current_app.panels %}{% if not panel_item.isIframe %},'{{ panel_item.name }}' : new pgAdmin.Browser.Panel({
         name: '{{ panel_item.name }}',
         title: '{{ panel_item.title }}',
+        icon: '{{ panel_item.icon }}',
         width: {{ panel_item.width }},
         height: {{ panel_item.height }},
         showTitle: {% if panel_item.showTitle %}true{% else %}false{% endif %},
@@ -126,6 +132,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
       'dashboard': new pgAdmin.Browser.Frame({
         name: 'dashboard',
         title: '{{ _('Dashboard') }}',
+        icon: 'fa fa-tachometer',
         width: 500,
         isCloseable: false,
         isPrivate: true,
@@ -134,6 +141,7 @@ function(require, $, _, S, Bootstrap, pgAdmin, alertify, CodeMirror) {
       '{{ panel_item.name }}' : new pgAdmin.Browser.Frame({
         name: '{{ panel_item.name }}',
         title: '{{ panel_item.title }}',
+        icon: '{{ panel_item.icon }}',
         width: {{ panel_item.width }},
         height: {{ panel_item.height }},
         showTitle: {% if panel_item.showTitle %}true{% else %}false{% endif %},

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

@@ -670,12 +670,6 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, 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);
 
@@ -701,7 +695,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
               label: '', type: 'help',
               tooltip: '{{ _("Help on the SQL for this object type") }}',
               extraClasses: ['btn-default'],
-              icon: 'fa fa-lg fa-question-circle',
+              icon: 'fa fa-lg fa-info',
               disabled: (that.sqlAlterHelp == '' && that.sqlCreateHelp == '') ? true : false,
               register: function(btn) {
                 btn.click(function() {
@@ -755,11 +749,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
           // Update the panel
           iframe = $(pnlSqlHelp).data('embeddedFrame');
           pnlSqlHelp.title('SQL: ' + that.label);
-          pnlSqlHelp.icon(
+
-            _.isFunction(that['node_image']) ?
-            (that['node_image']).apply(that, [data, view.model]) :
-            (that['node_image'] || ('icon-' + that.type))
-          );
           pnlSqlHelp.focus();
           iframe.openURL(url);
         }.bind(panel),
@@ -828,9 +818,9 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, pgBrowser, Backform) {
             // Create proper buttons
             createButtons([{
               label: '', type: 'help',
-              tooltip: '{{ _("Help on the SQL for this object type") }}',
+              tooltip: '{{ _("SQL info for this object type") }}',
               extraClasses: ['btn-default'],
-              icon: 'fa fa-lg fa-question-circle',
+              icon: 'fa fa-lg fa-info',
               disabled: that.sqlCreateHelp == '' ? true : false,
               register: function(btn) {
                 btn.click(function() {

web/pgadmin/help/__init__.py

@@ -28,18 +28,21 @@ class HelpModule(PgAdminModule):
                      label=gettext('Online Help'),
                      priority=100,
                      target='_blank',
+                     icon='fa fa-question',
                      url=url_for('help.static', filename='index.html')),
 
             MenuItem(name='mnu_pgadmin_website',
                      label= gettext('pgAdmin Website'),
                      priority= 200,
                      target= '_blank',
+                     icon='fa fa-external-link',
                      url= 'http://www.pgadmin.org/' ),
 
             MenuItem(name= 'mnu_postgresql_website',
                      label= gettext('PostgreSQL Website'),
                      priority= 300,
                      target= '_blank',
+                     icon='fa fa-external-link',
                      url= 'http://www.postgresql.org/' )]}
 
     def get_panels(self):
@@ -48,21 +51,25 @@ class HelpModule(PgAdminModule):
                 name='pnl_online_help',
                 priority=100,
                 title=gettext('Online Help'),
+                icon='fa fa-question',
                 content=url_for('help.static', filename='index.html')),
 
             Panel(name='pnl_pgadmin_website',
                   priority=200,
                   title=gettext('pgAdmin Website'),
+                  icon='fa fa-external-link',
                   content='http://www.pgadmin.org/'),
 
             Panel(name='pnl_postgresql_website',
                   priority=300,
                   title=gettext('PostgreSQL Website'),
+                  icon='fa fa-external-link',
                   content='http://www.postgresql.org/'),
 
             Panel(name='pnl_sql_help',
                   priority=400,
                   isPrivate=True,
+                  icon='fa fa-info',
                   title=gettext('SQL Help'))]
 
     def register_preferences(self):

web/pgadmin/static/css/overrides.css

@@ -788,6 +788,36 @@ div.inline-tab-panel > ul.tab-content > div.tab-pane > *:last-child {
   padding: 3px 3px;
 }
 
+.pg-prop-btn-group > .btn {
+  min-width: 40px;
+}
+
+.pg-prop-btn-group > .btn-group > .btn {
+  min-width: 40px;
+}
+
+.pg-prop-btn-group > .btn-group > .btn + .dropdown-toggle {
+  min-width: 20px;
+}
+
+.pg-prop-btn-group button.dropdown-toggle {
+  padding-left: 5px !important;
+  padding-right: 5px !important;
+}
+
+.pg-prop-btn-group .dropdown-menu {
+  min-width: initial;
+}
+
+.pg-prop-btn-group .backgrid-filter.form-search {
+  position: relative;
+  width: 248px;
+  height: 30px;
+  float: right;
+  margin-top: 2px;
+  margin-right: 10px;
+}
+
 td.edit-cell.editable.sortable.renderable.editor {
   outline: 0px;
 }

web/pgadmin/static/css/wcDocker/Themes/pgadmin.css

@@ -254,6 +254,7 @@
   text-align: center;
   padding-left: 20px;
   margin-top: -5px;
+  margin-right: 5px;
 }
 
 .wcFrameTitleBar {
@@ -324,3 +325,7 @@ ul.dropdown-menu > li.menu-item > a > i.wcTabIcon {
 span.fa.fa-arrow-left, .fa-arrow-right {
   margin-top: 4px;
 }
+
+.wcMenuSubMenu {
+  visibility: hidden;
+}

web/pgadmin/tools/sqleditor/static/css/sqleditor.css

@@ -53,36 +53,6 @@
   font-size: 13px;
 }
 
-.sql-editor-btn-group {
-  background-color: #D2D2D2;
-  border: 2px solid #A9A9A9;
-  left: 0px;
-  right: 0px;
-  padding: 2px;
-}
-
-.sql-editor-btn-group button {
-  padding: 5px;
-}
-
-.sql-editor-btn-group button.dropdown-toggle {
-  padding-left: 5px !important;
-  padding-right: 5px !important;
-}
-
-.sql-editor-btn-group .dropdown-menu {
-  min-width: initial;
-}
-
-.sql-editor-btn-group .backgrid-filter.form-search {
-  position: relative;
-  width: 248px;
-  height: 30px;
-  float: right;
-  margin-top: 2px;
-  margin-right: 10px;
-}
-
 #output-panel .wcDocker {
   top: 0px;
   bottom: 0px;

web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js

@@ -166,7 +166,7 @@ define(
        * the backgrid inside this div.
        */
       template: _.template([
-        '<div id="btn-toolbar" class="sql-editor-btn-group" role="toolbar" aria-label="">',
+        '<div id="btn-toolbar" class="pg-prop-btn-group" role="toolbar" aria-label="">',
           '<div class="btn-group" role="group" aria-label="">',
             '<button id="btn-save" type="button" class="btn btn-default" title="{{ _('Save') }}" disabled>',
               '<i class="fa fa-floppy-o" aria-hidden="true"></i>',
@@ -468,7 +468,7 @@ define(
         self.$el.find('#datagrid-paginator').append(paginator.render().el);
 
         // Render the client side filter
-        self.$el.find('.sql-editor-btn-group').append(clientSideFilter.render().el);
+        self.$el.find('.pg-prop-btn-group').append(clientSideFilter.render().el);
 
         // Forcefully sorting by the first column.
         if (columns.length > 1) {