public inbox for [email protected]help / color / mirror / Atom feed
[pgAdmin4][RM3908] backgrid navigation fix for Select2Cell and PrivilegeCell 4+ messages / 3 participants [nested] [flat]
* [pgAdmin4][RM3908] backgrid navigation fix for Select2Cell and PrivilegeCell @ 2019-01-17 13:52 Harshal Dhumal <[email protected]> 0 siblings, 1 reply; 4+ messages in thread From: Harshal Dhumal @ 2019-01-17 13:52 UTC (permalink / raw) To: pgadmin-hackers Hi, Please find attached patch to fix backgrid navigation using keyboard for Select2Cell and PrivilegeCell -- *Harshal Dhumal* *Sr. Software Engineer* EnterpriseDB India: http://www.enterprisedb.com The Enterprise PostgreSQL Company Attachments: [text/x-patch] RM3908.patch (8.5K, 3-RM3908.patch) download | inline diff: diff --git a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/column/static/js/column.js b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/column/static/js/column.js index 9031d94..b00998b 100644 --- a/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/column/static/js/column.js +++ b/web/pgadmin/browser/server_groups/servers/databases/schemas/tables/column/static/js/column.js @@ -269,39 +269,7 @@ define('pgadmin.node.column', [ type: 'text', disabled: 'notInSchema', mode: ['properties'], },{ id: 'cltype', label: gettext('Data type'), - cell: Backgrid.Extension.NodeAjaxOptionsCell.extend({ - exitEditMode: function(e) { - var self = this; - this.$select.off('blur', this.exitEditMode); - this.$select.select2('close'); - this.$el.removeClass('editor'); - // Once user have selected a value - // we can shift to next cell if it is editable - var next_cell, length_cell = this.$el.next(), - not_null_cell = this.$el.next().next().next(); - - // Add delay so that Select2 cell tab event is captured - // first before triggerring backgrid:edited event. - setTimeout(function() { - // First check Length column if it is disable then goto - // Not Null column - if(length_cell && length_cell.hasClass('editable') && e) { - next_cell = length_cell; - } else if(not_null_cell && not_null_cell.hasClass('editable') && e) { - next_cell = not_null_cell; - } - - if(next_cell) { - e.preventDefault(); - e.stopPropagation(); - var command = new Backgrid.Command({key: 'Tab', keyCode: 9, which: 9}); - self.model.trigger('backgrid:edited', self.model, self.column, - command); - next_cell.trigger('focus'); - } - }, 20); - }, - }), + cell: Backgrid.Extension.NodeAjaxOptionsCell, type: 'text', disabled: 'inSchemaWithColumnCheck', control: 'node-ajax-options', url: 'get_types', node: 'table', cellHeaderClasses:'width_percent_30', first_empty: true, diff --git a/web/pgadmin/browser/server_groups/servers/static/js/privilege.js b/web/pgadmin/browser/server_groups/servers/static/js/privilege.js index c5663f7..5476cf8 100644 --- a/web/pgadmin/browser/server_groups/servers/static/js/privilege.js +++ b/web/pgadmin/browser/server_groups/servers/static/js/privilege.js @@ -329,13 +329,13 @@ define(['sources/gettext', 'underscore', 'jquery', 'backbone', 'backform', '<tr class="<%= header ? "header" : "" %>">', ' <td class="renderable">', ' <label class="privilege_label">', - ' <input type="checkbox" name="privilege" privilege="<%- privilege_type %>" target="<%- target %>" <%= privilege ? \'checked\' : "" %>></input>', + ' <input type="checkbox" tabindex="1" name="privilege" privilege="<%- privilege_type %>" target="<%- target %>" <%= privilege ? \'checked\' : "" %>></input>', ' <%- privilege_label %>', ' </label>', ' </td>', ' <td class="renderable">', ' <label class="privilege_label">', - ' <input type="checkbox" name="with_grant" privilege="<%- privilege_type %>" target="<%- target %>" <%= with_grant ? \'checked\' : "" %> <%= enable_with_grant ? "" : \'disabled\'%>></input>', + ' <input type="checkbox" tabindex="1" name="with_grant" privilege="<%- privilege_type %>" target="<%- target %>" <%= with_grant ? \'checked\' : "" %> <%= enable_with_grant ? "" : \'disabled\'%>></input>', ' WITH GRANT OPTION', ' </label>', ' </td>', @@ -344,6 +344,7 @@ define(['sources/gettext', 'underscore', 'jquery', 'backbone', 'backform', events: { 'change': 'privilegeChanged', 'blur': 'lostFocus', + 'keydown': 'lostFocus', }, render: function () { @@ -608,7 +609,42 @@ define(['sources/gettext', 'underscore', 'jquery', 'backbone', 'backform', node = node.parentNode; } return false; - }; + }, + model = this.model, + column = this.column, + command = new Backgrid.Command(ev), + coll = this.model.get(this.column.get('name')); + + if (command.moveUp() || command.moveDown() || command.save()) { + // backgrid vertical navigation (Up/Down arrow key) + ev.preventDefault(); + ev.stopPropagation(); + model.trigger('backgrid:edited', model, column, command); + return; + } + // esc + else if (command.cancel()) { + // undo + ev.stopPropagation(); + model.trigger('backgrid:edited', model, column, command); + return; + } else if (command.moveRight()) { + // If we are at the last privilege then we should move to next cell + if (coll.last().get('privilege_type') === $(ev.target).attr('privilege')) { + if ((ev.target.name === 'privilege' && !ev.target.checked ) || + $(ev.target).attr('name') === 'with_grant') { + ev.stopPropagation(); + model.trigger('backgrid:edited', model, column, command); + return; + } + } + } else if (command.moveLeft() && ev.target.name === 'privilege' && + $(ev.target).attr('privilege') === 'ALL') { + // If we are at the fist privilege then we should move to previous cell + ev.stopPropagation(); + model.trigger('backgrid:edited', model, column, command); + return; + } /* * Between leaving the old element focus and entering the new element focus the @@ -630,7 +666,6 @@ define(['sources/gettext', 'underscore', 'jquery', 'backbone', 'backform', var m = self.model; m.trigger('backgrid:edited', m, self.column, new Backgrid.Command(ev)); }},10); - return; }, }); @@ -700,6 +735,30 @@ define(['sources/gettext', 'underscore', 'jquery', 'backbone', 'backform', } }); }, + + events: { + 'click': 'enterEditMode', + 'keydown': 'saveOrCancel', + }, + + saveOrCancel: function (e) { + var model = this.model; + var column = this.column; + var command = new Backgrid.Command(e); + + if (command.moveUp() || command.moveDown() || command.moveLeft() || command.moveRight() || + command.save()) { + e.preventDefault(); + e.stopPropagation(); + model.trigger('backgrid:edited', model, column, command); + } + // esc + else if (command.cancel()) { + // undo + e.stopPropagation(); + model.trigger('backgrid:edited', model, column, command); + } + }, }); return PrivilegeRoleModel; diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js index 2832b5a..9ea4ad4 100644 --- a/web/pgadmin/static/js/backgrid.pgadmin.js +++ b/web/pgadmin/static/js/backgrid.pgadmin.js @@ -591,11 +591,29 @@ define([ this.$el.removeClass('editor'); }, + saveOrCancel: function (e) { + var model = this.model; + var column = this.column; + + var command = new Backgrid.Command(e); + var blurred = e.type === 'blur'; + + if (command.moveUp() || command.moveDown() || command.moveLeft() || command.moveRight() || + command.save() || blurred) { + + this.exitEditMode(); + e.preventDefault(); + e.stopPropagation(); + model.trigger('backgrid:edited', model, column, command); + } + }, events: { 'select2:open': 'enterEditMode', 'select2:close': 'exitEditMode', 'change': 'onSave', 'select2:unselect': 'onSave', + 'blur': 'saveOrCancel', + 'keydown': 'saveOrCancel', }, /** @property {function(Object, ?Object=): string} template */ template: _.template([ diff --git a/web/pgadmin/static/scss/_pgadmin.style.scss b/web/pgadmin/static/scss/_pgadmin.style.scss index 6ec4293..73528b9 100644 --- a/web/pgadmin/static/scss/_pgadmin.style.scss +++ b/web/pgadmin/static/scss/_pgadmin.style.scss @@ -653,6 +653,10 @@ fieldset.inline-fieldset > div { outline: none; } +input[type="checkbox"]:focus { + outline: $color-primary auto 5px !important; +} + div.rolmembership { margin-top: 15px; } ^ permalink raw reply [nested|flat] 4+ messages in thread
* Re: [pgAdmin4][RM3908] backgrid navigation fix for Select2Cell and PrivilegeCell @ 2019-01-21 11:09 Akshay Joshi <[email protected]> parent: Harshal Dhumal <[email protected]> 0 siblings, 1 reply; 4+ messages in thread From: Akshay Joshi @ 2019-01-21 11:09 UTC (permalink / raw) To: Harshal Dhumal <[email protected]>; +Cc: pgadmin-hackers Hi Khushboo Can you please review it. On Thu, Jan 17, 2019 at 7:22 PM Harshal Dhumal < [email protected]> wrote: > Hi, > Please find attached patch to fix backgrid navigation using keyboard > for Select2Cell and PrivilegeCell > > -- > *Harshal Dhumal* > *Sr. Software Engineer* > > EnterpriseDB India: http://www.enterprisedb.com > The Enterprise PostgreSQL Company > -- *Akshay Joshi* *Sr. Software Architect * *Phone: +91 20-3058-9517Mobile: +91 976-788-8246* ^ permalink raw reply [nested|flat] 4+ messages in thread
* Re: [pgAdmin4][RM3908] backgrid navigation fix for Select2Cell and PrivilegeCell @ 2019-01-22 09:32 Khushboo Vashi <[email protected]> parent: Akshay Joshi <[email protected]> 0 siblings, 1 reply; 4+ messages in thread From: Khushboo Vashi @ 2019-01-22 09:32 UTC (permalink / raw) To: Akshay Joshi <[email protected]>; +Cc: Harshal Dhumal <[email protected]>; pgadmin-hackers Hi Harshal, The Selec2Cell and PrivilegeCell are working properly but I think we should also consider below: 1. The Backgrid and sub-node should have accessibility including every button, cell and control. 2. The Backgrid table header is accessible through keyboard but it should be highlighted when it gets focus. @Akshay, we can commit this patch but we should create the separate RM for above fixes. Thanks, Khushboo On Mon, Jan 21, 2019 at 4:40 PM Akshay Joshi <[email protected]> wrote: > Hi Khushboo > > Can you please review it. > > On Thu, Jan 17, 2019 at 7:22 PM Harshal Dhumal < > [email protected]> wrote: > >> Hi, >> Please find attached patch to fix backgrid navigation using keyboard >> for Select2Cell and PrivilegeCell >> >> -- >> *Harshal Dhumal* >> *Sr. Software Engineer* >> >> EnterpriseDB India: http://www.enterprisedb.com >> The Enterprise PostgreSQL Company >> > > > -- > *Akshay Joshi* > > *Sr. Software Architect * > > > > *Phone: +91 20-3058-9517Mobile: +91 976-788-8246* > ^ permalink raw reply [nested|flat] 4+ messages in thread
* Re: [pgAdmin4][RM3908] backgrid navigation fix for Select2Cell and PrivilegeCell @ 2019-01-22 11:07 Akshay Joshi <[email protected]> parent: Khushboo Vashi <[email protected]> 0 siblings, 0 replies; 4+ messages in thread From: Akshay Joshi @ 2019-01-22 11:07 UTC (permalink / raw) To: Harshal Dhumal <[email protected]>; +Cc: pgadmin-hackers Thanks patch applied On Tue, Jan 22, 2019 at 3:02 PM Khushboo Vashi < [email protected]> wrote: > Hi Harshal, > > The Selec2Cell and PrivilegeCell are working properly but I think we > should also consider below: > > 1. The Backgrid and sub-node should have accessibility including every > button, cell and control. > 2. The Backgrid table header is accessible through keyboard but it should > be highlighted when it gets focus. > > @Akshay, we can commit this patch but we should create the separate RM for > above fixes. > RM # 3919 has been created by Harshal. > > Thanks, > Khushboo > > > On Mon, Jan 21, 2019 at 4:40 PM Akshay Joshi < > [email protected]> wrote: > >> Hi Khushboo >> >> Can you please review it. >> >> On Thu, Jan 17, 2019 at 7:22 PM Harshal Dhumal < >> [email protected]> wrote: >> >>> Hi, >>> Please find attached patch to fix backgrid navigation using keyboard >>> for Select2Cell and PrivilegeCell >>> >>> -- >>> *Harshal Dhumal* >>> *Sr. Software Engineer* >>> >>> EnterpriseDB India: http://www.enterprisedb.com >>> The Enterprise PostgreSQL Company >>> >> >> >> -- >> *Akshay Joshi* >> >> *Sr. Software Architect * >> >> >> >> *Phone: +91 20-3058-9517Mobile: +91 976-788-8246* >> > -- *Akshay Joshi* *Sr. Software Architect * *Phone: +91 20-3058-9517Mobile: +91 976-788-8246* ^ permalink raw reply [nested|flat] 4+ messages in thread
end of thread, other threads:[~2019-01-22 11:07 UTC | newest] Thread overview: 4+ messages (download: mbox mbox.gz follow: Atom feed) -- links below jump to the message on this page -- 2019-01-17 13:52 [pgAdmin4][RM3908] backgrid navigation fix for Select2Cell and PrivilegeCell Harshal Dhumal <[email protected]> 2019-01-21 11:09 ` Akshay Joshi <[email protected]> 2019-01-22 09:32 ` Khushboo Vashi <[email protected]> 2019-01-22 11:07 ` Akshay Joshi <[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