import Star from '@material-ui/icons/Star';
import StarBorder from '@material-ui/icons/StarBorder';
import Warning from '@material-ui/icons/Warning';
+import Visibility from '@material-ui/icons/Visibility';
+import VisibilityOff from '@material-ui/icons/VisibilityOff';
import VpnKey from '@material-ui/icons/VpnKey';
import LinkOutlined from '@material-ui/icons/LinkOutlined';
export const TrashIcon: IconType = (props) => <Delete {...props} />;
export const UserPanelIcon: IconType = (props) => <Person {...props} />;
export const UsedByIcon: IconType = (props) => <Folder {...props} />;
+export const VisibleIcon: IconType = (props) => <Visibility {...props} />;
+export const InvisibleIcon: IconType = (props) => <VisibilityOff {...props} />;
export const WorkflowIcon: IconType = (props) => <Code {...props} />;
export const WarningIcon: IconType = (props) => <Warning style={{ color: '#fbc02d', height: '30px', width: '30px' }} {...props} />;
export const Link: IconType = (props) => <LinkOutlined {...props} />;
// SPDX-License-Identifier: AGPL-3.0
import React, { ReactElement, ReactNode, useState } from 'react';
-import { Button, Grid } from "@material-ui/core";
+import { Button, Grid, StyleRulesCallback, Tooltip, withStyles, WithStyles } from "@material-ui/core";
import { GridProps } from '@material-ui/core/Grid';
import { isArray } from 'lodash';
import { DefaultView } from 'components/default-view/default-view';
-import { InfoIcon } from 'components/icon/icon';
+import { InfoIcon, InvisibleIcon, VisibleIcon } from 'components/icon/icon';
import { ReactNodeArray } from 'prop-types';
+import classNames from 'classnames';
+
+type CssRules = 'button' | 'buttonIcon';
+
+const styles: StyleRulesCallback<CssRules> = theme => ({
+ button: {
+ padding: '2px 5px',
+ marginRight: '2px',
+ },
+ buttonIcon: {
+ boxShadow: 'none',
+ padding: '2px 0px 2px 5px',
+ fontSize: '1rem'
+ },
+});
interface MPVHideablePanelDataProps {
name: string;
type MPVContainerProps = MPVContainerDataProps & GridProps;
// Grid container compatible component that also handles panel toggling.
-export const MPVContainer = ({children, panelNames, ...props}: MPVContainerProps) => {
+const MPVContainerComponent = ({children, panelNames, classes, ...props}: MPVContainerProps & WithStyles<CssRules>) => {
if (children === undefined || children === null || children === {}) {
children = [];
} else if (!isArray(children)) {
...panelVisibility.slice(idx+1)
])
};
- const toggleLabel = panelVisibility[idx] ? 'Hide' : 'Show'
+ const toggleIcon = panelVisibility[idx]
+ ? <VisibleIcon className={classNames(classes.buttonIcon)} />
+ : <InvisibleIcon className={classNames(classes.buttonIcon)}/>
const panelName = panelNames === undefined
? `Panel ${idx+1}`
: panelNames[idx] || `Panel ${idx+1}`;
-
+ const toggleVariant = panelVisibility[idx]
+ ? "raised"
+ : "flat";
+ const toggleTooltip = panelVisibility[idx]
+ ? `Hide ${panelName} panel`
+ : `Show ${panelName} panel`;
toggles = [
...toggles,
- <Button onClick={toggleFn(idx)}>{toggleLabel} {panelName}</Button>
+ <Tooltip title={toggleTooltip} disableFocusListener>
+ <Button variant={toggleVariant} size="small" color="primary"
+ className={classNames(classes.button)}
+ onClick={toggleFn(idx)}>
+ {panelName}
+ {toggleIcon}
+ </Button>
+ </Tooltip>
];
const aPanel =
</Grid> }
</Grid>;
};
+
+export const MPVContainer = withStyles(styles)(MPVContainerComponent);
\ No newline at end of file