From 5799ac14ba17dc25fbec184b3b2c6afbe37f1f74 Mon Sep 17 00:00:00 2001 From: Ashesh Vashi Date: Fri, 21 Dec 2018 17:14:55 +0530 Subject: [PATCH] Improvement in the look and feel of the whole application Changed the SCSS/CSS for the below third party libraries to adopt the new look 'n' feel: - wcDocker - Alertify dialogs, and notifications - AciTree - Bootstrap Navbar - Bootstrap Tabs - Bootstrap Drop-Down menu - Backgrid - Select2 Adopated the new the look 'n' feel for the dialogs, wizard, properties, tab panels, tabs, fieldset, subnode control, spinner control, HTML table, and other form controls. - Font is changed to Roboto - Using SCSS variables to define the look 'n' feel - Designer background images for the Login, and Forget password pages in 'web' mode - Improved the look 'n' feel for the key selection in the preferences dialog - Table classes consistency changes across the application - File Open and Save dialog list view changes Author(s): Aditya Toshniwal & Khushboo Vashi --- web/package.json | 2 +- .../static/js/fts_configuration.js | 2 +- .../databases/schemas/functions/__init__.py | 4 +- .../function => static}/css/function.css | 0 .../trigger_function/css/function.css | 3 - .../edbfunc => static}/css/edbfunc.css | 0 .../static/js/exclusion_constraint.js | 18 +- .../foreign_key/static/js/foreign_key.js | 17 +- .../schemas/tables/rules/static/css/rule.css | 7 + .../tables/rules/templates/rules/css/rule.css | 8 - .../schemas/views/static/css/view.css | 7 + .../views/templates/mview/css/mview.css | 4 - .../schemas/views/templates/view/css/view.css | 4 - .../schedules/static/js/pga_schedule.js | 3 +- .../servers/pgagent/static/css/pga_job.css | 3 + .../pgagent/templates/pga_job/css/pga_job.css | 13 - .../servers/static/css/servers.css | 4 + .../server_groups/servers/static/js/server.js | 22 +- .../servers/static/js/variable.js | 4 +- .../tablespaces/static/js/tablespace.js | 13 +- .../servers/templates/css/servers.css | 4 - web/pgadmin/browser/static/css/browser.css | 13 - web/pgadmin/browser/static/css/wizard.css | 21 +- web/pgadmin/browser/static/js/browser.js | 26 +- web/pgadmin/browser/static/js/collection.js | 16 +- web/pgadmin/browser/static/js/keyboard.js | 14 +- web/pgadmin/browser/static/js/menu.js | 28 +- web/pgadmin/browser/static/js/node.js | 53 +- web/pgadmin/browser/static/js/node.ui.js | 4 +- web/pgadmin/browser/static/js/panel.js | 15 +- web/pgadmin/browser/static/js/toolbar.js | 3 - web/pgadmin/browser/static/js/wizard.js | 58 +- web/pgadmin/browser/static/scss/_browser.scss | 43 +- web/pgadmin/browser/static/scss/_wizard.scss | 41 +- .../browser/templates/browser/css/node.css | 2 +- .../browser/templates/browser/index.html | 9 +- web/pgadmin/dashboard/__init__.py | 2 +- .../dashboard/static/css/dashboard.css | 21 +- web/pgadmin/dashboard/static/js/dashboard.js | 116 +- .../dashboard/static/scss/_dashboard.scss | 44 +- .../dashboard/database_dashboard.html | 177 +- .../templates/dashboard/server_dashboard.html | 223 ++- .../dashboard/welcome_dashboard.html | 30 +- .../feature_tests/browser_tool_bar_test.py | 23 +- .../feature_tests/file_manager_test.py | 23 +- .../feature_tests/keyboard_shortcut_test.py | 5 +- .../pg_datatype_validation_test.py | 5 +- .../pg_utilities_backup_restore_test.py | 28 +- .../pg_utilities_maintenance_test.py | 16 +- .../feature_tests/query_tool_journey_test.py | 5 +- web/pgadmin/feature_tests/query_tool_tests.py | 117 +- .../feature_tests/view_data_dml_queries.py | 16 +- .../misc/bgprocess/static/css/bgprocess.css | 11 - .../misc/bgprocess/static/js/bgprocess.js | 171 +- .../bgprocess/static/scss/_bgprocess.scss | 81 +- web/pgadmin/misc/depends/static/js/depends.js | 3 +- .../file_manager/static/css/file_manager.css | 141 +- .../file_manager/static/js/create_dialogue.js | 9 +- .../file_manager/static/js/select_dialogue.js | 19 +- .../misc/file_manager/static/js/utility.js | 77 +- .../static/scss/_file_manager.scss | 159 +- .../templates/file_manager/index.html | 95 +- .../misc/statistics/static/js/statistics.js | 3 +- .../preferences/static/css/preferences.css | 14 - .../preferences/static/js/preferences.js | 31 +- .../preferences/static/scss/_preferences.scss | 16 + web/pgadmin/static/css/pgadmin.css | 81 +- web/pgadmin/static/fonts/Roboto-Bold.ttf | Bin 0 -> 170760 bytes web/pgadmin/static/fonts/Roboto-Medium.ttf | Bin 0 -> 172064 bytes web/pgadmin/static/fonts/Roboto-Regular.ttf | Bin 0 -> 171676 bytes web/pgadmin/static/img/collapse_expand.svg | 15 + web/pgadmin/static/img/forgot_password.svg | 283 ++++ web/pgadmin/static/img/login.svg | 1 + .../static/js/alertify.pgadmin.defaults.js | 82 +- web/pgadmin/static/js/backform.pgadmin.js | 80 +- web/pgadmin/static/js/backgrid.pgadmin.js | 33 +- web/pgadmin/static/js/slickgrid/editors.js | 8 +- .../static/js/sqleditor/filter_dialog.js | 33 +- .../js/sqleditor/query_tool_preferences.js | 15 +- .../static/scss/_aci_tree.overrides.scss | 75 +- web/pgadmin/static/scss/_alert.scss | 12 +- .../static/scss/_alertify.overrides.scss | 146 +- .../static/scss/_backform.overrides.scss | 8 + .../static/scss/_backgrid.overrides.scss | 251 ++- .../static/scss/_bootstrap.overrides.scss | 228 +-- .../static/scss/_codemirror.overrides.scss | 96 +- web/pgadmin/static/scss/_pgadmin.grid.scss | 56 + web/pgadmin/static/scss/_pgadmin.style.scss | 1458 ++++------------- .../static/scss/_select2.overrides.scss | 24 +- .../static/scss/_webcabin.overrides.scss | 368 ----- .../static/scss/_webcabin.pgadmin.scss | 250 +++ web/pgadmin/static/scss/pgadmin.scss | 10 +- .../static/scss/resources/_default.style.scss | 90 +- .../scss/resources/_default.variables.scss | 211 ++- .../static/vendor/backform/backform.js | 645 ++++++++ .../templates/security/change_password.html | 43 +- .../templates/security/forgot_password.html | 9 +- .../templates/security/login_user.html | 16 +- web/pgadmin/templates/security/panel.html | 23 +- web/pgadmin/tools/backup/__init__.py | 6 +- web/pgadmin/tools/backup/static/js/backup.js | 8 +- .../backup/static/js/backup_dialog_wrapper.js | 22 +- web/pgadmin/tools/datagrid/__init__.py | 1 - .../tools/datagrid/static/js/datagrid.js | 38 +- .../datagrid/templates/datagrid/filter.html | 2 - .../datagrid/templates/datagrid/index.html | 195 ++- .../tools/debugger/static/css/debugger.css | 34 +- .../tools/debugger/static/js/debugger.js | 2 +- .../tools/debugger/static/js/debugger_ui.js | 28 +- .../tools/debugger/static/js/direct.js | 13 +- .../tools/debugger/static/scss/_debugger.scss | 8 - .../debugger/templates/debugger/direct.html | 89 +- .../grant_wizard/static/js/grant_wizard.js | 27 +- .../static/scss/_grant_wizard.scss | 31 +- .../import_export/static/js/import_export.js | 24 +- web/pgadmin/tools/maintenance/__init__.py | 10 +- .../maintenance/static/js/maintenance.js | 24 +- .../maintenance/static/scss/_maintenance.scss | 2 +- web/pgadmin/tools/restore/__init__.py | 14 +- .../tools/restore/static/js/restore.js | 8 +- .../static/js/restore_dialog_wrapper.js | 24 +- .../tools/sqleditor/static/css/sqleditor.css | 130 +- .../tools/sqleditor/static/js/sqleditor.js | 35 +- .../tools/sqleditor/static/scss/_history.scss | 42 +- .../sqleditor/static/scss/_sqleditor.scss | 130 +- .../static/css/user_management.css | 37 - .../static/js/user_management.js | 53 +- .../static/scss/_user_management.scss | 12 +- .../alerts/alertify_wrapper_spec.js | 4 +- .../backup/backup_dialog_wrapper_spec.js | 8 +- .../restore/restore_dialog_wrapper_spec.js | 8 +- web/webpack.config.js | 2 +- web/webpack.shim.js | 2 +- web/webpack.test.config.js | 1 + web/yarn.lock | 1015 +++++++++++- 135 files changed, 5030 insertions(+), 3878 deletions(-) rename web/pgadmin/browser/server_groups/servers/databases/schemas/functions/{templates/function => static}/css/function.css (100%) delete mode 100644 web/pgadmin/browser/server_groups/servers/databases/schemas/functions/templates/trigger_function/css/function.css rename web/pgadmin/browser/server_groups/servers/databases/schemas/packages/edbfuncs/{templates/edbfunc => static}/css/edbfunc.css (100%) create mode 100644 web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/static/css/rule.css create mode 100644 web/pgadmin/browser/server_groups/servers/databases/schemas/views/static/css/view.css create mode 100644 web/pgadmin/browser/server_groups/servers/pgagent/static/css/pga_job.css create mode 100755 web/pgadmin/static/fonts/Roboto-Bold.ttf create mode 100755 web/pgadmin/static/fonts/Roboto-Medium.ttf create mode 100755 web/pgadmin/static/fonts/Roboto-Regular.ttf create mode 100644 web/pgadmin/static/img/collapse_expand.svg create mode 100644 web/pgadmin/static/img/forgot_password.svg create mode 100644 web/pgadmin/static/img/login.svg create mode 100644 web/pgadmin/static/scss/_pgadmin.grid.scss delete mode 100644 web/pgadmin/static/scss/_webcabin.overrides.scss create mode 100644 web/pgadmin/static/scss/_webcabin.pgadmin.scss create mode 100644 web/pgadmin/static/vendor/backform/backform.js diff --git a/web/package.json b/web/package.json index 2c71afabd..a554bbb53 100644 --- a/web/package.json +++ b/web/package.json @@ -97,7 +97,7 @@ "underscore": "^1.8.3", "underscore.string": "^3.3.4", "watchify": "~3.9.0", - "webcabin-docker": "git+https://github.com/EnterpriseDB/wcDocker/#5fbdf05a6757464d2fa2c2b017322c97688b2105", + "webcabin-docker": "git+https://github.com/EnterpriseDB/wcDocker/#25f6fda624c5469340da0c111a18545a4455973a", "wkx": "^0.4.5" }, "scripts": { diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/fts_configurations/static/js/fts_configuration.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/fts_configurations/static/js/fts_configuration.js index 26620fdc0..a0e58e4c6 100644 --- a/web/pgadmin/browser/server_groups/servers/databases/schemas/fts_configurations/static/js/fts_configuration.js +++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/fts_configurations/static/js/fts_configuration.js @@ -203,7 +203,7 @@ define('pgadmin.node.fts_configuration', [ ' ', '
', '
', - ' ', + ' ', '
', ' ', ' ', diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/functions/__init__.py b/web/pgadmin/browser/server_groups/servers/databases/schemas/functions/__init__.py index 9f6ecd693..eab6bd5d2 100644 --- a/web/pgadmin/browser/server_groups/servers/databases/schemas/functions/__init__.py +++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/functions/__init__.py @@ -104,9 +104,7 @@ class FunctionModule(SchemaChildModule): """ Returns a snippet of css """ - snippets = [ - render_template("function/css/function.css") - ] + snippets = [] snippets.extend( super(SchemaChildModule, self).csssnippets ) diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/functions/templates/function/css/function.css b/web/pgadmin/browser/server_groups/servers/databases/schemas/functions/static/css/function.css similarity index 100% rename from web/pgadmin/browser/server_groups/servers/databases/schemas/functions/templates/function/css/function.css rename to web/pgadmin/browser/server_groups/servers/databases/schemas/functions/static/css/function.css diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/functions/templates/trigger_function/css/function.css b/web/pgadmin/browser/server_groups/servers/databases/schemas/functions/templates/trigger_function/css/function.css deleted file mode 100644 index 16b2e7198..000000000 --- a/web/pgadmin/browser/server_groups/servers/databases/schemas/functions/templates/trigger_function/css/function.css +++ /dev/null @@ -1,3 +0,0 @@ -.functions_code { - height: 130px !important; -} \ No newline at end of file diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/packages/edbfuncs/templates/edbfunc/css/edbfunc.css b/web/pgadmin/browser/server_groups/servers/databases/schemas/packages/edbfuncs/static/css/edbfunc.css similarity index 100% rename from web/pgadmin/browser/server_groups/servers/databases/schemas/packages/edbfuncs/templates/edbfunc/css/edbfunc.css rename to web/pgadmin/browser/server_groups/servers/databases/schemas/packages/edbfuncs/static/css/edbfunc.css diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/exclusion_constraint/static/js/exclusion_constraint.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/exclusion_constraint/static/js/exclusion_constraint.js index 797d848ae..fa5653eaf 100644 --- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/exclusion_constraint/static/js/exclusion_constraint.js +++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/exclusion_constraint/static/js/exclusion_constraint.js @@ -389,15 +389,12 @@ define('pgadmin.node.exclusion_constraint', [ generateHeader: function(data) { var header = [ '
', - '
', + '
', '
', '
', ' ', '
', '
', - '
', - ' ', - '
', '
', '
', '
'].join('\n'); @@ -441,11 +438,15 @@ define('pgadmin.node.exclusion_constraint', [ showGridControl: function(data) { var self = this, - titleTmpl = _.template('
'), + titleTmpl = _.template([ + '
', + ' ', + ' ', + '
'].join('\n')), $gridBody = $('
').append( // Append titleTmpl only if create/edit mode - data.mode !== 'properties' ? titleTmpl({label: data.label}) : '' + data.mode !== 'properties' ? titleTmpl({label: data.label, canAdd: data.canAdd}) : '' ); $gridBody.append(self.generateHeader(data)); @@ -469,7 +470,7 @@ define('pgadmin.node.exclusion_constraint', [ var grid = self.grid = new Backgrid.Grid({ columns: gridColumns, collection: self.collection, - className: 'backgrid table-bordered', + className: 'backgrid table-bordered table-noouter-border table-hover', }); self.$grid = grid.render().$el; @@ -489,6 +490,7 @@ define('pgadmin.node.exclusion_constraint', [ $gridBody.find('.subnode-header-form').removeClass('subnode-header-form'); // Render node grid + self.$gridBody = $gridBody; return $gridBody; }, @@ -522,7 +524,7 @@ define('pgadmin.node.exclusion_constraint', [ inSelected = true; } - self.$header.find('button.add').prop('disabled', inSelected); + self.$gridBody.find('button.add').prop('disabled', inSelected); }, addColumns: function(ev) { diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/static/js/foreign_key.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/static/js/foreign_key.js index efbabc223..6422a112b 100644 --- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/static/js/foreign_key.js +++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/constraints/foreign_key/static/js/foreign_key.js @@ -302,15 +302,12 @@ define('pgadmin.node.foreign_key', [ generateHeader: function(data) { var header = [ '
', - '
', + '
', '
', '
', ' ', '
', '
', - '
', - ' ', - '
', '
', '
', '
', @@ -370,13 +367,14 @@ define('pgadmin.node.foreign_key', [ var self = this, titleTmpl = _.template([ - '
', - '', + '
', + ' ', + ' ', '
'].join('\n')), $gridBody = $('
').append( // Append titleTmpl only if create/edit mode - data.mode !== 'properties' ? titleTmpl({label: data.label}) : '' + data.mode !== 'properties' ? titleTmpl({label: data.label, canAdd: data.canAdd}) : '' ); // Clean up existing grid if any (in case of re-render) @@ -401,7 +399,7 @@ define('pgadmin.node.foreign_key', [ var grid = self.grid = new Backgrid.Grid({ columns: gridSchema.columns, collection: self.collection, - className: 'backgrid table-bordered', + className: 'backgrid table-bordered table-noouter-border table-hover', }); self.$grid = grid.render().$el; @@ -430,6 +428,7 @@ define('pgadmin.node.foreign_key', [ $gridBody.find('.subnode-header-form').removeClass('subnode-header-form'); // Render node grid + self.$gridBody = $gridBody; return $gridBody; }, @@ -463,7 +462,7 @@ define('pgadmin.node.foreign_key', [ inSelected = true; } - self.$header.find('button.add').prop('disabled', inSelected); + self.$gridBody.find('button.add').prop('disabled', inSelected); }, addColumns: function(ev) { diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/static/css/rule.css b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/static/css/rule.css new file mode 100644 index 000000000..b46b9bddb --- /dev/null +++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/static/css/rule.css @@ -0,0 +1,7 @@ +.sql_field_height_140 { + height: 140px; +} + +.sql_field_height_280 { + height: 280px; +} diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/templates/rules/css/rule.css b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/templates/rules/css/rule.css index 03983f6a3..0d7339cf8 100644 --- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/templates/rules/css/rule.css +++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/rules/templates/rules/css/rule.css @@ -7,11 +7,3 @@ vertical-align: middle; height: 1.3em; } - -.sql_field_height_140 { - height: 140px; -} - -.sql_field_height_280 { - height: 280px; -} diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/views/static/css/view.css b/web/pgadmin/browser/server_groups/servers/databases/schemas/views/static/css/view.css new file mode 100644 index 000000000..c9c46d9fb --- /dev/null +++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/views/static/css/view.css @@ -0,0 +1,7 @@ +.sql_field_height_140 { + height: 140px; +} + +.sql_field_width_full { + width: 100%; +} diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/views/templates/mview/css/mview.css b/web/pgadmin/browser/server_groups/servers/databases/schemas/views/templates/mview/css/mview.css index ef9e73c3c..06c0c1b14 100644 --- a/web/pgadmin/browser/server_groups/servers/databases/schemas/views/templates/mview/css/mview.css +++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/views/templates/mview/css/mview.css @@ -7,7 +7,3 @@ vertical-align: middle; height: 1.3em; } - -.sql_field_width_full { - width: 100%; -} diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/views/templates/view/css/view.css b/web/pgadmin/browser/server_groups/servers/databases/schemas/views/templates/view/css/view.css index c86f6f4d9..153f164b5 100644 --- a/web/pgadmin/browser/server_groups/servers/databases/schemas/views/templates/view/css/view.css +++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/views/templates/view/css/view.css @@ -6,7 +6,3 @@ vertical-align: middle; height: 1.3em; } - -.sql_field_height_140 { - height: 140px; -} diff --git a/web/pgadmin/browser/server_groups/servers/pgagent/schedules/static/js/pga_schedule.js b/web/pgadmin/browser/server_groups/servers/pgagent/schedules/static/js/pga_schedule.js index f891f33f3..bcc27509e 100644 --- a/web/pgadmin/browser/server_groups/servers/pgagent/schedules/static/js/pga_schedule.js +++ b/web/pgadmin/browser/server_groups/servers/pgagent/schedules/static/js/pga_schedule.js @@ -345,8 +345,7 @@ define('pgadmin.node.pga_schedule', [ ); this.$el.prepend( - '
' + + '
' + gettext('Schedules are specified using a cron-style format.
  • For each selected time or date element, the schedule will execute.
    e.g. To execute at 5 minutes past every hour, simply select ‘05’ in the Minutes list box.
  • Values from more than one field may be specified in order to further control the schedule.
    e.g. To execute at 12:05 and 14:05 every Monday and Thursday, you would click minute 05, hours 12 and 14, and weekdays Monday and Thursday.
  • For additional flexibility, the Month Days check list includes an extra Last Day option. This matches the last day of the month, whether it happens to be the 28th, 29th, 30th or 31st.
') + '
' ); diff --git a/web/pgadmin/browser/server_groups/servers/pgagent/static/css/pga_job.css b/web/pgadmin/browser/server_groups/servers/pgagent/static/css/pga_job.css new file mode 100644 index 000000000..af8a30b22 --- /dev/null +++ b/web/pgadmin/browser/server_groups/servers/pgagent/static/css/pga_job.css @@ -0,0 +1,3 @@ +div[role=tabpanel] > .pgadmin-control-group.form-group.c.jscexceptions { + min-height: 400px; +} diff --git a/web/pgadmin/browser/server_groups/servers/pgagent/templates/pga_job/css/pga_job.css b/web/pgadmin/browser/server_groups/servers/pgagent/templates/pga_job/css/pga_job.css index ef46fc421..28d7dd346 100644 --- a/web/pgadmin/browser/server_groups/servers/pgagent/templates/pga_job/css/pga_job.css +++ b/web/pgadmin/browser/server_groups/servers/pgagent/templates/pga_job/css/pga_job.css @@ -15,16 +15,3 @@ vertical-align: middle; height: 1.3em; } - -.pg-el-container[el=sm] .pga-round-border { - border: 1px solid darkgray; - border-radius: 12px; -} - -.pg-el-container[el=sm] .pga-round-border { - margin: 5px; -} - -div[role=tabpanel] > .pgadmin-control-group.form-group.c.jscexceptions { - min-height: 400px; -} diff --git a/web/pgadmin/browser/server_groups/servers/static/css/servers.css b/web/pgadmin/browser/server_groups/servers/static/css/servers.css index 996275a8c..e8981cf59 100644 --- a/web/pgadmin/browser/server_groups/servers/static/css/servers.css +++ b/web/pgadmin/browser/server_groups/servers/static/css/servers.css @@ -6,3 +6,7 @@ vertical-align: middle; height: 1.3em; } + +.change_password { + padding-left: 7px; +} diff --git a/web/pgadmin/browser/server_groups/servers/static/js/server.js b/web/pgadmin/browser/server_groups/servers/static/js/server.js index 3520c71bd..bd06fce8a 100644 --- a/web/pgadmin/browser/server_groups/servers/static/js/server.js +++ b/web/pgadmin/browser/server_groups/servers/static/js/server.js @@ -422,11 +422,11 @@ define('pgadmin.node.server', [ setup:function() { return { buttons: [{ - text: gettext('Ok'), key: 13, className: 'btn btn-primary', - attrs: {name:'submit'}, - },{ text: gettext('Cancel'), key: 27, - className: 'btn btn-danger', attrs: {name: 'cancel'}, + className: 'btn btn-secondary fa fa-times pg-alertify-button', attrs: {name: 'cancel'}, + },{ + text: gettext('OK'), key: 13, className: 'btn btn-primary fa fa-check pg-alertify-button', + attrs: {name:'submit'}, }], // Set options for dialog options: { @@ -451,7 +451,7 @@ define('pgadmin.node.server', [ prepare: function() { var self = this; // Disable Ok button until user provides input - this.__internal.buttons[0].element.disabled = true; + this.__internal.buttons[1].element.disabled = true; var $container = $('
'), newpasswordmodel = new newPasswordModel( @@ -479,9 +479,9 @@ define('pgadmin.node.server', [ (_.isUndefined(password) || _.isNull(password) || password == '')) || _.isUndefined(newPassword) || _.isNull(newPassword) || newPassword == '' || _.isUndefined(confirmPassword) || _.isNull(confirmPassword) || confirmPassword == '') { - self.__internal.buttons[0].element.disabled = true; + self.__internal.buttons[1].element.disabled = true; } else if (newPassword != confirmPassword) { - self.__internal.buttons[0].element.disabled = true; + self.__internal.buttons[1].element.disabled = true; this.errorTimeout && clearTimeout(this.errorTimeout); this.errorTimeout = setTimeout(function() { @@ -489,7 +489,7 @@ define('pgadmin.node.server', [ } ,400); }else { that.errorModel.clear(); - self.__internal.buttons[0].element.disabled = false; + self.__internal.buttons[1].element.disabled = false; } }); }, @@ -1191,10 +1191,10 @@ define('pgadmin.node.server', [ setup:function() { return { buttons:[{ - text: gettext('OK'), key: 13, className: 'btn btn-primary', - },{ - text: gettext('Cancel'), className: 'btn btn-danger', + text: gettext('Cancel'), className: 'btn btn-secondary fa fa-times pg-alertify-button', key: 27, + },{ + text: gettext('OK'), key: 13, className: 'btn btn-primary fa fa-check pg-alertify-button', }], focus: {element: '#password', select: true}, options: { diff --git a/web/pgadmin/browser/server_groups/servers/static/js/variable.js b/web/pgadmin/browser/server_groups/servers/static/js/variable.js index ab128a0c7..7af1c282f 100644 --- a/web/pgadmin/browser/server_groups/servers/static/js/variable.js +++ b/web/pgadmin/browser/server_groups/servers/static/js/variable.js @@ -328,7 +328,7 @@ define([ titleTmpl = _.template([ '
', '', - '', + '', '
'].join('\n')), $gridBody = $('
').append( @@ -385,7 +385,7 @@ define([ columns: gridSchema.columns, collection: self.collection, row: VariableRow, - className: 'backgrid table-bordered', + className: 'backgrid table presentation table-bordered table-noouter-border table-hover', }); self.$grid = grid.render().$el; diff --git a/web/pgadmin/browser/server_groups/servers/tablespaces/static/js/tablespace.js b/web/pgadmin/browser/server_groups/servers/tablespaces/static/js/tablespace.js index c5df5d707..25d85a8b4 100644 --- a/web/pgadmin/browser/server_groups/servers/tablespaces/static/js/tablespace.js +++ b/web/pgadmin/browser/server_groups/servers/tablespaces/static/js/tablespace.js @@ -180,13 +180,14 @@ define('pgadmin.node.tablespace', [ setup:function() { return { buttons: [{ - text: '', key: 112, className: 'btn btn-default pull-left fa fa-lg fa-question', + text: '', key: 112, + className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button', attrs:{name:'dialog_help', type:'button', label: gettext('Users'), url: url_for('help.static', {'filename': 'move_objects.html'})}, },{ - text: gettext('OK'), key: 13, className: 'btn btn-primary fa fa-lg fa-save pg-alertify-button', + text: gettext('Cancel'), key: 27, className: 'btn btn-secondary fa fa-lg fa-times pg-alertify-button', },{ - text: gettext('Cancel'), key: 27, className: 'btn btn-danger fa fa-lg fa-times pg-alertify-button', + text: gettext('OK'), key: 13, className: 'btn btn-primary fa fa-lg fa-save pg-alertify-button', }], // Set options for dialog options: { @@ -214,7 +215,7 @@ define('pgadmin.node.tablespace', [ var self = this, $container = $('
'); //Disbale Okay button - this.__internal.buttons[1].element.disabled = true; + this.__internal.buttons[2].element.disabled = true; // Find current/selected node var t = pgBrowser.tree, i = t.selected(), @@ -248,9 +249,9 @@ define('pgadmin.node.tablespace', [ this.view.model.on('change', function() { if (!_.isUndefined(this.get('tblspc')) && this.get('tblspc') !== '') { this.errorModel.clear(); - self.__internal.buttons[1].element.disabled = false; + self.__internal.buttons[2].element.disabled = false; } else { - self.__internal.buttons[1].element.disabled = true; + self.__internal.buttons[2].element.disabled = true; this.errorModel.set('tblspc', gettext('Please select tablespace')); } }); diff --git a/web/pgadmin/browser/server_groups/servers/templates/css/servers.css b/web/pgadmin/browser/server_groups/servers/templates/css/servers.css index b8f785f25..93c4536d4 100644 --- a/web/pgadmin/browser/server_groups/servers/templates/css/servers.css +++ b/web/pgadmin/browser/server_groups/servers/templates/css/servers.css @@ -15,7 +15,3 @@ vertical-align: middle; height: 1.3em; } - -.change_password { - padding-left: 7px; -} diff --git a/web/pgadmin/browser/static/css/browser.css b/web/pgadmin/browser/static/css/browser.css index 011c6334a..b4de47c0f 100644 --- a/web/pgadmin/browser/static/css/browser.css +++ b/web/pgadmin/browser/static/css/browser.css @@ -40,23 +40,10 @@ padding-left: 20px; } -.aciTree .aciTreeLi div.aciTreeLine { - display: table !important; -} - .pg-login-icon { font-size: 16px; } -.CodeMirror { - font-size: 1em; -} - -#pg-spinner .pg-sp-content { - position: absolute; - width: 100%; - top: 40%; -} .pgadmin_header_logo { cursor: default; } diff --git a/web/pgadmin/browser/static/css/wizard.css b/web/pgadmin/browser/static/css/wizard.css index 731afe987..1cdded009 100644 --- a/web/pgadmin/browser/static/css/wizard.css +++ b/web/pgadmin/browser/static/css/wizard.css @@ -11,7 +11,6 @@ } .wizard_dlg { - float: left; height: 100%; width: 100%; } @@ -21,12 +20,6 @@ height: 100%; } -.wizard-content { - position: relative; - padding: 0; - height: calc(100% - 120px); -} - .wizard-right-panel { overflow-y: auto; height: 100%; @@ -52,8 +45,7 @@ } .wizard-right-panel_content { - height: calc(100% - 86px); - padding: 0; + padding: 0.5rem 0rem; } /* Wizard Footer CSS */ @@ -62,15 +54,6 @@ } /* Wizard Button CSS */ -.pgadmin-wizard .wizard-buttons { - float: right; -} - -.pgadmin-wizard .wizard-buttons button { - float: left; - font-size: 14px; - margin: 3px 5px 0 0 !important; -} .pgadmin-wizard .wizard-buttons button.wizard-next i.fa { padding-left: 5px; @@ -108,7 +91,7 @@ div.wizard-header.wizard-badge > div > div.col-sm-2 > button.ajs-maximized.ajs-m /* Wizard Status bar CSS */ .pgadmin-wizard .wizard-description { - padding: 1.0em 0.1em; + padding: 0.5rem 0rem; } /* In wizard select2 dropdown doesn't diff --git a/web/pgadmin/browser/static/js/browser.js b/web/pgadmin/browser/static/js/browser.js index e7e314bad..e9ef25c95 100644 --- a/web/pgadmin/browser/static/js/browser.js +++ b/web/pgadmin/browser/static/js/browser.js @@ -117,7 +117,7 @@ define('pgadmin.browser', [ showTitle: true, isCloseable: false, isPrivate: true, - icon: 'fa fa-binoculars', + icon: '', content: '
', onCreate: function(panel) { toolBar.initializeToolbar(panel, wcDocker); @@ -127,7 +127,7 @@ define('pgadmin.browser', [ 'properties': new pgAdmin.Browser.Panel({ name: 'properties', title: gettext('Properties'), - icon: 'fa fa-cogs', + icon: '', width: 500, isCloseable: false, isPrivate: true, @@ -142,18 +142,18 @@ define('pgadmin.browser', [ 'statistics': new pgAdmin.Browser.Panel({ name: 'statistics', title: gettext('Statistics'), - icon: 'fa fa-line-chart', + icon: '', width: 500, isCloseable: false, isPrivate: true, - content: '
' + select_object_msg + '
', + content: '
' + select_object_msg + '
', events: panelEvents, }), // Reversed engineered SQL for the object 'sql': new pgAdmin.Browser.Panel({ name: 'sql', title: gettext('SQL'), - icon: 'fa fa-file-text-o', + icon: '', width: 500, isCloseable: false, isPrivate: true, @@ -163,22 +163,22 @@ define('pgadmin.browser', [ 'dependencies': new pgAdmin.Browser.Panel({ name: 'dependencies', title: gettext('Dependencies'), - icon: 'fa fa-hand-o-up', + icon: '', width: 500, isCloseable: false, isPrivate: true, - content: '
' + select_object_msg + '
', + content: '
' + select_object_msg + '
', events: panelEvents, }), // Dependents of the object 'dependents': new pgAdmin.Browser.Panel({ name: 'dependents', title: gettext('Dependents'), - icon: 'fa fa-hand-o-down', + icon: '', width: 500, isCloseable: false, isPrivate: true, - content: '
' + select_object_msg + '
', + content: '
' + select_object_msg + '
', events: panelEvents, }), }, @@ -320,13 +320,14 @@ define('pgadmin.browser', [ // Create a dummy 'no object seleted' menu var create_submenu = pgAdmin.Browser.MenuGroup( obj.menu_categories['create'], [{ - $el: $('
  • ' + gettext('No object selected') + '
    • '), + $el: $('
  • ' + gettext('No object selected') + '
    • '), priority: 1, category: 'create', update: function() {}, }], false); $obj_mnu.append(create_submenu.$el); } + pgAdmin.Browser.SubmenuEvents($obj_mnu); }, save_current_layout: function(obj) { if(obj.docker) { @@ -354,7 +355,10 @@ define('pgadmin.browser', [ '#dockerContainer', { allowContextMenu: true, allowCollapse: false, - themePath: '../static/css', + loadingClass: 'pg-sp-icon', + themePath: url_for('static', { + 'filename': 'css', + }), theme: 'webcabin.overrides.css', }); if (obj.docker) { diff --git a/web/pgadmin/browser/static/js/collection.js b/web/pgadmin/browser/static/js/collection.js index 87b44ed3b..5fea4a21a 100644 --- a/web/pgadmin/browser/static/js/collection.js +++ b/web/pgadmin/browser/static/js/collection.js @@ -66,7 +66,7 @@ define([ j = panel.$container.find('.obj_properties').first(), view = j.data('obj-view'), content = $('
    ') - .addClass('pg-prop-content col-12'), + .addClass('pg-prop-content col-12 has-pg-prop-btn-group'), node = pgBrowser.Nodes[that.node], // This will be the URL, used for object manipulation. urlBase = this.generate_url(item, 'properties', data), @@ -169,9 +169,10 @@ define([ } // Initialize a new Grid instance that.grid = new Backgrid.Grid({ + emptyText: 'No data found', columns: gridSchema.columns, collection: collection, - className: 'backgrid table-bordered', + className: 'backgrid table presentation table-bordered table-noouter-border table-hover', }); var gridView = { @@ -216,7 +217,7 @@ define([ label: '', type: 'delete', tooltip: gettext('Delete/Drop'), - extraClasses: ['btn-default', 'delete_multiple'], + extraClasses: ['btn-secondary m-1', 'delete_multiple'], icon: 'fa fa-lg fa-trash-o', disabled: (_.isFunction(that.canDrop)) ? !(that.canDrop.apply(self, [data, item])) : (!that.canDrop), register: function(btn) { @@ -230,8 +231,8 @@ define([ label: '', type: 'delete', tooltip: gettext('Drop Cascade'), - extraClasses: ['btn-default', 'delete_multiple_cascade'], - icon: '', + extraClasses: ['btn-secondary m-1', 'delete_multiple_cascade'], + icon: 'icon-delete_multiple_cascade', disabled: (_.isFunction(that.canDropCascade)) ? !(that.canDropCascade.apply(self, [data, item])) : (!that.canDropCascade), register: function(btn) { btn.on('click',() => { @@ -240,10 +241,11 @@ define([ }, }); - createButtons(buttons, 'header', 'pg-prop-btn-group-above bg-gray-lighter border-gray-light'); + createButtons(buttons, 'header', 'pg-prop-btn-group-above'); // Render subNode grid - content.append(that.grid.render().$el); + content.append('
    '); + content.find('.pg-prop-coll-container').append(that.grid.render().$el); j.append(content); // Fetch Data diff --git a/web/pgadmin/browser/static/js/keyboard.js b/web/pgadmin/browser/static/js/keyboard.js index f7162ce03..108e38e02 100644 --- a/web/pgadmin/browser/static/js/keyboard.js +++ b/web/pgadmin/browser/static/js/keyboard.js @@ -41,7 +41,6 @@ _.extend(pgBrowser.keyboardNavigation, { this.keyboardShortcut.help_shortcut], }, // Main menu 'bindRightPanel': {'shortcuts': [this.keyboardShortcut.tabbed_panel_backward, this.keyboardShortcut.tabbed_panel_forward]}, // Main window panels - 'bindSubMenuClose': {'shortcuts': ['esc','enter']}, 'bindLeftTree': {'shortcuts': this.keyboardShortcut.left_tree_shortcut}, // Main menu, 'bindSubMenuQueryTool': {'shortcuts': this.keyboardShortcut.sub_menu_query_tool}, // Sub menu - Open Query Tool, 'bindSubMenuViewData': {'shortcuts': this.keyboardShortcut.sub_menu_view_data}, // Sub menu - Open View Data, @@ -166,6 +165,7 @@ _.extend(pgBrowser.keyboardNavigation, { let currMenu = currLi.closest('.dropdown-menu'); if(currMenu.closest('.dropdown-submenu').length > 0) { currMenu.removeClass('show'); + currMenu.closest('.dropdown-submenu').removeClass('dropdown-submenu-visible'); currLi = currMenu.closest('.dropdown-submenu'); currLi.find('.dropdown-item').trigger('focus'); } @@ -189,6 +189,7 @@ _.extend(pgBrowser.keyboardNavigation, { /*open submenu if any*/ if(currLi.hasClass('dropdown-submenu')){ + currLi.addClass('dropdown-submenu-visible'); currLi.find('.dropdown-menu').addClass('show'); currLi = currLi.find('.dropdown-menu .dropdown-item').first().trigger('focus'); } @@ -200,8 +201,9 @@ _.extend(pgBrowser.keyboardNavigation, { keyboardFunc._stopEventPropagation(event); let currLi = $(event.target).closest('li'); /*close all the submenus on movement*/ - $(event.target).closest('.dropdown-menu').find('.show').removeClass('show'); - + let dropMenu = $(event.target).closest('.dropdown-menu'); + dropMenu.find('.show').removeClass('show'); + dropMenu.find('.dropdown-submenu').removeClass('dropdown-submenu-visible'); if(combo === 'up') { currLi = currLi.prev(); } @@ -222,12 +224,6 @@ _.extend(pgBrowser.keyboardNavigation, { currLi.find('.dropdown-item').trigger('focus'); } }, - bindSubMenuClose: function() { - if($(event.target).hasClass('dropdown-item') - && $(event.target).closest('.dropdown-submenu').length > 0) { - $(event.target).closest('.dropdown').find('.dropdown-submenu .dropdown-menu').removeClass('show'); - } - }, bindLeftTree: function() { const tree = this.getTreeDetails(); diff --git a/web/pgadmin/browser/static/js/menu.js b/web/pgadmin/browser/static/js/menu.js index df56305fb..b60b49556 100644 --- a/web/pgadmin/browser/static/js/menu.js +++ b/web/pgadmin/browser/static/js/menu.js @@ -169,9 +169,9 @@ define([ '
  • ', ' ', ' <% if (icon) { %><% } %>', - ' <%= label %>', + ' <%= label %>', ' ', - '
      ', + '
        ', '
      ', '', '<% if (below) { %>
    • <% } %>', @@ -338,6 +338,30 @@ define([ return (len > 0); }; + pgAdmin.Browser.SubmenuEvents = function($mnu) { + let subMenuClose = function(event) { + let $dropDown = $(event.currentTarget).closest('.dropdown'); + $dropDown.find('.dropdown-submenu .dropdown-menu').removeClass('show'); + $dropDown.find('.dropdown-submenu').removeClass('dropdown-submenu-visible'); + }; + + let $navlink = $mnu.siblings('.nav-link'); + $navlink.off('click', subMenuClose).on('click', subMenuClose); + $mnu.parent('.dropdown').off('show.bs.dropdown',subMenuClose) + .on('show.bs.dropdown',subMenuClose); + + $mnu.find('.dropdown-item').off('mouseover').on('mouseover', (event)=> { + let $dropSubMenu = $(event.currentTarget).closest('.dropdown-menu').find('.dropdown-submenu'); + /* Close all other submenus if any */ + $dropSubMenu.find('.dropdown-menu').removeClass('show'); + $dropSubMenu.removeClass('dropdown-submenu-visible'); + /* Open the current submenu if any */ + if($(event.currentTarget).parent().hasClass('dropdown-submenu')){ + $(event.currentTarget).parent().find('.dropdown-menu').addClass('show'); + $(event.currentTarget).parent().addClass('dropdown-submenu-visible'); + } + }); + }; // MENU PUBLIC CLASS DEFINITION // ============================== diff --git a/web/pgadmin/browser/static/js/node.js b/web/pgadmin/browser/static/js/node.js index b60f3fc3c..9fe31aeab 100644 --- a/web/pgadmin/browser/static/js/node.js +++ b/web/pgadmin/browser/static/js/node.js @@ -314,7 +314,7 @@ define('pgadmin.browser.node', [ var onSessionInvalid = function(msg) { var alertMessage = '\ -
      \ +
      \
      \
      \ \ @@ -1121,6 +1121,7 @@ define('pgadmin.browser.node', [ that.footer = $('
      ').addClass( 'pg-prop-footer' ).appendTo(j); + // Create a view to show the properties in fieldsets view = that.getView(item, 'properties', content, data, 'fieldset', undefined, j); if (view) { @@ -1132,11 +1133,11 @@ define('pgadmin.browser.node', [ var buttons = []; buttons.push({ - label: '', + label: gettext('Edit'), type: 'edit', tooltip: gettext('Edit'), - extraClasses: ['btn-default'], - icon: 'fa fa-lg fa-pencil-square-o', + extraClasses: ['btn', 'btn-primary', 'pull-right', 'm-1'], + icon: 'fa fa-sm fa-pencil', disabled: !that.canEdit, register: function(btn) { btn.on('click',() => { @@ -1149,7 +1150,7 @@ define('pgadmin.browser.node', [ label: '', type: 'help', tooltip: gettext('SQL help for this object type.'), - extraClasses: ['btn-default', 'pull-right'], + extraClasses: ['btn-secondary', 'btn-secondary', 'm-1'], icon: 'fa fa-lg fa-info', disabled: (that.sqlAlterHelp == '' && that.sqlCreateHelp == '') ? true : false, register: function(btn) { @@ -1159,7 +1160,7 @@ define('pgadmin.browser.node', [ }, }); - createButtons(buttons, 'header', 'pg-prop-btn-group-above bg-gray-lighter border-gray-light'); + createButtons(buttons, 'header', 'pg-prop-btn-group-above'); } j.append(content); }.bind(panel), @@ -1354,7 +1355,7 @@ define('pgadmin.browser.node', [ label: '', type: 'help', tooltip: gettext('SQL help for this object type.'), - extraClasses: ['btn-default', 'pull-left'], + extraClasses: ['btn-secondary', 'pull-left', 'mx-1'], icon: 'fa fa-lg fa-info', disabled: (that.sqlAlterHelp == '' && that.sqlCreateHelp == '') ? true : false, register: function(btn) { @@ -1366,7 +1367,7 @@ define('pgadmin.browser.node', [ label: '', type: 'help', tooltip: gettext('Help for this dialog.'), - extraClasses: ['btn-default', 'pull-left'], + extraClasses: ['btn-secondary', 'pull-left', 'mx-1'], icon: 'fa fa-lg fa-question', disabled: (that.dialogHelp == '') ? true : false, register: function(btn) { @@ -1374,25 +1375,12 @@ define('pgadmin.browser.node', [ onDialogHelp(); }); }, - }, { - label: gettext('Save'), - type: 'save', - tooltip: gettext('Save this object.'), - extraClasses: ['btn-primary'], - icon: 'fa fa-lg fa-save', - disabled: true, - register: function(btn) { - // Save the changes - btn.on('click',() => { - onSave.call(this, view, btn); - }); - }, }, { label: gettext('Cancel'), type: 'cancel', tooltip: gettext('Cancel changes to this object.'), - extraClasses: ['btn-danger'], - icon: 'fa fa-lg fa-close', + extraClasses: ['btn-secondary', 'mx-1'], + icon: 'fa fa-close pg-alertify-button', disabled: false, register: function(btn) { btn.on('click',() => { @@ -1405,8 +1393,8 @@ define('pgadmin.browser.node', [ label: gettext('Reset'), type: 'reset', tooltip: gettext('Reset the fields on this dialog.'), - extraClasses: ['btn-warning'], - icon: 'fa fa-lg fa-recycle', + extraClasses: ['btn-secondary', 'mx-1'], + icon: 'fa fa-recycle pg-alertify-button', disabled: true, register: function(btn) { btn.on('click',() => { @@ -1415,7 +1403,20 @@ define('pgadmin.browser.node', [ }, 0); }); }, - }], 'footer', 'pg-prop-btn-group-below bg-gray-lighter border-gray-light'); + }, { + label: gettext('Save'), + type: 'save', + tooltip: gettext('Save this object.'), + extraClasses: ['btn-primary', 'mx-1'], + icon: 'fa fa-save pg-alertify-button', + disabled: true, + register: function(btn) { + // Save the changes + btn.on('click',() => { + onSave.call(this, view, btn); + }); + }, + }], 'footer', 'pg-prop-btn-group-below'); } // Create status bar. diff --git a/web/pgadmin/browser/static/js/node.ui.js b/web/pgadmin/browser/static/js/node.ui.js index 305581ed5..af9607021 100644 --- a/web/pgadmin/browser/static/js/node.ui.js +++ b/web/pgadmin/browser/static/js/node.ui.js @@ -21,7 +21,7 @@ define([ let $rendered = decorated.call(this); let $selectAll = $([ - '' + '
      ' + - '
      ' + - '
      ' + - ' ' + + ' ' + - ' ' + - ' ' + ' ' + - '
      ' + '
      ' + '
      ' + '
      ' + diff --git a/web/pgadmin/browser/static/scss/_browser.scss b/web/pgadmin/browser/static/scss/_browser.scss index 894112aa4..158d2891c 100644 --- a/web/pgadmin/browser/static/scss/_browser.scss +++ b/web/pgadmin/browser/static/scss/_browser.scss @@ -22,38 +22,27 @@ samp, margin-bottom: 3px; } -#pg-spinner { +.pg-sp-container { position: absolute; - top: 0; - width: 100%; - height: 100%; - background: $color-bg-inverse; - opacity: 0.6; + min-width: 100%; + min-height: 100%; + background: $loading-bg; z-index: 1056; -} -#pg-spinner .pg-sp-icon { - font-size: 50px; + .pg-sp-content { + position: absolute; + width: 100%; + top: 40%; + } +} +.pg-sp-icon { + background: $loader-icon center center no-repeat; + height: 75px; + width: 100%; text-align: center; - color: $color-gray-light; } - -#pg-spinner .pg-sp-text { +.pg-sp-text { font-size: 20px; text-align: center; - color: $color-fg-inverse; -} - -.pg-toolbar-btn:hover { - border: none; - background-color: $color-bg !important; -} - -.pg-toolbar-btn { - width: 25px !important; - height: 23px !important; - background-color: $color-bg !important; - font-size: 14px !important; - color: $color-gray-darker !important; - border: none; + color: $loading-fg; } diff --git a/web/pgadmin/browser/static/scss/_wizard.scss b/web/pgadmin/browser/static/scss/_wizard.scss index ee0899f44..bebc6c840 100644 --- a/web/pgadmin/browser/static/scss/_wizard.scss +++ b/web/pgadmin/browser/static/scss/_wizard.scss @@ -1,27 +1,42 @@ .wizard-header { padding: 6px 10px!important; - min-height: 35px; - max-height: 35px; - border-bottom: 2px solid $color-gray-light; + min-height: $title-height; + max-height: $title-height; background-color: $color-primary; + font-size: $font-size-base; font-weight: bold; - color: $color-fg-inverse; - font-size: 14px; - font-weight: bold; - border-radius: 0; + color: $color-primary-fg; + overflow: hidden; + white-space: nowrap; + border-radius: 0rem; + border-top-left-radius: $panel-border-radius; + border-top-right-radius: $panel-border-radius; + border-bottom: none; } -.pgadmin-wizard .footer { - background-color: $color-gray-lighter; - border-width: 2px 0px 0px 0px; - border-style: solid; - border-color: $color-gray-dark; +.wizard-content { + position: absolute; + overflow: auto; + top: $title-height; + bottom: $footer-height-calc; //similar to alertify footer + left: 0; + right: 0; +} + +.pgadmin-wizard .wizard-buttons { + border-top: $panel-border; + padding: $footer-padding +} + +/* match the alertify footer */ +.pgadmin-wizard .wizard-footer { + min-height: $footer-min-height; + border: none; position: absolute; left: 0; right: 0; bottom: 0; margin: 0; - padding: 0; } /* Error message css */ diff --git a/web/pgadmin/browser/templates/browser/css/node.css b/web/pgadmin/browser/templates/browser/css/node.css index 3f3876054..5c97d0a53 100644 --- a/web/pgadmin/browser/templates/browser/css/node.css +++ b/web/pgadmin/browser/templates/browser/css/node.css @@ -4,7 +4,7 @@ background-size: 20px !important; align-content: center; vertical-align: middle; - height: 20px; + height: 15px; } .pgadmin-node-select option[node="{{node_type}}"] { diff --git a/web/pgadmin/browser/templates/browser/index.html b/web/pgadmin/browser/templates/browser/index.html index ca1de70b7..89877f59f 100644 --- a/web/pgadmin/browser/templates/browser/index.html +++ b/web/pgadmin/browser/templates/browser/index.html @@ -90,18 +90,19 @@ window.onload = function(e){ {% endblock %} {% block body %} -
      +
      -
      +
      {{ _('Loading {0} v{1}...').format(config.APP_NAME, config.APP_VERSION) }}
      -
    {% if config.SERVER_MODE %} -