mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #18577 from owncloud/action-details 

file action detail style fixes
This commit is contained in:
Morris Jobke 2015-08-26 16:28:40 +02:00
parent 2d0d79296b 202af1e322
commit 062fd37f74
6 changed files with 75 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
apps/files/css/files.css
View File

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

22
apps/files/css/mobile.css
View File

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

16
apps/files_sharing/tests/js/shareSpec.js
View File

@ -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');
});
});

39
core/css/apps.css
View File

@ -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 */

4
core/js/share.js
View File

@ -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(' <span>'+t('core', 'Shared')+'</span>').prepend(img);
$(actions[i]).html('<span> '+t('core', 'Shared')+'</span>').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(' <span>' + message + '</span>').prepend(img);
action.html('<span> ' + message + '</span>').prepend(img);
if (owner || recipients) {
action.find('.remoteAddress').tipsy({gravity: 's'});
}

4
core/js/tests/specs/shareSpec.js
View File

@ -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)) {