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.

diff --git a/core/css/share.css b/core/css/share.css
index 1ad7bf8d888efb298a4a745d0cf5c2d656def17c..d8140242e0670db4cd2cb6ad7928793fecd383e7 100644 (file)
--- 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 d064a399e55895db96f5a8b7b3abc4b481b6cc84..a8f28a4ec05ec11ebc4c6dde92868f99a484f418 100644 (file)
--- 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;
        });