public inbox for [email protected]help / color / mirror / Atom feed
[pgAdmin4][PATCH] Consolidating gray colors in the application 11+ messages / 6 participants [nested] [flat]
* [pgAdmin4][PATCH] Consolidating gray colors in the application @ 2017-06-05 15:52 Shruti B Iyer <[email protected]> 0 siblings, 1 reply; 11+ messages in thread From: Shruti B Iyer @ 2017-06-05 15:52 UTC (permalink / raw) To: pgadmin-hackers; +Cc: Matthew Kleiman <[email protected]> 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 ^ permalink raw reply [nested|flat] 11+ messages in thread
* Re: [pgAdmin4][PATCH] Consolidating gray colors in the application @ 2017-06-07 12:58 Dave Page <[email protected]> parent: Shruti B Iyer <[email protected]> 0 siblings, 1 reply; 11+ messages in thread From: Dave Page @ 2017-06-07 12:58 UTC (permalink / raw) To: Shruti B Iyer <[email protected]>; +Cc: pgadmin-hackers; Matthew Kleiman <[email protected]> Thanks, applied. I removed the doc comments from the CSS for now as we don't have minimisation for that yet (and one of them seemed to be garbage). On Mon, Jun 5, 2017 at 4:52 PM, Shruti B Iyer <[email protected]> wrote: > 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 > -- Dave Page Blog: http://pgsnake.blogspot.com Twitter: @pgsnake EnterpriseDB UK: http://www.enterprisedb.com The Enterprise PostgreSQL Company -- Sent via pgadmin-hackers mailing list ([email protected]) To make changes to your subscription: http://www.postgresql.org/mailpref/pgadmin-hackers ^ permalink raw reply [nested|flat] 11+ messages in thread
* Re: [pgAdmin4][PATCH] Consolidating gray colors in the application @ 2017-06-07 13:22 Surinder Kumar <[email protected]> parent: Dave Page <[email protected]> 0 siblings, 1 reply; 11+ messages in thread From: Surinder Kumar @ 2017-06-07 13:22 UTC (permalink / raw) To: Dave Page <[email protected]>; +Cc: Shruti B Iyer <[email protected]>; pgadmin-hackers; Matthew Kleiman <[email protected]> Hi With the latest pull, I found: The header color of Properties panel disappears and background color of footer area in Edit Properties panel is changed. On Wed, Jun 7, 2017 at 6:28 PM, Dave Page <[email protected]> wrote: > Thanks, applied. I removed the doc comments from the CSS for now as we > don't have minimisation for that yet (and one of them seemed to be > garbage). > > On Mon, Jun 5, 2017 at 4:52 PM, Shruti B Iyer <[email protected]> wrote: > > 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 > > > > > > -- > Dave Page > Blog: http://pgsnake.blogspot.com > Twitter: @pgsnake > > EnterpriseDB UK: http://www.enterprisedb.com > The Enterprise PostgreSQL Company > > > -- > Sent via pgadmin-hackers mailing list ([email protected]) > To make changes to your subscription: > http://www.postgresql.org/mailpref/pgadmin-hackers > ^ permalink raw reply [nested|flat] 11+ messages in thread
* Re: [pgAdmin4][PATCH] Consolidating gray colors in the application @ 2017-06-07 13:24 Dave Page <[email protected]> parent: Surinder Kumar <[email protected]> 0 siblings, 1 reply; 11+ messages in thread From: Dave Page @ 2017-06-07 13:24 UTC (permalink / raw) To: Surinder Kumar <[email protected]>; +Cc: Shruti B Iyer <[email protected]>; pgadmin-hackers; Matthew Kleiman <[email protected]> On Wed, Jun 7, 2017 at 2:22 PM, Surinder Kumar <[email protected]> wrote: > Hi > > With the latest pull, I found: > The header color of Properties panel disappears and background color of > footer area in Edit Properties panel is changed. Oh, I missed that :-(. Can you come up with a quick fix using the new classes? -- Dave Page Blog: http://pgsnake.blogspot.com Twitter: @pgsnake EnterpriseDB UK: http://www.enterprisedb.com The Enterprise PostgreSQL Company -- Sent via pgadmin-hackers mailing list ([email protected]) To make changes to your subscription: http://www.postgresql.org/mailpref/pgadmin-hackers ^ permalink raw reply [nested|flat] 11+ messages in thread
* Re: [pgAdmin4][PATCH] Consolidating gray colors in the application @ 2017-06-07 13:28 Surinder Kumar <[email protected]> parent: Dave Page <[email protected]> 0 siblings, 1 reply; 11+ messages in thread From: Surinder Kumar @ 2017-06-07 13:28 UTC (permalink / raw) To: Dave Page <[email protected]>; +Cc: Shruti B Iyer <[email protected]>; pgadmin-hackers; Matthew Kleiman <[email protected]> Sure I will send. On Wed, Jun 7, 2017 at 6:54 PM, Dave Page <[email protected]> wrote: > On Wed, Jun 7, 2017 at 2:22 PM, Surinder Kumar > <[email protected]> wrote: > > Hi > > > > With the latest pull, I found: > > The header color of Properties panel disappears and background color of > > footer area in Edit Properties panel is changed. > > Oh, I missed that :-(. Can you come up with a quick fix using the new > classes? > > -- > Dave Page > Blog: http://pgsnake.blogspot.com > Twitter: @pgsnake > > EnterpriseDB UK: http://www.enterprisedb.com > The Enterprise PostgreSQL Company > ^ permalink raw reply [nested|flat] 11+ messages in thread
* Re: [pgAdmin4][PATCH] Consolidating gray colors in the application @ 2017-06-07 13:29 Robert Eckhardt <[email protected]> parent: Surinder Kumar <[email protected]> 0 siblings, 1 reply; 11+ messages in thread From: Robert Eckhardt @ 2017-06-07 13:29 UTC (permalink / raw) To: Surinder Kumar <[email protected]>; +Cc: Dave Page <[email protected]>; Shruti B Iyer <[email protected]>; pgadmin-hackers; Matthew Kleiman <[email protected]> Thank you. -- Rob On Wed, Jun 7, 2017 at 9:28 AM, Surinder Kumar < [email protected]> wrote: > Sure I will send. > > On Wed, Jun 7, 2017 at 6:54 PM, Dave Page <[email protected]> wrote: > >> On Wed, Jun 7, 2017 at 2:22 PM, Surinder Kumar >> <[email protected]> wrote: >> > Hi >> > >> > With the latest pull, I found: >> > The header color of Properties panel disappears and background color of >> > footer area in Edit Properties panel is changed. >> >> Oh, I missed that :-(. Can you come up with a quick fix using the new >> classes? >> >> -- >> Dave Page >> Blog: http://pgsnake.blogspot.com >> Twitter: @pgsnake >> >> EnterpriseDB UK: http://www.enterprisedb.com >> The Enterprise PostgreSQL Company >> > > ^ permalink raw reply [nested|flat] 11+ messages in thread
* Re: [pgAdmin4][PATCH] Consolidating gray colors in the application @ 2017-06-07 14:48 Surinder Kumar <[email protected]> parent: Robert Eckhardt <[email protected]> 0 siblings, 1 reply; 11+ messages in thread From: Surinder Kumar @ 2017-06-07 14:48 UTC (permalink / raw) To: Robert Eckhardt <[email protected]>; +Cc: Dave Page <[email protected]>; Shruti B Iyer <[email protected]>; pgadmin-hackers; Matthew Kleiman <[email protected]> Hi I have used classes 'bg-gray-2 border-gray-3' for styling header and footer of properties panel which are also used in other places. Please find attached patch. On Wed, Jun 7, 2017 at 6:59 PM, Robert Eckhardt <[email protected]> wrote: > Thank you. > > -- Rob > > On Wed, Jun 7, 2017 at 9:28 AM, Surinder Kumar < > [email protected]> wrote: > >> Sure I will send. >> >> On Wed, Jun 7, 2017 at 6:54 PM, Dave Page <[email protected]> wrote: >> >>> On Wed, Jun 7, 2017 at 2:22 PM, Surinder Kumar >>> <[email protected]> wrote: >>> > Hi >>> > >>> > With the latest pull, I found: >>> > The header color of Properties panel disappears and background color of >>> > footer area in Edit Properties panel is changed. >>> >>> Oh, I missed that :-(. Can you come up with a quick fix using the new >>> classes? >>> >>> -- >>> Dave Page >>> Blog: http://pgsnake.blogspot.com >>> Twitter: @pgsnake >>> >>> EnterpriseDB UK: http://www.enterprisedb.com >>> The Enterprise PostgreSQL Company >>> >> >> > -- 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] apply_color_to_properties_header_footer_panel.patch (876B, 3-apply_color_to_properties_header_footer_panel.patch) download | inline diff: diff --git a/web/pgadmin/browser/templates/browser/js/node.js b/web/pgadmin/browser/templates/browser/js/node.js index 4166911..14a3383 100644 --- a/web/pgadmin/browser/templates/browser/js/node.js +++ b/web/pgadmin/browser/templates/browser/js/node.js @@ -1003,7 +1003,7 @@ define([ } }); - createButtons(buttons, 'header', 'pg-prop-btn-group-above'); + createButtons(buttons, 'header', 'pg-prop-btn-group-above bg-gray-2 border-gray-3'); } j.append(content); }.bind(panel), @@ -1243,7 +1243,7 @@ define([ setTimeout(function() { editFunc.call(); }, 0); }); } - }],'footer' ,'pg-prop-btn-group-below'); + }],'footer' ,'pg-prop-btn-group-below bg-gray-2 border-gray-3'); }; // Create status bar. ^ permalink raw reply [nested|flat] 11+ messages in thread
* Re: [pgAdmin4][PATCH] Consolidating gray colors in the application @ 2017-06-07 15:31 Dave Page <[email protected]> parent: Surinder Kumar <[email protected]> 0 siblings, 1 reply; 11+ messages in thread From: Dave Page @ 2017-06-07 15:31 UTC (permalink / raw) To: Surinder Kumar <[email protected]>; +Cc: Robert Eckhardt <[email protected]>; Shruti B Iyer <[email protected]>; pgadmin-hackers; Matthew Kleiman <[email protected]> Thanks, applied. On Wed, Jun 7, 2017 at 3:48 PM, Surinder Kumar <[email protected]> wrote: > Hi > > I have used classes 'bg-gray-2 border-gray-3' for styling header and footer > of properties panel which are also used in other places. > > Please find attached patch. > > > On Wed, Jun 7, 2017 at 6:59 PM, Robert Eckhardt <[email protected]> > wrote: >> >> Thank you. >> >> -- Rob >> >> On Wed, Jun 7, 2017 at 9:28 AM, Surinder Kumar >> <[email protected]> wrote: >>> >>> Sure I will send. >>> >>> On Wed, Jun 7, 2017 at 6:54 PM, Dave Page <[email protected]> wrote: >>>> >>>> On Wed, Jun 7, 2017 at 2:22 PM, Surinder Kumar >>>> <[email protected]> wrote: >>>> > Hi >>>> > >>>> > With the latest pull, I found: >>>> > The header color of Properties panel disappears and background color >>>> > of >>>> > footer area in Edit Properties panel is changed. >>>> >>>> Oh, I missed that :-(. Can you come up with a quick fix using the new >>>> classes? >>>> >>>> -- >>>> Dave Page >>>> Blog: http://pgsnake.blogspot.com >>>> Twitter: @pgsnake >>>> >>>> EnterpriseDB UK: http://www.enterprisedb.com >>>> The Enterprise PostgreSQL Company >>> >>> >> > -- Dave Page Blog: http://pgsnake.blogspot.com Twitter: @pgsnake EnterpriseDB UK: http://www.enterprisedb.com The Enterprise PostgreSQL Company -- Sent via pgadmin-hackers mailing list ([email protected]) To make changes to your subscription: http://www.postgresql.org/mailpref/pgadmin-hackers ^ permalink raw reply [nested|flat] 11+ messages in thread
* Re: [pgAdmin4][PATCH] Consolidating gray colors in the application @ 2017-06-08 05:18 Murtuza Zabuawala <[email protected]> parent: Dave Page <[email protected]> 0 siblings, 1 reply; 11+ messages in thread From: Murtuza Zabuawala @ 2017-06-08 05:18 UTC (permalink / raw) To: Dave Page <[email protected]>; +Cc: Surinder Kumar <[email protected]>; Robert Eckhardt <[email protected]>; Shruti B Iyer <[email protected]>; pgadmin-hackers; Matthew Kleiman <[email protected]> Hello, I think we could have use some different grey colour shade for SlickGrid headers from wcDocker panel, It does not look bad but as a end user I'm not able to differentiate between them now, please refer screenshot attached. Is this expected with new design style? [image: Inline image 1] -- Regards, Murtuza Zabuawala EnterpriseDB: http://www.enterprisedb.com The Enterprise PostgreSQL Company On Wed, Jun 7, 2017 at 9:01 PM, Dave Page <[email protected]> wrote: > Thanks, applied. > > On Wed, Jun 7, 2017 at 3:48 PM, Surinder Kumar > <[email protected]> wrote: > > Hi > > > > I have used classes 'bg-gray-2 border-gray-3' for styling header and > footer > > of properties panel which are also used in other places. > > > > Please find attached patch. > > > > > > On Wed, Jun 7, 2017 at 6:59 PM, Robert Eckhardt <[email protected]> > > wrote: > >> > >> Thank you. > >> > >> -- Rob > >> > >> On Wed, Jun 7, 2017 at 9:28 AM, Surinder Kumar > >> <[email protected]> wrote: > >>> > >>> Sure I will send. > >>> > >>> On Wed, Jun 7, 2017 at 6:54 PM, Dave Page <[email protected]> wrote: > >>>> > >>>> On Wed, Jun 7, 2017 at 2:22 PM, Surinder Kumar > >>>> <[email protected]> wrote: > >>>> > Hi > >>>> > > >>>> > With the latest pull, I found: > >>>> > The header color of Properties panel disappears and background color > >>>> > of > >>>> > footer area in Edit Properties panel is changed. > >>>> > >>>> Oh, I missed that :-(. Can you come up with a quick fix using the new > >>>> classes? > >>>> > >>>> -- > >>>> Dave Page > >>>> Blog: http://pgsnake.blogspot.com > >>>> Twitter: @pgsnake > >>>> > >>>> EnterpriseDB UK: http://www.enterprisedb.com > >>>> The Enterprise PostgreSQL Company > >>> > >>> > >> > > > > > > -- > Dave Page > Blog: http://pgsnake.blogspot.com > Twitter: @pgsnake > > EnterpriseDB UK: http://www.enterprisedb.com > The Enterprise PostgreSQL Company > > > -- > Sent via pgadmin-hackers mailing list ([email protected]) > To make changes to your subscription: > http://www.postgresql.org/mailpref/pgadmin-hackers > -- Sent via pgadmin-hackers mailing list ([email protected]) To make changes to your subscription: http://www.postgresql.org/mailpref/pgadmin-hackers Attachments: [image/png] image.png (57.4K, 3-image.png) download | view image [image/png] Screen Shot 2017-06-08 at 10.36.29 am.png (61.2K, 4-Screen%20Shot%202017-06-08%20at%2010.36.29%20am.png) download | view image ^ permalink raw reply [nested|flat] 11+ messages in thread
* Re: [pgAdmin4][PATCH] Consolidating gray colors in the application @ 2017-06-08 13:28 Shirley Wang <[email protected]> parent: Murtuza Zabuawala <[email protected]> 0 siblings, 1 reply; 11+ messages in thread From: Shirley Wang @ 2017-06-08 13:28 UTC (permalink / raw) To: Murtuza Zabuawala <[email protected]>; Dave Page <[email protected]>; +Cc: Surinder Kumar <[email protected]>; Robert Eckhardt <[email protected]>; Shruti B Iyer <[email protected]>; pgadmin-hackers; Matthew Kleiman <[email protected]> Hi Murtuza, This was before we had checkboxes removed and added column and row highlighting. Try looking at this now with the query results grid updates and let me know what you think. On Thu, Jun 8, 2017 at 1:19 AM Murtuza Zabuawala < [email protected]> wrote: > Hello, > > I think we could have use some different grey colour shade for SlickGrid > headers from wcDocker panel, It does not look bad but as a end user I'm not > able to differentiate between them now, please refer screenshot attached. > > Is this expected with new design style? > > [image: Inline image 1] > > > -- > Regards, > Murtuza Zabuawala > EnterpriseDB: http://www.enterprisedb.com > The Enterprise PostgreSQL Company > > On Wed, Jun 7, 2017 at 9:01 PM, Dave Page <[email protected]> wrote: > >> Thanks, applied. >> >> On Wed, Jun 7, 2017 at 3:48 PM, Surinder Kumar >> <[email protected]> wrote: >> > Hi >> > >> > I have used classes 'bg-gray-2 border-gray-3' for styling header and >> footer >> > of properties panel which are also used in other places. >> > >> > Please find attached patch. >> > >> > >> > On Wed, Jun 7, 2017 at 6:59 PM, Robert Eckhardt <[email protected]> >> > wrote: >> >> >> >> Thank you. >> >> >> >> -- Rob >> >> >> >> On Wed, Jun 7, 2017 at 9:28 AM, Surinder Kumar >> >> <[email protected]> wrote: >> >>> >> >>> Sure I will send. >> >>> >> >>> On Wed, Jun 7, 2017 at 6:54 PM, Dave Page <[email protected]> wrote: >> >>>> >> >>>> On Wed, Jun 7, 2017 at 2:22 PM, Surinder Kumar >> >>>> <[email protected]> wrote: >> >>>> > Hi >> >>>> > >> >>>> > With the latest pull, I found: >> >>>> > The header color of Properties panel disappears and background >> color >> >>>> > of >> >>>> > footer area in Edit Properties panel is changed. >> >>>> >> >>>> Oh, I missed that :-(. Can you come up with a quick fix using the new >> >>>> classes? >> >>>> >> >>>> -- >> >>>> Dave Page >> >>>> Blog: http://pgsnake.blogspot.com >> >>>> Twitter: @pgsnake >> >>>> >> >>>> EnterpriseDB UK: http://www.enterprisedb.com >> >>>> The Enterprise PostgreSQL Company >> >>> >> >>> >> >> >> > >> >> >> >> -- >> Dave Page >> Blog: http://pgsnake.blogspot.com >> Twitter: @pgsnake >> >> EnterpriseDB UK: http://www.enterprisedb.com >> The Enterprise PostgreSQL Company >> >> >> -- >> Sent via pgadmin-hackers mailing list ([email protected]) >> To make changes to your subscription: >> http://www.postgresql.org/mailpref/pgadmin-hackers >> > > > -- > Sent via pgadmin-hackers mailing list ([email protected]) > To make changes to your subscription: > http://www.postgresql.org/mailpref/pgadmin-hackers > Attachments: [image/png] image.png (57.4K, 3-image.png) download | view image ^ permalink raw reply [nested|flat] 11+ messages in thread
* Re: [pgAdmin4][PATCH] Consolidating gray colors in the application @ 2017-06-09 04:59 Murtuza Zabuawala <[email protected]> parent: Shirley Wang <[email protected]> 0 siblings, 0 replies; 11+ messages in thread From: Murtuza Zabuawala @ 2017-06-09 04:59 UTC (permalink / raw) To: Shirley Wang <[email protected]>; +Cc: Dave Page <[email protected]>; Surinder Kumar <[email protected]>; Robert Eckhardt <[email protected]>; Shruti B Iyer <[email protected]>; pgadmin-hackers; Matthew Kleiman <[email protected]> Hi Shirley, The new UI looks awesome :) -- Regards, Murtuza Zabuawala EnterpriseDB: http://www.enterprisedb.com The Enterprise PostgreSQL Company On Thu, Jun 8, 2017 at 6:58 PM, Shirley Wang <[email protected]> wrote: > Hi Murtuza, > > This was before we had checkboxes removed and added column and row > highlighting. Try looking at this now with the query results grid updates > and let me know what you think. > > > On Thu, Jun 8, 2017 at 1:19 AM Murtuza Zabuawala <murtuza.zabuawala@ > enterprisedb.com> wrote: > >> Hello, >> >> I think we could have use some different grey colour shade for SlickGrid >> headers from wcDocker panel, It does not look bad but as a end user I'm not >> able to differentiate between them now, please refer screenshot attached. >> >> Is this expected with new design style? >> >> [image: Inline image 1] >> >> >> -- >> Regards, >> Murtuza Zabuawala >> EnterpriseDB: http://www.enterprisedb.com >> The Enterprise PostgreSQL Company >> >> On Wed, Jun 7, 2017 at 9:01 PM, Dave Page <[email protected]> wrote: >> >>> Thanks, applied. >>> >>> On Wed, Jun 7, 2017 at 3:48 PM, Surinder Kumar >>> <[email protected]> wrote: >>> > Hi >>> > >>> > I have used classes 'bg-gray-2 border-gray-3' for styling header and >>> footer >>> > of properties panel which are also used in other places. >>> > >>> > Please find attached patch. >>> > >>> > >>> > On Wed, Jun 7, 2017 at 6:59 PM, Robert Eckhardt <[email protected]> >>> > wrote: >>> >> >>> >> Thank you. >>> >> >>> >> -- Rob >>> >> >>> >> On Wed, Jun 7, 2017 at 9:28 AM, Surinder Kumar >>> >> <[email protected]> wrote: >>> >>> >>> >>> Sure I will send. >>> >>> >>> >>> On Wed, Jun 7, 2017 at 6:54 PM, Dave Page <[email protected]> wrote: >>> >>>> >>> >>>> On Wed, Jun 7, 2017 at 2:22 PM, Surinder Kumar >>> >>>> <[email protected]> wrote: >>> >>>> > Hi >>> >>>> > >>> >>>> > With the latest pull, I found: >>> >>>> > The header color of Properties panel disappears and background >>> color >>> >>>> > of >>> >>>> > footer area in Edit Properties panel is changed. >>> >>>> >>> >>>> Oh, I missed that :-(. Can you come up with a quick fix using the >>> new >>> >>>> classes? >>> >>>> >>> >>>> -- >>> >>>> Dave Page >>> >>>> Blog: http://pgsnake.blogspot.com >>> >>>> Twitter: @pgsnake >>> >>>> >>> >>>> EnterpriseDB UK: http://www.enterprisedb.com >>> >>>> The Enterprise PostgreSQL Company >>> >>> >>> >>> >>> >> >>> > >>> >>> >>> >>> -- >>> Dave Page >>> Blog: http://pgsnake.blogspot.com >>> Twitter: @pgsnake >>> >>> EnterpriseDB UK: http://www.enterprisedb.com >>> The Enterprise PostgreSQL Company >>> >>> >>> -- >>> Sent via pgadmin-hackers mailing list ([email protected]) >>> To make changes to your subscription: >>> http://www.postgresql.org/mailpref/pgadmin-hackers >>> >> >> >> -- >> Sent via pgadmin-hackers mailing list ([email protected]) >> To make changes to your subscription: >> http://www.postgresql.org/mailpref/pgadmin-hackers >> > Attachments: [image/png] image.png (57.4K, 3-image.png) download | view image ^ permalink raw reply [nested|flat] 11+ messages in thread
end of thread, other threads:[~2017-06-09 04:59 UTC | newest] Thread overview: 11+ messages (download: mbox mbox.gz follow: Atom feed) -- links below jump to the message on this page -- 2017-06-05 15:52 [pgAdmin4][PATCH] Consolidating gray colors in the application Shruti B Iyer <[email protected]> 2017-06-07 12:58 ` Dave Page <[email protected]> 2017-06-07 13:22 ` Surinder Kumar <[email protected]> 2017-06-07 13:24 ` Dave Page <[email protected]> 2017-06-07 13:28 ` Surinder Kumar <[email protected]> 2017-06-07 13:29 ` Robert Eckhardt <[email protected]> 2017-06-07 14:48 ` Surinder Kumar <[email protected]> 2017-06-07 15:31 ` Dave Page <[email protected]> 2017-06-08 05:18 ` Murtuza Zabuawala <[email protected]> 2017-06-08 13:28 ` Shirley Wang <[email protected]> 2017-06-09 04:59 ` Murtuza Zabuawala <[email protected]>
This inbox is served by agora; see mirroring instructions for how to clone and mirror all data and code used for this inbox