toolbar accurately selects for appropriate buttons Arvados-DCO-1.1-Signed-off-by...

[arvados.git] / src / components / multi-panel-view / multi-panel-view.tsx

diff --git a/src/components/multi-panel-view/multi-panel-view.tsx b/src/components/multi-panel-view/multi-panel-view.tsx
index f0cbcf56be67b3e826150db35f9fccd8dc6c3187..203748d5e0b2c73ff6241b100718f2c01f5e68b2 100644 (file)
--- a/src/components/multi-panel-view/multi-panel-view.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.tsx
@@ -19,9 +19,12 @@ import { InfoIcon } from 'components/icon/icon';
 import { ReactNodeArray } from 'prop-types';
 import classNames from 'classnames';
 
-type CssRules = 'button' | 'buttonIcon' | 'content';
+type CssRules = 'root' | 'button' | 'buttonIcon' | 'content';
 
 const styles: StyleRulesCallback<CssRules> = theme => ({
+    root: {
+        marginTop: '10px',
+    },
     button: {
         padding: '2px 5px',
         marginRight: '5px',
@@ -67,6 +70,7 @@ interface MPVPanelDataProps {
     panelRef?: MutableRefObject<any>;
     forwardProps?: boolean;
     maxHeight?: string;
+    minHeight?: string;
 }
 
 interface MPVPanelActionProps {
@@ -82,7 +86,7 @@ type MPVPanelContentProps = {children: ReactElement} & MPVPanelProps & GridProps
 
 // Grid item compatible component for layout and MPV props passing
 export const MPVPanelContent = ({doHidePanel, doMaximizePanel, doUnMaximizePanel, panelName,
-    panelMaximized, panelIlluminated, panelRef, forwardProps, maxHeight,
+    panelMaximized, panelIlluminated, panelRef, forwardProps, maxHeight, minHeight,
     ...props}: MPVPanelContentProps) => {
     useEffect(() => {
         if (panelRef && panelRef.current) {
@@ -90,11 +94,11 @@ export const MPVPanelContent = ({doHidePanel, doMaximizePanel, doUnMaximizePanel
         }
     }, [panelRef]);
 
-    const mh = panelMaximized
+    const maxH = panelMaximized
         ? '100%'
         : maxHeight;
 
-    return <Grid item style={{maxHeight: mh}} {...props}>
+    return <Grid item style={{maxHeight: maxH, minHeight}} {...props}>
         <span ref={panelRef} /> {/* Element to scroll to when the panel is selected */}
         <Paper style={{height: '100%'}} elevation={panelIlluminated ? 8 : 0}>
             { forwardProps
@@ -205,7 +209,7 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
         };
     };
 
-    return <Grid container {...props}>
+    return <Grid container {...props} className={classes.root}>
         <Grid container item direction="row">
             { buttons.map((tgl, idx) => <Grid item key={idx}>{tgl}</Grid>) }
         </Grid>
@@ -220,4 +224,4 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
     </Grid>;
 };
 
-export const MPVContainer = withStyles(styles)(MPVContainerComponent);
\ No newline at end of file
+export const MPVContainer = withStyles(styles)(MPVContainerComponent);