Update the styling to use the set of grays defined in the WIP style guide.

web/karma.conf.js

@@ -18,13 +18,13 @@ module.exports = function(config) {
       'regression/javascript/test-main.js',
       {pattern: 'regression/javascript/**/*.js', included: false},
       {pattern: 'pgadmin/static/vendor/**/*.js', included: false},
-      {pattern: 'pgadmin/static/js/**/*.js', included: false}
+      {pattern: 'pgadmin/static/js/**/*.js', included: false},
+      {pattern: 'pgadmin/browser/static/js/**/*.js', included: false}
     ],
 
 
     // list of files to exclude
     exclude: [
-      'pgadmin/static/js/pgadmin.js',
       'pgadmin/static/vendor/**/*[Tt]est.js',
       'pgadmin/static/vendor/**/*[Ss]pec.js'
     ],

web/pgadmin/browser/static/js/menu.js

@@ -57,15 +57,51 @@ function(_, S, pgAdmin, $) {
           data: this.data
         }).addClass('menu-link');
 
+      this.is_disabled = this.disabled(node, item);
       if (this.icon) {
         url.append($('<i></i>', {'class': this.icon}));
       }
-      url.append($('<span></span>').text('  ' + this.label));
 
-      this.is_disabled = this.disabled(node, item);
+      var textSpan = $('<span data-test="menu-item-text"></span>').text('  ' + this.label);
+
+      url.append(textSpan);
+
       this.$el = $('<li/>')
         .addClass('menu-item' + (this.is_disabled ? ' disabled' : ''))
         .append(url);
