From 30d0e55a5b76a6c485737b1b669387bbe5d4dbea Mon Sep 17 00:00:00 2001
From: Lucas Di Pentima <lucas.dipentima@curii.com>
Date: Wed, 14 Sep 2022 19:02:48 -0300
Subject: [PATCH] 19465: Improves panel buttons styling.
* Removes the "eye" icon to save horizontal space.
* Fills the button with color to indicate a visible panel.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>
---
src/components/multi-panel-view/multi-panel-view.tsx | 12 +++++-------
1 file changed, 5 insertions(+), 7 deletions(-)
diff --git a/src/components/multi-panel-view/multi-panel-view.tsx b/src/components/multi-panel-view/multi-panel-view.tsx
index 66ecab28..9206811f 100644
--- a/src/components/multi-panel-view/multi-panel-view.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.tsx
@@ -155,16 +155,15 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
...panelVisibility.slice(idx+1).map(() => false),
])
};
- const toggleIcon = panelVisibility[idx]
- ? <VisibleIcon className={classNames(classes.buttonIcon)} />
- : <InvisibleIcon className={classNames(classes.buttonIcon)}/>
const panelName = panelStates === undefined
? `Panel ${idx+1}`
: (panelStates[idx] && panelStates[idx].name) || `Panel ${idx+1}`;
- const btnVariant = "outlined";
+ const btnVariant = panelVisibility[idx]
+ ? "contained"
+ : "outlined";
const btnTooltip = panelVisibility[idx]
- ? ''
- :`Show ${panelName} panel`;
+ ? ``
+ :`Open ${panelName} panel`;
const panelIsMaximized = panelVisibility[idx] &&
panelVisibility.filter(e => e).length === 1;
@@ -181,7 +180,6 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
}}
onClick={showFn(idx)}>
{panelName}
- {toggleIcon}
</Button>
</Tooltip>
];
--
2.30.2