[arvados-workbench2] created: 2.5.0-1-g587b02d3

[git repository hosting]

        at  587b02d38432a08c1406a2b2ccb5afa5be6726bf (commit)


commit 587b02d38432a08c1406a2b2ccb5afa5be6726bf
Author: Lisa Knox <lisaknox83 at gmail.com>
Date:   Fri Dec 23 12:20:11 2022 -0500

    19434: final code cleanup
    Arvados-DCO-1.1-Signed-off-by: Lisa Knox <lisa.knox at curii.com>

diff --git a/public/arrow-to-left.png b/public/arrow-to-left.png
deleted file mode 100644
index 262c1483..00000000
Binary files a/public/arrow-to-left.png and /dev/null differ
diff --git a/public/arrow-to-right.png b/public/arrow-to-right.png
deleted file mode 100644
index 8205c215..00000000
Binary files a/public/arrow-to-right.png and /dev/null differ
diff --git a/src/views-components/side-panel-toggle/side-panel-toggle.tsx b/src/views-components/side-panel-toggle/side-panel-toggle.tsx
index 0e4acc21..d4c6b034 100644
--- a/src/views-components/side-panel-toggle/side-panel-toggle.tsx
+++ b/src/views-components/side-panel-toggle/side-panel-toggle.tsx
@@ -3,56 +3,59 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React from 'react';
-import { Tooltip, IconButton } from '@material-ui/core';
+import { Tooltip, IconButton, StyleRulesCallback, withStyles, WithStyles  } from '@material-ui/core';
 import { connect } from 'react-redux';
 import { toggleSidePanel } from "store/side-panel/side-panel-action";
 import { RootState } from 'store/store';
 
-type collapseButtonProps = {
-    isCollapsed: boolean;
-    toggleSidePanel: (collapsedState: boolean) => void
-}
-
 export const COLLAPSE_ICON_SIZE = 35
 
-const SidePanelToggle = (props: collapseButtonProps) => {
-    const collapseButtonIconStyles = {
-        root: {
-            width: `${COLLAPSE_ICON_SIZE}px`,
-            height: `${COLLAPSE_ICON_SIZE}px`,
-            marginTop: '0.4rem'
-        },
-        icon: {
-            height: '1.5rem',
-            width: '3rem',
-            opacity: '0.6',
-        },
-    }
-
-    return <Tooltip disableFocusListener title="Toggle Side Panel">
-        <IconButton style={collapseButtonIconStyles.root} onClick={() => { props.toggleSidePanel(props.isCollapsed) }}>
-            <div>
-                {props.isCollapsed ?
-                    <img style={{ ...collapseButtonIconStyles.icon, transform: "rotate(180deg)" }} src='/collapseLHS-New.svg#svgView(preserveAspectRatio(none))' />
-                    :
-                    <img style={{ ...collapseButtonIconStyles.icon, }} src='/collapseLHS-New.svg#svgView(preserveAspectRatio(none))' />}
-            </div>
-        </IconButton>
-    </Tooltip>
+type CssRules = 'root' | 'icon';
+
+const styles: StyleRulesCallback<CssRules> = () => ({
+    root: {
+        width: `${COLLAPSE_ICON_SIZE}px`,
+        height: `${COLLAPSE_ICON_SIZE}px`,
+        marginTop: '0.4rem'
+    },
+    icon: {
+        width: '1.5rem',
+        height: '1.5rem',
+        marginTop: '0.5rem'
+    },
+});
+
+interface collapseButtonProps {
+    isCollapsed: boolean;
+    toggleSidePanel: (collapsedState: boolean) => void
 };
 
 const mapStateToProps = (state: RootState) => {
     return {
         isCollapsed: state.sidePanel.collapsedState
     }
-}
+};
 
 const mapDispatchToProps = (dispatch) => {
     return {
-        toggleSidePanel: (collapsedState) => {
+        toggleSidePanel: (collapsedState)=>{
             return dispatch(toggleSidePanel(collapsedState))
         }
     }
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(SidePanelToggle)
+export const SidePanelToggle = withStyles(styles)(
+    connect(mapStateToProps, mapDispatchToProps)(
+        (props: collapseButtonProps & WithStyles<CssRules>) =>{
+        return <Tooltip disableFocusListener title="Toggle Side Panel">
+            <IconButton className={props.classes.root} onClick={()=>{props.toggleSidePanel(props.isCollapsed)}}>
+            <div>
+            {props.isCollapsed?
+                <img className={props.classes.icon} style={{ transform: "rotate(180deg)"}} src='/collapseLHS-New.svg#svgView(preserveAspectRatio(none))'  alt='Expand Side Panel Icon'/>
+                :
+                <img className={props.classes.icon} src='/collapseLHS-New.svg#svgView(preserveAspectRatio(none))' alt='Collapse Side Panel Icon' />}
+            </div>
+            </IconButton>
+        </Tooltip>
+    }
+));
\ No newline at end of file
diff --git a/src/views-components/side-panel/side-panel.tsx b/src/views-components/side-panel/side-panel.tsx
index a039147d..d56fefb6 100644
--- a/src/views-components/side-panel/side-panel.tsx
+++ b/src/views-components/side-panel/side-panel.tsx
@@ -9,11 +9,10 @@ import { SidePanelTree, SidePanelTreeProps } from 'views-components/side-panel-t
 import { Dispatch } from 'redux';
 import { connect } from 'react-redux';
 import { navigateFromSidePanel } from 'store/side-panel/side-panel-action';
-import { Grid, Tooltip, IconButton  } from '@material-ui/core';
+import { Grid } from '@material-ui/core';
 import { SidePanelButton } from 'views-components/side-panel-button/side-panel-button';
 import { RootState } from 'store/store';
-import MenuIcon from "@material-ui/icons/Menu";
-import SidePanelToggle from 'views-components/side-panel-toggle/side-panel-toggle';
+import { SidePanelToggle } from 'views-components/side-panel-toggle/side-panel-toggle';
 
 const DRAWER_WIDTH = 240;
 
@@ -28,7 +27,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
         width: DRAWER_WIDTH,
     },
     topButtonContainer: {
-        display: 'flex', 
+        display: 'flex',
         justifyContent: 'space-between'
     }
 });
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index 87f004b3..8c33c0c8 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -198,6 +198,8 @@ const applyCollapsedState = (isCollapsed) => {
     if(rightPanel) {
         rightPanel.setAttribute('style', `width: ${isCollapsed ? rightPanelExpandedWidth : getSplitterInitialSize()}%`)
     }
+    
+    //disable manual resizing while panel is collapsed
     const splitter = document.getElementsByClassName('layout-splitter')[0]
     isCollapsed ? splitter?.classList.add('layout-splitter-disabled') : splitter?.classList.remove('layout-splitter-disabled')
     

-----------------------------------------------------------------------


hooks/post-receive
--