15768: created multiselect toolbar Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa...

diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index ea95648e7b8b48bfd7866461e22f8fc9d67fbe00..16a014bcebd52ff58e2e4e7e7221097323b3873b 100644 (file)
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -14,6 +14,7 @@ import { DataTableFilters } from 'components/data-table-filters/data-table-filte
 import { CloseIcon, IconType, MaximizeIcon, UnMaximizeIcon, MoreOptionsIcon } from 'components/icon/icon';
 import { PaperProps } from '@material-ui/core/Paper';
 import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
+import MultiselectToolbar from 'components/multiselectToolbar/MultiselectToolbar';
 
 type CssRules = 'searchBox' | 'headerMenu' | 'toolbar' | 'footer' | 'root' | 'moreOptionsButton' | 'title' | 'dataTable' | 'container';
 
@@ -48,8 +49,10 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         height: '100%',
     },
     headerMenu: {
+        width: '100%',
         float: 'right',
-        display: 'inline-block',
+        display: 'flex',
+        justifyContent: 'space-between',
     },
 });
 
@@ -190,6 +193,7 @@ export const DataExplorer = withStyles(styles)(
                             )}
                             {(!hideColumnSelector || !hideSearchInput || !!actions) && (
                                 <Grid className={classes.headerMenu} item xs>
+                                    <MultiselectToolbar />
                                     <Toolbar className={classes.toolbar}>
                                         {!hideSearchInput && (
                                             <div className={classes.searchBox}>

diff --git a/src/components/multiselectToolbar/MultiselectToolbar.tsx b/src/components/multiselectToolbar/MultiselectToolbar.tsx
new file mode 100644 (file)
index 0000000..c71994a
--- /dev/null
+++ b/src/components/multiselectToolbar/MultiselectToolbar.tsx
@@ -0,0 +1,36 @@
+// Copyright (C) The Arvados Authors. All rights reserved.
+//
+// SPDX-License-Identifier: AGPL-3.0
+
+import React from 'react';
+import { StyleRulesCallback, withStyles, WithStyles, Toolbar } from '@material-ui/core';
+import { ArvadosTheme } from 'common/custom-theme';
+
+type CssRules = 'root' | 'item';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+    root: {
+        // border: '2px dotted green',
+        display: 'flex',
+        flexDirection: 'row',
+    },
+    item: {
+        // border: '2px dotted blue',
+        color: theme.palette.text.primary,
+        margin: '0.5rem',
+    },
+});
+
+type MultiselectToolbarProps = WithStyles<CssRules>;
+
+export default withStyles(styles)((props: MultiselectToolbarProps) => {
+    console.log(props);
+    const { classes } = props;
+    return (
+        <Toolbar className={classes.root}>
+            <div className={classes.item}>test1</div>
+            <div className={classes.item}>test2</div>
+            <div className={classes.item}>test3</div>
+        </Toolbar>
+    );
+});