diff options
author | Vincent Petry <pvince81@owncloud.com> | 2013-10-23 19:56:28 +0400 |
---|---|---|
committer | Vincent Petry <pvince81@owncloud.com> | 2013-10-23 19:58:27 +0400 |
commit | 88c2646f7ec4d9d7dc9fd3e3a12305a357aaac17 (patch) | |
tree | 030d606a2b0ed088e629598c76022e37a68e39f8 /core | |
parent | a2e9c0f81a28cf1f38e1c123aec7a4f82fbf65d3 (diff) |
Fixed share dropdown checkbox wrapping
The "show cruds" button is now embedded into the last label/checkbox
group and wraps with it.
Added ellipsis to prevent long names to exceed the dropdown's width.
Diffstat (limited to 'core')
-rw-r--r-- | core/css/share.css | 46 | ||||
-rw-r--r-- | core/js/share.js | 25 |
2 files changed, 43 insertions, 28 deletions
diff --git a/core/css/share.css b/core/css/share.css index 1ad7bf8d888..d8140242e06 100644 --- a/core/css/share.css +++ b/core/css/share.css @@ -21,26 +21,36 @@ padding:.5em; } -#shareWithList li { - padding-top: 10px; - padding-bottom: 10px; - font-weight: bold; -} - -#shareWithList li:first-child { - white-space:normal; -} - -#shareWithList .cruds { - margin-left:-10px; -} - -#shareWithList .unshare img, #shareWithList .showCruds img { - vertical-align:text-bottom; /* properly align icons */ -} - + #shareWithList li { + padding-top: 10px; + padding-bottom: 10px; + font-weight: bold; + line-height: 21px; + white-space: normal; + } + + #shareWithList .unshare img, #shareWithList .showCruds img { + vertical-align:text-bottom; /* properly align icons */ + } + + #shareWithList label input[type=checkbox]{ + margin-left: 0; + } + #shareWithList .username{ + padding-right: .5em; + white-space: nowrap; + text-overflow: ellipsis; + max-width: 254px; + display: inline-block; + overflow: hidden; + vertical-align: middle; + } + #shareWithList li label{ + margin-right: .5em; + } #dropdown label { font-weight:400; + white-space: nowrap; } #dropdown input[type="checkbox"] { diff --git a/core/js/share.js b/core/js/share.js index d064a399e55..a8f28a4ec05 100644 --- a/core/js/share.js +++ b/core/js/share.js @@ -372,24 +372,21 @@ OC.Share={ shareChecked = 'checked="checked"'; } var html = '<li style="clear: both;" data-share-type="'+escapeHTML(shareType)+'" data-share-with="'+escapeHTML(shareWith)+'" title="' + escapeHTML(shareWith) + '">'; + var showCrudsButton; html += '<a href="#" class="unshare"><img class="svg" alt="'+t('core', 'Unshare')+'" src="'+OC.imagePath('core', 'actions/delete')+'"/></a>'; - if(shareWith.length > 14){ - html += escapeHTML(shareWithDisplayName.substr(0,11) + '...'); - }else{ - html += escapeHTML(shareWithDisplayName); - } + html += '<span class="username">' + escapeHTML(shareWithDisplayName) + '</span>'; var mailNotificationEnabled = $('input:hidden[name=mailNotificationEnabled]').val(); if (mailNotificationEnabled === 'yes') { var checked = ''; if (mailSend === '1') { checked = 'checked'; } - html += '<label><input type="checkbox" name="mailNotification" class="mailNotification" ' + checked + ' />'+t('core', 'notify by email')+'</label>'; + html += '<label><input type="checkbox" name="mailNotification" class="mailNotification" ' + checked + ' />'+t('core', 'notify by email')+'</label> '; } if (possiblePermissions & OC.PERMISSION_CREATE || possiblePermissions & OC.PERMISSION_UPDATE || possiblePermissions & OC.PERMISSION_DELETE) { - html += '<label><input type="checkbox" name="edit" class="permissions" '+editChecked+' />'+t('core', 'can edit')+'</label>'; + html += '<label><input type="checkbox" name="edit" class="permissions" '+editChecked+' />'+t('core', 'can edit')+'</label> '; } - html += '<a href="#" class="showCruds"><img class="svg" alt="'+t('core', 'access control')+'" src="'+OC.imagePath('core', 'actions/triangle-s')+'"/></a>'; + showCrudsButton = '<a href="#" class="showCruds"><img class="svg" alt="'+t('core', 'access control')+'" src="'+OC.imagePath('core', 'actions/triangle-s')+'"/></a>'; html += '<div class="cruds" style="display:none;">'; if (possiblePermissions & OC.PERMISSION_CREATE) { html += '<label><input type="checkbox" name="create" class="permissions" '+createChecked+' data-permissions="'+OC.PERMISSION_CREATE+'" />'+t('core', 'create')+'</label>'; @@ -405,7 +402,15 @@ OC.Share={ } html += '</div>'; html += '</li>'; - $(html).appendTo('#shareWithList'); + html = $(html).appendTo('#shareWithList'); + // insert cruds button into last label element + var lastLabel = html.find('>label:last'); + if (lastLabel.exists()){ + lastLabel.append(showCrudsButton); + } + else{ + html.find('.cruds').before(showCrudsButton); + } $('#expiration').show(); } }, @@ -512,7 +517,7 @@ $(document).ready(function() { }); $(document).on('click', '#dropdown .showCruds', function() { - $(this).parent().find('.cruds').toggle(); + $(this).closest('li').find('.cruds').toggle(); return false; }); |