feat: add select all button to selection toolbar

project-slippi · Jun 23, 2021 · f811063 · f811063
1 parent 4a761d0
commit f811063
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/src/renderer/containers/ReplayBrowser/FileSelectionToolbar.tsx b/src/renderer/containers/ReplayBrowser/FileSelectionToolbar.tsx
@@ -2,17 +2,23 @@
 import { css, jsx } from "@emotion/react";
 import styled from "@emotion/styled";
 import Button from "@material-ui/core/Button";
+import BlockIcon from "@material-ui/icons/Block";
+import DeleteIcon from "@material-ui/icons/Delete";
+import PlayArrowIcon from "@material-ui/icons/PlayArrow";
+import SelectAllIcon from "@material-ui/icons/SelectAll";
 import React from "react";
 
 export interface FileSelectionToolbarProps {
   totalSelected: number;
+  onSelectAll: () => void;
   onPlay: () => void;
   onClear: () => void;
   onDelete: () => void;
 }
 
 export const FileSelectionToolbar: React.FC<FileSelectionToolbarProps> = ({
   totalSelected,
+  onSelectAll,
   onPlay,
   onClear,
   onDelete,
@@ -43,14 +49,23 @@ export const FileSelectionToolbar: React.FC<FileSelectionToolbarProps> = ({
           {totalSelected} files selected
         </div>
         <div>
-          <Button color="secondary" variant="contained" size="small" onClick={onPlay}>
-            Play All
+          <Button color="secondary" variant="contained" size="small" onClick={onDelete} startIcon={<DeleteIcon />}>
+            Delete
           </Button>
-          <Button color="secondary" variant="contained" size="small" onClick={onClear}>
+          <Button color="secondary" variant="contained" size="small" onClick={onClear} startIcon={<BlockIcon />}>
             Clear
           </Button>
-          <Button color="secondary" variant="contained" size="small" onClick={onDelete}>
-            Delete
+          <Button
+            color="secondary"
+            variant="contained"
+            size="small"
+            onClick={onSelectAll}
+            startIcon={<SelectAllIcon />}
+          >
+            Select All
+          </Button>
+          <Button color="primary" variant="contained" size="small" onClick={onPlay} startIcon={<PlayArrowIcon />}>
+            Play All
           </Button>
         </div>
       </div>

diff --git a/src/renderer/containers/ReplayBrowser/ReplayBrowser.tsx b/src/renderer/containers/ReplayBrowser/ReplayBrowser.tsx
@@ -164,6 +164,7 @@ export const ReplayBrowser: React.FC = () => {
               )}
               <FileSelectionToolbar
                 totalSelected={selectedFiles.length}
+                onSelectAll={fileSelection.selectAll}
                 onPlay={() => playFiles(selectedFiles.map((path) => ({ path })))}
                 onClear={fileSelection.clearSelection}
                 onDelete={() => {