scrivito_content_browser 0.50.1 → 0.60.0.rc1

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

@@ -1,5 +1,5 @@
 (function() {
-  var ExpandableFilterNodeMixin, FilterMixin, InfiniteScrollMixin, InspectedItemMixin, OptionFilterLabelRenderMixin, OptionFilterMixin, classSet, models, ui,
+  var AddItemMixin, 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,12 +37,18 @@
         }
         return _results;
       },
+      _showConfirm: function(props) {
+        props.mode = 'confirm';
+        return this._showAlert(props);
+      },
       _showAlert: function(props) {
         var alertContainer;
         alertContainer = document.createElement('DIV');
         document.body.appendChild(alertContainer);
+        props.promise = $.Deferred();
         props.container = alertContainer;
-        return React.render(React.createElement(models.AlertApp, React.__spread({}, props)), alertContainer);
+        React.render(React.createElement(models.DialogApp, React.__spread({}, props)), alertContainer);
+        return props.promise;
       },
       _loadModal: function() {
         $('<div></div>').addClass('scrivito_overlay scrivito_show').appendTo($('body'));
@@ -113,6 +119,91 @@
 
   scrivito.register_public_api("content_browser", scrivito.content_browser);
 
+  AddItemMixin = {
+    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";
+      }
+    },
+    createClick: function() {
+      if (this.props.objCreation.isActive()) {
+        return this.props.addedObjsCollection.createObj(this.props.objCreation.preset());
+      } else {
+        return this.showErrorAlert(this.props.objCreation.error());
+      }
+    }
+  };
+
   ExpandableFilterNodeMixin = {
     defaultExpansionState: function() {
       return {
@@ -744,6 +835,13 @@
       return this.changed();
     };
 
+    Filter.prototype.setSortCriteria = function(sortCriteria) {
+      if (!this.sortCriteria.equals(sortCriteria)) {
+        this.sortCriteria = sortCriteria;
+        return this.changed();
+      }
+    };
+
     Filter.prototype._deselectAdditionalFilters = function() {
       if (this.hasAdditionalFilters()) {
         return _.each(this.additionalFilters, function(filter) {
@@ -783,6 +881,7 @@
     Filter.prototype._initFilters = function(filter_definition) {
       this.treeFilters = [];
       this.additionalFilters = [];
+      this.sortCriteria = new models.SortCriteria();
       return _.each(filter_definition, (function(_this) {
         return function(definition, name) {
           var subFilters;
@@ -886,7 +985,9 @@
     }
 
     Obj.prototype.title = function() {
-      return this._attr['title'] || '(No description)';
+      var rawTitle;
+      rawTitle = this._attr['title'] || '(No description)';
+      return rawTitle.trim();
     };
 
     Obj.prototype.subtitle = function() {
@@ -936,12 +1037,15 @@
   models.ObjCollection = (function(_super) {
     __extends(ObjCollection, _super);
 
-    function ObjCollection(selectedObjs, _selectionMode, objs) {
+    function ObjCollection(selectedObjs, _selectionMode, objs, sortCriteria) {
       this._selectionMode = _selectionMode;
       ObjCollection.__super__.constructor.call(this);
       this._selectionMode || (this._selectionMode = 'multi');
+      sortCriteria || (sortCriteria = new models.SortCriteria());
+      this._sortCriteria = sortCriteria;
       this._selectedObjs = selectedObjs || [];
       this._objs = objs || [];
+      this._isAlreadyReversed = false;
       this._curQueryNumber = 0;
     }
 
@@ -963,12 +1067,6 @@
       }
     };
 
-    ObjCollection.prototype._resetLoadingState = function() {
-      var _ref;
-      this._nextQuery = null;
-      return (_ref = this._isLoadingPagePromise) != null ? _ref.resolve() : void 0;
-    };
-
     ObjCollection.prototype.loadFromBackend = function(query) {
       var promise;
       this._query = query;
@@ -985,10 +1083,6 @@
       return promise;
     };
 
-    ObjCollection.prototype._removeObjFromSelectedCollection = function(objId) {
-      return this._selectedObjs = _.without(this._selectedObjs, objId);
-    };
-
     ObjCollection.prototype.toggleSelected = function(objId) {
       if (this.isSelected(objId)) {
         this._removeObjFromSelectedCollection(objId);
@@ -1006,20 +1100,14 @@
       return _.contains(this._selectedObjs, objId);
     };
 
-    ObjCollection.prototype.destroyById = function(objId) {
-      return scrivito.delete_obj(objId).done((function(_this) {
-        return function() {
-          return _this._removeObjFromSelectedCollection(objId);
-        };
-      })(this));
-    };
-
-    ObjCollection.prototype._getLoadingPagePromise = function() {
-      return $.Deferred().always((function(_this) {
+    ObjCollection.prototype.destroyObj = function(obj) {
+      var promise;
+      promise = this._destroyById(obj.id()).done((function(_this) {
         return function() {
-          return _this.trigger('end-page-load');
+          return _this.reload();
         };
       })(this));
+      return this.trigger('loading-obj', promise);
     };
 
     ObjCollection.prototype.loadNextPage = function() {
@@ -1042,22 +1130,52 @@
     };
 
     ObjCollection.prototype.destroySelectedObjs = function() {
-      var deferreds;
+      var deferreds, promise;
       if (this._selectedObjs.length > 0) {
         deferreds = _.map(this._selectedObjs, (function(_this) {
           return function(objId) {
-            return _this.destroyById(objId);
+            return _this._destroyById(objId);
           };
         })(this));
-        $.when.apply($, deferreds).done((function(_this) {
+        promise = $.when.apply($, deferreds).done((function(_this) {
           return function() {
             return _this.reload();
           };
         })(this));
-        return this.trigger('loading-obj');
+        return this.trigger('loading-obj', promise);
       }
     };
 
+    ObjCollection.prototype.isSingleSelectionMode = function() {
+      return this._selectionMode === 'single';
+    };
+
+    ObjCollection.prototype._destroyById = function(objId) {
+      return scrivito.delete_obj(objId).done((function(_this) {
+        return function() {
+          return _this._removeObjFromSelectedCollection(objId);
+        };
+      })(this));
+    };
+
+    ObjCollection.prototype._removeObjFromSelectedCollection = function(objId) {
+      return this._selectedObjs = _.without(this._selectedObjs, objId);
+    };
+
+    ObjCollection.prototype._getLoadingPagePromise = function() {
+      return $.Deferred().always((function(_this) {
+        return function() {
+          return _this.trigger('end-page-load');
+        };
+      })(this));
+    };
+
+    ObjCollection.prototype._resetLoadingState = function() {
+      var _ref;
+      this._nextQuery = null;
+      return (_ref = this._isLoadingPagePromise) != null ? _ref.resolve() : void 0;
+    };
+
     ObjCollection.prototype._initialLoadObjs = function(query, promise, queryNumber) {
       return query.load_batch().then((function(_this) {
         return function(results, next) {
@@ -1262,7 +1380,8 @@
       var query;
       query = this._baseQuery;
       query = this._addFilterQueries(query);
-      return query = this._addSearchTermQuery(query);
+      query = this._addSearchTermQuery(query);
+      return query = this._sortQuery(query);
     };
 
     QueryBuilder.prototype._addFilterQueries = function(baseQuery) {
@@ -1279,6 +1398,18 @@
       return combinedQuery;
     };
 
+    QueryBuilder.prototype._sortQuery = function(query) {
+      if (query != null) {
+        query = query.order(this.filter.sortCriteria.type());
+        if (this.filter.sortCriteria.isReverse()) {
+          if (!query.orderReversed) {
+            query.reverse_order();
+          }
+        }
+      }
+      return query;
+    };
+
     QueryBuilder.prototype._addSearchTermQuery = function(query) {
       var searchQuery;
       if (this.filter.searchTerm && this.filter.searchTerm.length > 0) {
@@ -1291,6 +1422,8 @@
 
     QueryBuilder.prototype._buildActiveChildrenSearchQuery = function(activeConfig) {
       if (activeConfig.hasQuery()) {
+        activeConfig.query().query().order = void 0;
+        activeConfig.query().query().reverse_order = void 0;
         return activeConfig.query();
       } else {
         return this._buildFOVQuery(activeConfig);
@@ -1316,7 +1449,7 @@
   })();
 
   models.QueryBuilder.prepareQuery = function(query) {
-    return query.clone().format('content_browser').order('_last_changed').reverse_order().batch_size(24);
+    return query.clone().format('content_browser').batch_size(24);
   };
 
   models.QueryBuilder.byId = function(ids) {
@@ -1374,6 +1507,69 @@
 
   })(models.FilterNode);
 
+  models.SortCriteria = (function() {
+    function SortCriteria(type, reverse, activeElement, activeSortItemGroupTitle) {
+      if (reverse == null) {
+        reverse = true;
+      }
+      if (type == null) {
+        type = "_last_changed";
+      }
+      if (activeElement == null) {
+        activeElement = "Last change: latest first";
+      }
+      if (activeSortItemGroupTitle == null) {
+        activeSortItemGroupTitle = "Sort by date";
+      }
+      this._activeSortItemGroupTitle = activeSortItemGroupTitle;
+      this._activeElement = activeElement;
+      this._isReverse = reverse;
+      this._type = type;
+    }
+
+    SortCriteria.prototype.isReverse = function() {
+      return this._isReverse;
+    };
+
+    SortCriteria.prototype.type = function() {
+      return this._type;
+    };
+
+    SortCriteria.prototype.activeElement = function() {
+      return this._activeElement;
+    };
+
+    SortCriteria.prototype.activeSortItemGroupTitle = function() {
+      return this._activeSortItemGroupTitle;
+    };
+
+    SortCriteria.prototype.equals = function(sortCriteria) {
+      return sortCriteria.type() === this._type && sortCriteria.isReverse() === this._isReverse;
+    };
+
+    return SortCriteria;
+
+  })();
+
+  models.SortMenuItem = (function(_super) {
+    __extends(SortMenuItem, _super);
+
+    function SortMenuItem(group) {
+      this.group = group;
+    }
+
+    SortMenuItem.prototype.setActive = function() {
+      return this.group.activate(this);
+    };
+
+    SortMenuItem.prototype.isActive = function() {
+      return !!this.active;
+    };
+
+    return SortMenuItem;
+
+  })(models.Listenable);
+
   models.TreeFilter = (function(_super) {
     __extends(TreeFilter, _super);
 
@@ -1456,65 +1652,6 @@
 
   })(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) {
@@ -1536,7 +1673,7 @@
       this.refs.itemView.setState({
         loading: true
       });
-      return promise.then((function(_this) {
+      return promise.always((function(_this) {
         return function() {
           return _this.refs.itemView.setState({
             loading: false
@@ -1583,6 +1720,7 @@
         filter: this.props.initialFilter,
         objs: [],
         viewMode: new models.ViewMode(),
+        sortCriteria: this.props.initialFilter.sortCriteria,
         addedObjsCollection: new models.AddedObjsCollection(basePreset),
         objCollection: new models.ObjCollection(initialSelection, selectionMode),
         inspector: new models.Inspector()
@@ -1597,6 +1735,7 @@
         "className": "scrivito-content-browser-wrapper"
       }, React.createElement(ui.TopBar, {
         "filter": this.state.filter,
+        "sortCriteria": this.state.sortCriteria,
         "viewMode": this.state.viewMode
       }), React.createElement(ui.Filter, {
         "ref": "filterView",
@@ -1613,7 +1752,8 @@
       }), React.createElement(ui.MoreItemsSpinner, {
         "objCollection": this.state.objCollection
       })), React.createElement(ui.Inspector, {
-        "inspector": this.state.inspector
+        "inspector": this.state.inspector,
+        "objCollection": this.state.objCollection
       })), React.createElement(ui.Footer, {
         "promise": this.props.promise,
         "objCollection": this.state.objCollection
@@ -1621,6 +1761,86 @@
     }
   });
 
+  models.DialogBody = React.createClass({
+    displayName: 'DialogBody',
+    render: function() {
+      return React.createElement("div", {
+        "className": "scrivito_modal_body"
+      }, this.props.body);
+    }
+  });
+
+  models.DialogHeader = React.createClass({
+    displayName: 'DialogHeader',
+    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.DialogApp = React.createClass({
+    displayName: 'DialogApp',
+    dialogClassName: function() {
+      return "scrivito_prompt_dialog scrivito_center_dialog scrivito_modal_prompt scrivito_show scrivito_red";
+    },
+    showConfirmButton: function() {
+      return this.props.mode === "confirm";
+    },
+    closeButtonText: function() {
+      if (this.showConfirmButton()) {
+        return "Cancel";
+      } else {
+        return "Close";
+      }
+    },
+    resolveAndClose: function(event) {
+      this.props.promise.resolve();
+      return this.closeDialog(event);
+    },
+    rejectAndClose: function(event) {
+      this.props.promise.reject();
+      return this.closeDialog(event);
+    },
+    closeDialog: 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.dialogClassName(),
+        "style": {
+          zIndex: 4444444
+        }
+      }, React.createElement(models.DialogHeader, {
+        "title": this.props.title,
+        "subtitle": this.props.subtitle
+      }), React.createElement(models.DialogBody, {
+        "body": this.props.body
+      }), React.createElement("div", {
+        "className": "scrivito_modal_footer"
+      }, React.createElement("a", {
+        "className": "scrivito_button scrivito_cancel",
+        "onClick": this.rejectAndClose
+      }, this.closeButtonText()), (this.showConfirmButton() ? React.createElement("a", {
+        "className": "scrivito_button scrivito_red scrivito_confirm",
+        "onClick": this.resolveAndClose
+      }, "Confirm") : void 0))));
+    }
+  });
+
   ui.Filter = React.createClass({
     displayName: 'Filter',
     mixins: [FilterMixin],
@@ -1877,6 +2097,14 @@
     currentSelectedCount: function() {
       return this.props.objCollection.selectedObjs().length;
     },
+    deleteButtonClass: function() {
+      var className;
+      className = ' scrivito_button scrivito_lightgrey content-browser-delete scrivito_left';
+      if (this.currentSelectedCount() === 0) {
+        className += ' scrivito_disabled';
+      }
+      return className;
+    },
     cancelClick: function() {
       return this.props.promise.reject();
     },
@@ -1884,13 +2112,24 @@
       return this.props.promise.resolve(this.props.objCollection.selectedObjs());
     },
     deleteClick: function() {
-      return this.props.objCollection.destroySelectedObjs();
+      var objectsToBeDeleted;
+      if (this.currentSelectedCount() > 0) {
+        objectsToBeDeleted = this.currentSelectedCount() === 1 ? "one CMS object" : "" + (this.currentSelectedCount()) + " CMS objects";
+        return scrivito.content_browser._showConfirm({
+          title: 'Really delete the selected items?',
+          subtitle: "This will delete " + objectsToBeDeleted + ". Objects that were created in this working copy cannot be restored."
+        }).then((function(_this) {
+          return function() {
+            return _this.props.objCollection.destroySelectedObjs();
+          };
+        })(this));
+      }
     },
     render: function() {
       return React.createElement("div", {
         "className": "scrivito-content-browser-footer"
       }, React.createElement("a", {
-        "className": "scrivito_button scrivito_lightgrey content-browser-delete",
+        "className": this.deleteButtonClass(),
         "onClick": this.deleteClick
       }, "Delete", React.createElement("span", {
         "className": "scrivito-content-browser-counter selected-total"
@@ -1920,15 +2159,31 @@
         "className": "scrivito_icon scrivito_icon_generic"
       }), "No edit view available."));
     },
+    _deleteInspectedObj: function() {
+      return scrivito.content_browser._showConfirm({
+        title: React.createElement("span", null, "Really delete ", React.createElement("q", null, this.props.inspector.fileDetail()), "?"),
+        subtitle: 'Objects that were created in this working copy cannot be restored.'
+      }).then((function(_this) {
+        return function() {
+          _this.props.objCollection.destroyObj(_this.props.inspector.getInspectedObj());
+          return _this.props.inspector.setInspectedObj(void 0);
+        };
+      })(this));
+    },
     render: function() {
       return React.createElement("div", {
         "className": "scrivito-content-browser-inspector"
-      }, (this.props.inspector.inspectorUrl() != null ? React.createElement("div", null, React.createElement("h3", null, React.createElement("span", {
+      }, (this.props.inspector.inspectorUrl() != null ? React.createElement("div", null, React.createElement("h3", {
+        "title": this.props.inspector.fileDetail()
+      }, React.createElement("span", {
         "title": "Details",
         "className": this.getDetailsClassName()
       }), React.createElement("span", {
         "className": "title"
-      }, this.props.inspector.fileDetail())), React.createElement("div", {
+      }, this.props.inspector.fileDetail()), React.createElement("span", {
+        "className": "scrivito_icon scrivito_icon_trash scrivito_delete",
+        "onClick": this._deleteInspectedObj
+      })), React.createElement("div", {
         "className": "inspector-content"
       }, (this.props.inspector.getInspectedObj().hasDetailsView() ? React.createElement("iframe", {
         "src": this.props.inspector.inspectorUrl(),
@@ -1950,8 +2205,20 @@
         "uploader-drag-over": this.state.dragInProgres
       });
     },
+    _showConflictingPresetsAlert: function(errors) {
+      var message;
+      message = React.createElement("div", null, "Please select only one of the following options,\nthen try again:", _.map(errors, 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);
+        })));
+      }));
+      return scrivito.content_browser._showAlert({
+        title: 'The selected filter options cannot be applied to the file(s) you wanted to upload',
+        body: React.createElement("div", null, message)
+      });
+    },
     uploadFiles: function(event) {
-      var dataTransfer, files, message, preset;
+      var dataTransfer, files, preset;
       this.changeDragState(false)(event);
       dataTransfer = event.dataTransfer;
       if (dataTransfer == null) {
@@ -1963,11 +2230,7 @@
         if (preset.isValid()) {
           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) {
-            return message += "\n" + field + ": " + (values.join(', '));
-          });
-          return alert(message);
+          return this._showConflictingPresetsAlert(preset.errors());
         }
       }
     },
@@ -2002,7 +2265,9 @@
       }) : this.props.viewMode.isList() ? React.createElement(ui.TableView, {
         "objCollection": this.props.objCollection,
         "toggleSelected": this.props.toggleSelected,
-        "inspector": this.props.inspector
+        "filter": this.props.filter,
+        "inspector": this.props.inspector,
+        "addedObjsCollection": this.props.addedObjsCollection
       }) : React.createElement(ui.ThumbnailItems, {
         "objCollection": this.props.objCollection,
         "viewMode": this.props.viewMode.getMode(),
@@ -2046,50 +2311,107 @@
     }
   });
 
-  ui.ResizeItem = React.createClass({
-    displayName: 'ResizeItem',
-    resizeButtonsData: {
-      "large": {
-        iconTitle: "Large thumbnails",
-        iconClassName: "scrivito_icon_th_large"
-      },
-      "big": {
-        iconTitle: "Big thumbnails",
-        iconClassName: "scrivito_icon_th"
-      },
-      "normal": {
-        iconTitle: "Thumbnails",
-        iconClassName: "scrivito_icon_th_medium"
-      },
-      "small": {
-        iconTitle: "Small thumbnails",
-        iconClassName: "scrivito_icon_th_small"
+  ui.SortMenu = React.createClass({
+    displayName: 'SortMenu',
+    sortItemsData: {
+      "date": {
+        itemTitle: "Sort by date",
+        descCriteriaTitle: "Last change: latest first",
+        ascCriteriaTitle: "Last change: oldest first",
+        sortItemType: "_last_changed"
       }
     },
-    getIconClassName: function(size) {
-      return "scrivito_icon " + this.resizeButtonsData[size].iconClassName;
-    },
-    getIconTitle: function(size) {
-      return this.resizeButtonsData[size].iconTitle;
-    },
-    getLabelClasses: function() {
-      return classSet({
-        'active': this.props.viewMode.getMode() === this.props.size,
-        "editing-button-view": true
-      });
+    toggleSortMenu: function() {
+      return $('.scrivito_menu_box').fadeToggle();
     },
-    changeViewMode: function() {
-      return this.props.viewMode.setMode(this.props.size);
+    getSortIconClassName: function() {
+      var sortIcon;
+      sortIcon = "scrivito_icon ";
+      if (this.props.filter.sortCriteria.isReverse()) {
+        sortIcon += "scrivito_icon_sort_up";
+      } else {
+        sortIcon += "scrivito_icon_sort_down";
+      }
+      return sortIcon;
     },
     render: function() {
+      var sortItem;
       return React.createElement("span", {
-        "data-size": this.props.size,
-        "className": this.getLabelClasses(),
-        "onClick": this.changeViewMode
+        "className": "scrivito_button scrivito_lightgrey scrivito_right",
+        "onClick": this.toggleSortMenu
       }, React.createElement("i", {
-        "title": this.getIconTitle(this.props.size),
-        "className": this.getIconClassName(this.props.size)
-      }));
+        "className": this.getSortIconClassName()
+      }), this.props.filter.sortCriteria.activeElement(), React.createElement("i", {
+        "className": "scrivito_icon scrivito-content-browser-menu-icon scrivito_icon_chevron_down"
+      }), React.createElement("ul", {
+        "className": "scrivito_menu_box scrivito_right"
+      }, (function() {
+        var _i, _len, _ref, _results;
+        _ref = Object.keys(this.sortItemsData);
+        _results = [];
+        for (_i = 0, _len = _ref.length; _i < _len; _i++) {
+          sortItem = _ref[_i];
+          _results.push(React.createElement(ui.SortMenuItem, {
+            "filter": this.props.filter,
+            "sortItem": this.sortItemsData[sortItem]
+          }));
+        }
+        return _results;
+      }).call(this)));
+    }
+  });
+
+  ui.SortMenuItem = React.createClass({
+    displayName: 'SortMenuItem',
+    basicIcon: "scrivito_icon  ",
+    _ascIconSortClass: function() {
+      return this.basicIcon + "scrivito_icon_sort_down";
+    },
+    _descIconSortClass: function() {
+      return this.basicIcon + "scrivito_icon_sort_up";
+    },
+    getSortLiClassName: function(activeElement) {
+      var itemIcon;
+      itemIcon = "scrivito_menu_item";
+      if (this.props.filter.sortCriteria.activeElement() === activeElement) {
+        itemIcon += " active";
+      }
+      return itemIcon;
+    },
+    _getAscSortLiClassName: function() {
+      return this.getSortLiClassName(this.currentSortItem().ascCriteriaTitle);
+    },
+    _getDescSortLiClassName: function() {
+      return this.getSortLiClassName(this.currentSortItem().descCriteriaTitle);
+    },
+    currentSortItem: function() {
+      return this.props.sortItem;
+    },
+    _changeSortCriteria: function(reverse, activeItemElement) {
+      var sortCriteria;
+      sortCriteria = new models.SortCriteria(this.currentSortItem().sortItemType, reverse, activeItemElement, this.currentSortItem().itemTitle);
+      return this.props.filter.setSortCriteria(sortCriteria);
+    },
+    _sortInAscOrder: function() {
+      return this._changeSortCriteria(false, this.currentSortItem().ascCriteriaTitle);
+    },
+    _sortInDescOrder: function() {
+      return this._changeSortCriteria(true, this.currentSortItem().descCriteriaTitle);
+    },
+    render: function() {
+      return React.createElement("div", null, React.createElement("li", {
+        "className": "scrivito_menu_separator"
+      }, React.createElement("span", null, (this.currentSortItem().itemTitle))), React.createElement("li", {
+        "className": this._getDescSortLiClassName(),
+        "onClick": this._sortInDescOrder
+      }, React.createElement("span", null, React.createElement("i", {
+        "className": this._descIconSortClass()
+      }, " "), (this.currentSortItem().descCriteriaTitle))), React.createElement("li", {
+        "className": this._getAscSortLiClassName(),
+        "onClick": this._sortInAscOrder
+      }, React.createElement("span", null, React.createElement("i", {
+        "className": this._ascIconSortClass()
+      }, " "), (this.currentSortItem().ascCriteriaTitle))));
     }
   });
 
@@ -2103,6 +2425,24 @@
     }
   });
 
+  ui.TableViewAddItem = React.createClass({
+    mixins: [AddItemMixin],
+    render: function() {
+      return React.createElement("tr", {
+        "onClick": this.createClick
+      }, React.createElement("td", {
+        "colSpan": "6"
+      }, 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.TableViewContent = React.createClass({
     mixins: [InfiniteScrollMixin],
     getTableViewItems: function() {
@@ -2121,10 +2461,16 @@
     getElementDOMNode: function() {
       return this.getDOMNode();
     },
+    objCreation: function() {
+      return new models.ObjCreation(this.props.filter);
+    },
     render: function() {
       return React.createElement("div", {
         "className": "scrivito-content-browser-list-content"
-      }, React.createElement("table", null, React.createElement("tbody", null, this.getTableViewItems())));
+      }, React.createElement("table", null, React.createElement("tbody", null, (this.objCreation().showCreationItem() ? React.createElement(ui.TableViewAddItem, {
+        "objCreation": this.objCreation(),
+        "addedObjsCollection": this.props.addedObjsCollection
+      }) : void 0), this.getTableViewItems())));
     }
   });
 
@@ -2137,7 +2483,7 @@
     getLastChangedFormatedDate: function() {
       var result;
       if (this.props.obj.lastChanged() !== void 0) {
-        result = moment(this.props.obj.lastChanged()).zone(this.props.obj.lastChanged());
+        result = moment(this.props.obj.lastChanged()).utcOffset(this.props.obj.lastChanged());
         return result.format("dddd, MMMM Do YYYY, h:mm A");
       }
     },
@@ -2168,92 +2514,11 @@
 
   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());
-      }
-    },
+    mixins: [AddItemMixin],
     render: function() {
       return React.createElement("li", {
         "className": "content-browser-item",
-        "onClick": this.handleClick
+        "onClick": this.createClick
       }, React.createElement("div", {
         "className": this.itemClassName()
       }, React.createElement("div", {
@@ -2412,6 +2677,8 @@
         "onClick": this.setSearchTerm
       }, "Search")), React.createElement(ui.ViewModeBar, {
         "viewMode": this.props.viewMode
+      }), React.createElement(ui.SortMenu, {
+        "filter": this.props.filter
       }));
     }
   });