From 0d05385585d559b13f3eb8bcec83d5c41afeab30 Mon Sep 17 00:00:00 2001 From: Shruti B Iyer Date: Wed, 7 Jun 2017 13:57:49 +0100 Subject: [PATCH] Update the styling to use the set of grays defined in the WIP style guide. --- web/karma.conf.js | 4 +- web/pgadmin/browser/static/js/menu.js | 42 ++++++- .../static/css/bootstrap.overrides.css | 17 ++- web/pgadmin/static/css/pgadmin.style.css | 106 ++++++++++++++++++ web/pgadmin/static/css/webcabin.overrides.css | 4 +- web/pgadmin/templates/base.html | 1 + .../datagrid/templates/datagrid/index.html | 2 +- .../debugger/templates/debugger/direct.html | 2 +- .../tools/sqleditor/static/css/sqleditor.css | 6 +- .../templates/sqleditor/js/sqleditor.js | 2 +- .../javascript/browser/menu_spec.js | 83 ++++++++++++++ web/regression/javascript/test-main.js | 4 +- 12 files changed, 257 insertions(+), 16 deletions(-) create mode 100644 web/pgadmin/static/css/pgadmin.style.css create mode 100644 web/regression/javascript/browser/menu_spec.js diff --git a/web/karma.conf.js b/web/karma.conf.js index 95613f77a..e7e260812 100644 --- a/web/karma.conf.js +++ b/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' ], diff --git a/web/pgadmin/browser/static/js/menu.js b/web/pgadmin/browser/static/js/menu.js index 913e074f6..d1b48811c 100644 --- a/web/pgadmin/browser/static/js/menu.js +++ b/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($('', {'class': this.icon})); } - url.append($('').text(' ' + this.label)); - this.is_disabled = this.disabled(node, item); + var textSpan = $('').text(' ' + this.label); + + url.append(textSpan); + this.$el = $('
  • ') .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), diff --git a/web/pgadmin/static/css/bootstrap.overrides.css b/web/pgadmin/static/css/bootstrap.overrides.css index fd3ed6f3f..7bf4fb873 100755 --- a/web/pgadmin/static/css/bootstrap.overrides.css +++ b/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; diff --git a/web/pgadmin/static/css/pgadmin.style.css b/web/pgadmin/static/css/pgadmin.style.css new file mode 100644 index 000000000..db1f3f5b9 --- /dev/null +++ b/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; } \ No newline at end of file diff --git a/web/pgadmin/static/css/webcabin.overrides.css b/web/pgadmin/static/css/webcabin.overrides.css index 91ae2000e..9c9b81a02 100644 --- a/web/pgadmin/static/css/webcabin.overrides.css +++ b/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; } diff --git a/web/pgadmin/templates/base.html b/web/pgadmin/templates/base.html index 375b39d79..9cbe2b9df 100755 --- a/web/pgadmin/templates/base.html +++ b/web/pgadmin/templates/base.html @@ -61,6 +61,7 @@ + {% block css_link %}{% endblock %} diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html index f098c7262..4bb38c479 100644 --- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html +++ b/web/pgadmin/tools/datagrid/templates/datagrid/index.html @@ -21,7 +21,7 @@
    -