18128: Adds better styling to the toggle bar.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 05b94f7eeea2315635d8db0cdd657413da26a32f..94374c624a8df985698cf6537e9ef09a38dd4c22 100644 (file)
--- a/src/components/icon/icon.tsx
+++ b/src/components/icon/icon.tsx
@@ -59,6 +59,8 @@ import SettingsEthernet from '@material-ui/icons/SettingsEthernet';
 import Star from '@material-ui/icons/Star';
 import StarBorder from '@material-ui/icons/StarBorder';
 import Warning from '@material-ui/icons/Warning';
 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';
 
 import VpnKey from '@material-ui/icons/VpnKey';
 import LinkOutlined from '@material-ui/icons/LinkOutlined';
 


@@ -145,6 +147,8 @@ export const SidePanelRightArrowIcon: IconType = (props) => <PlayArrow {...props
 export const TrashIcon: IconType = (props) => <Delete {...props} />;
 export const UserPanelIcon: IconType = (props) => <Person {...props} />;
 export const UsedByIcon: IconType = (props) => <Folder {...props} />;
 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} />;
 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} />;

diff --git a/src/components/multi-panel-view/multi-panel-view.tsx b/src/components/multi-panel-view/multi-panel-view.tsx
index 54bea41db68e74e6c6cf16145134dd23961dadba..ff1680b0f8ee493493e2e4411548a03ea88292f2 100644 (file)
--- a/src/components/multi-panel-view/multi-panel-view.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.tsx
@@ -3,12 +3,27 @@
 // SPDX-License-Identifier: AGPL-3.0
 
 import React, { ReactElement, ReactNode, useState } from 'react';
 // 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 { 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 { 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;
 
 interface MPVHideablePanelDataProps {
     name: string;


@@ -53,7 +68,7 @@ export interface MPVContainerDataProps {
 type MPVContainerProps = MPVContainerDataProps & GridProps;
 
 // Grid container compatible component that also handles panel toggling.
 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)) {
     if (children === undefined || children === null || children === {}) {
         children = [];
     } else if (!isArray(children)) {


@@ -74,15 +89,29 @@ export const MPVContainer = ({children, panelNames, ...props}: MPVContainerProps
                     ...panelVisibility.slice(idx+1)
                 ])
             };
                     ...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 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,
 
             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 =
             ];
 
             const aPanel =


@@ -102,3 +131,5 @@ export const MPVContainer = ({children, panelNames, ...props}: MPVContainerProps
             </Grid> }
     </Grid>;
 };
             </Grid> }
     </Grid>;
 };

+
+export const MPVContainer = withStyles(styles)(MPVContainerComponent);
\ No newline at end of file