public inbox for [email protected]
help / color / mirror / Atom feedFrom: Shruti B Iyer <[email protected]>
To: pgadmin-hackers <[email protected]>
Cc: Matthew Kleiman <[email protected]>
Subject: [pgAdmin4][PATCH] Consolidating gray colors in the application
Date: Mon, 05 Jun 2017 15:52:46 +0000
Message-ID: <CACrUwh+GDxb0mMtJkF-EoNu6L8hzAgN4qUp5fEn_sdWH9i3KeQ@mail.gmail.com> (raw)
List-Unsubscribe: <mailto:[email protected]?body=unsub%20pgadmin-hackers>
Hi Hackers
Attached are two patches for styling improvements.
1-add-style-guide.patch contains the initial css from the style guide. As
we make further style changes, this file will be updated.
2-change-grays.patch changes the gray color elements in the app to the ones
in the new style guide.
Thanks,
Shruti and Matt
--
Sent via pgadmin-hackers mailing list ([email protected])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers
Attachments:
[application/octet-stream] 2-change-grays.patch (12.2K, 3-2-change-grays.patch)
download | inline diff:
diff --git a/web/karma.conf.js b/web/karma.conf.js
index 95613f77..e7e26081 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 913e074f..d1b48811 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($('<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),
diff --git a/web/pgadmin/static/css/bootstrap.overrides.css b/web/pgadmin/static/css/bootstrap.overrides.css
index fd3ed6f3..7bf4fb87 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/webcabin.overrides.css b/web/pgadmin/static/css/webcabin.overrides.css
index 91ae2000..9c9b81a0 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 375b39d7..9cbe2b9d 100755
--- a/web/pgadmin/templates/base.html
+++ b/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 -->
diff --git a/web/pgadmin/tools/datagrid/templates/datagrid/index.html b/web/pgadmin/tools/datagrid/templates/datagrid/index.html
index f098c726..4bb38c47 100644
--- a/web/pgadmin/tools/datagrid/templates/datagrid/index.html
+++ b/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') }}">
diff --git a/web/pgadmin/tools/debugger/templates/debugger/direct.html b/web/pgadmin/tools/debugger/templates/debugger/direct.html
index d82df0bb..3e7bf2be 100644
--- a/web/pgadmin/tools/debugger/templates/debugger/direct.html
+++ b/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>
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index 54e3688d..76654d33 100644
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/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 {
diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
index 597c4367..dcd4226f 100644
--- a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
@@ -1716,7 +1716,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();
diff --git a/web/regression/javascript/browser/menu_spec.js b/web/regression/javascript/browser/menu_spec.js
new file mode 100644
index 00000000..09f136fb
--- /dev/null
+++ b/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();
+ });
+ });
+ });
+ });
+
+ });
+});
diff --git a/web/regression/javascript/test-main.js b/web/regression/javascript/test-main.js
index fe28a5f8..421bb178 100644
--- a/web/regression/javascript/test-main.js
+++ b/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: {
[application/octet-stream] 1-add-style-guide.patch (7.1K, 4-1-add-style-guide.patch)
download | inline diff:
diff --git a/web/pgadmin/static/css/pgadmin.style.css b/web/pgadmin/static/css/pgadmin.style.css
new file mode 100644
index 00000000..355d8954
--- /dev/null
+++ b/web/pgadmin/static/css/pgadmin.style.css
@@ -0,0 +1,355 @@
+/*doc
+---
+title: Alerts
+name: alerts
+category: alerts
+---
+
+```html_example
+<div class="alert alert-success text-14 alert-box">
+ <div class="media">
+ <div class="media-body media-middle">
+ <div class="alert-icon">
+ <i class="fa fa-check" aria-hidden="true"></i>
+ </div>
+ <div class="alert-text">
+ Successfully run. Total query runtime: 32 msec. 1 row retrieved
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="alert alert-danger font-red text-14 alert-box">
+ <div class="media">
+ <div class="media-body media-middle">
+ <div class="alert-icon">
+ <i class="fa fa-exclamation-triangle" aria-hidden="true"></i>
+ </div>
+ <div class="alert-text">
+ Error retrieving properties - INTERNAL SERVER ERROR
+ </div>
+ </div>
+ </div>
+</div>
+
+<div class="alert alert-info font-blue text-14 alert-box">
+ <div class="media">
+ <div class="media-body media-middle">
+ <div class="alert-text">
+ This is a neutral message
+ </div>
+ </div>
+ </div>
+</div>
+
+
+```
+*/
+.alert-box {
+ padding: 15px; }
+
+.alert-icon {
+ display: table-cell; }
+
+.alert-text {
+ display: table-cell;
+ padding-left: 10px; }
+
+.alert-info {
+ border-color: #84acdd; }
+
+/*doc
+---
+title: Grays
+name: Grays
+category: colors
+---
+For text, avoid using black or #000 to lower the contrast between the background and text.
+
+```html_example
+<div class="row">
+ <div class="row">
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-gray-1">
+ #f9f9f9
+ </div>
+ </div>
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-gray-2">
+ #e8e8e8
+ </div>
+ </div>
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-gray-3">
+ #cccccc
+ </div>
+ </div>
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-gray-4">
+ #888888
+ </div>
+ </div>
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-gray-5 font-white">
+ #555555
+ </div>
+ </div>
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-gray-6 font-white">
+ #333333
+ </div>
+ </div>
+ </div>
+</div>
+```
+
+*/
+.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; }
+
+/*doc
+---
+title: Typography
+name: typography
+category: typography
+---
+
+Font Typography
+
+```html_example_table
+<div class="text-14">
+ Body 14 px Helvetica Neue
+</div>
+
+<div class="text-14 text-bold">
+ Body 14 px Helvetica Neue bold
+</div>
+
+<div class="text-13">
+ Body 13 px Helvetica Neue
+</div>
+
+<div class="text-13 text-bold">
+ Body 13 px Helvetica Neue bold
+</div>
+
+<div class="text-12">
+ Body 12 px Helvetica Neue
+</div>
+
+<div class="text-12 text-bold">
+ Body 12 px Helvetica Neue bold
+</div>
+
+<div class="text-11">
+ Body 11 px Helvetica Neue
+</div>
+
+<div class="text-11 text-bold">
+ Body 11 px Helvetica Neue bold
+</div>
+```
+
+*/
+.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; }
+
+/*doc
+---
+title: PGAdmin
+name: pgadmin
+category: pgadmin
+---
+Green juice vaporware echo park, craft beer lyft tattooed sustainable. Meh skateboard seitan lumbersexual typewriter, flannel art party swag gluten-free blue bottle disrupt forage tacos thundercats chillwave.
+*/
+/*doc
+---
+title: Primary blue
+name: colors-primaryblue
+category: colors
+---
+This color should be used to call attention to the main part of the app. Use sparingly.
+
+```html_example
+<div class="row">
+ <div class="row">
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-primary-blue font-white">
+ #2c76b4
+ </div>
+ </div>
+ </div>
+</div>
+
+```
+
+*/
+
+.bg-primary-blue {
+ background-color: #2c76b4; }
+
+/*doc
+---
+title: Overview
+name: colors-overview
+category: colors
+---
+
+Below are the colors for pgadmin4. To use, copy and paste the hex codes into the CSS.
+
+The current app may have more colors than what is included here. When a color is encountered in the app that is not documented here, default to replacing that color with one that is documented here.
+
+
+*/
+/*doc
+---
+title: Others
+name: z-othercolors
+category: colors
+---
+These colors should be used to highlight hover options in dropdown menus and catalog browser or to tell the user when something is right or wrong.
+
+
+```html_example
+<div class="row">
+ <div class="row">
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-highlight">
+ #e7f2ff
+ </div>
+ </div>
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-border">
+ #84acdd
+ </div>
+ </div>
+ </div>
+</div>
+<br>
+<div class="row">
+ <div class="row">
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-red-1">
+ #f2dede
+ </div>
+ </div>
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-red-2">
+ #ecccd1
+ </div>
+ </div>
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-red-3">
+ #d0021b
+ </div>
+ </div>
+ </div>
+</div>
+<br>
+<div class="row">
+ <div class="row">
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-green-1">
+ #dff0d7
+ </div>
+ </div>
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-green-2">
+ #d6eac5
+ </div>
+ </div>
+ <div class="col-xs-6 col-md-3">
+ <div class="color-chip bg-green-3">
+ #3a773a
+ </div>
+ </div>
+ </div>
+</div>
+```
+
+*/
+
+.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
view thread (11+ messages) latest in thread
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: [email protected]
Cc: [email protected], [email protected]
Subject: Re: [pgAdmin4][PATCH] Consolidating gray colors in the application
In-Reply-To: <CACrUwh+GDxb0mMtJkF-EoNu6L8hzAgN4qUp5fEn_sdWH9i3KeQ@mail.gmail.com>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox