Removed the readonly mode from the properties panel for any object.

Changed UI as per feedback from Dave

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

@@ -25,11 +25,6 @@ function($, _, pgAdmin, pgBrowser, alertify) {
           applies: ['object', 'context'], callback: 'show_obj_properties',
           category: 'create', priority: 3, label: '{{ _('Server...') }}',
           data: {action: 'create'}, icon: 'wcTabIcon icon-server'
-        }, {
-          name: 'edit_server', node: 'server', module: this,
-          applies: ['object', 'context'], callback: 'show_obj_properties',
-          category: 'edit', priority: 4, label: '{{ _('Edit...') }}',
-          data: {action: 'edit'}, icon: 'fa fa-pencil-square-o'
         },{
           name: 'drop_server', node: 'server', module: this,
           applies: ['object', 'context'], callback: 'delete_obj',

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

@@ -19,11 +19,6 @@ function($, _, pgAdmin, Backbone) {
           applies: ['object', 'context'], callback: 'show_obj_properties',
           category: 'create', priority: 1, label: '{{ _('Server Group...') }}',
           data: {'action': 'create'}, icon: 'wcTabIcon icon-server-group'
-        },{
-          name: 'edit_server_group', node: 'server-group', module: this,
-          applies: ['object', 'context'], callback: 'show_obj_properties',
-          priority: 3, label: '{{ _('Edit...') }}', data: {'action': 'edit'},
-          icon: 'fa fa-pencil-square-o'
         }, {
           name: 'drop_server_group', node: 'server-group', module: this,
           applies: ['object', 'context'], callback: 'delete_obj',

web/pgadmin/browser/templates/browser/index.html

@@ -50,7 +50,7 @@ try {
             <li id="mnu_create_dropdown_obj" class="menu-item dropdown dropdown-submenu">
               <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                 <i class="fa fa-magic"></i>
-                <span>&nbsp;&nbsp;{{ _('Create') }}</span>
+                <span>{{ _('Create') }}</span>
               </a>
               <ul id="mnu_create_obj" class="dropdown-menu navbar-inverse">
                 <li class="menu-item">

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

@@ -101,7 +101,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
         name: 'show_obj_properties', node: this.type, module: this,
         applies: ['object', 'context'], callback: 'show_obj_properties',
         priority: 3, label: '{{ _("Properties...") }}',
-        data: {'action': 'properties'}, icon: 'fa fa-th-list'
+        data: {'action': 'edit'}, icon: 'fa fa-pencil-square-o'
       }]);
     },
     ///////
@@ -333,8 +333,14 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
           l = S('{{ _("Create - %%s") }}').sprintf(
               [this.label]).value();
           p = pgBrowser.docker.addPanel('node_props',
-              wcDocker.DOCK_FLOAT, undefined,
-              {w: '500', h: '400'});
+              wcDocker.DOCK_FLOAT, undefined, {
+                  w: (screen.width < 700 ?
+                      screen.width * 0.95 : screen.width * 0.5),
+                  h: (screen.height < 500 ?
+                    screen.height * 0.95 : screen.height * 0.5),
+                  x: (screen.width < 700 ? '2%' : '25%'),
+                  y: (screen.height < 500 ? '2%' : '25%')
+                });
           setTimeout(function() {
             o.showProperties(i, d, p, args.action);
           }, 10);
@@ -350,7 +356,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
             if (mode) {
               var msg = '{{ _('Are you sure wish to stop editing the properties of the %%s - "%%s"?') }}';
               if (args.action == 'edit') {
-                msg = '{{ _('Are you sure wish to reset the current changes, and reopen the panel for %%s = "%%s"?') }}';
+                msg = '{{ _('Are you sure wish to reset the current changes, and reopen the panel for %%s - "%%s"?') }}';
               }
 
               Alertify.confirm(
@@ -369,8 +375,14 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
             }
           } else {
             p = pgBrowser.docker.addPanel('node_props',
-                wcDocker.DOCK_FLOAT, undefined,
-                {w: '500', h: '400'});
+                wcDocker.DOCK_FLOAT, undefined, {
+                  w: (screen.width < 700 ?
+                      screen.width * 0.95 : screen.width * 0.5),
+                  h: (screen.height < 500 ?
+                    screen.height * 0.95 : screen.height * 0.5),
+                  x: (screen.width < 700 ? '2%' : '25%'),
+                  y: (screen.height < 500 ? '2%' : '25%')
+                });
             pgBrowser.Node.panels = pgBrowser.Node.panels || {};
             pgBrowser.Node.panels[d.id] = p;
 
@@ -510,9 +522,9 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
         j = panel.$container.find('.obj_properties').first(),
         view = j.data('obj-view'),
         content = $('<div></div>')
-          .addClass('has-pg-prop-btn-group pg-prop-content col-xs-12'),
+          .addClass('pg-prop-content col-xs-12'),
         // Template function to create the button-group
