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.
This commit is contained in:
parent
a2e9c0f81a
commit
88c2646f7e
|
@ -25,22 +25,32 @@
|
|||
padding-top: 10px;
|
||||
padding-bottom: 10px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
#shareWithList li:first-child {
|
||||
line-height: 21px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
#shareWithList .cruds {
|
||||
margin-left:-10px;
|
||||
}
|
||||
|
||||
#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"] {
|
||||
|
|
|
@ -372,12 +372,9 @@ 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 = '';
|
||||
|
@ -389,7 +386,7 @@ OC.Share={
|
|||
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 += '<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;
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in New Issue