Use SVG icon for collapse panel toggle

refs #19434

Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz@curii.com>

diff --git a/public/collapseLHS-New.svg b/public/collapseLHS-New.svg
new file mode 100644 (file)
index 0000000..ce2eac8
--- /dev/null
+++ b/public/collapseLHS-New.svg
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   version="1.1"
+   id="svg148"
+   width="300"
+   height="300"
+   viewBox="0 0 300 300"
+   xml:space="preserve"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg"><defs
+     id="defs152" /><g
+     id="g154"><g
+       id="g6337"><path
+         style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:22.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+         d="m 191.30938,11.567958 0.0193,275.898262"
+         id="path400" /><path
+         style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:22.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-dasharray:none;stroke-opacity:1"
+         d="m 202.57626,149.50744 -89.79939,0.0193"
+         id="path400-3" /><path
+         style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:59.0707;stroke-dasharray:none;stroke-opacity:1"
+         id="path4546"
+         d="M 81.113348,90.153499 -22.761723,90.479332 28.893633,0.35796487 Z"
+         transform="matrix(0,0.5047589,0.28743877,-0.01237225,93.434122,136.22641)" /></g></g></svg>

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 50628d7f2e2db50155eb873bc0b1e85c3c5cd632..0e4acc21304cf59662a3d255e0ad64465568b538 100644 (file)
--- 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,56 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React from 'react';
-import { Tooltip, IconButton  } from '@material-ui/core';
+import { Tooltip, IconButton } 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
+    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: {
-      width: '1.5rem',
-      height: '1.5rem',
-      marginTop: '0.5rem'
-    },
-  }
-
-  return <Tooltip disableFocusListener title="Toggle Side Panel">
-            <IconButton style={collapseButtonIconStyles.root} onClick={()=>{props.toggleSidePanel(props.isCollapsed)}}>
-              <div>
-              {props.isCollapsed? 
-                <img style={{...collapseButtonIconStyles.icon, marginLeft: '0.25rem'}} src='/arrow-to-right.png'/>
-                :
-                <img style={{...collapseButtonIconStyles.icon, marginRight: '0.5rem'}} src='/arrow-to-left.png'/>}
-              </div>
-            </IconButton>
-          </Tooltip>
+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>
 };
 
 const mapStateToProps = (state: RootState) => {
-  return {
-    isCollapsed: state.sidePanel.collapsedState
-  }
+    return {
+        isCollapsed: state.sidePanel.collapsedState
+    }
 }
 
-  const mapDispatchToProps = (dispatch) => {
+const mapDispatchToProps = (dispatch) => {
     return {
-        toggleSidePanel: (collapsedState)=>{
+        toggleSidePanel: (collapsedState) => {
             return dispatch(toggleSidePanel(collapsedState))
         }
     }
 };
 
-export default connect(mapStateToProps, mapDispatchToProps)(SidePanelToggle)
\ No newline at end of file
+export default connect(mapStateToProps, mapDispatchToProps)(SidePanelToggle)