[arvados-workbench2] updated: 2.4.0-476-g234df49c
git repository hosting
git at public.arvados.org
Wed Dec 21 21:40:33 UTC 2022
Summary of changes:
public/collapseLHS-New.svg | 25 ++++++++
.../side-panel-toggle/side-panel-toggle.tsx | 66 +++++++++++-----------
2 files changed, 58 insertions(+), 33 deletions(-)
create mode 100644 public/collapseLHS-New.svg
via 234df49c86d0d1aece8aa9264578eac515b42eff (commit)
from 91d197b6b7066c3f37b3dbd54b2b3416e6f21bec (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 234df49c86d0d1aece8aa9264578eac515b42eff
Author: Peter Amstutz <peter.amstutz at curii.com>
Date: Wed Dec 21 16:39:59 2022 -0500
Use SVG icon for collapse panel toggle
refs #19434
Arvados-DCO-1.1-Signed-off-by: Peter Amstutz <peter.amstutz at curii.com>
diff --git a/public/collapseLHS-New.svg b/public/collapseLHS-New.svg
new file mode 100644
index 00000000..ce2eac8c
--- /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 50628d7f..0e4acc21 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,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)
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list