-        createButtons = function(buttons) {
+        createButtons = function(buttons, extraClasses) {
           // arguments must be non-zero length array of type
           // object, which contains following attributes:
           // label, type, extraClasses, register
@@ -521,15 +533,18 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
             // div area.
             var btnGroup =
               $('<div></div>').addClass(
-                  'pg-prop-btn-group col-xs-12'
+                  'pg-prop-btn-group'
                   ).appendTo(j),
-            // Template used for creating a button
-            tmpl = _.template([
+              // Template used for creating a button
+              tmpl = _.template([
                 '<button type="<%= type %>" ',
                 'class="btn <%=extraClasses.join(\' \')%>">',
                 '<i class="<%= icon %>"></i>&nbsp;',
                 '<%-label%></button>'
                 ].join(' '));
+            if (extraClasses) {
+              btnGroup.addClass(extraClasses);
+            }
             _.each(buttons, function(btn) {
               // Create the actual button, and append to
               // the group div
@@ -550,6 +565,10 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
         },
         // Callback to show object properties
         properties = function() {
+
+          if (!content.hasClass('has-pg-prop-btn-group'))
+            content.addClass('has-pg-prop-btn-group');
+
           // We need to release any existing view, before
           // creating new view.
           if (view) {
@@ -570,18 +589,6 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
             j.data('obj-view', view);
             // Create proper buttons
             var buttons = [];
-            if (action) {
-              buttons.push({
-                label: '{{ _("Close") }}', type: 'close',
-                extraClasses: ['btn-danger'],
-                icon: 'fa fa-lg fa-close',
-                register: function(btn) {
-                  btn.click(function() {
-                    closePanel();
-                  });
-                }
-              });
-            }
             buttons.push({
               label: '{{ _("Edit") }}', type: 'edit',
               extraClasses: ['btn-primary'],
@@ -592,7 +599,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
                 });
               }
             });
-            createButtons(buttons);
+            createButtons(buttons, 'pg-prop-btn-group-above');
           }
           j.append(content);
         },
@@ -620,6 +627,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
           if (view) {
             // Save it to release it later
             j.data('obj-view', view);
+
             // Create proper buttons
             createButtons([{
               label: '{{ _("Save") }}', type: 'save',
@@ -673,10 +681,15 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
                   setTimeout(function() { editFunc.call(); }, 0);
                 });
               }
-            }]);
+            }], 'pg-prop-btn-group-below');
           };
-          // Show contents after buttons
-          j.append(content);
+
+          // Add some space, so that - button group does not override the
+          // space
+          content.addClass('pg-prop-has-btn-group-below');
+
+          // Show contents before buttons
+          j.prepend(content);
         },
         closePanel = function() {
           // Closing this panel
@@ -686,7 +699,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
           // Update the item lable (if lable is modified.)
           tree.setLabel(item, {label: view.model.get("name")});
           panel.$container.removeAttr('action-mode');
-          setTimeout(function() { properties(); }, 0);
+          setTimeout(function() { closePanel(); }, 0);
         },
         saveNewNode = function() {
           /* TODO:: Create new tree node for this */
@@ -766,7 +779,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
             }]);
           }, 0);
         },
-        onCancelFunc = properties,
+        onCancelFunc = closePanel,
         onSaveFunc = updateTreeItem,
         onEdit = editFunc;
 

web/pgadmin/static/css/overrides.css

@@ -141,6 +141,10 @@ iframe {
     color: #009DCF;
 }
 
+.navbar-inverse .navbar-brand:hover {
+    color: #009DCF;
+}
+
 .dropdown-menu > hr {
     margin-top: 0;
     margin-bottom: 0;
@@ -338,15 +342,19 @@ iframe {
     border: 2px solid #A9A9A9;
     left: 0px;
     right: 0px;
+}
+
+.pg-prop-btn-group-above {
     top: 0px;
-    padding: 0px 7px;
+}
+
+.pg-prop-btn-group-below {
+    bottom: 0px;
 }
 
 .pg-prop-btn-group button {
-    margin-right: 5px;
-    margin-top: 2px;
-    margin-bottom: 2px;
-    margin-left: 5px;
+    padding: 0.2em 0.3em;
+    margin: 0.1em 0.3em;
 }
 
 .pg-prop-btn-group button:not(:first-child):not(:last-child) {
@@ -354,23 +362,21 @@ iframe {
 }
 
 .pg-prop-content {
-    margin: 0 auto;
-    width: 100%;
     position: absolute;
     overflow: auto;
     top: 0em;
     bottom: 0px;
-    margin-top: 1em;
-    padding-right: 0;
-    padding-left: 0;
+    padding: 0.5em 0px;
+}
+
+.pg-prop-has-btn-group-below {
+    margin-bottom: 2.1em;
 }
 
 .has-pg-prop-btn-group {
-    top: 2.5em;
+    top: 2.1em;
 }
 
-
-
 .pg-prop-content > div {
     margin-top: 5px;
     margin-bottom: 5px;