Updated wcDocker to the latest version

2025-02-25 18:55:31 -06:00 · 2015-07-20 16:06:17 +05:30 · 2015-07-20 16:06:17 +05:30 · 9d372a4555
commit 9d372a4555
parent 59e87183a1
17 changed files with 5224 additions and 1944 deletions
--- a/libraries.txt
+++ b/libraries.txt
@ -10,7 +10,7 @@ Modernizr         2.6.2       MIT/BSD      http://modernizr.com/
 AlertifyJS        1.1.0       MIT          http://alertifyjs.com/
 CodeMirror        4.12        MIT          http://codemirror.net/       
 aciTree           4.5.0-rc.7  MIT/GPL      http://acoderinsights.ro/en/aciTree-tree-view-with-jQuery
-wcDocker          1cd2466afb  MIT          https://github.com/WebCabin/wcDocker
+wcDocker          8b84d55415  MIT/GPL      https://github.com/WebCabin/wcDocker
 Require.js        2.1.18      BSD/MIT      http://requirejs.org/
 Underscore.js     1.8.3       MIT          http://underscorejs.org/
 Underscore.string 387ab72d49  MIT          http://epeli.github.io/underscore.string/
--- a/web/pgadmin/browser/init.py
+++ b/web/pgadmin/browser/init.py
@ -27,10 +27,9 @@ class BrowserModule(PgAdminModule):
        for (endpoint, filename) in [
            ('static', 'css/codemirror/codemirror.css'),
            ('static', 'css/jQuery-contextMenu/jquery.contextMenu.css'),
-            ('static', 'css/wcDocker/wcDockerSkeleton.css' if \
+            ('static', 'css/wcDocker/wcDocker.css' if \
                    current_app.debug else \
-                       'css/wcDocker/wcDockerSkeleton.min.css'),
-            ('static', 'css/wcDocker/theme.css'),
+                       'css/wcDocker/wcDocker.min.css'),
            ('browser.static', 'css/browser.css'),
            ('browser.static', 'css/aciTree/css/aciTree.css')
            ]:
