NEW Select all and clear all functionality

client/lang/src/en.json

@@ -26,6 +26,8 @@
     "AssetAdmin.BULK_ACTIONS_DELETE_SUCCESS_02": "%s folders/files were successfully deleted.",
     "AssetAdmin.BULK_ACTIONS_DELETE_WARNING": "Ensure files are removed from content areas prior to deleting them, otherwise they will appear as broken links.",
     "AssetAdmin.BULK_ACTIONS_PLACEHOLDER": "Select an action...",
+    "AssetAdmin.BULK_ACTIONS_SELECTED": "%s selected",
+    "AssetAdmin.BULK_ACTIONS_SELECT_ALL": "Select all",
     "AssetAdmin.CANCEL": "Cancel",
     "AssetAdmin.CONFIRMDELETE": "Are you sure you want to delete this record?",
     "AssetAdmin.CONFIRM_FILE_ARCHIVE": "Confirm archive",

client/src/components/BulkActions/BulkActions.js

@@ -12,6 +12,12 @@ class BulkActions extends Component {
 
     this.handleChangeValue = this.handleChangeValue.bind(this);
     this.renderChild = this.renderChild.bind(this);
+    this.handleCounterFocus = this.handleCounterFocus.bind(this);
+    this.handleCounterUnfocus = this.handleCounterUnfocus.bind(this);
+    this.counterText = this.counterText.bind(this);
+    this.state = {
+      counterFocused: false,
+    };
   }
 
   /**
@@ -90,6 +96,24 @@ class BulkActions extends Component {
     );
   }
 
+  handleCounterFocus() {
+    this.setState({ counterFocused: true });
+  }
+
+  handleCounterUnfocus() {
+    this.setState({ counterFocused: false });
+  }
+
+  counterText() {
+    const selected = i18n.sprintf(
+      i18n._t('AssetAdmin.BULK_ACTIONS_SELECTED', '%s selected'),
+      this.props.items.length
+    );
+    const selectedText = `${selected} x`;
+    const clearText = i18n._t('AssetAdmin.BULK_ACTIONS_CLEAR', 'Clear');
+    return this.state.counterFocused ? clearText : selectedText;
+  }
+
   render() {
     if (!this.props.items.length) {
       return null;
@@ -106,13 +130,28 @@ class BulkActions extends Component {
     }
 
     const { ActionMenu, showCount } = this.props;
-
-    const count = this.props.items.length;
+    const selectAll = i18n._t('AssetAdmin.BULK_ACTIONS_SELECT_ALL', 'Select all');
 
     return (
       <div className="bulk-actions fieldholder-small">
         {showCount &&
-          <div className="bulk-actions-counter">{count}</div>
+          <>
+            <Button
+              className="bulk-actions-counter"
+              onClick={this.props.onClearSelection}
+              onFocus={this.handleCounterFocus}
+              onBlur={this.handleCounterUnfocus}
+              onMouseEnter={this.handleCounterFocus}
+              onMouseLeave={this.handleCounterUnfocus}
+            >
+              {this.counterText()}
+            </Button>
+            <div className="bulk-actions-select-all">
+              <Button onClick={this.props.onSelectAll}>
+                {selectAll}
+              </Button>
+            </div>
+          </>
         }
         {children.slice(0, 2)}
         {children.length > 2 && ActionMenu
@@ -144,6 +183,8 @@ BulkActions.propTypes = {
   })),
   ActionMenu: PropTypes.elementType,
   showCount: PropTypes.bool,
+  onClearSelection: PropTypes.func.isRequired,
+  onSelectAll: PropTypes.func.isRequired,
 };
 
 BulkActions.defaultProps = {

client/src/components/BulkActions/BulkActions.scss

@@ -39,15 +39,21 @@ $bulk-actions-width: 300px;
 
   .bulk-actions-counter {
     vertical-align: middle;
-    min-width: 28px;
-    padding: 6px;
+    min-width: 100px;
+    padding: 5px;
     margin-right: 8px;
     line-height: $line-height-base;
     color: $white;
     text-align: center;
     background-color: $component-active-bg;
     border-radius: $btn-border-radius;
     font-weight: bold;
+    transition: none;
+  }
+
+  .bulk-actions-select-all button {
+    color: $component-active-bg;
+    font-weight: bold;
   }
 
   .bulk-actions__action.ss-ui-button {

client/src/containers/Gallery/Gallery.js

@@ -36,7 +36,8 @@ const ACTION_TYPES = {
   UNPUBLISH: 'unpublish',
   INSERT: 'insert',
   ADMIN: 'admin',
-  SELECT: 'select'
+  SELECT: 'select',
+  CLEAR: 'clear',
 };
 
 class Gallery extends Component {
@@ -68,6 +69,7 @@ class Gallery extends Component {
     this.handleBeginSelection = this.handleBeginSelection.bind(this);
     this.handleGroupSelect = this.handleGroupSelect.bind(this);
     this.handleClearSelection = this.handleClearSelection.bind(this);
+    this.handleSelectAll = this.handleSelectAll.bind(this);
     this.toggleSelectConcat = this.toggleSelectConcat.bind(this);
     this.getSelectableFiles = this.getSelectableFiles.bind(this);
   }
@@ -491,16 +493,16 @@ class Gallery extends Component {
   /**
    * Handles the lasso selection of items from <SelectionGroup />
    *
-   * @param items
+   * @param ids
    * @param event Event
    */
-  handleGroupSelect(items, event) {
+  handleGroupSelect(ids, event) {
     const { setSelectedFiles, selectFiles } = this.props.actions.gallery;
     const selectableFiles = this.getSelectableFiles();
 
-    const selectItems = items
+    const selectItems = ids
       .filter((id, index) => {
-        if (items.indexOf(id) !== index) {
+        if (ids.indexOf(id) !== index) {
           return false;
         }
         return selectableFiles.find(file => file.id === id);
@@ -539,6 +541,14 @@ class Gallery extends Component {
     this.props.actions.gallery.deselectFiles();
   }
 
+  /**
+   * Selects all visible files
+   */
+  handleSelectAll() {
+    const ids = this.props.files.map(file => file.id);
+    this.handleGroupSelect(ids, new Event('na'));
+  }
+
   /**
    * Pick if the selection started from inside the pagination. If it started from inside the
    * pagination, cancel it to prevent inteference with the normal pagination.
@@ -756,6 +766,8 @@ class Gallery extends Component {
           key={selected.length > 0}
           container={this.gallery}
           showCount={maxFilesSelect !== 1}
+          onClearSelection={this.handleClearSelection}
+          onSelectAll={this.handleSelectAll}
         />
       );
     }