diff --git a/apps/files/css/files.css b/apps/files/css/files.css index 026713569a..f8c1d03b66 100644 --- a/apps/files/css/files.css +++ b/apps/files/css/files.css @@ -499,7 +499,6 @@ table td.filename .uploadtext { .fileactions { position: absolute; right: 0; - font-size: 11px; } .busy .fileactions, .busy .action { @@ -573,6 +572,13 @@ a.action > img { opacity: 0; display:none; } +#fileList a.action.action-share, +#fileList a.action.action-menu { + padding: 17px 14px; +} +#fileList .fileActionsMenu { + margin-right: 21px; +} .ie8 #fileList a.action img, #fileList tr:hover a.action, @@ -588,9 +594,9 @@ a.action > img { #fileList tr:focus a.action.disabled:focus, #fileList .name:focus a.action.disabled:focus, #fileList a.action.disabled img { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - filter: alpha(opacity=50); - opacity: .5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; + filter: alpha(opacity=30); + opacity: .3; display:inline; } .ie8 #fileList a.action:hover img, @@ -600,15 +606,44 @@ a.action > img { #fileList tr:hover a.action:hover, #fileList tr:focus a.action:focus, #fileList .name:focus a.action:focus { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - filter: alpha(opacity=100); - opacity: 1; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + filter: alpha(opacity=70); + opacity: 7; display:inline; } #fileList tr a.action.disabled { background: none; } +/* show share action of shared items darker to distinguish from non-shared */ +#fileList a.action.permanent.shared-style { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important; + filter: alpha(opacity=70) !important; + opacity: .7 !important; +} +/* always show actions on mobile, not only on hover */ +#fileList a.action, +#fileList a.action.action-menu.permanent { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)" !important; + filter: alpha(opacity=30) !important; + opacity: .3 !important; + display: inline !important; +} + +/* properly display actions in the popover menu */ +#fileList .fileActionsMenu .action { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; + filter: alpha(opacity=50) !important; + opacity: .5 !important; +} +#fileList .fileActionsMenu .action:hover, +#fileList .fileActionsMenu .action:focus { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important; + filter: alpha(opacity=100) !important; + opacity: 1 !important; +} + + #selectedActionsList a.download.disabled, #fileList tr a.action.action-download.disabled { color: #000000; diff --git a/apps/files/css/mobile.css b/apps/files/css/mobile.css index 635c24c416..c5507a1e26 100644 --- a/apps/files/css/mobile.css +++ b/apps/files/css/mobile.css @@ -32,30 +32,12 @@ table td.filename .nametext { width: 100%; } -/* show share action of shared items darker to distinguish from non-shared */ -#fileList a.action.permanent.shared-style { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)" !important; - filter: alpha(opacity=70) !important; - opacity: .7 !important; -} -/* always show actions on mobile, not only on hover */ -#fileList a.action, -#fileList a.action.action-menu.permanent { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)" !important; - filter: alpha(opacity=20) !important; - opacity: .2 !important; - display: inline !important; -} #fileList a.action.action-menu img { - padding-left: 2px; + padding-left: 0; } #fileList .fileActionsMenu { - margin-right: 5px; -} -/* some padding for better clickability */ -#fileList a.action img { - padding: 0 6px 0 12px; + margin-right: 6px; } /* hide text of the share action on mobile */ #fileList a.action-share span { diff --git a/apps/files_sharing/tests/js/shareSpec.js b/apps/files_sharing/tests/js/shareSpec.js index 581e15caf9..b6368b901e 100644 --- a/apps/files_sharing/tests/js/shareSpec.js +++ b/apps/files_sharing/tests/js/shareSpec.js @@ -117,7 +117,7 @@ describe('OCA.Sharing.Util tests', function() { $tr = fileList.$el.find('tbody tr:first'); $action = $tr.find('.action-share'); expect($action.hasClass('permanent')).toEqual(true); - expect($action.find('>span').text()).toEqual('Shared'); + expect($action.find('>span').text().trim()).toEqual('Shared'); expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg'); expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg'); expect($action.find('img').length).toEqual(1); @@ -138,7 +138,7 @@ describe('OCA.Sharing.Util tests', function() { $tr = fileList.$el.find('tbody tr:first'); $action = $tr.find('.action-share'); expect($action.hasClass('permanent')).toEqual(true); - expect($action.find('>span').text()).toEqual('Shared'); + expect($action.find('>span').text().trim()).toEqual('Shared'); expect(OC.basename($action.find('img').attr('src'))).toEqual('public.svg'); expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-public.svg'); expect($action.find('img').length).toEqual(1); @@ -159,7 +159,7 @@ describe('OCA.Sharing.Util tests', function() { $tr = fileList.$el.find('tbody tr:first'); $action = $tr.find('.action-share'); expect($action.hasClass('permanent')).toEqual(true); - expect($action.find('>span').text()).toEqual('User One'); + expect($action.find('>span').text().trim()).toEqual('User One'); expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg'); expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg'); }); @@ -179,7 +179,7 @@ describe('OCA.Sharing.Util tests', function() { $tr = fileList.$el.find('tbody tr:first'); $action = $tr.find('.action-share'); expect($action.hasClass('permanent')).toEqual(true); - expect($action.find('>span').text()).toEqual('Shared with User One, User Two'); + expect($action.find('>span').text().trim()).toEqual('Shared with User One, User Two'); expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg'); expect(OC.basename(getImageUrl($tr.find('.filename .thumbnail')))).toEqual('folder-shared.svg'); expect($action.find('img').length).toEqual(1); @@ -275,7 +275,7 @@ describe('OCA.Sharing.Util tests', function() { OC.Share.updateIcon('file', 1); expect($action.hasClass('permanent')).toEqual(true); - expect($action.find('>span').text()).toEqual('Shared with Group One, Group Two, User One, User Two'); + expect($action.find('>span').text().trim()).toEqual('Shared with Group One, Group Two, User One, User Two'); expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg'); }); it('updates share icon after updating shares of a file', function() { @@ -311,7 +311,7 @@ describe('OCA.Sharing.Util tests', function() { OC.Share.updateIcon('file', 1); expect($action.hasClass('permanent')).toEqual(true); - expect($action.find('>span').text()).toEqual('Shared with User One, User Three, User Two'); + expect($action.find('>span').text().trim()).toEqual('Shared with User One, User Three, User Two'); expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg'); }); it('removes share icon after removing all shares from a file', function() { @@ -380,7 +380,7 @@ describe('OCA.Sharing.Util tests', function() { OC.Share.updateIcon('file', 1); expect($action.hasClass('permanent')).toEqual(true); - expect($action.find('>span').text()).toEqual('User One'); + expect($action.find('>span').text().trim()).toEqual('User One'); expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg'); }); it('keep share text after unsharing reshare', function() { @@ -416,7 +416,7 @@ describe('OCA.Sharing.Util tests', function() { OC.Share.updateIcon('file', 1); expect($action.hasClass('permanent')).toEqual(true); - expect($action.find('>span').text()).toEqual('User One'); + expect($action.find('>span').text().trim()).toEqual('User One'); expect(OC.basename($action.find('img').attr('src'))).toEqual('share.svg'); }); }); diff --git a/core/css/apps.css b/core/css/apps.css index 620c301382..17595479ae 100644 --- a/core/css/apps.css +++ b/core/css/apps.css @@ -292,6 +292,7 @@ list-style-type: none; } +/* menu bubble / popover */ .bubble, #app-navigation .app-navigation-entry-menu { position: absolute; @@ -302,27 +303,15 @@ z-index: 110; margin: -5px 14px 5px 10px; right: 0; - border: 1px solid #bbb; -webkit-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); -moz-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); -ms-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); -o-filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); filter: drop-shadow(0 0 5px rgba(150, 150, 150, 0.75)); } - -#app-navigation .app-navigation-entry-menu { - display: none; -} - -#app-navigation .app-navigation-entry-menu.open { - display: block; -} - /* miraculous border arrow stuff */ .bubble:after, -.bubble:before, -#app-navigation .app-navigation-entry-menu:after, -#app-navigation .app-navigation-entry-menu:before { +#app-navigation .app-navigation-entry-menu:after { bottom: 100%; right: 0; /* change this to adjust the arrow position */ border: solid transparent; @@ -332,7 +321,6 @@ position: absolute; pointer-events: none; } - .bubble:after, #app-navigation .app-navigation-entry-menu:after { border-color: rgba(238, 238, 238, 0); @@ -340,13 +328,24 @@ border-width: 10px; margin-left: -10px; } +.bubble .action { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)" !important; + filter: alpha(opacity=50) !important; + opacity: .5 !important; +} +.bubble .action:hover, +.bubble .action:focus { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important; + filter: alpha(opacity=100) !important; + opacity: 1 !important; +} -.bubble:before, -#app-navigation .app-navigation-entry-menu:before { - border-color: rgba(187, 187, 187, 0); - border-bottom-color: #bbb; - border-width: 11px; - margin-left: -11px; +#app-navigation .app-navigation-entry-menu { + display: none; +} + +#app-navigation .app-navigation-entry-menu.open { + display: block; } /* list of options for an entry */ diff --git a/core/js/share.js b/core/js/share.js index 7e0d0b7a2d..cd4a614e9d 100644 --- a/core/js/share.js +++ b/core/js/share.js @@ -127,7 +127,7 @@ OC.Share={ if (img.attr('src') !== OC.imagePath('core', 'actions/public')) { img.attr('src', image); $(actions[i]).addClass('permanent'); - $(actions[i]).html(' '+t('core', 'Shared')+'').prepend(img); + $(actions[i]).html(' '+t('core', 'Shared')+'').prepend(img); } } for(i = 0; i < files.length; i++) { @@ -276,7 +276,7 @@ OC.Share={ else if (recipients) { message = t('core', 'Shared with {recipients}', {recipients: this._formatShareList(recipients.split(", ")).join(", ")}, 0, {escape: false}); } - action.html(' ' + message + '').prepend(img); + action.html(' ' + message + '').prepend(img); if (owner || recipients) { action.find('.remoteAddress').tipsy({gravity: 's'}); } diff --git a/core/js/tests/specs/shareSpec.js b/core/js/tests/specs/shareSpec.js index 3dc25134f5..5a59a117d7 100644 --- a/core/js/tests/specs/shareSpec.js +++ b/core/js/tests/specs/shareSpec.js @@ -1132,7 +1132,7 @@ describe('OC.Share tests', function() { OC.Share.markFileAsShared($file); $action = $file.find('.action-share>span'); - expect($action.text()).toEqual(output); + expect($action.text().trim()).toEqual(output); if (_.isString(title)) { expect($action.find('.remoteAddress').attr('title')).toEqual(title); } else { @@ -1236,7 +1236,7 @@ describe('OC.Share tests', function() { OC.Share.markFileAsShared($file, true); $action = $file.find('.action-share>span'); - expect($action.text()).toEqual(output); + expect($action.text().trim()).toEqual(output); if (_.isString(title)) { expect($action.find('.remoteAddress').attr('title')).toEqual(title); } else if (_.isArray(title)) {