diff --git a/web/pgadmin/browser/static/js/browser.js b/web/pgadmin/browser/static/js/browser.js index 45939b00..23d1d50e 100644 --- a/web/pgadmin/browser/static/js/browser.js +++ b/web/pgadmin/browser/static/js/browser.js @@ -136,7 +136,7 @@ define( width: 500, isCloseable: false, isPrivate: true, - content: '
' + select_object_msg + '
', + content: '
' + select_object_msg + '
', events: panelEvents }), // Reversed engineered SQL for the object @@ -157,7 +157,7 @@ define( width: 500, isCloseable: false, isPrivate: true, - content: '
' + select_object_msg + '
', + content: '
' + select_object_msg + '
', events: panelEvents }), // Dependents of the object @@ -168,7 +168,7 @@ define( width: 500, isCloseable: false, isPrivate: true, - content: '
' + select_object_msg + '
', + content: '
' + select_object_msg + '
', events: panelEvents }) }, diff --git a/web/pgadmin/dashboard/__init__.py b/web/pgadmin/dashboard/__init__.py index 8ebab16c..24cc86ef 100644 --- a/web/pgadmin/dashboard/__init__.py +++ b/web/pgadmin/dashboard/__init__.py @@ -45,10 +45,7 @@ class DashboardModule(PgAdminModule): Returns: list: the stylesheets used by this module. """ - stylesheets = [ - url_for('dashboard.static', filename='css/dashboard.css') - ] - return stylesheets + return [] def get_panels(self): return [ diff --git a/web/pgadmin/dashboard/static/css/dashboard.css b/web/pgadmin/dashboard/static/css/dashboard.css deleted file mode 100644 index 735aebf5..00000000 --- a/web/pgadmin/dashboard/static/css/dashboard.css +++ /dev/null @@ -1,90 +0,0 @@ -.dashboard-container { - padding: 15px; -} - -.dashboard-header-spacer { - padding-top: 15px; -} - -.dashboard-link { - text-align: center; -} - -.dashboard-link a { - cursor: pointer; -} - -.dashboard-icon { - color: black; -} - -.dashboard-tab-container { - border-left: 1px solid #E2E2E2; - border-right: 1px solid #E2E2E2; - border-bottom: 1px solid #E2E2E2; -} - -.dashboard-tab-panel > li > a { - padding: 0px 15px !important; -} - -.dashboard-tab { - border: 0px; - border-radius: 4px 4px 0px 0px; - margin-right: 1px; - font-size: 13px; - line-height: 25px; - margin-top: 5px; -} - -.dashboard-tab.active { - margin-top: 0px; - line-height: 30px; -} - -.dashboard-tab-btn-group { - background-color: #D2D2D2; - border: 2px solid #A9A9A9; - left: 0px; - right: 0px; - padding: 2px; -} - -.dashboard-tab-btn-group button { - padding: 5px; -} - -.dashboard-tab-btn-group > button { - margin: 2px 3px 2px 0px; - min-width: 40px; -} - -.dashboard-tab-btn-group > button:first-child { - margin-left: 3px; -} - -.dashboard-tab-btn-group > button:last-child { - margin-right: 3px; -} - -.graph-container { - margin-top: 10px; - height: 150px; -} - -.graph-error { - background-color: #E2E2E2; - padding-top: 20px -} - -.grid-error { - background-color: #E2E2E2; - padding-top: 20px; - padding-bottom: 40px; -} - -.icon-postgres:before { - height: 43px; - margin-top: 13px; - display: block; -} diff --git a/web/pgadmin/dashboard/static/js/dashboard.js b/web/pgadmin/dashboard/static/js/dashboard.js index 86ebe38a..06917256 100644 --- a/web/pgadmin/dashboard/static/js/dashboard.js +++ b/web/pgadmin/dashboard/static/js/dashboard.js @@ -1,11 +1,11 @@ define('pgadmin.dashboard', [ 'sources/url_for', 'sources/gettext', 'require', 'jquery', 'underscore', - 'pgadmin', 'backbone', 'backgrid', 'flotr2', + 'pgadmin', 'backbone', 'backgrid', 'sources/alerts/dashboard', 'flotr2', 'pgadmin.alertifyjs', 'backgrid.filter', 'pgadmin.browser', 'bootstrap', 'wcdocker' ], -function(url_for, gettext, r, $, _, pgAdmin, Backbone, Backgrid, Flotr, - alertify) { +function(url_for, gettext, r, $, _, pgAdmin, Backbone, Backgrid, AlertDashboard, + Flotr, alertify) { var wcDocker = window.wcDocker, pgBrowser = pgAdmin.Browser; @@ -327,21 +327,20 @@ function(url_for, gettext, r, $, _, pgAdmin, Backbone, Backgrid, Flotr, var err = $.parseJSON(xhr.responseText), msg = err.errormsg, cls; + var html = ""; // If we get a 428, it means the server isn't connected if (xhr.status == 428) { if (_.isUndefined(msg) || _.isNull(msg)) { msg = gettext('Please connect to the selected server to view the graph.'); } - cls = 'info'; - } else { + html = AlertDashboard.info(msg); + } else { msg = gettext('An error occurred whilst rendering the graph.'); - cls = 'danger'; + html = AlertDashboard.error(msg); } $(container).addClass('graph-error'); - $(container).html( - '' - ); + $(container).html(html); // Try again... if (container.clientHeight > 0 && container.clientWidth > 0) { @@ -447,18 +446,20 @@ function(url_for, gettext, r, $, _, pgAdmin, Backbone, Backgrid, Flotr, filter.search(); }, error: function(model, xhr, options) { - var err = $.parseJSON(xhr.responseText), + var err = $.parseJSON(xhr.responseText), msg = err.errormsg, - cls; + cls; + + var html = ""; // If we get a 428, it means the server isn't connected if (xhr.status == 428) { if (_.isUndefined(msg) || _.isNull(msg)) { msg = gettext('Please connect to the selected server to view the table.'); } - cls = 'info'; + html = AlertDashboard.info(msg); } else { msg = gettext('An error occurred whilst rendering the table.'); - cls = 'danger'; + html = AlertDashboard.error(msg); } // Replace the content with the error, if not already present. Always update the message @@ -467,9 +468,7 @@ function(url_for, gettext, r, $, _, pgAdmin, Backbone, Backgrid, Flotr, $(container).addClass('grid-error'); } - $(container).html( - '' - ); + $(container).html(html); // Try again setTimeout(function() { diff --git a/web/pgadmin/static/css/style.css b/web/pgadmin/static/css/style.css index 7d651925..6dd7e560 100644 --- a/web/pgadmin/static/css/style.css +++ b/web/pgadmin/static/css/style.css @@ -25,7 +25,6 @@ @import '../../preferences/static/css/preferences.css'; @import '../../browser/static/css/browser.css'; -@import '../../dashboard/static/css/dashboard.css'; @import '../../browser/static/css/wizard.css'; @import '../../tools/debugger/static/css/debugger.css'; @@ -34,4 +33,4 @@ @import '../../tools/sqleditor/static/css/sqleditor.css'; @import '../../misc/static/explain/css/explain.css'; @import '../../misc/bgprocess/static/css/bgprocess.css'; -@import '../../misc/static/explain/css/explain.css'; \ No newline at end of file +@import '../../misc/static/explain/css/explain.css'; diff --git a/web/pgadmin/static/js/alerts/dashboard.js b/web/pgadmin/static/js/alerts/dashboard.js new file mode 100644 index 00000000..9423fd4e --- /dev/null +++ b/web/pgadmin/static/js/alerts/dashboard.js @@ -0,0 +1,45 @@ +define([ + 'jquery', +], function ($) { + var DashboardAlert = function () { + var info = function (message) { + var html = ''; + return html; + }; + + var error = function(message) { + var html = ''; + return html; + }; + + $.extend(this, { + 'info': info, + 'error': error, + }); + }; + + return new DashboardAlert(); +}); diff --git a/web/pgadmin/static/scss/_alert.scss b/web/pgadmin/static/scss/_alert.scss index fdd4546c..212003fa 100644 --- a/web/pgadmin/static/scss/_alert.scss +++ b/web/pgadmin/static/scss/_alert.scss @@ -51,42 +51,38 @@ category: alerts ``` */ - // from bootstrap scss: -@if $enable-flex { - .media { - display: flex; - } - .media-body { - flex: 1; - } - .media-middle { - align-self: center; - } - .media-bottom { - align-self: flex-end; - } -} @else { - .media, - .media-body { - overflow: hidden; - } - .media-body { - width: 10000px; - } - .media-left, - .media-right, - .media-body { - display: inline; - vertical-align: top; - } - .media-middle { - vertical-align: middle; - } - .media-bottom { - vertical-align: bottom; - } +.media-body { + vertical-align: top; + width: initial; +} + +.media-middle { + align-self: center; +} + +.media-bottom { + align-self: flex-end; +} + +.media-body.media-middle { + display: flex; + align-items: center; + width: 100%; +} + +.alert-icon { + display: flex; + align-items: center; + color: white; + padding: 15px 15px 15px 17px; + width: 50px; + min-height: 50px; + font-size: 14px; + text-align: center; + align-self: stretch; + flex-shrink: 0; } .alert-row { @@ -103,22 +99,12 @@ category: alerts padding: 15px; } -.alert-icon { - display: inline-block; - color: white; - padding: 15px; - width: 50px; - height: 50px; - font-size: 14px; - text-align: center; -} - .success-icon { - background: #3a773a; + background: $color-green-3; } .error-icon { - background: #d0021b; + background: $color-red-3; } .info-icon { @@ -133,12 +119,21 @@ category: alerts } .alert-info { - border-color: #84acdd + border-color: $color-blue-2; + background-image: none; } -.media-body { - vertical-align: top; - width: initial; +.alert-danger { + background-image: none; +} + +.grid-error, .graph-error { + .alert-row { + align-items: center; + height: 100%; + display: flex; + justify-content: center; + } } .ajs-message { @@ -155,11 +150,12 @@ category: alerts } .alert-icon { - padding: 8px; + padding: 8px 8px 8px 10.5px; width: 35px; height: 35px; border-top-left-radius: 4px; border-bottom-left-radius: 4px; + min-height: auto; } .alert-text { @@ -167,8 +163,8 @@ category: alerts border: 1px solid $color-red-2; border-top-right-radius: 4px; border-bottom-right-radius: 4px; - padding: 7px 12px 5px 10px; - border-left: 0px; + padding: 7px 12px 6px 10px; + border-left: none; } .error-in-footer { @@ -193,7 +189,17 @@ category: alerts height: 35px; .alert-text { - border: 0px; + border: none; } } } + +//Internet Explorer specific CSS +@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { + .alert-danger { + width: 90%; + } + .alert-info { + width: 90%; + } +} diff --git a/web/pgadmin/static/scss/_othercolors.scss b/web/pgadmin/static/scss/_othercolors.scss index 9f6fbcda..b284346b 100644 --- a/web/pgadmin/static/scss/_othercolors.scss +++ b/web/pgadmin/static/scss/_othercolors.scss @@ -79,10 +79,12 @@ These colors should be used to highlight hover options in dropdown menus and cat width: 100%; } +$color-blue-2: #84acdd; $color-red-1: #f2dede; $color-red-2: #de8585; $color-red-3: #d0021b; $color-green-2: #a2c189; +$color-green-3: #3a773a; .bg-white-1 { background-color: #ffffff; @@ -93,7 +95,7 @@ $color-green-2: #a2c189; } .bg-blue-2 { - background-color: #84acdd; + background-color: $color-blue-2; } .bg-red-1 { @@ -117,7 +119,7 @@ $color-green-2: #a2c189; } .bg-green-3 { - background-color: #3a773a; + background-color: $color-green-3; } .border-blue-1 { @@ -125,7 +127,7 @@ $color-green-2: #a2c189; } .border-blue-2 { - border-color: #84acdd; + border-color: $color-blue-2; } .border-red-1 { @@ -149,7 +151,7 @@ $color-green-2: #a2c189; } .border-green-3 { - border-color: #3a773a; + border-color: $color-green-3; } .font-red-3 { @@ -157,7 +159,7 @@ $color-green-2: #a2c189; } .font-green-3 { - color: #3a773a; + color: $color-green-3; } .font-white { diff --git a/web/pgadmin/static/scss/dashboard/_dashboard.scss b/web/pgadmin/static/scss/dashboard/_dashboard.scss new file mode 100644 index 00000000..16c30939 --- /dev/null +++ b/web/pgadmin/static/scss/dashboard/_dashboard.scss @@ -0,0 +1,84 @@ +.dashboard-container { + padding: 15px; +} + +.dashboard-header-spacer { + padding-top: 15px; +} + +.dashboard-link { + text-align: center; +} + +.dashboard-link a { + cursor: pointer; +} + +.dashboard-icon { + color: black; +} + +.dashboard-tab-container { + border-left: 1px solid $color-gray-2; + border-right: 1px solid $color-gray-2; + border-bottom: 1px solid $color-gray-2; +} + +.dashboard-tab-panel > li > a { + padding: 0px 15px !important; +} + +.dashboard-tab { + border: 0px; + border-radius: 4px 4px 0px 0px; + margin-right: 1px; + font-size: 13px; + line-height: 25px; + margin-top: 5px; +} + +.dashboard-tab.active { + margin-top: 0px; + line-height: 30px; +} + +.dashboard-tab-btn-group { + background-color: $color-gray-3; + border: 1px solid $color-gray-4; + left: 0px; + right: 0px; + padding: 2px; +} + +.dashboard-tab-btn-group button { + padding: 5px; +} + +.dashboard-tab-btn-group > button { + margin: 2px 3px 2px 0px; + min-width: 40px; +} + +.dashboard-tab-btn-group > button:first-child { + margin-left: 3px; +} + +.dashboard-tab-btn-group > button:last-child { + margin-right: 3px; +} + +.graph-container { + margin-top: 10px; + height: 150px; +} + +.graph-error { + background-color: $color-gray-2; + padding-top: 20px +} + +.grid-error { + background-color: $color-gray-2; + padding-top: 47px; + padding-bottom: 31px; +} diff --git a/web/pgadmin/static/scss/pgadmin.scss b/web/pgadmin/static/scss/pgadmin.scss index 42f04d2a..13968a2b 100644 --- a/web/pgadmin/static/scss/pgadmin.scss +++ b/web/pgadmin/static/scss/pgadmin.scss @@ -18,3 +18,5 @@ $enable-flex: true; @import 'alertify.overrides'; @import 'backform.overrides'; @import 'sqleditor/history'; + +@import 'dashboard/dashboard'; diff --git a/web/regression/javascript/alerts/alertify_wrapper_spec.js b/web/regression/javascript/alerts/alertify_wrapper_spec.js deleted file mode 100644 index 0701b1cc..00000000 --- a/web/regression/javascript/alerts/alertify_wrapper_spec.js +++ /dev/null @@ -1,37 +0,0 @@ -////////////////////////////////////////////////////////////////////////// -// -// pgAdmin 4 - PostgreSQL Tools -// -// Copyright (C) 2013 - 2017, The pgAdmin Development Team -// This software is released under the PostgreSQL Licence -// -////////////////////////////////////////////////////////////////////////// -import alertify from 'pgadmin.alertifyjs'; - -describe('alertify_wrapper', function () { - describe('success', function () { - it('calls the success function from alertify and adds the checkmark to the element', function () { - spyOn(alertify, 'orig_success'); - - alertify.success('Yay, congrats!', 1); - - var calledWithMessage = alertify.orig_success.calls.mostRecent().args[0]; - - expect(calledWithMessage).toContain('Yay, congrats!'); - expect(calledWithMessage).toContain('class="fa fa-check"'); - }); - }); - - describe('error', function () { - it('calls the error function from alertify and adds the warning symbol to the element', function () { - spyOn(alertify, 'orig_error'); - - alertify.error('bad, very bad', 1); - - var calledWithMessage = alertify.orig_error.calls.mostRecent().args[0]; - - expect(calledWithMessage).toContain('bad, very bad'); - expect(calledWithMessage).toContain('class="fa fa-exclamation-triangle"'); - }); - }); -});