From e58425d4018d5d2b3050a9ef99275b64af616c26 Mon Sep 17 00:00:00 2001
From: Lucas Di Pentima <lucas.dipentima@curii.com>
Date: Thu, 14 Oct 2021 11:49:29 -0300
Subject: [PATCH] 18128: Adds better styling to the toggle bar.

Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>
---
 src/components/icon/icon.tsx                  |  4 ++
 .../multi-panel-view/multi-panel-view.tsx     | 43 ++++++++++++++++---
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx
index 05b94f7e..94374c62 100644
--- 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 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';
 
@@ -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 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} />;
diff --git a/src/components/multi-panel-view/multi-panel-view.tsx b/src/components/multi-panel-view/multi-panel-view.tsx
index 54bea41d..ff1680b0 100644
--- 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';
-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;
@@ -53,7 +68,7 @@ export interface MPVContainerDataProps {
 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)) {
@@ -74,15 +89,29 @@ export const MPVContainer = ({children, panelNames, ...props}: MPVContainerProps
                     ...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 =
@@ -102,3 +131,5 @@ export const MPVContainer = ({children, panelNames, ...props}: MPVContainerProps
             </Grid> }
     </Grid>;
 };
+
+export const MPVContainer = withStyles(styles)(MPVContainerComponent);
\ No newline at end of file
-- 
2.30.2