+
+      this.applyStyle();
+    },
+
+    applyDisabledStyle: function () {
+      var span = this.$el.find('span');
+      var icon = this.$el.find('i');
+
+      span.addClass('font-gray-4');
+      span.removeClass('font-white');
+      icon.addClass('font-gray-4');
+      icon.removeClass('font-white');
+    },
+
+    applyEnabledStyle: function () {
+      var element = this.$el;
+      var span = this.$el.find('span');
+
+      span.addClass('font-white');
+      span.removeClass('font-gray-4');
+      element.find('i').addClass('font-white');
+      element.find('i').removeClass('font-gray-4');
+
+      span.mouseover(function () { element.addClass('bg-gray-5'); });
+      span.mouseout(function () { element.removeClass('bg-gray-5'); });
+    },
+
+    applyStyle: function () {
+      if (this.is_disabled) {
+        this.applyDisabledStyle();
+      } else {
+        this.applyEnabledStyle();
+      }
     },
 
     /*
@@ -84,6 +120,8 @@ function(_, S, pgAdmin, $) {
         this.$el.removeClass('disabled');
       }
 
+      this.applyStyle();
+
       this.context = {
         name: this.label,
         icon: this.icon || (this.module && this.module.type),

web/pgadmin/static/css/bootstrap.overrides.css

@@ -131,7 +131,7 @@ iframe {
 
 .navbar-inverse > li > a,
 .navbar-inverse .navbar-nav > li > a {
-    color: #CACACA;
+    color: #FFF;
 }
 
 .navbar-inverse .navbar-brand {
@@ -146,6 +146,13 @@ iframe {
     color: #009DCF;
 }
 
+.navbar-inverse .navbar-nav > .open > a,
+.navbar-inverse .navbar-nav > .active > a,
+.navbar-inverse .navbar-nav > .open > a:hover,
+.navbar-inverse .navbar-nav > .open > a:focus {
+    background: #555 none;
+}
+
 .dropdown-menu > hr {
     margin-top: 0;
     margin-bottom: 0;
@@ -165,6 +172,12 @@ iframe {
     padding-left: 0px;
 }
 
+.dropdown-menu > li > a:hover,
+.dropdown-menu > li > a:focus {
+    color: #FFFFFF;
+    background: #555 none;
+}
+
 .form-group fieldset {
     background-color: #F2F2F2;
     padding: 0px 0px 0px 5px;
@@ -377,8 +390,6 @@ button.btn:disabled {
 }
 
 .pg-prop-btn-group {
-  background-color: #D2D2D2;
-  border: 2px solid #A9A9A9;
   left: 0px;
   right: 0px;
   padding: 2px;

web/pgadmin/static/css/pgadmin.style.css

@@ -0,0 +1,106 @@
+.alert-box {
+  padding: 15px; }
+
+.alert-icon {
+  display: table-cell; }
+
+.alert-text {
+  display: table-cell;
+  padding-left: 10px; }
+
+.alert-info {
+  border-color: #84acdd; }
+
+.color-chip {
+  align-items: center;
+  border-radius: 3px;
+  box-shadow: inset 0 -3px 0 0 rgba(0, 0, 0, 0.15);
+  color: rgba(0, 0, 0, 0.65);
+  display: flex;
+  font-size: 1.25em;
+  height: 100px;
+  justify-content: center;
+  margin: 0 0 1em;
+  width: 100%; }
+
+.bg-gray-1 {
+  background-color: #f9f9f9; }
+
+.bg-gray-2 {
+  background-color: #e8e8e8; }
+
+.bg-gray-3 {
+  background-color: #cccccc; }
+
+.bg-gray-4 {
+  background-color: #888888; }
+
+.bg-gray-5 {
+  background-color: #555555; }
+
+.bg-gray-6 {
+  background-color: #333333; }
+
+.font-white {
+  color: #FFFFFF; }
+
+.font-gray-3 {
+  color: #cccccc; }
+
+.font-gray-4 {
+  color: #888888; }
+
+.border-gray-3 {
+  border: 2px solid #cccccc; }
+
+.text-bold {
+  font-weight: bold; }
+
+.text-14 {
+  font-family: "Helvetica Neue";
+  font-size: 14px; }
+
+.text-13 {
+  font-family: "Helvetica Neue";
+  font-size: 13px; }
+
+.text-12 {
+  font-family: "Helvetica Neue";
+  font-size: 12px; }
+
+.text-11 {
+  font-family: "Helvetica Neue";
+  font-size: 11px; }
+
+.bg-primary-blue {
+  background-color: #2c76b4; }
+
+.bg-highlight {
+  background-color: #e7f2ff; }
+
+.bg-border {
+  background-color: #84acdd; }
+
+.bg-red-1 {
+  background-color: #f2dede; }
+
+.bg-red-2 {
+  background-color: #ecccd1; }
+
+.bg-red-3 {
+  background-color: #d0021b; }
+
+.bg-green-1 {
+  background-color: #dff0d7; }
+
+.bg-green-2 {
+  background-color: #d6eac5; }
+
+.bg-green-3 {
+  background-color: #3a773a; }
+
+.font-white {
+  color: #FFFFFF; }
+
+.opacity-5 {
+  opacity: 0.5;  }

web/pgadmin/static/css/webcabin.overrides.css

@@ -26,7 +26,7 @@
   border-bottom: 1px none;
   height: 100%;
   padding-top: 10px;
-  background-color: #E2E2E2;
+  background-color: #e8e8e8;
 }
 
 .wcFrameCenter {
@@ -266,7 +266,7 @@
 }
 
 .wcFrameTitleBar {
-  background-color: #E2E2E2;
+  background-color: #e8e8e8;
   height: 35px;
 }
 

web/pgadmin/templates/base.html

@@ -61,6 +61,7 @@
 
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.overrides.css') }}"/>
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/pgadmin.css') }}"/>
+    <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/pgadmin.style.css') }}"/>
     {% block css_link %}{% endblock %}
 
     <!-- Base template scripts -->

web/pgadmin/tools/datagrid/templates/datagrid/index.html

@@ -21,7 +21,7 @@
         <span class="sql-editor-busy-text wcLoadingLabel"></span>
     </div>
     <div class="sql-editor" data-trans-id="{{ uniqueId }}">
-        <div id="btn-toolbar" class="pg-prop-btn-group" role="toolbar" aria-label="">
+        <div id="btn-toolbar" class="pg-prop-btn-group bg-gray-2 border-gray-3" role="toolbar" aria-label="">
             <div class="btn-group" role="group" aria-label="">
                 <button id="btn-load-file" type="button" class="btn btn-default btn-load-file"
                         title="{{ _('Open File') }}">

web/pgadmin/tools/debugger/templates/debugger/direct.html

@@ -34,7 +34,7 @@ try {
 </style>
 {% endif %}
 <nav class="navbar-inverse navbar-fixed-top">
-    <div id="btn-toolbar" class="btn-toolbar pg-prop-btn-group" role="toolbar" aria-label="">
+    <div id="btn-toolbar" class="btn-toolbar pg-prop-btn-group bg-gray-2 border-gray-3" role="toolbar" aria-label="">
         <div class="btn-group" role="group" aria-label="">
             <button type="button" class="btn btn-default btn-step-into" title="{{ _('Step into') }}">
                 <i class="fa fa-indent"></i>

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

@@ -349,9 +349,9 @@ li {
 }
 
 #datagrid .slick-header .slick-header-column.ui-state-default {
-  color: #ffffff;
+  color: #222222;
   padding: 4px 0 4px 6px;
-  background-color: #2c76b4;
+  background-color: #e8e8e8;
   border-bottom: 1px solid black;
 }
 
@@ -432,7 +432,7 @@ input.editor-checkbox:focus {
 
 /* color the first column */
 .sr .sc:first-child {
-    background-color: #2c76b4;
+    background-color: #e8e8e8;
 }
 
 #datagrid div.slick-header.ui-state-default {

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

