diff --git a/docs/en_US/release_notes_4_18.rst b/docs/en_US/release_notes_4_18.rst index 90e60bc3b..5fe703af8 100644 --- a/docs/en_US/release_notes_4_18.rst +++ b/docs/en_US/release_notes_4_18.rst @@ -35,4 +35,5 @@ Bug fixes | `Issue #5065 `_ - Updated the incorrect icon used for the cast node on refresh. | `Issue #5066 `_ - Fix an issue where refreshing a package results in the change in the object completely. | `Issue #5074 `_ - Fix an issue where select, insert and update scripts on tables throwing an error. -| `Issue #5076 `_ - Ensure Postfix starts in the container, now it runs as non-root by default. \ No newline at end of file +| `Issue #5076 `_ - Ensure Postfix starts in the container, now it runs as non-root by default. +| `Issue #5107 `_ - Set proper focus on tab navigation for file manager dialog. \ No newline at end of file diff --git a/web/pgadmin/misc/file_manager/static/js/create_dialogue.js b/web/pgadmin/misc/file_manager/static/js/create_dialogue.js index a3c44ec88..268d8d727 100644 --- a/web/pgadmin/misc/file_manager/static/js/create_dialogue.js +++ b/web/pgadmin/misc/file_manager/static/js/create_dialogue.js @@ -28,11 +28,7 @@ module.exports = Alertify.dialog('createModeDlg', function() { text: gettext('Create'), key: 13, className: 'btn btn-primary fa fa-file file_manager_create file_manager_ok pg-alertify-button disabled', - }, - ], - focus: { - element: 0, - }, + }], options: { closableByDimmer: false, maximizable: false, @@ -175,6 +171,7 @@ module.exports = Alertify.dialog('createModeDlg', function() { if (!_.isUndefined(newFile) && newFile !== '' && this.is_file_exist()) { this.replace_file(); + this.$container.find('.replace_file').find('.btn_yes').trigger('focus'); closeEvent.cancel = true; } else { pgAdmin.Browser.Events.trigger('pgadmin-storage:finish_btn:create_file', newFile); 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 219e6ba4f..97d1ed770 100644 --- a/web/pgadmin/misc/file_manager/static/js/select_dialogue.js +++ b/web/pgadmin/misc/file_manager/static/js/select_dialogue.js @@ -91,9 +91,6 @@ module.exports = Alertify.dialog('fileSelectionDlg', function() { key: 13, className: 'btn btn-primary fa fa-file file_manager_ok pg-alertify-button disabled', }], - focus: { - element: 0, - }, options: { closableByDimmer: false, maximizable: false, diff --git a/web/pgadmin/misc/file_manager/static/js/utility.js b/web/pgadmin/misc/file_manager/static/js/utility.js index bd0e51cac..86d239989 100644 --- a/web/pgadmin/misc/file_manager/static/js/utility.js +++ b/web/pgadmin/misc/file_manager/static/js/utility.js @@ -474,7 +474,7 @@ define([ /* For the html ele */ let item_ele = - `
  • + `
  • `; @@ -530,7 +530,7 @@ define([ ` - + `
    + ${lg.name} @@ -575,7 +575,7 @@ define([ /* For the html ele */ let item_ele = - `
    `; let data_protected = ''; @@ -698,7 +698,7 @@ define([ $('.storage_dialog #uploader .input-path').prop('disabled', false); var result = '', data = resp.data.result; - + let isGridView = false; // hide activity indicator $('.fileinfo').find('span.activity').hide(); if (data.Code === 0) { @@ -711,6 +711,7 @@ define([ // generate HTML for files/folder and render into container if ($('.fileinfo').data('view') == 'grid') { result += getGridView(data, capabilities); + isGridView = true; } else { result += getListView(data, capabilities); } @@ -737,6 +738,23 @@ define([ $.tablesorter.resizable.setWidth($listing_table.find('th[data-column="2"]'), wo.resizable_widths[2]); }); + /* Role of this function is to click or double click on element when user is doing keyboard navigation*/ + var clickOnFileFolderManually = function(event) { + let self = this; + event.preventDefault(); + event.stopPropagation(); + // if file/folder is protected do nothing + if ($(this).find('.fa-lock').length) + return; + if ($(this).find('.fa-file-text-o').length) + $(this).click(); + // If folder then first select and then double click to opn folder + else if ($(this).find('.fa-folder-open').length) { + $(this).click(); + setTimeout(() => { $(self).trigger('dblclick'); }, 10); + } + }; + $listing_table.on( 'tablesorter-ready', function() { let wo = this.config.widgetOptions; if($.tablesorter.storage($listing_table[0], 'tablesorter-table-resized-width') === '') { @@ -744,8 +762,55 @@ define([ } $.tablesorter.resizable.setWidth($listing_table.find('th[data-column="2"]'), wo.resizable_widths[2]); $listing_table.trigger('resizableUpdate'); + + // Table Sorter writes table elements randomly so we need to handle some corner cases manually + $('#show_hidden').off('keydown').on('keydown', function(event) { + if (!isGridView && event.keyCode == 9 && event.shiftKey) { + event.preventDefault(); + $listing_table.find('tbody tr:last').trigger('focus'); + } + }); + + $listing_table.find('tbody tr').off('keydown').on('keydown', function(event) { + // If key is pressed then we need to trigger click so that it can select file + if (event.keyCode == 13 || event.keyCode == 32) { + clickOnFileFolderManually.call(this, event); + } else if (event.keyCode == 9) { + if (event.shiftKey) { + // When first tr losses focus and shift + tab > we need to set focus on header + if ($(this).prev().length == 0) { + event.preventDefault(); + $listing_table.find('th.tablesorter-header:last').trigger('focus'); + } + } else { + // When last tr losses focus and Tab was pressed > we need to set focus on checkbox + if ($(this).next().length == 0) { + event.preventDefault(); + $('#show_hidden').trigger('focus'); + } + } + } + }); + + $listing_table.find('th.tablesorter-header').off('keydown').on('keydown', function(event) { + // If key is pressed then we need to trigger click so that it can sort + if (event.keyCode == 13 || event.keyCode == 32) { + event.preventDefault(); + event.stopPropagation(); + $(this).trigger('click'); + } + }); }); + if(isGridView) { + $('.file_manager').find('#contents li').off('keydown').on('keydown', function(event) { + // If key is pressed then we need to trigger click so that it can sort + if (event.keyCode == 13 || event.keyCode == 32) { + clickOnFileFolderManually.call(this, event); + } + }); + } + // rename file/folder $('.file_manager button.rename').off().on('click', function(e) { @@ -1195,11 +1260,11 @@ define([ select_box = `
    ${gettext('Show hidden files and folders')}? - +
    - +
    `; } @@ -1255,6 +1320,8 @@ define([ enable_disable_btn(); }); + + // Refresh current directory $('.file_manager .refresh').on('click', function() { enable_disable_btn(); @@ -1476,12 +1543,12 @@ define([ // we remove simple file upload element $('.file-input-container').remove(); $('.upload').remove(); - $('.create').before(' '); + $('.create').before(' '); $('#uploader .upload').off().on('click', function() { // we create prompt var msg = '
    ' + - '' + + '' + '
    '+ '
    '+ '
    ' + @@ -1645,7 +1712,7 @@ define([ // template for creating new folder folder_div = - '
  • ' + + '
  • ' + '
    ' + '
    New_Folder
    ' + '
    • '; diff --git a/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss b/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss index fc9019036..cf6558350 100644 --- a/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss +++ b/web/pgadmin/misc/file_manager/static/scss/_file_manager.scss @@ -333,3 +333,16 @@ font-size: 8px; margin-right: -8px; } + +table.tablesorter { + th:focus, + tr:focus { + outline: $input-focus-border-color auto 5px !important; + } +} + +#contents { + li:focus { + outline: $input-focus-border-color auto 5px !important; + } +} diff --git a/web/pgadmin/misc/file_manager/templates/file_manager/index.html b/web/pgadmin/misc/file_manager/templates/file_manager/index.html index f41860676..99ef0acf9 100644 --- a/web/pgadmin/misc/file_manager/templates/file_manager/index.html +++ b/web/pgadmin/misc/file_manager/templates/file_manager/index.html @@ -9,15 +9,15 @@
    - +
    @@ -25,7 +25,7 @@
    - -
    @@ -67,15 +67,15 @@
    {{ _('Are you sure you want to delete this item?') }} - - + +
    {{ _('Are you sure you want to replace this file?') }} - - + +
    diff --git a/web/pgadmin/static/js/backgrid.pgadmin.js b/web/pgadmin/static/js/backgrid.pgadmin.js index 2ea0ec90e..5bf2fec5b 100644 --- a/web/pgadmin/static/js/backgrid.pgadmin.js +++ b/web/pgadmin/static/js/backgrid.pgadmin.js @@ -781,6 +781,7 @@ define([ this.$select.off('blur', this.exitEditMode); this.$select.select2('close'); this.$el.removeClass('editor'); + this.$el.find('.select2-selection').trigger('focus'); }, saveOrCancel: function (e) { @@ -794,7 +795,9 @@ define([ let gotoCell; // go to Next Cell & if Shift is also pressed go to Previous Cell - gotoCell = e.shiftKey ? self.$el.prev() : self.$el.next(); + if (e.keyCode == 9 || e.keyCode == 16) { + gotoCell = e.shiftKey ? self.$el.prev() : self.$el.next(); + } if (gotoCell) { let command = new Backgrid.Command({