--- a/web/pgadmin/browser/server_groups/servers/templates/servers/servers.js
+++ b/web/pgadmin/browser/server_groups/servers/templates/servers/servers.js
@ -6,7 +6,7 @@ function($, _, pgAdmin, pgBrowser, alertify) {
    pgAdmin.Browser.Nodes['server'] = pgAdmin.Browser.Node.extend({
      parent_type: 'server-group',
      type: 'server',
-      label: '{{ _('Server...') }}',
+      label: '{{ _('Server') }}',
      Init: function() {

        /* Avoid multiple registration of same menus */
--- a/web/pgadmin/browser/static/js/frame.js
+++ b/web/pgadmin/browser/static/js/frame.js
@ -33,8 +33,8 @@ function(_, pgAdmin) {
            myPanle.title(false);
          myPanel.closeable(that.isCloseable == true);

-          var $frameArea = $('<div style="width:100%;height:100%;position:relative;">');
-          myPanel.layout().addItem($frameArea).parent().css('height', '100%');
+          var $frameArea = $('<div style="width:100%;height:100%;position:relative;display:table">');
+          myPanel.layout().addItem($frameArea);
          that.panel = myPanel;
          that.frame = new wcIFrame($frameArea, myPanel);

--- a/web/pgadmin/browser/static/js/panel.js
+++ b/web/pgadmin/browser/static/js/panel.js
@ -32,7 +32,12 @@ function(_, pgAdmin) {
            else
              myPanel.title(title || that.title);
            myPanel.closeable(that.isCloseable == true);
-            myPanel.layout().addItem(that.content, 0, 0).parent().css('height', '100%');
+            myPanel.layout().addItem(
+              $('<div>', {
+                'class': 'pg-panel-content'
+              })
+              .append($(that.content))
+            );
            that.panel = myPanel;
            if (that.events && _.isObject(that.events)) {
              _.each(that.events, function(v, k) {
--- a/web/pgadmin/browser/templates/browser/js/browser.js
+++ b/web/pgadmin/browser/templates/browser/js/browser.js
@ -42,7 +42,7 @@ ALTER TABLE tickets_detail \n\
 OWNER TO helpdesk;\n';

  var panelEvents = {};
-  panelEvents[wcDocker.EVENT_VISIBILITY_CHANGED] = function() {
+  panelEvents[wcDocker.EVENT.VISIBILITY_CHANGED] = function() {

    if (this.isVisible()) {
      var obj = pgAdmin.Browser,
@ -58,6 +58,13 @@ OWNER TO helpdesk;\n';
    }
  };

+  var sqlPanelEvents = {};
+  sqlPanelEvents[wcDocker.EVENT.VISIBILITY_CHANGED] = function() {
+    /* Update the SQL editor to show the latest value all the time */
+    if (this.isVisible()) {
+        pgAdmin.Browser.editor.setValue($('#sql-textarea').val());
+    }
+  };
  // Extend the browser class attributes
  _.extend(pgAdmin.Browser, {
    // The base url for browser
@ -80,7 +87,7 @@ OWNER TO helpdesk;\n';
      'browser': new pgAdmin.Browser.Panel({
        name: 'browser',
        title: '{{ _('Browser') }}',
-        showTitle: false,
+        showTitle: true,
        isCloseable: false,
        isPrivate: true,
        content: '<div id="tree" class="aciTree"></div>'
@ -113,8 +120,8 @@ OWNER TO helpdesk;\n';
        isCloseable: false,
        isPrivate: true,
        // TODO:: Revove demoSql later
-        content: '<textarea id="sql-textarea" name="sql-textarea">' + demoSql + '</textarea>',
-        events: panelEvents
+        content: '<textarea id="sql-textarea" name="sql-textarea"></textarea>',
+        events: sqlPanelEvents
      }),
      // Dependencies of the object
      'dependencies': new pgAdmin.Browser.Panel({
@ -156,7 +163,7 @@ OWNER TO helpdesk;\n';
        width: 500,
        isCloseable: false,
        isPrivate: true,
-        url: 'about:blank' /* TODO:: Change it with http://www.pgadmin.org later */
+        url: 'http://www.pgadmin.org'
      })/* Add hooked-in frames by extensions */{% for panel_item in current_app.panels %}{% if panel_item.isIframe %},
      '{{ panel_item.name }}' : new pgAdmin.Browser.Frame({
        name: '{{ panel_item.name }}',
@ -197,19 +204,19 @@ OWNER TO helpdesk;\n';
    },
    // Build the default layout
    buildDefaultLayout: function() {
-      this.docker.addPanel('dashboard', wcDocker.DOCK_RIGHT);
-      this.docker.addPanel('properties', wcDocker.DOCK_STACKED,
-      this.frames['dashboard'].panel);
-      this.docker.addPanel('sql', wcDocker.DOCK_STACKED,
-      this.frames['dashboard'].panel);
-      this.docker.addPanel('statistics', wcDocker.DOCK_STACKED,
-      this.frames['dashboard'].panel);
-      this.docker.addPanel('dependencies', wcDocker.DOCK_STACKED,
-      this.frames['dashboard'].panel);
-      this.docker.addPanel('dependents', wcDocker.DOCK_STACKED,
-      this.frames['dashboard'].panel);
-      this.docker.addPanel('browser', wcDocker.DOCK_LEFT,
-      this.frames['dashboard'].panel);
+      var browserPanel = this.docker.addPanel('browser', wcDocker.DOCK.LEFT);
+      var dashboardPanel = this.docker.addPanel(
+              'dashboard', wcDocker.DOCK.RIGHT, browserPanel);
+      this.docker.addPanel('properties', wcDocker.DOCK.STACKED, dashboardPanel, {
+          tabOrientation: wcDocker.TAB.TOP
+      });
+      this.docker.addPanel('sql', wcDocker.DOCK.STACKED, dashboardPanel);
+      this.docker.addPanel(
+              'statistics', wcDocker.DOCK.STACKED, dashboardPanel);
+      this.docker.addPanel(
+              'dependencies', wcDocker.DOCK.STACKED, dashboardPanel);
+      this.docker.addPanel(
+              'dependents', wcDocker.DOCK.STACKED, dashboardPanel);
    },
    // Enable/disable menu options
    enable_disable_menus: function(item) {
@ -291,7 +298,10 @@ OWNER TO helpdesk;\n';
      // Initialize the Docker
      obj.docker = new wcDocker(
        '#dockerContainer', {
-        allowContextMenu: false
+        allowContextMenu: false,
+        allowCollapse: false,
+        themePath: '../static/css/wcDocker/Themes',
+        theme: 'pgadmin'
      });
      if (obj.docker) {
        // Initialize all the panels
@ -306,18 +316,24 @@ OWNER TO helpdesk;\n';
        // Stored layout in database from the previous session
        var layout = '{{ layout }}';

+        obj.docker.startLoading('{{ _('Loading...') }}');
+
        // Try to restore the layout if there is one
        if (layout != '') {
          try {
            obj.docker.restore(layout)
          }
          catch(err) {
-            obj.docker.clear()
-              obj.buildDefaultLayout()
+            obj.docker.clear();
+            obj.buildDefaultLayout()
          }
        } else {
          obj.buildDefaultLayout()
        }
+
+        obj.docker.on(wcDocker.EVENT.LOADED, function() {
+            obj.docker.finishLoading(500);
+        });
      }

      // Syntax highlight the SQL Pane
@ -325,8 +341,9 @@ OWNER TO helpdesk;\n';
          document.getElementById("sql-textarea"), {
            lineNumbers: true,
            mode: "text/x-sql",
-            readOnly: true,
+            readOnly: true
          });
+      $('#sql-textarea').val(demoSql);

      // Initialise the treeview
      $('#tree').aciTree({
--- a/web/pgadmin/browser/templates/browser/js/node.js
+++ b/web/pgadmin/browser/templates/browser/js/node.js
@ -278,7 +278,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
          i = args.item || t.selected(),
          d = i && i.length == 1 ? t.itemData(i) : undefined
          o = this,
-          l = o.title(d);
+          l = o.label + ' - ' + o.title(d);

        // Make sure - the properties dialog type registered
        pgBrowser.Node.register_node_panel();
@ -333,7 +333,7 @@ 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, {
+              wcDocker.DOCK.FLOAT, undefined, {
                  w: (screen.width < 700 ?
                      screen.width * 0.95 : screen.width * 0.5),
                  h: (screen.height < 500 ?
@ -375,7 +375,7 @@ function($, _, S, pgAdmin, Menu, Backbone, Alertify, Backform) {
            }
          } else {
            p = pgBrowser.docker.addPanel('node_props',
-                wcDocker.DOCK_FLOAT, undefined, {
+                wcDocker.DOCK.FLOAT, undefined, {
                  w: (screen.width < 700 ?
                      screen.width * 0.95 : screen.width * 0.5),
                  h: (screen.height < 500 ?
--- a/web/pgadmin/static/css/overrides.css
+++ b/web/pgadmin/static/css/overrides.css
@ -15,7 +15,9 @@ body {
 .container {
    width: 100% !important;
 }
-    
+
+.pg-panel-content { position:absolute;top:0px;left:0px;right:0px;bottom:0px; }
+
 /* Restyle the Alertify dialogs */
 .alertify .ajs-dialog {
    border: 0px solid rgba(0,0,0,.2);
--- a/web/pgadmin/static/css/wcDocker/Themes/default.css
+++ b/web/pgadmin/static/css/wcDocker/Themes/default.css
@ -0,0 +1,286 @@
+/*!
+ * Web Cabin Docker - Docking Layout Interface.
+ *
+ * Dependancies:
+ *  JQuery 1.11.1
+ *
+ * Version: git-master
+ *
+ * Author: Jeff Houde (lochemage@webcabin.org)
+ * Web: http://docker.webcabin.org/
+ *
+ * Licensed under
+ *   MIT License http://www.opensource.org/licenses/mit-license
+ *   GPL v3 http://opensource.org/licenses/GPL-3.0
+ *
+ */
+.wcDocker {
+  background-color: gray;
+}
+
+.wcModalBlocker {
+  background-color: black;
+  opacity: 0.8;
+}
+
+.wcPanelBackground {
+  background-color: gray;
+}
+
+.wcPanelBackground .wcCenter {
+  background-color: darkgray;
+}
+
+.wcFrameFlasher {
+  background-color: white;
+}
+
+.wcFrameShadower {
+  background-color: white;
+}
+
+.wcFrameTitleBar {
+  height: 17px;
+  background-color: #555;
+}
+
+.wcFrameTitle {
+  font-size: 12px;
+  font-weight: bold;
+  text-align: center;
+  padding-top: 3px;
+  background-color: gray;
+}
+
+.wcFrameButton {
+  width: 13px;
+  height: 13px;
+  border: 2px outset #444444;
+  font-size: 11px;
+  background-color: #555555;
+}
+
+.wcFrameButton:hover {
+  background-color: #666;
+}
+
+.wcFrameButton:active {
+  border: 2px inset #444;
+}
+
+.wcFrameCenter {
+  top: 17px;
+}
+
+.wcLayoutGrid, .wcLayoutGrid tr, .wcLayoutGrid td {
+  border: 1px solid #555555;
+}
+
+.wcLayoutGridAlternate tr:nth-child(even), .wcLayoutGridAltColor {
+  background-color: rgba(200, 200, 200, 0.2) !important;
+}
+
+.wcPanelTab {
+  color: #42454a;
+  background-color: #777;
+  border: 1px solid #000;
+  border-radius: 2px 2px 0px 0px;
+  border-bottom: 0px;
+  margin-right: 1px;
+  margin-top: 3px;
+  font-size: 12px;
+  padding-left: 2px;
+  padding-right: 2px;
+  padding-bottom: 0px;
+}
+
+.wcPanelTab:hover {
+  background-color: #AAA;
+}
+
+.wcPanelTabActive {
+  color: #000;
+  background-color: gray;
+  font-weight: bold;
+  margin-top: 1px;
+}
+
+.wcPanelTabActive:hover {
+  background-color: #CCC;
+}
+
+.wcFrameEdge {
+  position: absolute;
+  z-index: 2;
+  border: 2px outset #444;
+  background-color: #222;
+}
+
+.wcSplitterBar {
+  border: 1px outset darkgray;
+  background-color: gray;
+}
+
+.wcSplitterBarV.wcSplitterBarStatic {
+  width: 0px;
+}
+.wcSplitterBarH.wcSplitterBarStatic {
+  height: 0px;
+}
+
+.wcGhost {
+  background-color: #444444;
+  border: 0px;
+  border-radius: 6px;
+}
+
+::-webkit-scrollbar {
+  width: 12px;
+  height: 12px;
+  background-color: #888;
+}
+
+::-webkit-scrollbar-corner {
+  background-color: #888;
+}
+
+::-webkit-scrollbar-track {
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
+  border-radius: 10px;
+}
+
+::-webkit-scrollbar-thumb {
+  border-radius: 10px;
+  -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.7);
+}
+
+.wcMenuList, .context-menu-list {
+  border: 1px solid #111;
+}
+
+.wcMenuItem, .context-menu-item, .context-menu-list {
+  background-color: #444;
+}
+
+.wcMenuItemHover, .wcMenuItem:hover, .context-menu-item.hover {
+  background-color: #666;
+}
+
+.wcMenuItem.disabled, .context-menu-item.disabled {
+  color: #333;
+  background-color: #444;
+}
+
+.wcMenuSeparator, .context-menu-separator {
+  border: 2px solid #444;
+  background-color: #777;
+}
+
+.wcLoadingBackground {
+  background-color: rgba(55, 55, 55, 1);
+}
+
+.wcLoadingIcon {
+  color: #222;
+}
+
+.wcLoadingLabel {
+  color: #111;
+}
+
+
+/*
+  The following are not actually used in docker, they are provided as a convenience when
+  controls are used in your panels, if you want to match the active theme.
+*/
+
+.wcInput, input {
+  vertical-align: middle;
+  border: 1px solid black;
+}
+
+.wcSelect, select {
+  border: 1px solid black;
+}
+
+.wcButton, button {
+  border: 1px outset #777;
+  background-color: #777;
+  line-height: 1em;
+}
+
+.wcButtonHover, .wcButton:hover, button:hover {
+  border: 1px outset #999;
+  background-color: #999;
+}
+
+.wcButtonActive, .wcButton:active, button:active {
+  border: 1px inset #666;
+  background-color: #666;
+}
+
+.wcButtonActive.wcButtonHover, .wcButton:hover.wcButtonActive, .wcButton:active.wcButtonHover, .wcButton:active:hover, button:active:hover {
+  border: 1px inset #999;
+  background-color: #999;
+}
+
+.wcButtonDisabled, .wcButton.disabled, button:disabled {
+  border: 1px outset #666 !important;
+  background-color: #666 !important;
+  color: #555 !important;
+}
+
+.wcButton:focus, button:focus {
+  outline: 0px;
+}
+
+
+
+
+
+
+/*
+  Mobile style changes.
+*/
+
+.wcMobile .wcFrameTitleBar {
+  height: 29px;
+}
+
+.wcMobile .wcFrameTitle {
+  font-size: 20px;
+}
+
+.wcMobile .wcFrameButton, .wcMobile .wcFrameButton {
+  width: 25px;
+  height: 25px;
+  font-size: 22px;
+}
+
+.wcMobile .wcFrameCenter {
+  top: 29px;
+}
+
+.wcMobile .wcPanelTab {
+  font-size: 14px;
+  height: 29px;
+}
+
+.wcMobile .wcPanelTab > div {
+  margin-top: 4px;
+}
+
+.wcMobile .wcSplitterBarV.wcSplitterBar:not(.wcSplitterBarStatic) {
+  width: 12px;
+  border-width: 3px;
+}
+.wcMobile .wcSplitterBarH.wcSplitterBar:not(.wcSplitterBarStatic) {
+  height: 12px;
+  border-width: 3px;
+}
+
+.wcMobile .wcInput, .wcMobile input,
+.wcMobile .wcSelect, .wcMobile select,
+.wcMobile .wcButton, .wcMobile button {
+  font-size: 22px;
+}
--- a/web/pgadmin/static/css/wcDocker/Themes/default.min.css
+++ b/web/pgadmin/static/css/wcDocker/Themes/default.min.css
@ -0,0 +1,16 @@
+/*!
+ * Web Cabin Docker - Docking Layout Interface.
+ *
+ * Dependancies:
+ *  JQuery 1.11.1
+ *
+ * Version: git-master
+ *
+ * Author: Jeff Houde (lochemage@webcabin.org)
+ * Web: http://docker.webcabin.org/
+ *
+ * Licensed under
+ *   MIT License http://www.opensource.org/licenses/mit-license
+ *   GPL v3 http://opensource.org/licenses/GPL-3.0
+ *
+ */.wcDocker{background-color:gray}.wcModalBlocker{background-color:black;opacity:.8}.wcPanelBackground{background-color:gray}.wcPanelBackground .wcCenter{background-color:darkgray}.wcFrameFlasher{background-color:white}.wcFrameShadower{background-color:white}.wcFrameTitleBar{height:17px;background-color:#555}.wcFrameTitle{font-size:12px;font-weight:bold;text-align:center;padding-top:3px;background-color:gray}.wcFrameButton{width:13px;height:13px;border:2px outset #444;font-size:11px;background-color:#555}.wcFrameButton:hover{background-color:#666}.wcFrameButton:active{border:2px inset #444}.wcFrameCenter{top:17px}.wcLayoutGrid,.wcLayoutGrid tr,.wcLayoutGrid td{border:1px solid #555}.wcLayoutGridAlternate tr:nth-child(even),.wcLayoutGridAltColor{background-color:rgba(200,200,200,0.2) !important}.wcPanelTab{color:#42454a;background-color:#777;border:1px solid #000;border-radius:2px 2px 0 0;border-bottom:0;margin-right:1px;margin-top:3px;font-size:12px;padding-left:2px;padding-right:2px;padding-bottom:0}.wcPanelTab:hover{background-color:#AAA}.wcPanelTabActive{color:#000;background-color:gray;font-weight:bold;margin-top:1px}.wcPanelTabActive:hover{background-color:#CCC}.wcFrameEdge{position:absolute;z-index:2;border:2px outset #444;background-color:#222}.wcSplitterBar{border:1px outset darkgray;background-color:gray}.wcSplitterBarV.wcSplitterBarStatic{width:0}.wcSplitterBarH.wcSplitterBarStatic{height:0}.wcGhost{background-color:#444;border:0;border-radius:6px}::-webkit-scrollbar{width:12px;height:12px;background-color:#888}::-webkit-scrollbar-corner{background-color:#888}::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.5);border-radius:10px}::-webkit-scrollbar-thumb{border-radius:10px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.7)}.wcMenuList,.context-menu-list{border:1px solid #111}.wcMenuItem,.context-menu-item,.context-menu-list{background-color:#444}.wcMenuItemHover,.wcMenuItem:hover,.context-menu-item.hover{background-color:#666}.wcMenuItem.disabled,.context-menu-item.disabled{color:#333;background-color:#444}.wcMenuSeparator,.context-menu-separator{border:2px solid #444;background-color:#777}.wcLoadingBackground{background-color:rgba(55,55,55,1)}.wcLoadingIcon{color:#222}.wcLoadingLabel{color:#111}.wcInput,input{vertical-align:middle;border:1px solid black}.wcSelect,select{border:1px solid black}.wcButton,button{border:1px outset #777;background-color:#777;line-height:1em}.wcButtonHover,.wcButton:hover,button:hover{border:1px outset #999;background-color:#999}.wcButtonActive,.wcButton:active,button:active{border:1px inset #666;background-color:#666}.wcButtonActive.wcButtonHover,.wcButton:hover.wcButtonActive,.wcButton:active.wcButtonHover,.wcButton:active:hover,button:active:hover{border:1px inset #999;background-color:#999}.wcButtonDisabled,.wcButton.disabled,button:disabled{border:1px outset #666 !important;background-color:#666 !important;color:#555 !important}.wcButton:focus,button:focus{outline:0}.wcMobile .wcFrameTitleBar{height:29px}.wcMobile .wcFrameTitle{font-size:20px}.wcMobile .wcFrameButton,.wcMobile .wcFrameButton{width:25px;height:25px;font-size:22px}.wcMobile .wcFrameCenter{top:29px}.wcMobile .wcPanelTab{font-size:14px;height:29px}.wcMobile .wcPanelTab>div{margin-top:4px}.wcMobile .wcSplitterBarV.wcSplitterBar:not(.wcSplitterBarStatic){width:12px;border-width:3px}.wcMobile .wcSplitterBarH.wcSplitterBar:not(.wcSplitterBarStatic){height:12px;border-width:3px}.wcMobile .wcInput,.wcMobile input,.wcMobile .wcSelect,.wcMobile select,.wcMobile .wcButton,.wcMobile button{font-size:22px}
--- a/web/pgadmin/static/css/wcDocker/Themes/pgadmin.css
+++ b/web/pgadmin/static/css/wcDocker/Themes/pgadmin.css
@ -18,15 +18,19 @@
  background-color: #dddddd;
 }

-.wcFrameTitle {
-  height: 50px;
-  background-color: #e6e6e6;
-  text-align: left;
-  border-bottom: 1px;
+.wcFrameTitleBar {
+  height: 38px;
+  background-color: #555;
 }

-.wcFrameCenter {
-  top: 40px;
+.wcFrameTitle {
+  font-size: 12px;
+  font-weight: bold;
+  text-align: left;
+  padding-top: 3px;
+  padding-left: 3px;
+  vertical-align: middle;
+  background-color: #e6e6e6;
 }

 .wcFrameButton {
@ -51,6 +55,10 @@
  background-color: #dddddd;
 }

+.wcFrameCenter {
+  top: 40px;
+}
+
 .wcFrameButtonToggled, .wcFrameButtonToggled:hover {
  border-style: inset;
 }
@ -122,7 +130,7 @@
  border-radius: 6px;
 }

-/* 
+/*
 ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
@ -206,3 +214,10 @@
 .context-menu-submenu:after {
  content: '>' !important;
 }
+
+.wcTabIcon {
+    display: inline-block;
+    text-align: center;
+    padding-left: 1.25em;
+    margin-top: -5px;
+}
--- a/web/pgadmin/static/css/wcDocker/wcDocker.css
+++ b/web/pgadmin/static/css/wcDocker/wcDocker.css
@ -0,0 +1,611 @@
+/*!
+ * Web Cabin Docker - Docking Layout Interface.
+ *
+ * Dependancies:
+ *  JQuery 1.11.1
+ *
+ * Version: git-master
+ *
+ * Author: Jeff Houde (lochemage@webcabin.org)
+ * Web: http://docker.webcabin.org/
+ *
+ * Licensed under
+ *   MIT License http://www.opensource.org/licenses/mit-license
+ *   GPL v3 http://opensource.org/licenses/GPL-3.0
+ *
+ */
+
+html, body {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  margin: 0px;
+}
+
+.wcDisableSelection {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.wcModalBlocker {
+  position: fixed;
+  top: 0px;
+  bottom: 0px;
+  left: 0px;
+  right: 0px;
+  z-index: -30;
+}
+
+.wcWide {
+  width: 100%;
+  left: 0px;
+}
+
+.wcTall {
+  height: 100%;
+  top: 0px;
+}
+
+.wcDocker {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.wcDockerTransition {
+  opacity: 0;
+}
+
+.wcFrame {
+  position: relative;
+  /*overflow: hidden;*/
+}
+
+.wcFrameFlasher, .wcFrameShadower {
+  border: 0px;
+  margin: 0px;
+  padding: 0px;
+
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+
+  opacity: 0;
+}
+
+.wcFrameTitleBar {
+  width: 100%;
+  cursor: move;
+  overflow: hidden;
+  position: absolute;
+  text-align: left;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: -moz-none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.wcFrameTitle {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+}
+
+.wcFrameTitleBar.wcNotMoveable {
+  cursor: default;
+}
+
+.wcCustomTabTitle {
+  cursor: default !important;
+}
+
+.wcCustomTabMoveable {
+  cursor: move !important;
+}
+
+.wcCustomTab {
+  position: relative;
+}
+
+.wcTabScroller {
+  height: 100%;
+  width: 10000px;
+  position: relative;
+}
+
+.wcFrameButtonBar {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: auto !important;
+}
+
+.wcFrameButton {
+  position: relative;
+  float: right;
+  cursor: pointer;
+  text-align: center;
+  overflow: hidden;
+  z-index: 1;
+}
+
+.wcFrameButton > div {
+  width: 100%;
+}
+
+.wcFrameCenter {
+  overflow: hidden;
+  position: absolute;
+  top: 15px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+}
+
+.wcFloating {
+  position: fixed;
+  z-index: 10;
+}
+
+.wcFloatingFocus {
+  z-index: 20;
+}
+
+.wcModal {
+  z-index: 40;
+}
+
+.wcLayout, .wcLayout tr, .wcLayout td {
+  border: 0px;
+  margin: 0px;
+  padding: 0px;
+
+  border-spacing: 0px;
+}
+
+.wcLayout {
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  position: absolute;
+}
+
+.wcFrameEdge {
+  position: absolute;
+  z-index: 2;
+  border: 2px outset #444;
+  background-color: #222;
+}
+
+.wcFrameEdgeV {
+  width: 2px;
+  cursor: ew-resize;
+  border-top: 0px;
+  border-bottom: 0px;
+}
+
+.wcFrameEdgeH {
+  height: 2px;
+  cursor: ns-resize;
+  border-left: 0px;
+  border-right: 0px;
+}
+
+.wcFrameCornerNW {
+  height: 2px;
+  width: 2px;
+  cursor: nwse-resize;
+}
+
+.wcFrameCornerNE {
+  height: 2px;
+  width: 2px;
+  cursor: nesw-resize;
+}
+
+.wcSplitterBar {
+  z-index: 2;
+  position: absolute;
+  border: 1px outset darkgray;
+}
+
+.wcSplitterBarV {
+  width: 2px;
+  height: 100%;
+  cursor: ew-resize;
+}
+
+.wcSplitterBarH {
+  height: 2px;
+  width: 100%;
+  cursor: ns-resize;
+}
+
+.wcSplitterHidden {
+  width: 0px !important;
+  border: 0px !important;
+  display: none !important;
+}
+
+.wcSplitterBarV.wcSplitterBarStatic {
+  cursor: default !important;
+}
+
+.wcSplitterBarH.wcSplitterBarStatic {
+  cursor: default !important;
+}
+
+.wcLayoutPane {
+  border: 0px;
+  margin: 0px;
+  padding: 0px;
+
+  display: inline-block;
+  position: absolute;
+}
+
+.wcPanelTab {
+  vertical-align: top;
+  position: relative;
+  display: inline-block;
+  cursor: move;
+  top: 0px;
+}
+
+.wcPanelTab.wcNotMoveable {
+  cursor: default;
+}
+
+.wcTabLeft {
+  -webkit-transform: rotate(-90deg) scaleX(-1);
+      -ms-transform: rotate(-90deg) scaleX(-1);
+     -moz-transform: rotate(-90deg) scaleX(-1);
+       -o-transform: rotate(-90deg) scaleX(-1);
+          transform: rotate(-90deg) scaleX(-1);
+  -webkit-transform-origin: left top;
+      -ms-transform-origin: left top;
+     -moz-transform-origin: left top;
+       -o-transform-origin: left top;
+          transform-origin: left top;
+  top: 0%;
+  left: 0%;
+}
+
+.wcTabLeft .wcFrameButton {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+     -moz-transform: rotate(90deg);
+       -o-transform: rotate(90deg);
+          transform: rotate(90deg);
+  -webkit-transform-origin: center center;
+      -ms-transform-origin: center center;
+     -moz-transform-origin: center center;
+       -o-transform-origin: center center;
+          transform-origin: center center;
+}
+
+.wcTabLeft .wcFrameButton span {
+  -webkit-transform: rotate(-90deg);
+      -ms-transform: rotate(-90deg);
+     -moz-transform: rotate(-90deg);
+       -o-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+  -webkit-transform-origin: center center;
+      -ms-transform-origin: center center;
+     -moz-transform-origin: center center;
+       -o-transform-origin: center center;
+          transform-origin: center center;
+}
+
+.wcTabLeft .wcPanelTab > div {
+  -webkit-transform: scaleX(-1);
+      -ms-transform: scaleX(-1);
+     -moz-transform: scaleX(-1);
+       -o-transform: scaleX(-1);
+          transform: scaleX(-1);
+}
+
+.wcTabRight {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+     -moz-transform: rotate(90deg);
+       -o-transform: rotate(90deg);
+          transform: rotate(90deg);
+  -webkit-transform-origin: left top;
+      -ms-transform-origin: left top;
+     -moz-transform-origin: left top;
+       -o-transform-origin: left top;
+          transform-origin: left top;
+  top: 0px;
+  left: 100%;
+}
+
+.wcTabRight .wcFrameButton {
+  -webkit-transform: rotate(-90deg);
+      -ms-transform: rotate(-90deg);
+     -moz-transform: rotate(-90deg);
+       -o-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+  -webkit-transform-origin: center center;
+      -ms-transform-origin: center center;
+     -moz-transform-origin: center center;
+       -o-transform-origin: center center;
+          transform-origin: center center;
+}
+
+.wcTabRight .wcFrameButton span {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+     -moz-transform: rotate(90deg);
+       -o-transform: rotate(90deg);
+          transform: rotate(90deg);
+  -webkit-transform-origin: center center;
+      -ms-transform-origin: center center;
+     -moz-transform-origin: center center;
+       -o-transform-origin: center center;
+          transform-origin: center center;
+}
+
+.wcTabBottom {
+  -webkit-transform: rotate(180deg) scaleX(-1);
+      -ms-transform: rotate(180deg) scaleX(-1);
+     -moz-transform: rotate(180deg) scaleX(-1);
+       -o-transform: rotate(180deg) scaleX(-1);
+          transform: rotate(180deg) scaleX(-1);
+  -webkit-transform-origin: left top;
+      -ms-transform-origin: left top;
+     -moz-transform-origin: left top;
+       -o-transform-origin: left top;
+          transform-origin: left top;
+  top: 100%;
+  left: 0px;
+}
+
+.wcTabBottom .wcFrameButton {
+  -webkit-transform: rotate(-90deg);
+      -ms-transform: rotate(-90deg);
+     -moz-transform: rotate(-90deg);
+       -o-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+  -webkit-transform-origin: center center;
+      -ms-transform-origin: center center;
+     -moz-transform-origin: center center;
+       -o-transform-origin: center center;
+          transform-origin: center center;
+}
+
+.wcTabBottom .wcFrameButton span {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+     -moz-transform: rotate(90deg);
+       -o-transform: rotate(90deg);
+          transform: rotate(90deg);
+  -webkit-transform-origin: center center;
+      -ms-transform-origin: center center;
+     -moz-transform-origin: center center;
+       -o-transform-origin: center center;
+          transform-origin: center center;
+}
+
+.wcTabBottom .wcPanelTab > div {
+  -webkit-transform: scaleY(-1);
+      -ms-transform: scaleY(-1);
+     -moz-transform: scaleY(-1);
+       -o-transform: scaleY(-1);
+          transform: scaleY(-1);
+}
+
+.wcCollapseLeft.wcCollapsible,
+.wcCollapseRight.wcCollapsed {
+  -webkit-transform: scaleX(-1);
+      -ms-transform: scaleX(-1);
+     -moz-transform: scaleX(-1);
+       -o-transform: scaleX(-1);
+          transform: scaleX(-1);
+  -webkit-transform-origin: center center;
+      -ms-transform-origin: center center;
+     -moz-transform-origin: center center;
+       -o-transform-origin: center center;
+          transform-origin: center center;
+}
+
+.wcCollapseBottom.wcCollapsible {
+  -webkit-transform: rotate(90deg);
+      -ms-transform: rotate(90deg);
+     -moz-transform: rotate(90deg);
+       -o-transform: rotate(90deg);
+          transform: rotate(90deg);
+  -webkit-transform-origin: center center;
+      -ms-transform-origin: center center;
+     -moz-transform-origin: center center;
+       -o-transform-origin: center center;
+          transform-origin: center center;
+}
+
+.wcCollapseBottom.wcCollapsed {
+  -webkit-transform: rotate(-90deg);
+      -ms-transform: rotate(-90deg);
+     -moz-transform: rotate(-90deg);
+       -o-transform: rotate(-90deg);
+          transform: rotate(-90deg);
+  -webkit-transform-origin: center center;
+      -ms-transform-origin: center center;
+     -moz-transform-origin: center center;
+       -o-transform-origin: center center;
+          transform-origin: center center;
+}
+
+.wcPanelTabContent {
+  width: 100%;
+  height: 100%;
+}
+
+.wcPanelTabContent.wcPanelTabContentHidden {
+  display: none;
+}
+
+.wcResizing .wcHideOnResize .wcPanelTabContent {
+  display: none;
+}
+
+.wcGhost {
+  opacity: 0.0;
+  position: fixed;
+  z-index: 100;
+  cursor: move;
+}
+
+.wcScrollableX {
+  overflow-x: auto;
+}
+
+.wcScrollableY {
+  overflow-y: auto;
+}
+
+.wcOverflowVisible {
+  overflow: visible;
+}
+
+.wcTabIcon {
+  display: inline-block;
+  text-align: center;
+}
+
+.wcMenuIcon {
+  display: inline-block;
+  text-align: center;
+}
+
+.fa-menu {
+  margin-left: -24px;
+  width: 24px;
+}
+
+.context-menu-submenu:after {
+  content: '' !important;
+}
+
+.wcMenuSubMenu {
+  float: right;
+}
+
+.wcIFrame, .wcIFrame iframe {
+  position: absolute;
+
+  overflow: auto;
+  z-index: 1;
+
+  width: 100%;
+  height: 100%;
+
+  border: 0px;
+  margin: 0px;
+  padding: 0px;
+}
+
+.wcIFrameFocus {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+  z-index: 2;
+  display: none;
+}
+
+.wcDisableSelection .wcIFrameFocus {
+  display: block;
+}
+
+.wcIFrame.wcDrawer {
+  z-index: 6;
+}
+
+.wcIFrameFloating {
+  z-index: 11;
+}
+
+.wcIFrameFloatingFocus {
+  z-index: 21;
+}
+
+.wcIFrameHidden, .wcIFramePanelHidden {
+  display: none;
+}
+
+.wcIFrameMoving {
+  pointer-events: none;
+}
+
+.wcCollapserFrame {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.wcDrawer {
+  z-index: 5;
+}
+
+.wcCreatePanel {
+  cursor: move;
+}
+
+.wcLoadingContainer, .wcLoadingBackground {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px;
+}
+
+.wcLoadingContainer {
+  z-index: 10;
+}
+
+.wcLoadingIconContainer {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.wcLoadingIcon {
+  position: absolute;
+  font-size: 200px;
+  left: calc(50% - 100px);
+  top: calc(50% - 100px);
+  height: 195px;
+}
+
+.wcLoadingLabel {
+  position: absolute;
+  width: 100%;
+  font-size: 100px;
+  top: calc(50% + 100px);
+  text-align: center;
+}
+
+.fa-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+  animation: fa-spin 1s infinite steps(8);
+}
--- a/web/pgadmin/static/css/wcDocker/wcDocker.min.css
+++ b/web/pgadmin/static/css/wcDocker/wcDocker.min.css
--- a/web/pgadmin/static/css/wcDocker/wcDockerSkeleton.css
+++ b/web/pgadmin/static/css/wcDocker/wcDockerSkeleton.css
@ -1,355 +0,0 @@
-/*!
- * Web Cabin Docker - Docking Layout Interface.
- *
- * Dependancies:
- *  JQuery 1.11.1
- *
- * Version: git-master
- *
- * Author: Jeff Houde (Lochemage@gmail.com)
- * Web: http://docker.webcabin.org/
- *
- * Licensed under
- *   MIT License http://www.opensource.org/licenses/mit-license
- *   GPL v3 http://opensource.org/licenses/GPL-3.0
- *
- */
-
-html, body {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  margin: 0px;
-}
-
-.wcDisableSelection {
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.wcModalBlocker {
-  position: fixed;
-  top: 0px;
-  bottom: 0px;
-  left: 0px;
-  right: 0px;
-  z-index: -30;
-}
-
-.wcWide {
-  width: 100%;
-  left: 0px;
-}
-
-.wcTall {
-  height: 100%;
-  top: 0px;
-}
-
-.wcDocker {
-  position: absolute;
-}
-
-.wcDockerTransition {
-  opacity: 0;
-}
-
-.wcFrame {
-  position: relative;
-}
-
-.wcFrameFlasher, .wcFrameShadower {
-  border: 0px;
-  margin: 0px;
-  padding: 0px;
-
-  position: absolute;
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-
-  opacity: 0;
-}
-
-.wcFrameTitle {
-  width: 100%;
-  cursor: move;
-  overflow: hidden;
-  position: absolute;
-  text-align: left;
-
-  -webkit-touch-callout: none;
-  -webkit-user-select: none;
-  -khtml-user-select: none;
-  -moz-user-select: -moz-none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.wcFrameTitle.wcNotMoveable {
-  cursor: default !important;
-}
-
-.wcCustomTabTitle {
-  cursor: default !important;
-}
-
-.wcCustomTabMoveable {
-  cursor: move !important;
-}
-
-.wcCustomTab {
-  position: relative;
-}
-
-.wcTabScroller {
-  height: 100%;
-  width: 10000px;
-  position: relative;
-}
-
-.wcFrameButton, .wcFrameMiniButton {
-  width: 13px;
-  height: 13px;
-  position: relative;
-  float: right;
-  border: 2px outset #444444;
-  font-size: 11px;
-  cursor: pointer;
-  text-align: center;
-  /*margin-right: 3px;*/
-  overflow: hidden;
-  z-index: 1;
-
-  background-color: #555555;
-}
-
-.wcFrameButton > div, .wcFrameMiniButton > div {
-  width: 100%;
-}
-
-.wcFrameMiniButton {
-  width: 6px;
-}
-
-.wcFrameButton:hover {
-  border: 2px outset #666666;
-  background-color: #686868;
-}
-
-.wcFrameButton:active {
-  border: 2px inset #AAAAAA;
-  background-color: #888888;
-}
-
-.wcFrameButtonToggled, .wcFrameButtonToggled:hover {
-  border-style: inset;
-}
-
-.wcFrameCenter {
-  overflow: hidden;
-  position: absolute;
-  top: 15px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-}
-
-.wcFloating {
-  position: fixed;
-  z-index: 10;
-}
-
-.wcFloatingFocus {
-  z-index: 20;
-}
-
-.wcModal {
-  z-index: 40;
-}
-
-.wcLayout, .wcLayout tr, .wcLayout td {
-  border: 0px;
-  margin: 0px;
-  padding: 0px;
-  background-color: transparent;
-
-  border-spacing: 0px;
-}
-
-.wcLayout {
-  top: 0px;
-  left: 0px;
-  right: 0px;
-  bottom: 0px;
-  position: absolute;
-}
-
-.wcFrameEdge {
-  position: absolute;
-  z-index: 2;
-  border: 2px outset #444;
-  background-color: #222;
-}
-
-.wcFrameEdgeV {
-  width: 2px;
-  cursor: ew-resize;
-  border-top: 0px;
-  border-bottom: 0px;
-}
-
-.wcFrameEdgeH {
-  height: 2px;
-  cursor: ns-resize;
-  border-left: 0px;
-  border-right: 0px;
-}
-
-.wcFrameCornerNW {
-  height: 2px;
-  width: 2px;
-  cursor: nwse-resize;
-}
-
-.wcFrameCornerNE {
-  height: 2px;
-  width: 2px;
-  cursor: nesw-resize;
-}
-
-.wcSplitterBar {
-  z-index: 2;
-  position: absolute;
-  border: 1px outset darkgray;
-}
-
-.wcSplitterBarV {
-  width: 2px;
-  height: 100%;
-  cursor: ew-resize;
-}
-
-.wcSplitterBarH {
-  height: 2px;
-  width: 100%;
-  cursor: ns-resize;
-}
-
-.wcLayoutPane {
-  border: 0px;
-  margin: 0px;
-  padding: 0px;
-
-  display: inline-block;
-  position: absolute;
-}
-
-.wcPanelTab {
-  vertical-align: top;
-  position: relative;
-  display: inline-block;
-  text-decoration: none;
-  top: 0px;
-}
-
-.wcPanelTabContent {
-  width: 100%;
-  height: 100%;
-}
-
-.wcPanelTabContent.wcPanelTabContentHidden {
-  display: none;
-}
-
-.wcResizing .wcHideOnResize .wcPanelTabContent {
-  display: none;
-}
-
-.wcGhost {
-  opacity: 0.0;
-  background-color: #444444;
-  position: fixed;
-  border: 0px;
-  border-radius: 6px;
-  z-index: 100;
-  cursor: move;
-}
-
-.wcScrollableX {
-  overflow-x: auto;
-}
-
-.wcScrollableY {
-  overflow-y: auto;
-}
-
-.wcOverflowVisible {
-  overflow: visible;
-}
-
-.wcTabIcon {
-  display: inline-block;
-  width: 1.28571429em;
-  height: 1em;
-  text-align: center;
-}
-
-.wcMenuIcon {
-  margin-left: -24px;
-  width: 1.28571429em;
-  font-size: 1.33333333em;
-  line-height: 0.75em;
-  height: 1em;
-  display: inline-block;
-  vertical-align: -15%;
-  text-align: center;
-}
-
-.fa-menu {
-  margin-left: -24px;
-  width: 24px;
-}
-
-.context-menu-submenu:after {
-  content: '' !important;
-}
-
-.wcMenuSubMenu {
-  float: right;
-}
-
-.wcIFrame {
-  position: fixed;
-
-  width: 100%;
-  height: 100%;
-
-  z-index: 1;
-
-  border: 0px;
-  margin: 0px;
-  padding: 0px;
-}
-
-.wcIFrameFloating {
-  z-index: 11;
-}
-
-.wcIFrameFloatingFocus {
-  z-index: 21;
-}
-
-.wcIFrameHidden, .wcIFramePanelHidden {
-  display: none;
-}
-
-.wcIFrameMoving {
-  pointer-events: none;
-}
--- a/web/pgadmin/static/css/wcDocker/wcDockerSkeleton.min.css
+++ b/web/pgadmin/static/css/wcDocker/wcDockerSkeleton.min.css
@ -1,16 +0,0 @@
-/*!
- * Web Cabin Docker - Docking Layout Interface.
- *
- * Dependancies:
- *  JQuery 1.11.1
- *
- * Version: git-master
- *
- * Author: Jeff Houde (Lochemage@gmail.com)
- * Web: http://docker.webcabin.org/
- *
- * Licensed under
- *   MIT License http://www.opensource.org/licenses/mit-license
- *   GPL v3 http://opensource.org/licenses/GPL-3.0
- *
- */html,body{width:100%;height:100%;overflow:hidden;position:relative;margin:0}.wcDisableSelection{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none}.wcModalBlocker{position:fixed;top:0;bottom:0;left:0;right:0;z-index:-30}.wcWide{width:100%;left:0}.wcTall{height:100%;top:0}.wcDocker{position:absolute}.wcDockerTransition{opacity:0}.wcFrame{position:relative}.wcFrameFlasher,.wcFrameShadower{border:0;margin:0;padding:0;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0}.wcFrameTitle{width:100%;cursor:move;overflow:hidden;position:absolute;text-align:left;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:-moz-none;-ms-user-select:none;user-select:none}.wcFrameTitle.wcNotMoveable{cursor:default !important}.wcCustomTabTitle{cursor:default !important}.wcCustomTabMoveable{cursor:move !important}.wcCustomTab{position:relative}.wcTabScroller{height:100%;width:10000px;position:relative}.wcFrameButton,.wcFrameMiniButton{width:13px;height:13px;position:relative;float:right;border:2px outset #444;font-size:11px;cursor:pointer;text-align:center;overflow:hidden;z-index:1;background-color:#555}.wcFrameButton>div,.wcFrameMiniButton>div{width:100%}.wcFrameMiniButton{width:6px}.wcFrameButton:hover{border:2px outset #666;background-color:#686868}.wcFrameButton:active{border:2px inset #aaa;background-color:#888}.wcFrameButtonToggled,.wcFrameButtonToggled:hover{border-style:inset}.wcFrameCenter{overflow:hidden;position:absolute;top:15px;left:0;right:0;bottom:0}.wcFloating{position:fixed;z-index:10}.wcFloatingFocus{z-index:20}.wcModal{z-index:40}.wcLayout,.wcLayout tr,.wcLayout td{border:0;margin:0;padding:0;background-color:transparent;border-spacing:0}.wcLayout{top:0;left:0;right:0;bottom:0;position:absolute}.wcFrameEdge{position:absolute;z-index:2;border:2px outset #444;background-color:#222}.wcFrameEdgeV{width:2px;cursor:ew-resize;border-top:0;border-bottom:0}.wcFrameEdgeH{height:2px;cursor:ns-resize;border-left:0;border-right:0}.wcFrameCornerNW{height:2px;width:2px;cursor:nwse-resize}.wcFrameCornerNE{height:2px;width:2px;cursor:nesw-resize}.wcSplitterBar{z-index:2;position:absolute;border:1px outset darkgray}.wcSplitterBarV{width:2px;height:100%;cursor:ew-resize}.wcSplitterBarH{height:2px;width:100%;cursor:ns-resize}.wcLayoutPane{border:0;margin:0;padding:0;display:inline-block;position:absolute}.wcPanelTab{vertical-align:top;position:relative;display:inline-block;text-decoration:none;top:0}.wcPanelTabContent{width:100%;height:100%}.wcPanelTabContent.wcPanelTabContentHidden{display:none}.wcResizing .wcHideOnResize .wcPanelTabContent{display:none}.wcGhost{opacity:0;background-color:#444;position:fixed;border:0;border-radius:6px;z-index:100;cursor:move}.wcScrollableX{overflow-x:auto}.wcScrollableY{overflow-y:auto}.wcOverflowVisible{overflow:visible}.wcTabIcon{display:inline-block;width:1.28571429em;height:1em;text-align:center}.wcMenuIcon{margin-left:-24px;width:1.28571429em;font-size:1.33333333em;line-height:.75em;height:1em;display:inline-block;vertical-align:-15%;text-align:center}.fa-menu{margin-left:-24px;width:24px}.context-menu-submenu:after{content:'' !important}.wcMenuSubMenu{float:right}.wcIFrame{position:fixed;width:100%;height:100%;z-index:1;border:0;margin:0;padding:0}.wcIFrameFloating{z-index:11}.wcIFrameFloatingFocus{z-index:21}.wcIFrameHidden,.wcIFramePanelHidden{display:none}.wcIFrameMoving{pointer-events:none}
--- a/web/pgadmin/static/js/wcDocker/wcDocker.js
+++ b/web/pgadmin/static/js/wcDocker/wcDocker.js
--- a/web/pgadmin/static/js/wcDocker/wcDocker.min.js
+++ b/web/pgadmin/static/js/wcDocker/wcDocker.min.js