@@ -1718,7 +1718,7 @@ define([
             self.gridView.query_tool_obj.setOption("readOnly", 'nocursor');
             var cm = self.gridView.query_tool_obj.getWrapperElement();
             if (cm) {
-              cm.className += ' cm_disabled';
+              cm.className += ' bg-gray-1 opacity-5';
             }
             self.disable_tool_buttons(true);
             self._execute_data_query();

web/regression/javascript/browser/menu_spec.js

@@ -0,0 +1,83 @@
+/////////////////////////////////////////////////////////////
+//
+// pgAdmin 4 - PostgreSQL Tools
+//
+// Copyright (C) 2013 - 2017, The pgAdmin Development Team
+// This software is released under the PostgreSQL Licence
+//
+//////////////////////////////////////////////////////////////
+
+define(["browser/menu"
+], function () {
+  describe("MenuItem", function () {
+    var MenuItem = pgAdmin.Browser.MenuItem;
+    var menuItem;
+
+    describe("when we create a menu item", function () {
+      describe('and it is disabled', function () {
+        beforeEach(function () {
+          menuItem = new MenuItem({enable: false, icon: 'fa fa-car'});
+          menuItem.create_el({}, {});
+        });
+
+        it('should change the text color to gray', function () {
+          expect(menuItem.$el.find('span').hasClass('font-gray-4')).toBeTruthy();
+        });
+
+        it('should change the icon to gray', function () {
+          expect(menuItem.$el.find('i').hasClass('font-gray-4')).toBeTruthy();
+        });
+
+        describe('when becomes enabled', function () {
+          beforeEach(function () {
+            menuItem.enable = true;
+            menuItem.update({},{});
+          });
+
+          it('should change the text color to white', function () {
+            expect(menuItem.$el.find('span').hasClass('font-gray-4')).toBeFalsy();
+            expect(menuItem.$el.find('span').hasClass('font-white')).toBeTruthy();
+          });
+
+          it('should change the icon color to white', function () {
+            expect(menuItem.$el.find('i').hasClass('font-gray-4')).toBeFalsy();
+            expect(menuItem.$el.find('i').hasClass('font-white')).toBeTruthy();
+          });
+        });
+      });
+
+      describe('and it is enabled', function () {
+        beforeEach(function () {
+          menuItem = new MenuItem({enable: true, icon: 'fa fa-car'});
+          menuItem.create_el({}, {});
+        });
+
+        it('should change the text color to white', function () {
+          expect(menuItem.$el.find('span').hasClass('font-white')).toBeTruthy();
+        });
+
+        it('should change the icon to white', function () {
+          expect(menuItem.$el.find('i').hasClass('font-white')).toBeTruthy();
+        });
+
+        describe('when becomes disabled', function () {
+          beforeEach(function () {
+            menuItem.enable = false;
+            menuItem.update({},{});
+          });
+
+          it('should change the text color to gray', function () {
+            expect(menuItem.$el.find('span').hasClass('font-gray-4')).toBeTruthy();
+            expect(menuItem.$el.find('span').hasClass('font-white')).toBeFalsy();
+          });
+
+          it('should change the icon color to gray', function () {
+            expect(menuItem.$el.find('i').hasClass('font-gray-4')).toBeTruthy();
+            expect(menuItem.$el.find('i').hasClass('font-white')).toBeFalsy();
+          });
+        });
+      });
+    });
+
+  });
+});

web/regression/javascript/test-main.js

@@ -27,6 +27,7 @@ require.config({
   baseUrl: '/base',
 
   paths: {
+    'pgadmin': sourcesDir + 'js/pgadmin',
     'alertify': sourcesDir + 'vendor/alertifyjs/alertify',
     'jquery': sourcesDir + 'vendor/jquery/jquery-1.11.2',
     'jquery.ui': sourcesDir + 'vendor/jquery-ui/jquery-ui-1.11.3',
@@ -37,7 +38,8 @@ require.config({
     'slickgrid/slick.grid': sourcesDir + 'vendor/slickgrid/slick.grid',
     'slickgrid/slick.rowselectionmodel': sourcesDir + 'vendor/slickgrid/plugins/slick.rowselectionmodel',
     'translations': '/base/regression/javascript/fake_translations',
-    'sources': sourcesDir + 'js'
+    'sources': sourcesDir + 'js',
+    'browser': '/base/pgadmin/browser/static/js'
   },
 
   shim: {