X-Git-Url: https://git.arvados.org/arvados-workbench2.git/blobdiff_plain/ab3e261d28ff83fa214002a372a055817a931cd1..c1787278642d2ef02234ea27f94aaae9cdd52d40:/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 0d275840..206cb632 100644 --- a/src/components/side-panel/side-panel.tsx +++ b/src/components/side-panel/side-panel.tsx @@ -5,11 +5,12 @@ import * as React from 'react'; import { ReactElement } from 'react'; import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core/styles'; -import { ArvadosTheme } from '../../common/custom-theme'; +import { ArvadosTheme } from '~/common/custom-theme'; import { List, ListItem, ListItemIcon, Collapse } from "@material-ui/core"; import { SidePanelRightArrowIcon, IconType } from '../icon/icon'; import * as classnames from "classnames"; import { ListItemTextIcon } from '../list-item-text-icon/list-item-text-icon'; +import { Dispatch } from "redux"; type CssRules = 'active' | 'row' | 'root' | 'list' | 'iconClose' | 'iconOpen' | 'toggableIconContainer' | 'toggableIcon'; @@ -33,7 +34,7 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ toggableIconContainer: { color: theme.palette.grey["700"], height: '14px', - position: 'absolute' + width: '14px' }, toggableIcon: { fontSize: '14px' @@ -58,7 +59,7 @@ export interface SidePanelItem { open?: boolean; margin?: boolean; openAble?: boolean; - path?: string; + activeAction?: (dispatch: Dispatch, uuid?: string) => void; } interface SidePanelDataProps { @@ -108,11 +109,11 @@ export const SidePanel = withStyles(styles)( } getToggableIconClassNames = (isOpen?: boolean, isActive ?: boolean) => { - const { classes } = this.props; - return classnames(classes.toggableIcon, { - [classes.iconOpen]: isOpen, - [classes.iconClose]: !isOpen, - [classes.active]: isActive + const { iconOpen, iconClose, active, toggableIcon } = this.props.classes; + return classnames(toggableIcon, { + [iconOpen]: isOpen, + [iconClose]: !isOpen, + [active]: isActive }); }