Merge pull request #939 from girder/wider-modal-dialogs

Allow wider modal dialogs.

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 ### Improvements
 - Add a general filter control to item lists ([938](../../pull/938))
+- Item list modal dialogs are wider ([939](../../pull/939))
 
 ## 1.16.1
 

girder/girder_large_image/web_client/stylesheets/itemList.styl

@@ -9,6 +9,8 @@ div.large_image_thumbnail
 div.large_image_container
   display inline-block
   min-width 160px
+div.large_image_container+span
+  white-space nowrap
 [large_image_columns="2"]
   div.large_image_container
     min-width 320px
@@ -63,3 +65,10 @@ ul.g-item-list
         width inherit
 .li-item-list-filter
   padding-left 12px
+@media (min-width: 768px)
+  .modal-dialog.li-item-list-dialog
+    width inherit
+@media (min-width: 900px)
+  .modal-dialog.li-item-list-dialog
+    width 70%
+    max-width 1000px

girder/girder_large_image/web_client/views/itemList.js

@@ -62,6 +62,8 @@ wrap(ItemListWidget, 'initialize', function (initialize, settings) {
 });
 
 wrap(ItemListWidget, 'render', function (render) {
+    this.$el.closest('.modal-dialog').addClass('li-item-list-dialog');
+
     /* Chrome limits the number of connections to a single domain, which means
      * that time-consuming requests for thumbnails can bind-up the web browser.
      * To avoid this, limit the maximum number of thumbnails that are requested
@@ -182,8 +184,8 @@ wrap(ItemListWidget, 'render', function (render) {
     this._setFilter = () => {
         let val = this._generalFilter;
         let filter;
-        if (val !== undefined && val !== '') {
-            const columns = (this._confList() || {}).columns || [];
+        const columns = (this._confList() || {}).columns || [];
+        if (val !== undefined && val !== '' && columns.length) {
             filter = [];
             val.match(/"[^"]*"|'[^']*'|\S+/g).forEach((phrase) => {
                 if (!phrase.length) {
@@ -318,7 +320,8 @@ wrap(ItemListWidget, 'render', function (render) {
                             }
                         });
                     }
-                    $('a[g-item-cid="' + item.cid + '"]>i', parent).before(elem);
+                    var inner = $('<span>').html($('a[g-item-cid="' + item.cid + '"]').html());
+                    $('a[g-item-cid="' + item.cid + '"]', parent).empty().append(elem, inner);
                     _loadMoreImages(parent);
                 });
             }