diff options
-rw-r--r-- | apps/files/js/filelist.js | 2 | ||||
-rw-r--r-- | apps/files/js/newfilemenu.js | 9 | ||||
-rw-r--r-- | apps/files/tests/js/filelistSpec.js | 22 | ||||
-rw-r--r-- | core/css/header.scss | 11 | ||||
-rw-r--r-- | core/css/styles.scss | 9 | ||||
-rw-r--r-- | core/js/js.js | 31 |
6 files changed, 60 insertions, 24 deletions
diff --git a/apps/files/js/filelist.js b/apps/files/js/filelist.js index fd20ebe8321..f44a36435a1 100644 --- a/apps/files/js/filelist.js +++ b/apps/files/js/filelist.js @@ -678,7 +678,7 @@ this.updateSelectionSummary(); } else { // clicked directly on the name - if (!this._detailsView || $(event.target).is('.nametext') || $(event.target).closest('.nametext').length) { + if (!this._detailsView || $(event.target).is('.nametext, .name') || $(event.target).closest('.nametext').length) { var filename = $tr.attr('data-file'); var renaming = $tr.data('renaming'); if (!renaming) { diff --git a/apps/files/js/newfilemenu.js b/apps/files/js/newfilemenu.js index a340b8b6218..0ad7312c985 100644 --- a/apps/files/js/newfilemenu.js +++ b/apps/files/js/newfilemenu.js @@ -15,7 +15,7 @@ var TEMPLATE_MENU = '<ul>' + '<li>' + - '<label for="file_upload_start" class="menuitem" data-action="upload" title="{{uploadMaxHumanFilesize}}"><span class="svg icon icon-upload"></span><span class="displayname">{{uploadLabel}}</span></label>' + + '<label for="file_upload_start" class="menuitem" data-action="upload" title="{{uploadMaxHumanFilesize}}" tabindex="0"><span class="svg icon icon-upload"></span><span class="displayname">{{uploadLabel}}</span></label>' + '</li>' + '{{#each items}}' + '<li>' + @@ -235,6 +235,13 @@ items: this._menuItems })); OC.Util.scaleFixForIE8(this.$('.svg')); + + // Trigger upload action also with keyboard navigation on enter + this.$el.find('[for="file_upload_start"]').on('keyup', function(event) { + if (event.key === " " || event.key === "Enter") { + $('#file_upload_start').trigger('click'); + } + }); }, /** diff --git a/apps/files/tests/js/filelistSpec.js b/apps/files/tests/js/filelistSpec.js index 1261e468afa..7947dd91f2d 100644 --- a/apps/files/tests/js/filelistSpec.js +++ b/apps/files/tests/js/filelistSpec.js @@ -2429,7 +2429,7 @@ describe('OCA.Files.FileList tests', function() { ); fileList.fileActions.setDefault('text/plain', 'Test'); var $tr = fileList.findFileEl('One.txt'); - $tr.find('td.filename>a.name').click(); + $tr.find('td.filesize').click(); expect(actionStub.calledOnce).toEqual(true); expect(updateDetailsViewStub.notCalled).toEqual(true); updateDetailsViewStub.restore(); @@ -2437,14 +2437,14 @@ describe('OCA.Files.FileList tests', function() { it('highlights current file when clicked and updates sidebar', function() { fileList.fileActions.setDefault('text/plain', 'Test'); var $tr = fileList.findFileEl('One.txt'); - $tr.find('td.filename>a.name').click(); + $tr.find('td.filesize').click(); expect($tr.hasClass('highlighted')).toEqual(true); expect(fileList._detailsView.getFileInfo().id).toEqual(1); }); it('keeps the last highlighted file when clicking outside', function() { var $tr = fileList.findFileEl('One.txt'); - $tr.find('td.filename>a.name').click(); + $tr.find('td.filesize').click(); fileList.$el.find('tfoot').click(); @@ -2455,12 +2455,12 @@ describe('OCA.Files.FileList tests', function() { var $tr = fileList.findFileEl('One.txt'); // select - $tr.find('td.filename>a.name').click(); + $tr.find('td.filesize').click(); $tr.find('input:checkbox').click(); expect($tr.hasClass('highlighted')).toEqual(false); // deselect - $tr.find('td.filename>a.name').click(); + $tr.find('td.filesize').click(); $tr.find('input:checkbox').click(); expect($tr.hasClass('highlighted')).toEqual(false); @@ -2470,12 +2470,12 @@ describe('OCA.Files.FileList tests', function() { var $tr = fileList.findFileEl('One.txt'); // select - $tr.find('td.filename>a.name').click(); + $tr.find('td.filesize').click(); fileList.$el.find('.select-all.checkbox').click(); expect($tr.hasClass('highlighted')).toEqual(false); // deselect - $tr.find('td.filename>a.name').click(); + $tr.find('td.filesize').click(); fileList.$el.find('.select-all.checkbox').click(); expect($tr.hasClass('highlighted')).toEqual(false); @@ -2484,7 +2484,7 @@ describe('OCA.Files.FileList tests', function() { it('closes sidebar whenever the currently highlighted file was removed from the list', function() { jQuery.fx.off = true; var $tr = fileList.findFileEl('One.txt'); - $tr.find('td.filename>a.name').click(); + $tr.find('td.filesize').click(); expect($tr.hasClass('highlighted')).toEqual(true); expect(fileList._detailsView.getFileInfo().id).toEqual(1); @@ -2497,7 +2497,7 @@ describe('OCA.Files.FileList tests', function() { }); it('returns the currently selected model instance when calling getModelForFile', function() { var $tr = fileList.findFileEl('One.txt'); - $tr.find('td.filename>a.name').click(); + $tr.find('td.filesize').click(); var model1 = fileList.getModelForFile('One.txt'); var model2 = fileList.getModelForFile('One.txt'); @@ -2512,7 +2512,7 @@ describe('OCA.Files.FileList tests', function() { it('closes the sidebar when switching folders', function() { jQuery.fx.off = true; var $tr = fileList.findFileEl('One.txt'); - $tr.find('td.filename>a.name').click(); + $tr.find('td.filesize').click(); expect($('#app-sidebar').hasClass('disappear')).toEqual(false); fileList.changeDirectory('/another'); @@ -2561,7 +2561,7 @@ describe('OCA.Files.FileList tests', function() { // not set. fileList.fileActions.currentFile = null; var $tr = fileList.findFileEl('One.txt'); - $tr.find('td.filename a.name').click(); + $tr.find('td.filesize').click(); expect(detailsActionStub.calledOnce).toEqual(true); expect(detailsActionStub.getCall(0).args[0]).toEqual('One.txt'); var context = detailsActionStub.getCall(0).args[1]; diff --git a/core/css/header.scss b/core/css/header.scss index b7565281218..1e962461da1 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -345,17 +345,13 @@ nav[role='navigation'] { opacity: 1; /* override icon opacity */ padding-right: 12px; - img { - opacity: .7; - margin-bottom: -2px; - } &:hover, &:focus, &:active { color: var(--color-primary-text); img, #expandDisplayName { - opacity: 1; + opacity: .57 !important; } } @@ -482,7 +478,8 @@ nav[role='navigation'] { } li:hover span, - li:focus span { + li:focus span, + li a:focus span { display: inline-block; } @@ -562,7 +559,7 @@ nav[role='navigation'] { padding: 11px; position: absolute; overflow: hidden; - z-index: 1000; + z-index: 9999; top: -999px; left: 3px; /* Force primary color, otherwise too light focused color */ diff --git a/core/css/styles.scss b/core/css/styles.scss index ee524d336f5..7a66ab47846 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -794,7 +794,12 @@ span.ui-icon { background-size: 16px 16px; padding: 14px; cursor: pointer; - opacity: .6; + + &:hover, + &:focus, + &:active { + opacity: 1 !important; + } } } @@ -1026,6 +1031,8 @@ div.crumb { } } &:hover, &:focus, a:focus, &:active { + opacity: 1; + > a, > span { opacity: .7; diff --git a/core/js/js.js b/core/js/js.js index ef80186b985..2812cba988c 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -684,10 +684,15 @@ var OCP = {}, registerMenu: function($toggle, $menuEl, toggle, headerMenu) { var self = this; $menuEl.addClass('menu'); - $toggle.on('click.menu', function(event) { + $toggle.on('click.menu keyup.menu', function(event) { // prevent the link event (append anchor to URL) event.preventDefault(); + // allow enter key as a trigger + if (event.key && event.key !== "Enter") { + return; + } + if ($menuEl.is(OC._currentMenu)) { self.hideMenus(); return; @@ -1422,7 +1427,14 @@ function initCore() { OC.registerMenu($('#expand'), $('#expanddiv'), false, true); // toggle for menus + //$(document).on('mouseup.closemenus keyup', function(event) { $(document).on('mouseup.closemenus', function(event) { + + // allow enter as a trigger + // if (event.key && event.key !== "Enter") { + // return; + // } + var $el = $(event.target); if ($el.closest('.menu').length || $el.closest('.menutoggle').length) { // don't close when clicking on the menu directly or a menu toggle @@ -1617,14 +1629,27 @@ function initCore() { maxPosition: 300, // $navigation-width minDragDistance: 100 }); - $('#app-content').prepend('<div id="app-navigation-toggle" class="icon-menu" style="display:none;"></div>'); - $('#app-navigation-toggle').click(function(){ + + $('#app-content').prepend('<div id="app-navigation-toggle" class="icon-menu" style="display:none;" tabindex="0"></div>'); + + var toggleSnapperOnButton = function(){ if(snapper.state().state == 'left'){ snapper.close(); } else { snapper.open('left'); } + }; + + $('#app-navigation-toggle').click(function(){ + toggleSnapperOnButton(); }); + + $('#app-navigation-toggle').keypress(function(e) { + if(e.which == 13) { + toggleSnapperOnButton(); + } + }); + // close sidebar when switching navigation entry var $appNavigation = $('#app-navigation'); $appNavigation.delegate('a, :button', 'click', function(event) { |