scrivito_content_browser 0.42.1 → 0.50.0.rc1

data/app/assets/javascripts/dist/scrivito_content_browser_pkg.js

@@ -1,5 +1,5 @@
 (function() {
-  var ExpandableFilterNodeMixin, FilterMixin, InfiniteScrollMixin, OptionFilterLabelRenderMixin, OptionFilterMixin, classSet, models, ui,
+  var ExpandableFilterNodeMixin, FilterMixin, InfiniteScrollMixin, InspectedItemMixin, OptionFilterLabelRenderMixin, OptionFilterMixin, classSet, models, ui,
     __hasProp = {}.hasOwnProperty,
     __extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
 
@@ -37,6 +37,13 @@
         }
         return _results;
       },
+      _showAlert: function(props) {
+        var alertContainer;
+        alertContainer = document.createElement('DIV');
+        document.body.appendChild(alertContainer);
+        props.container = alertContainer;
+        return React.render(React.createElement(models.AlertApp, React.__spread({}, props)), alertContainer);
+      },
       _loadModal: function() {
         $('<div></div>').addClass('scrivito_overlay scrivito_show').appendTo($('body'));
         $('<div></div>').addClass('scrivito-content-browser show').appendTo($('body'));
@@ -145,23 +152,30 @@
   };
 
   InfiniteScrollMixin = {
+    loadingAdditionalItems: function() {
+      return this.props.objCollection.loadNextPage();
+    },
+    hasMoreItems: function() {
+      return this.props.objCollection.hasMoreItems();
+    },
+    isViewportNotFullFilled: function() {
+      return this.props.objCollection.objs().length > 0;
+    },
     screenBottomTolerance: function() {
       return 20;
     },
-    getDefaultProps: function() {
-      return {
-        loadingAdditionalItems: function() {}
-      };
-    },
     componentDidMount: function() {
       return this.attachScrollListener();
     },
     componentDidUpdate: function() {
-      return this.attachScrollListener();
+      this.attachScrollListener();
+      if (this.isViewportNotFullFilled()) {
+        return this.fillViewPort();
+      }
     },
     scrollListener: function() {
       var isViewportAtBottom, node;
-      node = this.getDOMNode();
+      node = this.getElementDOMNode();
       isViewportAtBottom = node.scrollTop + node.offsetHeight >= node.scrollHeight - this.screenBottomTolerance();
       if (isViewportAtBottom) {
         this.detachScrollListener();
@@ -173,13 +187,21 @@
       if (!this.hasMoreItems()) {
         return;
       }
-      node = this.getDOMNode();
+      node = this.getElementDOMNode();
       node.addEventListener("scroll", this.scrollListener);
       return this.scrollListener();
     },
+    fillViewPort: function() {
+      if (!this._isFullViewPort()) {
+        return this.loadingAdditionalItems();
+      }
+    },
+    _isFullViewPort: function() {
+      return this.getElementDOMNode().scrollHeight > this.getElementDOMNode().offsetHeight;
+    },
     detachScrollListener: function() {
       var node;
-      node = this.getDOMNode();
+      node = this.getElementDOMNode();
       return node.removeEventListener("scroll", this.scrollListener);
     },
     componentWillUnmount: function() {
@@ -187,6 +209,31 @@
     }
   };
 
+  InspectedItemMixin = {
+    changeInspectObj: function() {
+      return this.props.inspector.setInspectedObj(this.props.obj);
+    },
+    getItemClasses: function() {
+      var className;
+      className = 'content-browser-item ';
+      if (this.props.obj.equals(this.props.inspector.getInspectedObj())) {
+        className += 'active';
+      }
+      return className;
+    },
+    selectClass: function() {
+      var className;
+      className = this.baseSelectClass();
+      if (this.props.objCollection.isSelected(this.props.obj.id())) {
+        className += ' active';
+      }
+      return className;
+    },
+    handleSelectClick: function() {
+      return this.props.objCollection.toggleSelected(this.props.obj.id());
+    }
+  };
+
   OptionFilterLabelRenderMixin = {
     renderHierarchyLabelTitle: function(title) {
       return React.createElement("div", {
@@ -237,6 +284,8 @@
 
     function FilterCollectionNode(filter, name, filterDefinition) {
       FilterCollectionNode.__super__.constructor.call(this, filter, name, filterDefinition);
+      this.field = filterDefinition.field, this.operator = filterDefinition.operator;
+      this.expanded = filterDefinition.expanded !== false;
       this.children = [];
     }
 
@@ -295,12 +344,87 @@
 
   })();
 
-  models.ActiveFilterNodeCollector = (function() {
-    function ActiveFilterNodeCollector(filter) {
+  models.ActiveNodeConfig = (function() {
+    function ActiveNodeConfig(parents, nodes) {
+      this._parents = parents;
+      this._activeNodes = nodes;
+    }
+
+    ActiveNodeConfig.prototype.activeNodes = function() {
+      return this._activeNodes;
+    };
+
+    ActiveNodeConfig.prototype.values = function() {
+      return _.flatten(_.map(this._activeNodes, this._valueForNode));
+    };
+
+    ActiveNodeConfig.prototype.query = function() {
+      return this._filter().type !== 'checkbox' && this._activeNodes[0].query;
+    };
+
+    ActiveNodeConfig.prototype.hasQuery = function() {
+      return !!this.query();
+    };
+
+    ActiveNodeConfig.prototype.field = function() {
+      return this._findConfig('field');
+    };
+
+    ActiveNodeConfig.prototype.hasField = function() {
+      return !!this.field();
+    };
+
+    ActiveNodeConfig.prototype.preventsCreation = function() {
+      return this.nodesPreventingCreation().length > 0;
+    };
+
+    ActiveNodeConfig.prototype.nodesPreventingCreation = function() {
+      return _.select(this.activeNodes(), function(node) {
+        return node.enable_create === false;
+      });
+    };
+
+    ActiveNodeConfig.prototype.enablesCreation = function() {
+      return _.some(this.activeNodes(), function(node) {
+        return node.enable_create === true;
+      });
+    };
+
+    ActiveNodeConfig.prototype.operator = function() {
+      return this._findConfig('operator') || 'equals';
+    };
+
+    ActiveNodeConfig.prototype._valueForNode = function(node) {
+      return node.value || node.name;
+    };
+
+    ActiveNodeConfig.prototype._findConfig = function(attrName) {
+      var activeNode, parentWithAttribute;
+      activeNode = this._activeNodes[0];
+      if (this._filter().type !== 'checkbox' && activeNode[attrName]) {
+        return activeNode[attrName];
+      } else {
+        parentWithAttribute = _.find(this._parents, function(node) {
+          return node[attrName];
+        });
+        return parentWithAttribute && parentWithAttribute[attrName];
+      }
+    };
+
+    ActiveNodeConfig.prototype._filter = function() {
+      return _.last(this._parents);
+    };
+
+    return ActiveNodeConfig;
+
+  })();
+
+  models.ActiveNodeConfigCollector = (function() {
+    function ActiveNodeConfigCollector(filter) {
       this._filter = filter;
     }
 
-    ActiveFilterNodeCollector.prototype.findActiveFilterItems = function() {
+    ActiveNodeConfigCollector.prototype.findActiveFilterItems = function() {
       var filterItems, treeFilterItem;
       filterItems = this._findActiveAdditionalFilters();
       treeFilterItem = this._findActiveTreeFilterItem();
@@ -310,7 +434,7 @@
       return filterItems;
     };
 
-    ActiveFilterNodeCollector.prototype._findActiveTreeFilterItem = function() {
+    ActiveNodeConfigCollector.prototype._findActiveTreeFilterItem = function() {
       var activeConfig, subFilter, treeFilter, _i, _j, _len, _len1, _ref, _ref1;
       _ref = this._filter.getTreeFilters();
       for (_i = 0, _len = _ref.length; _i < _len; _i++) {
@@ -327,7 +451,7 @@
       }
     };
 
-    ActiveFilterNodeCollector.prototype._findActiveAdditionalFilters = function() {
+    ActiveNodeConfigCollector.prototype._findActiveAdditionalFilters = function() {
       var activeChildren, activeFilters, additionalFilter, _i, _len, _ref;
       activeFilters = [];
       _ref = this._filter.additionalFilters;
@@ -343,7 +467,7 @@
       return activeFilters;
     };
 
-    ActiveFilterNodeCollector.prototype._findActiveSubFilterItem = function(filterNode) {
+    ActiveNodeConfigCollector.prototype._findActiveSubFilterItem = function(filterNode) {
       var activeConfig, childNode, _i, _len, _ref;
       if (filterNode.isActive()) {
         return {
@@ -363,76 +487,211 @@
       }
     };
 
-    return ActiveFilterNodeCollector;
+    return ActiveNodeConfigCollector;
 
   })();
 
-  models.ActiveNodeConfig = (function() {
-    function ActiveNodeConfig(parents, nodes) {
-      this._parents = parents;
-      this._activeNodes = nodes;
+  models.AddedObj = (function() {
+    AddedObj.prototype.MAX_RETRY = 2;
+
+    function AddedObj(addedObjsCollection, file, presetAttributes) {
+      var objAttributes;
+      this.addedObjsCollection = addedObjsCollection;
+      if (presetAttributes == null) {
+        presetAttributes = {};
+      }
+      this._status = 'active';
+      this._updateProgressByStatus(this._status);
+      this._fileName = file != null ? file.name : void 0;
+      objAttributes = this._buildObjAttributes(file, presetAttributes);
+      scrivito.create_obj(objAttributes).done((function(_this) {
+        return function(objData) {
+          _this._progress = 50;
+          _this.addedObjsCollection.changed();
+          return _this._fetchObj(objData.id);
+        };
+      })(this)).fail((function(_this) {
+        return function(failure) {
+          _this._failureMessage = failure.message;
+          return _this._setStatus('failed');
+        };
+      })(this));
     }
 
-    ActiveNodeConfig.prototype.activeNodes = function() {
-      return this._activeNodes;
+    AddedObj.prototype.status = function() {
+      return this._status;
     };
 
-    ActiveNodeConfig.prototype.values = function() {
-      return _.flatten(_.map(this._activeNodes, this._valueForNode));
+    AddedObj.prototype.createdObj = function() {
+      return this._obj;
     };
 
-    ActiveNodeConfig.prototype.query = function() {
-      return this._filter().type !== 'checkbox' && this._activeNodes[0].query;
+    AddedObj.prototype.failureMessage = function() {
+      return this._failureMessage;
     };
 
-    ActiveNodeConfig.prototype.hasQuery = function() {
-      return !!this.query();
+    AddedObj.prototype.fileName = function() {
+      return this._fileName;
     };
 
-    ActiveNodeConfig.prototype.field = function() {
-      return this._findConfig('field');
+    AddedObj.prototype.progress = function() {
+      return this._progress;
     };
 
-    ActiveNodeConfig.prototype.hasField = function() {
-      return !!this.field();
+    AddedObj.prototype._fetchObj = function(id, retryCount) {
+      if (retryCount == null) {
+        retryCount = 0;
+      }
+      return models.QueryBuilder.byId(id).load_batch().then(((function(_this) {
+        return function(searchResult) {
+          if (searchResult.hits.length > 0) {
+            _this._obj = new models.Obj(searchResult.hits[0]);
+            return _this._setStatus('completed');
+          } else {
+            return _this._objNotYetIndexed(id, retryCount);
+          }
+        };
+      })(this)), (function(_this) {
+        return function() {
+          return _this._setStatus('failed');
+        };
+      })(this));
     };
 
-    ActiveNodeConfig.prototype.operator = function() {
-      return this._findConfig('operator') || 'equals';
+    AddedObj.prototype._objNotYetIndexed = function(id, retryCount) {
+      var fetchObjFunction;
+      if (retryCount < this.MAX_RETRY) {
+        fetchObjFunction = (function(_this) {
+          return function() {
+            return _this._fetchObj(id, retryCount + 1);
+          };
+        })(this);
+        return window.setTimeout(fetchObjFunction, 500);
+      } else {
+        this._setStatus('failed');
+        return $.Deferred().reject();
+      }
     };
 
-    ActiveNodeConfig.prototype._valueForNode = function(node) {
-      return node.value || node.name;
+    AddedObj.prototype._setStatus = function(status) {
+      this._status = status;
+      this._updateProgressByStatus(status);
+      return this.addedObjsCollection.changed();
     };
 
-    ActiveNodeConfig.prototype._findConfig = function(attrName) {
-      var activeNode, parentWithAttribute;
-      activeNode = this._activeNodes[0];
-      if (this._filter().type !== 'checkbox' && activeNode[attrName]) {
-        return activeNode[attrName];
-      } else {
-        parentWithAttribute = _.find(this._parents, function(node) {
-          return node[attrName];
-        });
-        return parentWithAttribute && parentWithAttribute[attrName];
+    AddedObj.prototype._updateProgressByStatus = function(status) {
+      return this._progress = (function() {
+        switch (this.status()) {
+          case 'active':
+            return 10;
+          case 'completed':
+            return 100;
+          case 'failed':
+            return 0;
+        }
+      }).call(this);
+    };
+
+    AddedObj.prototype._buildObjAttributes = function(file, presetAttributes) {
+      var objAttributes;
+      objAttributes = {
+        _path: this._path()
+      };
+      if (file) {
+        _.extend(objAttributes, this._fileAttributes(file));
       }
+      return _.extend(objAttributes, presetAttributes);
     };
 
-    ActiveNodeConfig.prototype._filter = function() {
-      return _.last(this._parents);
+    AddedObj.prototype._fileAttributes = function(file) {
+      var objClass;
+      objClass = scrivito.default_obj_class_for_content_type(file.type);
+      return {
+        blob: file,
+        _obj_class: objClass
+      };
     };
 
-    return ActiveNodeConfig;
+    AddedObj.prototype._path = function() {
+      return "_resources/" + (this._randomResourceId()) + "/" + (this._lastPathComponent());
+    };
+
+    AddedObj.prototype._randomResourceId = function() {
+      var hex;
+      hex = Math.floor(Math.random() * Math.pow(16, 8)).toString(16);
+      while (hex.length < 8) {
+        hex = '0' + hex;
+      }
+      return hex;
+    };
+
+    AddedObj.prototype._lastPathComponent = function() {
+      if (this.fileName()) {
+        return this.fileName().replace(/[^a-z0-9_.$\-]/ig, '-');
+      } else {
+        return this._randomResourceId();
+      }
+    };
+
+    return AddedObj;
 
   })();
 
+  models.AddedObjsCollection = (function(_super) {
+    __extends(AddedObjsCollection, _super);
+
+    function AddedObjsCollection(basePreset) {
+      if (basePreset == null) {
+        basePreset = {};
+      }
+      AddedObjsCollection.__super__.constructor.call(this);
+      this._basePreset = basePreset;
+      this._objs = [];
+    }
+
+    AddedObjsCollection.prototype.objs = function() {
+      return this._objs;
+    };
+
+    AddedObjsCollection.prototype.addFiles = function(files, presets) {
+      if (presets == null) {
+        presets = {};
+      }
+      presets = this._buildPresets(presets);
+      _.each(files, (function(_this) {
+        return function(file) {
+          return _this._objs.unshift(new models.AddedObj(_this, file, presets));
+        };
+      })(this));
+      return this.changed();
+    };
+
+    AddedObjsCollection.prototype.createObj = function(presets) {
+      presets = this._buildPresets(presets);
+      this._objs.unshift(new models.AddedObj(this, null, presets));
+      return this.changed();
+    };
+
+    AddedObjsCollection.prototype.hasActiveCreations = function() {
+      return _.some(this._objs, function(upload) {
+        return upload.status() === 'active';
+      });
+    };
+
+    AddedObjsCollection.prototype._buildPresets = function(presets) {
+      return _.extend({}, this._basePreset, presets);
+    };
+
+    return AddedObjsCollection;
+
+  })(models.Listenable);
+
   models.CheckboxFilter = (function(_super) {
     __extends(CheckboxFilter, _super);
 
     function CheckboxFilter(filter, name, filterDefinition) {
       CheckboxFilter.__super__.constructor.call(this, filter, name, filterDefinition);
       this.type = 'checkbox';
-      this.expanded = filterDefinition.expanded, this.field = filterDefinition.field, this.operator = filterDefinition.operator;
       this.children = _.map(filterDefinition.options, (function(_this) {
         return function(definition, name) {
           return new models.CheckboxOption(_this.filter, name, definition);
@@ -440,16 +699,6 @@
       })(this));
     }
 
-    CheckboxFilter.prototype.isExpanded = function() {
-      return !!this.expanded;
-    };
-
-    CheckboxFilter.prototype.hasActiveChildren = function() {
-      return _.some(this.children, function(child) {
-        return child.isActive();
-      });
-    };
-
     return CheckboxFilter;
 
   })(models.FilterCollectionNode);
@@ -459,7 +708,7 @@
 
     function CheckboxOption(filter, name, filterDefinition) {
       CheckboxOption.__super__.constructor.call(this, filter, name, filterDefinition);
-      this.value = filterDefinition.value, this.preset = filterDefinition.preset;
+      this.value = filterDefinition.value, this.preset = filterDefinition.preset, this.enable_create = filterDefinition.enable_create;
       this.active = filterDefinition.selected;
     }
 
@@ -495,12 +744,6 @@
       return this.changed();
     };
 
-    Filter.prototype.deactivateAllFilters = function() {
-      this.deselectHierarchicalFilters();
-      this._deselectAdditionalFilters();
-      return this.changed();
-    };
-
     Filter.prototype._deselectAdditionalFilters = function() {
       if (this.hasAdditionalFilters()) {
         return _.each(this.additionalFilters, function(filter) {
@@ -509,8 +752,12 @@
       }
     };
 
+    Filter.prototype.getAllFilters = function() {
+      return _.union(this.getHierarchicalFilters(), this.additionalFilters);
+    };
+
     Filter.prototype.hasActiveChildren = function() {
-      return _.some(_.union(this.getHierarchicalFilters(), this.additionalFilters), function(subFilter) {
+      return _.some(this.getAllFilters(), function(subFilter) {
         return subFilter.hasActiveChildren();
       });
     };
@@ -595,6 +842,44 @@
 
   })(models.Listenable);
 
+  models.MimeTypeIcon = (function() {
+    function MimeTypeIcon() {}
+
+    MimeTypeIcon.getMimeTypeIconClassName = function(mimeType) {
+      var icon, matchedType;
+      if (mimeType != null) {
+        matchedType = this._getMatchedIconType(mimeType);
+        icon = this._mimeTypesHash[matchedType];
+      }
+      if (icon == null) {
+        icon = "scrivito_icon_generic";
+      }
+      return icon;
+    };
+
+    MimeTypeIcon._mimeTypesHash = {
+      "video": "scrivito_icon_movie",
+      "audio": "scrivito_icon_music",
+      "msword": "scrivito_icon_doc",
+      "zip": "scrivito_icon_zip",
+      "pdf": "scrivito_icon_pdf",
+      "ms-excel": "scrivito_icon_xls",
+      "ms-powerpoint": "scrivito_icon_ppt",
+      "openxmlformats-officedocument.spreadsheetml": "scrivito_icon_xls",
+      "wordprocessingml": "scrivito_icon_doc",
+      "presentationml": "scrivito_icon_ppt"
+    };
+
+    MimeTypeIcon._getMatchedIconType = function(mimeType) {
+      return _.find(Object.keys(this._mimeTypesHash), function(keyName) {
+        return mimeType.match(RegExp("\\b" + keyName + "\\b"));
+      });
+    };
+
+    return MimeTypeIcon;
+
+  })();
+
   models.Obj = (function() {
     function Obj(attributes) {
       this._attr = attributes;
@@ -604,10 +889,18 @@
       return this._attr['title'] || '(No description)';
     };
 
+    Obj.prototype.subtitle = function() {
+      return this._attr['subtitle'];
+    };
+
     Obj.prototype.id = function() {
       return this._attr['id'];
     };
 
+    Obj.prototype.equals = function(other) {
+      return this.id() === (other != null ? other.id() : void 0);
+    };
+
     Obj.prototype.hasPreview = function() {
       return !!this._attr['preview'];
     };
@@ -616,6 +909,22 @@
       return this._attr['preview'];
     };
 
+    Obj.prototype.lastChanged = function() {
+      return this._attr['last_changed'];
+    };
+
+    Obj.prototype.mimeType = function() {
+      return this._attr['mime_type'];
+    };
+
+    Obj.prototype.fileSize = function() {
+      return this._attr['file_size'];
+    };
+
+    Obj.prototype.fileType = function() {
+      return this._attr['file_type'];
+    };
+
     Obj.prototype.hasDetailsView = function() {
       return this._attr['has_details_view'];
     };
@@ -684,7 +993,7 @@
       if (this.isSelected(objId)) {
         this._removeObjFromSelectedCollection(objId);
       } else {
-        if (this._isSingleSelection()) {
+        if (this.isSingleSelectionMode()) {
           this._selectedObjs = [objId];
         } else {
           this._selectedObjs.push(objId);
@@ -761,105 +1070,97 @@
       })(this));
     };
 
-    ObjCollection.prototype._setAndLoadObjs = function(results, next, queryNumber) {
-      var curObjs;
-      if (queryNumber === this._curQueryNumber) {
-        curObjs = _.map(results.hits, function(attr) {
-          return new models.Obj(attr);
-        });
-        this._objs = this._objs.concat(curObjs);
-        this._nextQuery = next;
-        return this.changed();
-      }
-    };
-
-    ObjCollection.prototype._isSingleSelection = function() {
-      return this._selectionMode === 'single';
-    };
-
-    return ObjCollection;
-
-  })(models.Listenable);
-
-  models.ObjUpload = (function() {
-    function ObjUpload(uploadSet, file, presetAttributes) {
-      var objAttributes, objClass;
-      this.uploadSet = uploadSet;
-      if (presetAttributes == null) {
-        presetAttributes = {};
-      }
-      this._status = 'active';
-      this._fileName = file.name;
-      objClass = scrivito.default_obj_class_for_content_type(file.type);
-      objAttributes = {
-        blob: file,
-        _obj_class: objClass,
-        _path: this._path()
-      };
-      objAttributes = _.extend(objAttributes, presetAttributes);
-      scrivito.create_obj(objAttributes).done((function(_this) {
-        return function(objData) {
-          _this._obj = objData;
-          return _this._setStatus('completed');
-        };
-      })(this)).fail((function(_this) {
-        return function(failure) {
-          _this._failureMessage = failure.message;
-          return _this._setStatus('failed');
-        };
-      })(this));
-    }
-
-    ObjUpload.prototype.status = function() {
-      return this._status;
+    ObjCollection.prototype._setAndLoadObjs = function(results, next, queryNumber) {
+      var curObjs;
+      if (queryNumber === this._curQueryNumber) {
+        curObjs = _.map(results.hits, function(attr) {
+          return new models.Obj(attr);
+        });
+        this._objs = this._objs.concat(curObjs);
+        this._nextQuery = next;
+        return this.changed();
+      }
     };
 
-    ObjUpload.prototype.createdObj = function() {
-      return this._obj;
+    ObjCollection.prototype.isSingleSelectionMode = function() {
+      return this._selectionMode === 'single';
     };
 
-    ObjUpload.prototype.failureMessage = function() {
-      return this._failureMessage;
+    return ObjCollection;
+
+  })(models.Listenable);
+
+  models.ObjCreation = (function() {
+    function ObjCreation(filter) {
+      var collector, presetBuilder;
+      collector = new models.ActiveNodeConfigCollector(filter);
+      this.activeConfigs = collector.findActiveFilterItems();
+      presetBuilder = new models.PresetBuilder(filter);
+      this._preset = presetBuilder.generatePreset();
+    }
+
+    ObjCreation.prototype.preset = function() {
+      return this._preset.values();
     };
 
-    ObjUpload.prototype.fileName = function() {
-      return this._fileName;
+    ObjCreation.prototype.showCreationItem = function() {
+      return _.some(this.activeConfigs, function(nodeConfig) {
+        return nodeConfig.enablesCreation();
+      });
+    };
+
+    ObjCreation.prototype.isActive = function() {
+      return !!(!this._preventCreation() && this._presetIsValid());
     };
 
-    ObjUpload.prototype.progress = function() {
-      switch (this.status()) {
-        case 'active':
-          return 10;
-        case 'completed':
-          return 100;
-        case 'failed':
-          return 0;
+    ObjCreation.prototype.error = function() {
+      if (this._preventCreation()) {
+        return {
+          type: 'creation_not_possible',
+          nodeTitles: this._nodeTitlesPreventingCreation()
+        };
+      } else if (this._preset.isValid()) {
+        return {
+          type: 'obj_class_not_provided'
+        };
+      } else {
+        return {
+          type: 'preset_conflict',
+          fields: this._buildPresetConflictError()
+        };
       }
     };
 
-    ObjUpload.prototype._path = function() {
-      return "_resources/" + (this._randomResourceId()) + "/" + (this._sanitizedFilenameForBackend());
+    ObjCreation.prototype._preventCreation = function() {
+      return _.some(this.activeConfigs, function(nodeConfig) {
+        return nodeConfig.preventsCreation();
+      });
     };
 
-    ObjUpload.prototype._randomResourceId = function() {
-      var hex;
-      hex = Math.floor(Math.random() * Math.pow(16, 8)).toString(16);
-      while (hex.length < 8) {
-        hex = '0' + hex;
-      }
-      return hex;
+    ObjCreation.prototype._presetIsValid = function() {
+      return this._preset.isValid() && this.preset()['_obj_class'];
     };
 
-    ObjUpload.prototype._sanitizedFilenameForBackend = function() {
-      return this.fileName().replace(/[^a-z0-9_.$\-]/ig, '-');
+    ObjCreation.prototype._nodeTitlesPreventingCreation = function() {
+      var nodes;
+      nodes = _.flatten(_.map(this.activeConfigs, function(node) {
+        return node.nodesPreventingCreation();
+      }));
+      return _.map(nodes, function(node) {
+        return node.title;
+      });
     };
 
-    ObjUpload.prototype._setStatus = function(newStatus) {
-      this._status = newStatus;
-      return this.uploadSet.changed();
+    ObjCreation.prototype._buildPresetConflictError = function() {
+      var presetConflicts;
+      presetConflicts = {};
+      _.each(this._preset.errors(), function(values, field) {
+        return presetConflicts[field] = values;
+      });
+      return presetConflicts;
     };
 
-    return ObjUpload;
+    return ObjCreation;
 
   })();
 
@@ -911,7 +1212,7 @@
     })();
 
     function PresetBuilder(filter) {
-      this._collector = new models.ActiveFilterNodeCollector(filter);
+      this._collector = new models.ActiveNodeConfigCollector(filter);
     }
 
     PresetBuilder.prototype.generatePreset = function() {
@@ -951,7 +1252,7 @@
   models.QueryBuilder = (function() {
     function QueryBuilder(filter, baseQuery) {
       this.filter = filter;
-      this._collector = new models.ActiveFilterNodeCollector(this.filter);
+      this._collector = new models.ActiveNodeConfigCollector(this.filter);
       if (baseQuery) {
         this._baseQuery = models.QueryBuilder.prepareQuery(baseQuery);
       }
@@ -1028,7 +1329,6 @@
     function RadioFilter(filter, name, filterDefinition) {
       RadioFilter.__super__.constructor.call(this, filter, name, filterDefinition);
       this.type = 'radio';
-      this.field = filterDefinition.field, this.expanded = filterDefinition.expanded, this.operator = filterDefinition.operator;
       this.children = _.map(filterDefinition.options, (function(_this) {
         return function(definition, name) {
           return new models.RadioOption(_this, name, definition);
@@ -1058,7 +1358,7 @@
     function RadioOption(group, name, filterDefinition) {
       this.group = group;
       RadioOption.__super__.constructor.call(this, this.group.filter, name, filterDefinition);
-      this.value = filterDefinition.value, this.query = filterDefinition.query, this.preset = filterDefinition.preset;
+      this.value = filterDefinition.value, this.query = filterDefinition.query, this.preset = filterDefinition.preset, this.enable_create = filterDefinition.enable_create;
       this.active = filterDefinition.selected;
     }
 
@@ -1081,7 +1381,7 @@
       var childrenDefinition;
       TreeFilter.__super__.constructor.call(this, filter, name, filterDefinition);
       this.type = 'tree';
-      this.icon = filterDefinition.icon, this.query = filterDefinition.query, this.expanded = filterDefinition.expanded, this.value = filterDefinition.value, this.field = filterDefinition.field, this.operator = filterDefinition.operator, this.preset = filterDefinition.preset;
+      this.icon = filterDefinition.icon, this.query = filterDefinition.query, this.expanded = filterDefinition.expanded, this.value = filterDefinition.value, this.field = filterDefinition.field, this.operator = filterDefinition.operator, this.preset = filterDefinition.preset, this.enable_create = filterDefinition.enable_create;
       this.active = filterDefinition.selected;
       childrenDefinition = filterDefinition.options || [];
       this.children = _.map(childrenDefinition, function(definition, name) {
@@ -1128,52 +1428,13 @@
 
   })(models.FilterNode);
 
-  models.UploadSet = (function(_super) {
-    __extends(UploadSet, _super);
-
-    function UploadSet(basePreset) {
-      if (basePreset == null) {
-        basePreset = {};
-      }
-      UploadSet.__super__.constructor.call(this);
-      this._basePreset = basePreset;
-      this._uploads = [];
-    }
-
-    UploadSet.prototype.uploads = function() {
-      return this._uploads;
-    };
-
-    UploadSet.prototype.addFiles = function(files, presets) {
-      if (presets == null) {
-        presets = {};
-      }
-      presets = _.extend(_.clone(this._basePreset), presets);
-      _.each(files, (function(_this) {
-        return function(file) {
-          return _this._uploads.unshift(new models.ObjUpload(_this, file, presets));
-        };
-      })(this));
-      return this.changed();
-    };
-
-    UploadSet.prototype.hasActiveUploads = function() {
-      return _.some(this._uploads, function(upload) {
-        return upload.status() === 'active';
-      });
-    };
-
-    return UploadSet;
-
-  })(models.Listenable);
-
   models.ViewMode = (function(_super) {
     __extends(ViewMode, _super);
 
     function ViewMode(mode) {
       ViewMode.__super__.constructor.call(this);
       if (mode == null) {
-        mode = "small";
+        mode = "thumbnails";
       }
       this._mode = mode;
     }
@@ -1187,10 +1448,73 @@
       return this._mode;
     };
 
+    ViewMode.prototype.isList = function() {
+      return this._mode === "list";
+    };
+
     return ViewMode;
 
   })(models.Listenable);
 
+  models.AlertBody = React.createClass({
+    displayName: 'AlertBody',
+    render: function() {
+      return React.createElement("div", {
+        "className": "scrivito_modal_body"
+      }, this.props.body);
+    }
+  });
+
+  models.AlertHeader = React.createClass({
+    displayName: 'AlertHeader',
+    render: function() {
+      return React.createElement("div", {
+        "className": "scrivito_modal_header"
+      }, React.createElement("i", {
+        "className": "scrivito_icon scrivito_icon_error"
+      }), React.createElement("h3", {
+        "className": "scrivito_title"
+      }, this.props.title), (this.props.subtitle ? React.createElement("p", {
+        "className": "scrivito_description"
+      }, this.props.subtitle) : void 0));
+    }
+  });
+
+  models.AlertApp = React.createClass({
+    displayName: 'AlertApp',
+    alertClassName: function() {
+      return "scrivito_prompt_dialog scrivito_center_dialog scrivito_modal_prompt scrivito_show scrivito_red";
+    },
+    closeAlert: function(event) {
+      event.preventDefault();
+      React.unmountComponentAtNode(this.props.container);
+      return this.props.container.remove();
+    },
+    render: function() {
+      return React.createElement("div", null, React.createElement("div", {
+        "className": "scrivito_overlay two scrivito_show",
+        "style": {
+          zIndex: 4444444
+        }
+      }), React.createElement("div", {
+        "className": this.alertClassName(),
+        "style": {
+          zIndex: 4444444
+        }
+      }, React.createElement(models.AlertHeader, {
+        "title": this.props.title,
+        "subtitle": this.props.subtitle
+      }), React.createElement(models.AlertBody, {
+        "body": this.props.body
+      }), React.createElement("div", {
+        "className": "scrivito_modal_footer"
+      }, React.createElement("a", {
+        "className": "scrivito_button scrivito_cancel",
+        "onClick": this.closeAlert
+      }, "Close"))));
+    }
+  });
+
   ui.App = React.createClass({
     displayName: 'App',
     updateFilter: function(filter) {
@@ -1220,11 +1544,14 @@
         };
       })(this));
     },
-    updateUploadSet: function(uploadSet) {
+    updateAddedObjsCollection: function(addedObjsCollection) {
+      var lastCreatedObj;
       this.setState({
-        uploadSet: uploadSet
+        addedObjsCollection: addedObjsCollection
       });
-      if (!uploadSet.hasActiveUploads()) {
+      if (!addedObjsCollection.hasActiveCreations()) {
+        lastCreatedObj = _.first(addedObjsCollection.objs()).createdObj();
+        this.state.inspector.setInspectedObj(lastCreatedObj);
         return this.state.objCollection.reload();
       }
     },
@@ -1241,7 +1568,7 @@
     componentDidMount: function() {
       this.state.filter.onChange(this.updateFilter);
       this.state.viewMode.onChange(this.updateViewMode);
-      this.state.uploadSet.onChange(this.updateUploadSet);
+      this.state.addedObjsCollection.onChange(this.updateAddedObjsCollection);
       this.state.objCollection.onChange(this.updateObjCollection);
       this.state.objCollection.on('loading-obj', this.setLoadingState);
       this.state.inspector.onChange(this.updateInspector);
@@ -1256,7 +1583,7 @@
         filter: this.props.initialFilter,
         objs: [],
         viewMode: new models.ViewMode(),
-        uploadSet: new models.UploadSet(basePreset),
+        addedObjsCollection: new models.AddedObjsCollection(basePreset),
         objCollection: new models.ObjCollection(initialSelection, selectionMode),
         inspector: new models.Inspector()
       };
@@ -1280,7 +1607,7 @@
         "ref": "itemView",
         "objCollection": this.state.objCollection,
         "viewMode": this.state.viewMode,
-        "uploadSet": this.state.uploadSet,
+        "addedObjsCollection": this.state.addedObjsCollection,
         "inspector": this.state.inspector,
         "filter": this.state.filter
       }), React.createElement(ui.MoreItemsSpinner, {
@@ -1297,9 +1624,6 @@
   ui.Filter = React.createClass({
     displayName: 'Filter',
     mixins: [FilterMixin],
-    handleDeselectAllFilters: function() {
-      return this.props.filter.deactivateAllFilters();
-    },
     renderAdditionalFilters: function() {
       var subFilters;
       subFilters = _.map(this.props.filter.additionalFilters, function(additionalFilter) {
@@ -1365,9 +1689,7 @@
         "activateSelectedFilter": this.activateSelectedFilter
       }), React.createElement("div", {
         "className": "scrivito-content-browser-filter-scroll"
-      }, React.createElement(ui.Filter.DeselectFilter, {
-        "onDeselectAllFilters": this.handleDeselectAllFilters
-      }), this.renderSubFiltersList(treeSubFilters), this.renderFilterSeparator(), this.renderAdditionalFilters()));
+      }, this.renderSubFiltersList(treeSubFilters), this.renderFilterSeparator(), this.renderAdditionalFilters()));
     }
   });
 
@@ -1456,19 +1778,6 @@
     }
   });
 
-  ui.Filter.DeselectFilter = React.createClass({
-    displayName: 'DeselectFilter',
-    handleDeselect: function() {
-      return this.props.onDeselectAllFilters();
-    },
-    render: function() {
-      return React.createElement("div", {
-        "className": "scrivito_button",
-        "onClick": this.handleDeselect
-      }, "deselect all");
-    }
-  });
-
   ui.Filter.RadioOptionFilter = React.createClass({
     displayName: 'RadioOptionFilter',
     mixins: [OptionFilterMixin],
@@ -1503,8 +1812,6 @@
         "className": this.filterClass(),
         "onClick": this.props.activateSelectedFilter
       }, React.createElement("span", {
-        "className": "scrivito_icon scrivito_icon_ok_box"
-      }), React.createElement("span", {
         "className": "scrivito-content-browser-filter-label"
       }, "Selected", React.createElement("span", {
         "className": "scrivito-content-browser-counter selected-total"
@@ -1624,14 +1931,14 @@
       }, this.props.inspector.fileDetail())), React.createElement("div", {
         "className": "inspector-content"
       }, (this.props.inspector.getInspectedObj().hasDetailsView() ? React.createElement("iframe", {
-        "src": this.props.inspector.inspectorUrl()
+        "src": this.props.inspector.inspectorUrl(),
+        "name": "scrivito_inspector"
       }) : this.getEmptyPlaceholder()))) : void 0));
     }
   });
 
   ui.Items = React.createClass({
     displayName: 'Items',
-    mixins: [InfiniteScrollMixin],
     getInitialState: function() {
       return {
         dragInProgres: false
@@ -1654,7 +1961,7 @@
       if (files.length > 0) {
         preset = this.buildPreset();
         if (preset.isValid()) {
-          return this.props.uploadSet.addFiles(files, preset.values());
+          return this.props.addedObjsCollection.addFiles(files, preset.values());
         } else {
           message = 'The selected filter options cannot be applied to the file(s) you wanted to upload. Please select only one of the following options, then try again:\n';
           _.each(preset.errors(), function(values, field) {
@@ -1680,20 +1987,6 @@
         };
       })(this);
     },
-    fillViewPort: function() {
-      if (!this._isFullViewPort()) {
-        return this.loadingAdditionalItems();
-      }
-    },
-    _isFullViewPort: function() {
-      return this.getDOMNode().scrollHeight > this.getDOMNode().offsetHeight;
-    },
-    loadingAdditionalItems: function() {
-      return this.props.objCollection.loadNextPage();
-    },
-    hasMoreItems: function() {
-      return this.props.objCollection.hasMoreItems();
-    },
     render: function() {
       return React.createElement("div", {
         "className": this.dropZoneClass(),
@@ -1704,14 +1997,19 @@
         "className": "scrivito-content-browser-loading"
       }, React.createElement("i", {
         "className": "scrivito_icon scrivito_icon_refresh"
-      })) : this.props.uploadSet.hasActiveUploads() ? React.createElement(ui.UploadItems, {
-        "uploadSet": this.props.uploadSet
-      }) : React.createElement(ui.ThumbnailItems, {
+      })) : this.props.addedObjsCollection.hasActiveCreations() ? React.createElement(ui.UploadItems, {
+        "addedObjsCollection": this.props.addedObjsCollection
+      }) : this.props.viewMode.isList() ? React.createElement(ui.TableView, {
         "objCollection": this.props.objCollection,
-        "onBuildAllItems": this.fillViewPort,
-        "viewMode": this.props.viewMode,
         "toggleSelected": this.props.toggleSelected,
         "inspector": this.props.inspector
+      }) : React.createElement(ui.ThumbnailItems, {
+        "objCollection": this.props.objCollection,
+        "viewMode": this.props.viewMode.getMode(),
+        "onBuildAllItems": this.fillViewPort,
+        "inspector": this.props.inspector,
+        "filter": this.props.filter,
+        "addedObjsCollection": this.props.addedObjsCollection
       })));
     }
   });
@@ -1748,27 +2046,6 @@
     }
   });
 
-  ui.ResizeBar = React.createClass({
-    displayName: 'ResizeBar',
-    resizeButtonsData: ["small", "normal", "big", "large"],
-    render: function() {
-      var size;
-      return React.createElement("div", null, (function() {
-        var _i, _len, _ref, _results;
-        _ref = this.resizeButtonsData;
-        _results = [];
-        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
-          size = _ref[_i];
-          _results.push(React.createElement(ui.ResizeItem, {
-            "viewMode": this.props.viewMode,
-            "size": size
-          }));
-        }
-        return _results;
-      }).call(this));
-    }
-  });
-
   ui.ResizeItem = React.createClass({
     displayName: 'ResizeItem',
     resizeButtonsData: {
@@ -1816,17 +2093,196 @@
     }
   });
 
+  ui.TableView = React.createClass({
+    render: function() {
+      return React.createElement("div", {
+        "className": "scrivito-content-browser-list"
+      }, React.createElement("div", {
+        "className": "scrivito-content-browser-list-head"
+      }, React.createElement("table", null, React.createElement("tbody", null, React.createElement("tr", null, React.createElement("th", null), React.createElement("th", null, "Title"), React.createElement("th", null, "Type"), React.createElement("th", null, "File type"), React.createElement("th", null, "File size"), React.createElement("th", null, "Last change"))))), React.createElement(ui.TableViewContent, React.__spread({}, this.props)));
+    }
+  });
+
+  ui.TableViewContent = React.createClass({
+    mixins: [InfiniteScrollMixin],
+    getTableViewItems: function() {
+      var items;
+      return items = _.map(this.props.objCollection.objs(), (function(_this) {
+        return function(obj) {
+          return React.createElement(ui.TableViewItem, {
+            "key": obj.id(),
+            "obj": obj,
+            "objCollection": _this.props.objCollection,
+            "inspector": _this.props.inspector
+          });
+        };
+      })(this));
+    },
+    getElementDOMNode: function() {
+      return this.getDOMNode();
+    },
+    render: function() {
+      return React.createElement("div", {
+        "className": "scrivito-content-browser-list-content"
+      }, React.createElement("table", null, React.createElement("tbody", null, this.getTableViewItems())));
+    }
+  });
+
+  ui.TableViewItem = React.createClass({
+    displayName: 'TableViewItem',
+    mixins: [InspectedItemMixin],
+    baseSelectClass: function() {
+      return 'scrivito-content-browser-list-select';
+    },
+    getLastChangedFormatedDate: function() {
+      var result;
+      if (this.props.obj.lastChanged() !== void 0) {
+        result = moment(this.props.obj.lastChanged()).zone(this.props.obj.lastChanged());
+        return result.format("dddd, MMMM Do YYYY, h:mm A");
+      }
+    },
+    _getFileTypeTitleTag: function() {
+      var mimeType;
+      mimeType = this.props.obj.mimeType();
+      if (mimeType != null) {
+        return mimeType.match(/\w+$/)[0];
+      }
+    },
+    render: function() {
+      return React.createElement("tr", {
+        "onClick": this.changeInspectObj,
+        "className": this.getItemClasses()
+      }, React.createElement("td", null, React.createElement("div", {
+        "onClick": this.handleSelectClick,
+        "className": this.selectClass()
+      })), React.createElement("td", {
+        "title": this.props.obj.title()
+      }, this.props.obj.title()), React.createElement("td", null, this.props.obj.fileType()), React.createElement("td", {
+        "title": this.props.obj.mimeType()
+      }, this._getFileTypeTitleTag()), React.createElement("td", null, this.props.obj.fileSize()), React.createElement("td", null, React.createElement("span", null, React.createElement("time", {
+        "dateTime": this.props.obj.lastChanged(),
+        "title": this.getLastChangedFormatedDate()
+      }, moment.utc(this.props.obj.lastChanged()).fromNow()))));
+    }
+  });
+
+  ui.ThumbnailAddItem = React.createClass({
+    displayName: 'ThumbnailAddItem',
+    itemClassName: function() {
+      var className;
+      className = "scrivito-content-browser-add";
+      if (!this.props.objCreation.isActive()) {
+        className += " disabled";
+      }
+      return className;
+    },
+    iconClassName: function() {
+      var iconClass;
+      iconClass = this.props.objCreation.isActive() ? "scrivito_icon_plus" : "scrivito_icon_disabled";
+      return "scrivito_icon " + iconClass;
+    },
+    creationNotPossibleBody: function(error) {
+      return React.createElement("ul", null, _.map(error.nodeTitles, function(title) {
+        return React.createElement("li", null, title);
+      }));
+    },
+    presetConflictBody: function(error) {
+      return React.createElement("div", null, "The selected filter options cannot be applied to the file(s)\nyou wanted to upload. Please select only one of the following options,\nthen try again:\n", _.map(error.fields, function(values, field) {
+        return React.createElement("div", null, React.createElement("h4", null, field), React.createElement("ul", null, _.map(values, function(value) {
+          return React.createElement("li", null, value);
+        })));
+      }));
+    },
+    showErrorAlert: function(error) {
+      var alertProps;
+      alertProps = (function() {
+        switch (error.type) {
+          case 'creation_not_possible':
+            return {
+              subtitle: 'Creation of items matching the selected filters has been disabled.',
+              body: this.creationNotPossibleBody(error)
+            };
+          case 'obj_class_not_provided':
+            return {
+              subtitle: "Configuration error: No '_obj_class' provided."
+            };
+          case 'preset_conflict':
+            return {
+              body: this.presetConflictBody(error)
+            };
+        }
+      }).call(this);
+      alertProps.title = "Creation not possible";
+      return scrivito.content_browser._showAlert(alertProps);
+    },
+    buildErrorMessage: function(error) {
+      var message, nodesString;
+      switch (error.type) {
+        case 'creation_not_possible':
+          nodesString = error.nodeTitles.join(', ');
+          return "The selected filter options " + nodesString + " prevent the creation";
+        case 'obj_class_not_provided':
+          return "Configuration error: No '_obj_class' provided";
+        case 'preset_conflict':
+          message = 'The selected filter options cannot be applied to the file(s) you wanted to upload. Please select only one of the following options, then try again:\n';
+          _.each(error.fields, function(value, field) {
+            return message += "" + field + ": " + (value.join(', ')) + "\n";
+          });
+          return message;
+      }
+    },
+    iconTitle: function() {
+      if (!this.props.objCreation.isActive()) {
+        return this.buildErrorMessage(this.props.objCreation.error());
+      }
+    },
+    textMessage: function() {
+      if (this.props.objCreation.isActive()) {
+        return "Create Item";
+      } else {
+        return "Item creation not possible";
+      }
+    },
+    handleClick: function() {
+      if (this.props.objCreation.isActive()) {
+        return this.props.addedObjsCollection.createObj(this.props.objCreation.preset());
+      } else {
+        return this.showErrorAlert(this.props.objCreation.error());
+      }
+    },
+    render: function() {
+      return React.createElement("li", {
+        "className": "content-browser-item",
+        "onClick": this.handleClick
+      }, React.createElement("div", {
+        "className": this.itemClassName()
+      }, React.createElement("div", {
+        "className": "scrivito-content-browser-text"
+      }, React.createElement("span", {
+        "className": this.iconClassName(),
+        "title": this.iconTitle()
+      }), React.createElement("span", null, this.textMessage()))));
+    }
+  });
+
   ui.ThumbnailItem = React.createClass({
     displayName: 'ThumbnailItem',
-    title: function() {
-      return this.props.obj.title();
+    mixins: [InspectedItemMixin],
+    itemToolTip: function() {
+      var itemToolTip;
+      itemToolTip = this.props.obj.title();
+      if (this.props.obj.subtitle() != null) {
+        itemToolTip += "\n" + (this.props.obj.subtitle());
+      }
+      return itemToolTip;
     },
-    selectClass: function() {
+    baseSelectClass: function() {
+      return 'scrivito-content-browser-meta ';
+    },
+    mimeTypeIconClassName: function() {
       var className;
-      className = 'scrivito-content-browser-thumbnails-select select-item';
-      if (this.props.objCollection.isSelected(this.props.obj.id())) {
-        className += ' active';
-      }
+      className = 'scrivito_icon ';
+      className += models.MimeTypeIcon.getMimeTypeIconClassName(this.props.obj.mimeType());
       return className;
     },
     previewImage: function() {
@@ -1836,22 +2292,10 @@
         });
       } else {
         return React.createElement("span", {
-          "className": "scrivito_icon scrivito_icon_generic"
+          "className": this.mimeTypeIconClassName()
         });
       }
     },
-    handleSelectClick: function() {
-      return this.props.objCollection.toggleSelected(this.props.obj.id());
-    },
-    changeInspectObj: function() {
-      return this.props.inspector.setInspectedObj(this.props.obj);
-    },
-    getItemClasses: function() {
-      return classSet({
-        'active': this.props.inspector.getInspectedObj() === this.props.obj,
-        "content-browser-item": true
-      });
-    },
     render: function() {
       return React.createElement("li", {
         "className": this.getItemClasses()
@@ -1863,26 +2307,35 @@
       }, this.previewImage(), React.createElement("span", {
         "className": "scrivito-content-browser-inspect"
       })), React.createElement("div", {
-        "className": "scrivito-content-browser-meta",
-        "onClick": this.handleSelectClick
+        "className": this.selectClass(),
+        "onClick": this.handleSelectClick,
+        "title": this.itemToolTip()
       }, React.createElement("span", {
-        "className": "scrivito-content-browser-thumbnails-name",
-        "title": this.title()
-      }, this.title()), React.createElement("span", {
-        "className": this.selectClass()
-      }))));
+        "className": "scrivito-content-browser-thumbnails-name"
+      }, this.props.obj.title()), React.createElement("span", {
+        "className": "scrivito-content-browser-thumbnails-size"
+      }, this.props.obj.subtitle()), (!this.props.objCollection.isSingleSelectionMode() ? React.createElement("span", {
+        "className": 'scrivito-content-browser-thumbnails-select select-item'
+      }) : void 0))));
     }
   });
 
   ui.ThumbnailItems = React.createClass({
     displayName: 'ThumbnailItems',
+    mixins: [InfiniteScrollMixin],
+    getElementDOMNode: function() {
+      return this.getDOMNode().parentElement;
+    },
     getSizeClassName: function() {
-      return "items scrivito-content-browser-thumbnails " + (this.props.viewMode.getMode());
+      return "items scrivito-content-browser-thumbnails small";
     },
-    componentDidUpdate: function() {
-      if (this.props.objCollection.objs().length > 0) {
-        return this.handleBuildItems();
-      }
+    activeFilterNodes: function() {
+      var collector;
+      collector = new models.ActiveNodeConfigCollector(this.props.filter);
+      return collector.findActiveFilterItems();
+    },
+    objCreation: function() {
+      return new models.ObjCreation(this.props.filter);
     },
     buildItems: function() {
       return _.map(this.props.objCollection.objs(), (function(_this) {
@@ -1896,13 +2349,13 @@
         };
       })(this));
     },
-    handleBuildItems: function() {
-      return this.props.onBuildAllItems();
-    },
     render: function() {
       return React.createElement("ul", {
         "className": this.getSizeClassName()
-      }, this.buildItems());
+      }, (this.objCreation().showCreationItem() ? React.createElement(ui.ThumbnailAddItem, {
+        "objCreation": this.objCreation(),
+        "addedObjsCollection": this.props.addedObjsCollection
+      }) : void 0), this.buildItems());
     }
   });
 
@@ -1921,6 +2374,22 @@
         return this.setSearchTerm();
       }
     },
+    _getSearchPlaceholder: function() {
+      var activeCriteriaTitle, activeFilters, actvieFilterNodeConfigs, collector, searchPlaceHolder;
+      collector = new models.ActiveNodeConfigCollector(this.props.filter);
+      searchPlaceHolder = "Search everywhere";
+      actvieFilterNodeConfigs = collector.findActiveFilterItems();
+      activeFilters = _.flatten(_.map(actvieFilterNodeConfigs, function(config) {
+        return config.activeNodes();
+      }));
+      if (activeFilters.length > 1) {
+        searchPlaceHolder = "Search filtered content";
+      } else if (activeFilters.length === 1) {
+        activeCriteriaTitle = activeFilters[0].title;
+        searchPlaceHolder = "Search \"" + activeCriteriaTitle + "\" ";
+      }
+      return searchPlaceHolder;
+    },
     updateSearchTerm: function(event) {
       return this.setState({
         searchTerm: event.target.value
@@ -1933,7 +2402,7 @@
         "className": "scrivito-content-browser-search"
       }, React.createElement("input", {
         "type": "text",
-        "placeholder": "Search",
+        "placeholder": this._getSearchPlaceholder(),
         "className": "search-field",
         "value": this.state.searchTerm,
         "onChange": this.updateSearchTerm,
@@ -1941,7 +2410,7 @@
       }), React.createElement("button", {
         "className": "search-field-button",
         "onClick": this.setSearchTerm
-      }, "Search")), React.createElement(ui.ResizeBar, {
+      }, "Search")), React.createElement(ui.ViewModeBar, {
         "viewMode": this.props.viewMode
       }));
     }
@@ -1980,7 +2449,7 @@
     displayName: 'UploadItems',
     render: function() {
       var items;
-      items = _.map(this.props.uploadSet.uploads(), function(objUpload) {
+      items = _.map(this.props.addedObjsCollection.objs(), function(objUpload) {
         return React.createElement(ui.UploadItem, {
           "objUpload": objUpload
         });
@@ -1991,6 +2460,66 @@
     }
   });
 
+  ui.ViewModeBar = React.createClass({
+    displayName: 'ViewModeBar',
+    viewModeButtonsData: ["list", "thumbnails"],
+    render: function() {
+      var mode;
+      return React.createElement("div", null, (function() {
+        var _i, _len, _ref, _results;
+        _ref = this.viewModeButtonsData;
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          mode = _ref[_i];
+          _results.push(React.createElement(ui.ViewModeBarItem, {
+            "viewMode": this.props.viewMode,
+            "mode": mode
+          }));
+        }
+        return _results;
+      }).call(this));
+    }
+  });
+
+  ui.ViewModeBarItem = React.createClass({
+    displayName: 'ViewModeBarItem',
+    viewModeButtonsData: {
+      "thumbnails": {
+        iconTitle: "Thumbnails",
+        iconClassName: "scrivito_icon_th_small"
+      },
+      "list": {
+        iconTitle: "List",
+        iconClassName: "scrivito_icon_list_medium"
+      }
+    },
+    getIconClassName: function(mode) {
+      return "scrivito_icon " + this.viewModeButtonsData[mode].iconClassName;
+    },
+    getIconTitle: function(mode) {
+      return this.viewModeButtonsData[mode].iconTitle;
+    },
+    getLabelClasses: function() {
+      return classSet({
+        'active': this.props.viewMode.getMode() === this.props.mode,
+        "editing-button-view": true
+      });
+    },
+    changeViewMode: function() {
+      return this.props.viewMode.setMode(this.props.mode);
+    },
+    render: function() {
+      return React.createElement("span", {
+        "data-size": this.props.mode,
+        "className": this.getLabelClasses(),
+        "onClick": this.changeViewMode
+      }, React.createElement("i", {
+        "title": this.getIconTitle(this.props.mode),
+        "className": this.getIconClassName(this.props.mode)
+      }));
+    }
+  });
+
   scrivito.content_browser.stub_filters = {
     categories: {
       type: 'tree',