100ms seems "instant enough" for cases where the user is really attempting
to use the multi-panel-view task bar. For other cases where the user
casually hovers through any of the buttons because is trying to reach
some different part of the UI, not making the UI "move" is a lot less
confusing.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima@curii.com>
children = [children];
}
const visibility = (children as ReactNodeArray).map((_, idx) =>
children = [children];
}
const visibility = (children as ReactNodeArray).map((_, idx) =>
- !!!panelStates || // if panelStates wasn't passed, default to all visible panels
+ !panelStates || // if panelStates wasn't passed, default to all visible panels
(panelStates[idx] &&
(panelStates[idx].visible || panelStates[idx].visible === undefined)));
const [panelVisibility, setPanelVisibility] = useState<boolean[]>(visibility);
(panelStates[idx] &&
(panelStates[idx].visible || panelStates[idx].visible === undefined)));
const [panelVisibility, setPanelVisibility] = useState<boolean[]>(visibility);
const panelIsMaximized = panelVisibility[idx] &&
panelVisibility.filter(e => e).length === 1;
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"
className={classNames(classes.button)}
toggles = [
...toggles,
<Tooltip title={toggleTooltip} disableFocusListener>
<Button variant={toggleVariant} size="small" color="primary"
className={classNames(classes.button)}
- onMouseEnter={() => setBrightenedPanel(idx)}
- onMouseLeave={() => setBrightenedPanel(-1)}
+ onMouseEnter={() => {
+ brightenerTimer = setTimeout(
+ () => setBrightenedPanel(idx), 100);
+ }}
+ onMouseLeave={() => {
+ brightenerTimer && clearTimeout(brightenerTimer);
+ setBrightenedPanel(-1);
+ }}
onClick={showFn(idx)}>
{panelName}
{toggleIcon}
onClick={showFn(idx)}>
{panelName}
{toggleIcon}