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

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:
Vincent Petry 2013-10-23 17:56:28 +02:00
parent a2e9c0f81a
commit 88c2646f7e
2 changed files with 41 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
core/css/share.css
View File

@ -21,26 +21,36 @@
padding:.5em;
}
#shareWithList li {
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
}
#shareWithList li {
padding-top: 10px;
padding-bottom: 10px;
font-weight: bold;
line-height: 21px;
white-space: normal;
}
#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 .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"] {

25
core/js/share.js
View File

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