[arvados-workbench2] created: 2.4.0-189-g30d0e55a
git repository hosting
git at public.arvados.org
Wed Sep 14 22:06:20 UTC 2022
at 30d0e55a5b76a6c485737b1b669387bbe5d4dbea (commit)
commit 30d0e55a5b76a6c485737b1b669387bbe5d4dbea
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Wed Sep 14 19:02:48 2022 -0300
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 at curii.com>
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>
];
commit da5e144c103d5abb2bca727f40a14e5da052264e
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Wed Sep 14 18:57:24 2022 -0300
19465: Resets the selected panel on scrolling.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/components/multi-panel-view/multi-panel-view.tsx b/src/components/multi-panel-view/multi-panel-view.tsx
index 507b30ab..66ecab28 100644
--- a/src/components/multi-panel-view/multi-panel-view.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.tsx
@@ -123,12 +123,12 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
(panelStates[idx] &&
(panelStates[idx].visible || panelStates[idx].visible === undefined)));
const [panelVisibility, setPanelVisibility] = useState<boolean[]>(visibility);
- const [brightenedPanel, setBrightenedPanel] = useState<number>(-1);
+ const [highlightedPanel, setHighlightedPanel] = useState<number>(-1);
const [selectedPanel, setSelectedPanel] = useState<number>(-1);
const panelRef = useRef<any>(null);
let panels: JSX.Element[] = [];
- let toggles: JSX.Element[] = [];
+ let buttons: JSX.Element[] = [];
if (isArray(children)) {
for (let idx = 0; idx < children.length; idx++) {
@@ -168,16 +168,16 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
const panelIsMaximized = panelVisibility[idx] &&
panelVisibility.filter(e => e).length === 1;
- toggles = [
- ...toggles,
+ buttons = [
+ ...buttons,
<Tooltip title={btnTooltip} disableFocusListener>
<Button variant={btnVariant} size="small" color="primary"
className={classNames(classes.button)}
onMouseEnter={() => {
- setBrightenedPanel(idx);
+ setHighlightedPanel(idx);
}}
onMouseLeave={() => {
- setBrightenedPanel(-1);
+ setHighlightedPanel(-1);
}}
onClick={showFn(idx)}>
{panelName}
@@ -189,7 +189,7 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
const aPanel =
<MPVHideablePanel key={idx} visible={panelVisibility[idx]} name={panelName}
panelRef={(idx === selectedPanel) ? panelRef : undefined}
- maximized={panelIsMaximized} illuminated={idx === brightenedPanel}
+ maximized={panelIsMaximized} illuminated={idx === highlightedPanel}
doHidePanel={hideFn(idx)} doMaximizePanel={maximizeFn(idx)}>
{children[idx]}
</MPVHideablePanel>;
@@ -199,9 +199,10 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
return <Grid container {...props}>
<Grid container item direction="row">
- { toggles.map((tgl, idx) => <Grid item key={idx}>{tgl}</Grid>) }
+ { buttons.map((tgl, idx) => <Grid item key={idx}>{tgl}</Grid>) }
</Grid>
- <Grid container item {...props} xs className={classes.content}>
+ <Grid container item {...props} xs className={classes.content}
+ onScroll={() => setSelectedPanel(-1)}>
{ panelVisibility.includes(true)
? panels
: <Grid container item alignItems='center' justify='center'>
commit b469528b5aeb65fc8ce891db28ae20183a141aa2
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Wed Sep 14 18:47:35 2022 -0300
19465: Replaces hover-to-scroll with click-to-scroll behavior in MPV button bar
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/components/multi-panel-view/multi-panel-view.tsx b/src/components/multi-panel-view/multi-panel-view.tsx
index de824990..507b30ab 100644
--- a/src/components/multi-panel-view/multi-panel-view.tsx
+++ b/src/components/multi-panel-view/multi-panel-view.tsx
@@ -124,6 +124,7 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
(panelStates[idx].visible || panelStates[idx].visible === undefined)));
const [panelVisibility, setPanelVisibility] = useState<boolean[]>(visibility);
const [brightenedPanel, setBrightenedPanel] = useState<number>(-1);
+ const [selectedPanel, setSelectedPanel] = useState<number>(-1);
const panelRef = useRef<any>(null);
let panels: JSX.Element[] = [];
@@ -137,6 +138,7 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
true,
...panelVisibility.slice(idx+1)
]);
+ setSelectedPanel(idx);
};
const hideFn = (idx: number) => () => {
setPanelVisibility([
@@ -159,25 +161,22 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
const panelName = panelStates === undefined
? `Panel ${idx+1}`
: (panelStates[idx] && panelStates[idx].name) || `Panel ${idx+1}`;
- const toggleVariant = "outlined";
- const toggleTooltip = panelVisibility[idx]
+ const btnVariant = "outlined";
+ const btnTooltip = panelVisibility[idx]
? ''
:`Show ${panelName} panel`;
const panelIsMaximized = panelVisibility[idx] &&
panelVisibility.filter(e => e).length === 1;
- let brightenerTimer: NodeJS.Timer;
toggles = [
...toggles,
- <Tooltip title={toggleTooltip} disableFocusListener>
- <Button variant={toggleVariant} size="small" color="primary"
+ <Tooltip title={btnTooltip} disableFocusListener>
+ <Button variant={btnVariant} size="small" color="primary"
className={classNames(classes.button)}
onMouseEnter={() => {
- brightenerTimer = setTimeout(
- () => setBrightenedPanel(idx), 100);
+ setBrightenedPanel(idx);
}}
onMouseLeave={() => {
- brightenerTimer && clearTimeout(brightenerTimer);
setBrightenedPanel(-1);
}}
onClick={showFn(idx)}>
@@ -189,7 +188,7 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo
const aPanel =
<MPVHideablePanel key={idx} visible={panelVisibility[idx]} name={panelName}
- panelRef={(idx === brightenedPanel) ? panelRef : undefined}
+ panelRef={(idx === selectedPanel) ? panelRef : undefined}
maximized={panelIsMaximized} illuminated={idx === brightenedPanel}
doHidePanel={hideFn(idx)} doMaximizePanel={maximizeFn(idx)}>
{children[idx]}
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list