Use SVG icon for collapse panel toggle
[arvados.git] / src / views-components / side-panel-toggle / side-panel-toggle.tsx
1 // Copyright (C) The Arvados Authors. All rights reserved.
2 //
3 // SPDX-License-Identifier: AGPL-3.0
4
5 import React from 'react';
6 import { Tooltip, IconButton } from '@material-ui/core';
7 import { connect } from 'react-redux';
8 import { toggleSidePanel } from "store/side-panel/side-panel-action";
9 import { RootState } from 'store/store';
10
11 type collapseButtonProps = {
12     isCollapsed: boolean;
13     toggleSidePanel: (collapsedState: boolean) => void
14 }
15
16 export const COLLAPSE_ICON_SIZE = 35
17
18 const SidePanelToggle = (props: collapseButtonProps) => {
19     const collapseButtonIconStyles = {
20         root: {
21             width: `${COLLAPSE_ICON_SIZE}px`,
22             height: `${COLLAPSE_ICON_SIZE}px`,
23             marginTop: '0.4rem'
24         },
25         icon: {
26             height: '1.5rem',
27             width: '3rem',
28             opacity: '0.6',
29         },
30     }
31
32     return <Tooltip disableFocusListener title="Toggle Side Panel">
33         <IconButton style={collapseButtonIconStyles.root} onClick={() => { props.toggleSidePanel(props.isCollapsed) }}>
34             <div>
35                 {props.isCollapsed ?
36                     <img style={{ ...collapseButtonIconStyles.icon, transform: "rotate(180deg)" }} src='/collapseLHS-New.svg#svgView(preserveAspectRatio(none))' />
37                     :
38                     <img style={{ ...collapseButtonIconStyles.icon, }} src='/collapseLHS-New.svg#svgView(preserveAspectRatio(none))' />}
39             </div>
40         </IconButton>
41     </Tooltip>
42 };
43
44 const mapStateToProps = (state: RootState) => {
45     return {
46         isCollapsed: state.sidePanel.collapsedState
47     }
48 }
49
50 const mapDispatchToProps = (dispatch) => {
51     return {
52         toggleSidePanel: (collapsedState) => {
53             return dispatch(toggleSidePanel(collapsedState))
54         }
55     }
56 };
57
58 export default connect(mapStateToProps, mapDispatchToProps)(SidePanelToggle)