From 2db9242f5c256ba2f1187bede5b127c1c077e994 Mon Sep 17 00:00:00 2001 From: Murtuza Zabuawala Date: Thu, 9 Jul 2020 18:18:15 +0530 Subject: [PATCH] =?UTF-8?q?Fixed=20accessibility=20issue=C2=A0where=20few?= =?UTF-8?q?=20dialogs=20are=20not=20rendering=20properly=20when=20we=20zoo?= =?UTF-8?q?med=20in=20browser=20window=20200%=20and=20screen=20resolution?= =?UTF-8?q?=20is=20low.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Fixes #5662 --- docs/en_US/release_notes_4_24.rst | 3 +- web/pgadmin/browser/static/js/browser.js | 29 +++++++++++++++++++ .../file_manager/static/js/file_manager.js | 6 ++-- .../file_manager/static/js/select_dialogue.js | 1 - .../preferences/static/js/preferences.js | 2 +- web/pgadmin/tools/backup/static/js/backup.js | 6 ++-- .../tools/restore/static/js/restore.js | 2 +- .../static/js/search_objects.js | 2 +- .../file_manager/file_manager_specs.js | 20 +++++++++++++ 9 files changed, 61 insertions(+), 10 deletions(-) diff --git a/docs/en_US/release_notes_4_24.rst b/docs/en_US/release_notes_4_24.rst index 30b7615af..e53c695c7 100644 --- a/docs/en_US/release_notes_4_24.rst +++ b/docs/en_US/release_notes_4_24.rst @@ -33,4 +33,5 @@ Bug fixes | `Issue #5629 `_ - Fixed an issue where the user is able to edit properties when some of the collection nodes are selected. | `Issue #5630 `_ - Fixed an issue where installation of pgadmin4 not working on 32-bit Windows. | `Issue #5631 `_ - Fixed 'cant execute empty query' issue when remove the value of 'USING' or 'WITH CHECK' option of RLS Policy. -| `Issue #5633 `_ - Ensure that create RLS Policy menu should not be visible for catalog objects. \ No newline at end of file +| `Issue #5633 `_ - Ensure that create RLS Policy menu should not be visible for catalog objects. +| `Issue #5662 `_ - Fixed accessibility issue where few dialogs are not rendering properly when we zoomed in browser window 200% and screen resolution is low. \ No newline at end of file diff --git a/web/pgadmin/browser/static/js/browser.js b/web/pgadmin/browser/static/js/browser.js index 9db31de59..dcf3cc09e 100644 --- a/web/pgadmin/browser/static/js/browser.js +++ b/web/pgadmin/browser/static/js/browser.js @@ -171,12 +171,41 @@ define('pgadmin.browser', [ md: 700, lg: 900, default: 500, + // If you change above values then make sure to update + // calc method logic + calc: () => { + let iw = window.innerWidth; + if (iw > pgAdmin.Browser.stdW.lg) + return pgAdmin.Browser.stdW.lg; + else if (iw > pgAdmin.Browser.stdW.md) + return pgAdmin.Browser.stdW.md; + else if (iw > pgAdmin.Browser.stdW.sm) + return pgAdmin.Browser.stdW.sm; + else + // if avilable screen resolution is still + // less then return the width value as it + return iw; + }, }, stdH: { sm: 200, md: 400, lg: 550, default: 550, + // If you change above values then make sure to update + // calc method logic + calc: () => { + // We are excluding sm as it is too small for dialog + let ih = window.innerHeight; + if (ih > pgAdmin.Browser.stdH.lg) + return pgAdmin.Browser.stdH.lg; + else if (ih > pgAdmin.Browser.stdH.md) + return pgAdmin.Browser.stdH.md; + else + // if avilable screen resolution is still + // less then return the height value as it + return ih; + }, }, // Default panels panels: { diff --git a/web/pgadmin/misc/file_manager/static/js/file_manager.js b/web/pgadmin/misc/file_manager/static/js/file_manager.js index d0a26a900..f02c827d2 100644 --- a/web/pgadmin/misc/file_manager/static/js/file_manager.js +++ b/web/pgadmin/misc/file_manager/static/js/file_manager.js @@ -37,10 +37,12 @@ define('misc.file_manager', [ }, // Call dialogs subject to dialog_type param show_dialog: function(params) { + let dialogWidth = pgAdmin.Browser.stdW.calc(); + let dialogHeight = pgAdmin.Browser.stdH.calc(); if (params.dialog_type == 'create_file') { - Alertify.createModeDlg(params).resizeTo(pgAdmin.Browser.stdW.md,pgAdmin.Browser.stdH.lg); + Alertify.createModeDlg(params).resizeTo(dialogWidth, dialogHeight); } else { - Alertify.fileSelectionDlg(params).resizeTo(pgAdmin.Browser.stdW.md,pgAdmin.Browser.stdH.lg); + Alertify.fileSelectionDlg(params).resizeTo(dialogWidth, dialogHeight); } }, }; diff --git a/web/pgadmin/misc/file_manager/static/js/select_dialogue.js b/web/pgadmin/misc/file_manager/static/js/select_dialogue.js index 407acf4c6..7b6515593 100644 --- a/web/pgadmin/misc/file_manager/static/js/select_dialogue.js +++ b/web/pgadmin/misc/file_manager/static/js/select_dialogue.js @@ -29,7 +29,6 @@ module.exports = Alertify.dialog('fileSelectionDlg', function() { this.set('title', params['dialog_title']); this.params = JSON.stringify(params); - this.elements.dialog.style.minWidth = '630px'; this.show(); }, diff --git a/web/pgadmin/preferences/static/js/preferences.js b/web/pgadmin/preferences/static/js/preferences.js index b43106bbb..dd96717d6 100644 --- a/web/pgadmin/preferences/static/js/preferences.js +++ b/web/pgadmin/preferences/static/js/preferences.js @@ -512,7 +512,7 @@ define('pgadmin.preferences', [ }, show: function() { - Alertify.preferencesDlg(true).resizeTo(pgAdmin.Browser.stdW.lg,pgAdmin.Browser.stdH.lg); + Alertify.preferencesDlg(true).resizeTo(pgAdmin.Browser.stdW.calc(),pgAdmin.Browser.stdH.calc()); }, }; diff --git a/web/pgadmin/tools/backup/static/js/backup.js b/web/pgadmin/tools/backup/static/js/backup.js index 158a02853..4d98a7bd6 100644 --- a/web/pgadmin/tools/backup/static/js/backup.js +++ b/web/pgadmin/tools/backup/static/js/backup.js @@ -650,7 +650,7 @@ define([ alertify, BackupModel ); - dialog.draw(action, item, {'globals': true}, pgBrowser.stdW.md, pgBrowser.stdH.md); + dialog.draw(action, item, {'globals': true}, pgBrowser.stdW.calc(), pgBrowser.stdH.calc()); }, start_backup_server: function(action, item) { let dialog = new globalBackupDialog.BackupDialog( @@ -659,7 +659,7 @@ define([ alertify, BackupObjectModel ); - dialog.draw(action, item, {'server': true}, pgBrowser.stdW.md, pgBrowser.stdH.md); + dialog.draw(action, item, {'server': true}, pgBrowser.stdW.calc(), pgBrowser.stdH.calc()); }, // Callback to draw Backup Dialog for objects backup_objects: function(action, treeItem) { @@ -669,7 +669,7 @@ define([ alertify, BackupObjectModel ); - dialog.draw(action, treeItem, null, pgBrowser.stdW.md, pgBrowser.stdH.md); + dialog.draw(action, treeItem, null, pgBrowser.stdW.calc(), pgBrowser.stdH.calc()); }, }; return pgBrowser.Backup; diff --git a/web/pgadmin/tools/restore/static/js/restore.js b/web/pgadmin/tools/restore/static/js/restore.js index 2059434cf..c308e2433 100644 --- a/web/pgadmin/tools/restore/static/js/restore.js +++ b/web/pgadmin/tools/restore/static/js/restore.js @@ -424,7 +424,7 @@ define('tools.restore', [ let dialog = new restoreDialog.RestoreDialog( pgBrowser, $, alertify, RestoreObjectModel ); - dialog.draw(action, treeItem, pgBrowser.stdW.md, pgBrowser.stdH.md); + dialog.draw(action, treeItem, pgBrowser.stdW.calc(), pgBrowser.stdH.calc()); }, }; return pgBrowser.Restore; diff --git a/web/pgadmin/tools/search_objects/static/js/search_objects.js b/web/pgadmin/tools/search_objects/static/js/search_objects.js index 98a415e94..749e9d4d3 100644 --- a/web/pgadmin/tools/search_objects/static/js/search_objects.js +++ b/web/pgadmin/tools/search_objects/static/js/search_objects.js @@ -82,7 +82,7 @@ define([ alertify, {}, ); - dialog.draw(action, item, {}, pgBrowser.stdW.md, pgBrowser.stdH.lg); + dialog.draw(action, item, {}, pgBrowser.stdW.calc(), pgBrowser.stdH.calc()); }, }; diff --git a/web/regression/javascript/file_manager/file_manager_specs.js b/web/regression/javascript/file_manager/file_manager_specs.js index 9da9a7bf6..d74bd567c 100644 --- a/web/regression/javascript/file_manager/file_manager_specs.js +++ b/web/regression/javascript/file_manager/file_manager_specs.js @@ -23,12 +23,32 @@ describe('fileSelectDialog', function () { md: 700, lg: 900, default: 500, + calc: () => { + let iw = window.innerWidth; + if (iw > pgAdmin.Browser.stdW.lg) + return pgAdmin.Browser.stdW.lg; + else if (iw > pgAdmin.Browser.stdW.md) + return pgAdmin.Browser.stdW.md; + else if (iw > pgAdmin.Browser.stdW.sm) + return pgAdmin.Browser.stdW.sm; + else + return iw; + }, }, stdH: { sm: 200, md: 400, lg: 550, default: 550, + calc: () => { + let ih = window.innerHeight; + if (ih > pgAdmin.Browser.stdH.lg) + return pgAdmin.Browser.stdH.lg; + else if (ih > pgAdmin.Browser.stdH.md) + return pgAdmin.Browser.stdH.md; + else + return ih; + }, }, };