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
|
@ -21,26 +21,36 @@
|
||||||
padding:.5em;
|
padding:.5em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#shareWithList li {
|
#shareWithList li {
|
||||||
padding-top: 10px;
|
padding-top: 10px;
|
||||||
padding-bottom: 10px;
|
padding-bottom: 10px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
line-height: 21px;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
#shareWithList li:first-child {
|
#shareWithList .unshare img, #shareWithList .showCruds img {
|
||||||
white-space:normal;
|
vertical-align:text-bottom; /* properly align icons */
|
||||||
}
|
}
|
||||||
|
|
||||||
#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 {
|
#dropdown label {
|
||||||
font-weight:400;
|
font-weight:400;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
#dropdown input[type="checkbox"] {
|
#dropdown input[type="checkbox"] {
|
||||||
|
|
|
@ -372,24 +372,21 @@ OC.Share={
|
||||||
shareChecked = 'checked="checked"';
|
shareChecked = 'checked="checked"';
|
||||||
}
|
}
|
||||||
var html = '<li style="clear: both;" data-share-type="'+escapeHTML(shareType)+'" data-share-with="'+escapeHTML(shareWith)+'" title="' + escapeHTML(shareWith) + '">';
|
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>';
|
html += '<a href="#" class="unshare"><img class="svg" alt="'+t('core', 'Unshare')+'" src="'+OC.imagePath('core', 'actions/delete')+'"/></a>';
|
||||||
if(shareWith.length > 14){
|
html += '<span class="username">' + escapeHTML(shareWithDisplayName) + '</span>';
|
||||||
html += escapeHTML(shareWithDisplayName.substr(0,11) + '...');
|
|
||||||
}else{
|
|
||||||
html += escapeHTML(shareWithDisplayName);
|
|
||||||
}
|
|
||||||
var mailNotificationEnabled = $('input:hidden[name=mailNotificationEnabled]').val();
|
var mailNotificationEnabled = $('input:hidden[name=mailNotificationEnabled]').val();
|
||||||
if (mailNotificationEnabled === 'yes') {
|
if (mailNotificationEnabled === 'yes') {
|
||||||
var checked = '';
|
var checked = '';
|
||||||
if (mailSend === '1') {
|
if (mailSend === '1') {
|
||||||
checked = 'checked';
|
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) {
|
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;">';
|
html += '<div class="cruds" style="display:none;">';
|
||||||
if (possiblePermissions & OC.PERMISSION_CREATE) {
|
if (possiblePermissions & OC.PERMISSION_CREATE) {
|
||||||
html += '<label><input type="checkbox" name="create" class="permissions" '+createChecked+' data-permissions="'+OC.PERMISSION_CREATE+'" />'+t('core', 'create')+'</label>';
|
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 += '</div>';
|
||||||
html += '</li>';
|
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();
|
$('#expiration').show();
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
@ -512,7 +517,7 @@ $(document).ready(function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
$(document).on('click', '#dropdown .showCruds', function() {
|
$(document).on('click', '#dropdown .showCruds', function() {
|
||||||
$(this).parent().find('.cruds').toggle();
|
$(this).closest('li').find('.cruds').toggle();
|
||||||
return false;
|
return false;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue