pgadmin-org
/
pgadmin4
mirror of https://github.com/pgadmin-org/pgadmin4.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed keyboard navigation for Select2 and Privilege cell in Backgrid Fixes #3908

pull/20/head
Harshal Dhumal 2019-01-22 16:35:57 +05:30 committed by Akshay Joshi
parent f731ab730b
commit ea87d6da8f
5 changed files with 88 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/en_US/release_notes_4_2.rst
View File

@ -30,4 +30,5 @@ Bug fixes
| `Bug #3862 <https://redmine.postgresql.org/issues/3862>`_ - Fixed keyboard navigation for dialog tabs.
| `Bug #3871 <https://redmine.postgresql.org/issues/3871>`_ - Fixed alignment of tree arrow icons for Internet Explorer.
| `Bug #3891 <https://redmine.postgresql.org/issues/3891>`_ - Correct order of Save and Cancel button for json/jsonb editing.
| `Bug #3897 <https://redmine.postgresql.org/issues/3897>`_ - Data should be updated properly for FTS Configurations, FTS Dictionaries, FTS Parsers and FTS Templates.
| `Bug #3897 <https://redmine.postgresql.org/issues/3897>`_ - Data should be updated properly for FTS Configurations, FTS Dictionaries, FTS Parsers and FTS Templates.
| `Bug #3908 <https://redmine.postgresql.org/issues/3908>`_ - Fixed keyboard navigation for Select2 and Privilege cell in Backgrid.

34
web/pgadmin/browser/server_groups/servers/databases/schemas/tables/column/static/js/column.js
View File

@ -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,

67
web/pgadmin/browser/server_groups/servers/static/js/privilege.js
View File

@ -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;

18
web/pgadmin/static/js/backgrid.pgadmin.js
View File

@ -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([

4
web/pgadmin/static/scss/_pgadmin.style.scss
View File

@ -656,6 +656,10 @@ fieldset.inline-fieldset > div {
outline: none;
}
input[type="checkbox"]:focus {
outline: $color-primary auto 5px !important;
}
div.rolmembership {
margin-top: 15px;
}