public inbox for [email protected]
help / color / mirror / Atom feedFrom: Pradip Parkale <[email protected]>
To: Akshay Joshi <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Subject: Re: [pgAdmin][RM5241] : Tab key navigation is not working in Grant wizard.
Date: Mon, 30 Mar 2020 17:24:55 +0530
Message-ID: <CAJ9T6Su=AhDcj6Lnbuw1Jwy8445ZOWE=uwfrSi-08=2zpFaBLg@mail.gmail.com> (raw)
In-Reply-To: <CANxoLDcQcg_yorAyoY5dNdRED2dNtz_2P-Lz6-akrab_Uxu8VA@mail.gmail.com>
References: <CAJ9T6SuQPUEnfO3G2S17q02SC=RQJ-4BrO_m-nWxoi_7g46i6w@mail.gmail.com>
<CANxoLDcQcg_yorAyoY5dNdRED2dNtz_2P-Lz6-akrab_Uxu8VA@mail.gmail.com>
Hi Akshay,
Please find the attached patch.
On Fri, Mar 27, 2020 at 1:17 PM Akshay Joshi <[email protected]>
wrote:
> Hi Pradip
>
> Following things are not working, please fix and resend the patch:
>
> Object selection (First) Page:
>
> - If there is no object in the backgrid to select then tab navigation
> not proceed after the headers.
>
> Fixed.
>
> - Tab navigation not working for 'Select All' checkbox in the backgrid
> cell.
>
> Fixed.
> Privileges selection (Second) Page:
>
> - Tab navigation not working for the 'Delete' button in the
> backgrid cell.
>
> This logic was added even before my patch(1st Patch). User needs to press
the 'space' key to delete the privilege added.
>
> On Fri, Mar 27, 2020 at 9:47 AM Pradip Parkale <
> [email protected]> wrote:
>
>> Hi Hackers,
>>
>> Attached is a patch for tab key navigation on grant_wizard.
>>
>> This patch includes:
>>
>> 1. Added code to make tab navigation working in grant_wizard.
>> 2. Added entry for .scss to change the shadow of 'ajs-close' button.
>>
>> This patch also includes the code to allow the user to use the keyboard
>> to update the Backgrid cell DateTime picker control.
>>
>>
>> --
>> Thanks & Regards,
>> Pradip Parkale
>> QMG, EnterpriseDB Corporation
>>
>
>
> --
> *Thanks & Regards*
> *Akshay Joshi*
>
> *Sr. Software Architect*
> *EnterpriseDB Software India Private Limited*
> *Mobile: +91 976-788-8246*
>
--
Thanks & Regards,
Pradip Parkale
QMG, EnterpriseDB Corporation
Attachments:
[application/octet-stream] RM-5241_v2.patch (10.0K, 3-RM-5241_v2.patch)
download | inline diff:
diff --git a/web/pgadmin/browser/static/js/wizard.js b/web/pgadmin/browser/static/js/wizard.js
index 72590c9e5..3068572d1 100644
--- a/web/pgadmin/browser/static/js/wizard.js
+++ b/web/pgadmin/browser/static/js/wizard.js
@@ -155,6 +155,7 @@ define([
'click button.wizard-finish': 'finishWizard',
'click button.wizard-help': 'onDialogHelp',
'click a.close-error': 'closeErrorMsg',
+ 'keydown': 'keydownHandler',
},
initialize: function(options) {
this.options = _.extend({}, this.options, options.options);
@@ -239,6 +240,60 @@ define([
delete this.el; // Delete the variable reference to this node
return true;
},
+ keydownHandler: function(event) {
+ let wizardHeader = $(event.currentTarget).find('.wizard-header');
+ let wizardFooter = $(event.currentTarget).find('.wizard-footer');
+ let gridElement = $(event.currentTarget).find('.select-row-cell:first');
+ let gridElementLast = $(event.currentTarget).find('.select-row-cell:last');
+
+ let firstWizardHeaderButton = $(wizardHeader).find('button:enabled:first');
+ let lastWizardHeaderButton = $(wizardHeader).find('button:enabled:last');
+ let lastWizardFooterBtn = $(wizardFooter).find('button:enabled:last');
+ let firstWizardFooterBtn = $(wizardFooter).find('button:enabled:first');
+
+
+ if (event.shiftKey && event.keyCode === 9) {
+ // Move backwards
+ if(firstWizardHeaderButton && $(firstWizardHeaderButton).is($(event.target))) {
+ if (lastWizardFooterBtn) {
+ $(lastWizardFooterBtn).focus();
+ event.preventDefault();
+ event.stopPropagation();
+ }
+ }
+ else if ($(firstWizardFooterBtn).is($(event.target))){
+ if ($(gridElement).find('.custom-control-input').is(':visible')){
+ $(gridElementLast).find('.custom-control-input').focus();
+ event.preventDefault();
+ event.stopPropagation();
+ }else if ($(event.currentTarget).find('.wizard-content').find('.CodeMirror-scroll').is(':visible')){
+ $(lastWizardHeaderButton).focus();
+ }
+ }
+ } else if (event.keyCode === 9) {
+ // Move forwards
+ // If taget is last button then goto first element
+ if(lastWizardFooterBtn && $(lastWizardFooterBtn).is($(event.target))) {
+ $(firstWizardHeaderButton).focus();
+ event.preventDefault();
+ event.stopPropagation();
+ }else if (event.target.innerText == 'Name'){
+ if ($(gridElement).find('.custom-control-input').is(':visible')){
+ $(gridElement).find('.custom-control-input').focus();
+ }else {
+ $(firstWizardFooterBtn).focus();
+ }
+ event.preventDefault();
+ event.stopPropagation();
+ } else if(event.target.tagName == 'DIV') {
+ $(event.currentTarget).find('.custom-control-input:first').trigger('focus');
+ event.preventDefault();
+ event.stopPropagation();
+ } else if(event.target.tagName == 'TEXTAREA'){
+ $(firstWizardFooterBtn).focus();
+ }
+ }
+ },
enableDisableNext: function(disable) {
if (typeof(disable) != 'undefined') {
this.options.disable_next = disable;
diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js
index b05e1422f..157c74262 100644
--- a/web/pgadmin/static/js/backgrid.pgadmin.js
+++ b/web/pgadmin/static/js/backgrid.pgadmin.js
@@ -1772,7 +1772,7 @@ define([
this.tabKeyPress = false;
this.$el.datetimepicker(options);
this.$el.datetimepicker('show');
- this.picker = this.$el.data('DateTimePicker');
+ this.picker = this.$el.data('datetimepicker');
},
events: {
'hide.datetimepicker': 'closeIt',
@@ -1780,9 +1780,56 @@ define([
'keydown': 'keydownHandler',
},
keydownHandler: function(event) {
+ let stopBubble = false;
+ let self = this;
+ if (!event.altKey && event.keyCode == 38){
+ let currdate = self.$el.data('datetimepicker').date().clone();
+ if (self.$el.data('datetimepicker').widget.find('.datepicker').is(':visible')){
+ $(this.el).datetimepicker('date', currdate.subtract(7, 'd'));
+ }else{
+ $(this.el).datetimepicker('date', currdate.add(7, 'm'));
+ }
+ }else if (!event.altKey && event.keyCode == 40){
+ let currdate = self.$el.data('datetimepicker').date().clone();
+ if (self.$el.data('datetimepicker').widget.find('.datepicker').is(':visible')){
+ $(this.el).datetimepicker('date', currdate.add(7, 'd'));
+ }else{
+ $(this.el).datetimepicker('date', currdate.subtract(7, 'm'));
+ }
+ }else if (event.keyCode == 39){
+ let currdate = self.$el.data('datetimepicker').date().clone();
+ $(this.el).datetimepicker('date', currdate.add(1, 'd'));
+ }else if (event.keyCode == 37){
+ let currdate = self.$el.data('datetimepicker').date().clone();
+ $(this.el).datetimepicker('date', currdate.subtract(1, 'd'));
+ }
+
+ if (event.altKey && event.keyCode == 84){
+ if (self.$el.data('datetimepicker').widget.find('.timepicker').is(':visible')){
+ self.$el.data('datetimepicker').widget.find('.fa-calendar').click();
+ }else{
+ self.$el.data('datetimepicker').widget.find('.fa-clock-o').click();
+ }
+ }
+
+ if(event.altKey && event.keyCode == 38){
+ let currdate = self.$el.data('datetimepicker').date().clone();
+ $(this.el).datetimepicker('date', currdate.add(1, 'h'));
+ }else if(event.altKey && event.keyCode == 40){
+ let currdate = self.$el.data('datetimepicker').date().clone();
+ $(this.el).datetimepicker('date', currdate.subtract(1, 'h'));
+ }
+
+ if (event.keyCode == 27){
+ this.$el.datetimepicker('hide');
+ stopBubble = true;
+ }
+
+ if(stopBubble) {
+ event.stopImmediatePropagation();
+ }
// If Tab key pressed from Cell and not from Datetime picker element
// then we should trigger edited event so that we can goto next cell
- let self = this;
let tabKeyPressed = true;
if (event.keyCode === 9 && self.el === event.target) {
self.closeIt(event, tabKeyPressed);
diff --git a/web/pgadmin/static/scss/_alertify.overrides.scss b/web/pgadmin/static/scss/_alertify.overrides.scss
index b20b5ca04..abbe4646a 100644
--- a/web/pgadmin/static/scss/_alertify.overrides.scss
+++ b/web/pgadmin/static/scss/_alertify.overrides.scss
@@ -281,7 +281,7 @@
}
-.ajs-commands {
+.ajs-commands, .ajs-close {
button {
@extend .btn-secondary;
outline: none !important;
diff --git a/web/pgadmin/static/vendor/backgrid/backgrid-select-all.js b/web/pgadmin/static/vendor/backgrid/backgrid-select-all.js
index e9bcf5130..4e0c5c48b 100644
--- a/web/pgadmin/static/vendor/backgrid/backgrid-select-all.js
+++ b/web/pgadmin/static/vendor/backgrid/backgrid-select-all.js
@@ -101,9 +101,10 @@
}
else if (command.save() || command.moveLeft() || command.moveRight() ||
command.moveUp() || command.moveDown()) {
- e.preventDefault();
- e.stopPropagation();
+
if(this.model) {
+ e.preventDefault();
+ e.stopPropagation();
this.model.trigger("backgrid:edited", this.model, this.column, command);
}
}
@@ -127,7 +128,7 @@
var id = 'selectall-' + _.uniqueId(this.column.get('name'));
this.$el.empty().append([
'<div class="custom-control custom-checkbox custom-checkbox-no-label">',
- ' <input tabindex="-1" type="checkbox" class="custom-control-input" id="'+ id +'" />',
+ ' <input tabindex="0" type="checkbox" class="custom-control-input" id="'+ id +'" />',
' <label class="custom-control-label" for="'+ id +'">',
' <span class="sr-only">Select All<span>',
' </label>',
diff --git a/web/pgadmin/tools/grant_wizard/static/js/grant_wizard.js b/web/pgadmin/tools/grant_wizard/static/js/grant_wizard.js
index 763edef57..6c581288b 100644
--- a/web/pgadmin/tools/grant_wizard/static/js/grant_wizard.js
+++ b/web/pgadmin/tools/grant_wizard/static/js/grant_wizard.js
@@ -431,29 +431,6 @@ define([
hooks: {
onshow: function() {
commonUtils.findAndSetFocus($(this.elements.body));
- let self = this;
- let containerFooter = $(this.elements.content).find('.wizard-buttons').find('.ml-auto');
- //To get last header button
- let lastHeaderButton = $(this.elements.content).find('.wizard-header').find('.ml-auto').find('button:first');
-
- $(containerFooter).on('keydown', 'button', function(event) {
- if (!event.shiftKey && event.keyCode == 9 && $(this).nextAll('button:not([disabled])').length == 0) {
- // set focus back to first editable input element of current active tab once we cycle through all enabled buttons.
- let container = $(self.elements.content).find('.wizard-header');
- commonUtils.findAndSetFocus(container.find('button:not([disabled]):first'));
- return false;
- }
- });
-
- $(lastHeaderButton).on('keydown', function(event) {
- if (event.shiftKey && event.keyCode == 9) {
- // set focus back to first element of current active tab once we cycle through all enabled buttons.
- let container = $(self.elements.content).find('.wizard-footer');
- commonUtils.findAndSetFocus(container.find('button:not([disabled]):last'));
- return false;
- }
- });
-
},
},
@@ -1218,7 +1195,6 @@ define([
};
});
}
-
// Call Grant Wizard Dialog and set dimensions for wizard
Alertify.wizardDialog(true).resizeTo(pgBrowser.stdW.lg,pgBrowser.stdH.lg);
},
view thread (4+ messages) latest in thread
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: [email protected]
Cc: [email protected], [email protected]
Subject: Re: [pgAdmin][RM5241] : Tab key navigation is not working in Grant wizard.
In-Reply-To: <CAJ9T6Su=AhDcj6Lnbuw1Jwy8445ZOWE=uwfrSi-08=2zpFaBLg@mail.gmail.com>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox