X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/3015426750f11fdc97d55a29f2a662e2f272f5d4..3429b49bb9ff70db11f3239c7fbbc03ac7c2e460:/src/components/side-panel/side-panel.tsx

diff --git a/src/components/side-panel/side-panel.tsx b/src/components/side-panel/side-panel.tsx
index 81ebd86b..a7783fb2 100644
--- a/src/components/side-panel/side-panel.tsx
+++ b/src/components/side-panel/side-panel.tsx
@@ -19,36 +19,39 @@ export interface SidePanelItem {
     icon: string;
     active?: boolean;
     open?: boolean;
+    margin?: boolean;
+    openAble?: boolean;
 }
 
 interface SidePanelProps {
-    toggleSidePanelOpen: (id: string) => void;
-    toggleSidePanelActive: (id: string) => void;
+    toggleOpen: (id: string) => void;
+    toggleActive: (id: string) => void;
     sidePanelItems: SidePanelItem[];
+    onContextMenu: (event: React.MouseEvent<HTMLElement>, item: SidePanelItem) => void;
 }
 
 class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
     render(): ReactElement<any> {
-        const { classes, toggleSidePanelOpen, toggleSidePanelActive, sidePanelItems } = this.props;
-        const { listItemText, leftSidePanelContainer, row, list, icon, projectIcon, active, activeArrow, inactiveArrow, arrowTransition, arrowRotate } = classes;
+        const { classes, toggleOpen, toggleActive, sidePanelItems, children } = this.props;
+        const { listItemText, leftSidePanelContainer, row, list, icon, projectIconMargin, active, activeArrow, inactiveArrow, arrowTransition, arrowRotate } = classes;
         return (
             <div className={leftSidePanelContainer}>
                 <List>
                     {sidePanelItems.map(it => (
                         <span key={it.name}>
-                            <ListItem button className={list} onClick={() => toggleSidePanelActive(it.id)}>
+                            <ListItem button className={list} onClick={() => toggleActive(it.id)} onContextMenu={this.handleRowContextMenu(it)}>
                                 <span className={row}>
-                                    {it.name === "Projects" ? <i onClick={() => toggleSidePanelOpen(it.id)} className={`${it.active ? activeArrow : inactiveArrow} 
+                                    {it.openAble ? <i onClick={() => toggleOpen(it.id)} className={`${it.active ? activeArrow : inactiveArrow} 
                                         ${it.open ? `fas fa-caret-down ${arrowTransition}` : `fas fa-caret-down ${arrowRotate}`}`} /> : null}
                                     <ListItemIcon className={it.active ? active : ''}>
-                                        <i className={`${it.icon} ${icon} ${it.name === "Projects" ? projectIcon : ''}`} />
+                                        <i className={`${it.icon} ${icon} ${it.margin ? projectIconMargin : ''}`} />
                                     </ListItemIcon>
                                     <ListItemText className={listItemText} primary={<Typography className={it.active ? active : ''}>{it.name}</Typography>} />
                                 </span>
                             </ListItem>
-                            {it.name === "Projects" ? (
+                            {it.openAble ? (
                                 <Collapse in={it.open} timeout="auto" unmountOnExit>
-                                    {this.props.children}
+                                    {children}
                                 </Collapse>) : null}
                         </span>
                     ))}
@@ -56,9 +59,14 @@ class SidePanel extends React.Component<SidePanelProps & WithStyles<CssRules>> {
             </div>
         );
     }
+
+    handleRowContextMenu = (item: SidePanelItem) =>
+        (event: React.MouseEvent<HTMLElement>) =>
+            item.openAble ? this.props.onContextMenu(event, item) : null
+
 }
 
-type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 'icon' | 'projectIcon' |
+type CssRules = 'active' | 'listItemText' | 'row' | 'leftSidePanelContainer' | 'list' | 'icon' | 'projectIconMargin' |
     'activeArrow' | 'inactiveArrow' | 'arrowRotate' | 'arrowTransition';
 
 const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
@@ -87,21 +95,23 @@ const styles: StyleRulesCallback<CssRules> = (theme: Theme) => ({
         transform: 'rotate(-90deg)',
     },
     leftSidePanelContainer: {
-        position: 'absolute',
-        top: '100px',
         overflowY: 'auto',
         minWidth: '240px',
         whiteSpace: 'nowrap',
+        marginTop: '52px',
+        display: 'flex',
+        flexGrow: 1,
     },
     list: {
         paddingBottom: '5px',
         paddingTop: '5px',
-        paddingLeft: '14px'
+        paddingLeft: '14px',
+        minWidth: '240px',
     },
     icon: {
         minWidth: '20px',
     },
-    projectIcon: {
+    projectIconMargin: {
         marginLeft: '17px',
     }
 });