From 9c2c8aa06d5693a6e2b00e1d8ec0a8ca79098ce0 Mon Sep 17 00:00:00 2001 From: Lucas Di Pentima Date: Thu, 14 Oct 2021 18:04:09 -0300 Subject: [PATCH] 18128: Adds panel maximizing capabilities. Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima --- .../data-explorer/data-explorer.tsx | 20 +++++++++----- src/components/icon/icon.tsx | 2 ++ .../multi-panel-view/multi-panel-view.tsx | 26 +++++++++++++++---- .../process-information-card.tsx | 4 +-- .../subprocess-panel-root.tsx | 2 ++ 5 files changed, 40 insertions(+), 14 deletions(-) diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx index 940dbd0a..7fce77de 100644 --- a/src/components/data-explorer/data-explorer.tsx +++ b/src/components/data-explorer/data-explorer.tsx @@ -11,8 +11,9 @@ import { SearchInput } from 'components/search-input/search-input'; import { ArvadosTheme } from "common/custom-theme"; import { createTree } from 'models/tree'; import { DataTableFilters } from 'components/data-table-filters/data-table-filters-tree'; -import { CloseIcon, MoreOptionsIcon } from 'components/icon/icon'; +import { CloseIcon, MaximizeIcon, MoreOptionsIcon } from 'components/icon/icon'; import { PaperProps } from '@material-ui/core/Paper'; +import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view'; type CssRules = 'searchBox' | "toolbar" | "toolbarUnderTitle" | "footer" | "root" | 'moreOptionsButton' | 'title'; @@ -21,7 +22,8 @@ const styles: StyleRulesCallback = (theme: ArvadosTheme) => ({ paddingBottom: theme.spacing.unit * 2 }, toolbar: { - paddingTop: theme.spacing.unit * 2 + paddingTop: theme.spacing.unit, + paddingRight: theme.spacing.unit * 2, }, toolbarUnderTitle: { paddingTop: 0 @@ -62,7 +64,6 @@ interface DataExplorerDataProps { title?: React.ReactNode; paperKey?: string; currentItemUuid: string; - panelName?: string } interface DataExplorerActionProps { @@ -78,10 +79,10 @@ interface DataExplorerActionProps { onChangeRowsPerPage: (rowsPerPage: number) => void; onLoadMore: (page: number) => void; extractKey?: (item: T) => React.Key; - doHidePanel?: () => void; } -type DataExplorerProps = DataExplorerDataProps & DataExplorerActionProps & WithStyles; +type DataExplorerProps = DataExplorerDataProps & + DataExplorerActionProps & WithStyles & MPVPanelProps; export const DataExplorer = withStyles(styles)( class DataExplorerGeneric extends React.Component> { @@ -96,7 +97,8 @@ export const DataExplorer = withStyles(styles)( rowsPerPage, rowsPerPageOptions, onColumnToggle, searchLabel, searchValue, onSearch, items, itemsAvailable, onRowClick, onRowDoubleClick, classes, dataTableDefaultView, hideColumnSelector, actions, paperProps, hideSearchInput, - paperKey, fetchMode, currentItemUuid, title, doHidePanel, panelName + paperKey, fetchMode, currentItemUuid, title, + doHidePanel, doMaximizePanel, panelName, panelMaximized } = this.props; return {title &&
{title}
} @@ -113,9 +115,13 @@ export const DataExplorer = withStyles(styles)( columns={columns} onColumnToggle={onColumnToggle} />} + { doMaximizePanel && !!!panelMaximized && + + + } { doHidePanel && - + } } ; export const KeyIcon: IconType = (props) => ; export const LogIcon: IconType = (props) => ; export const MailIcon: IconType = (props) => ; +export const MaximizeIcon: IconType = (props) => ; export const MoreOptionsIcon: IconType = (props) => ; export const MoveToIcon: IconType = (props) => ; export const NewProjectIcon: IconType = (props) => ; diff --git a/src/components/multi-panel-view/multi-panel-view.tsx b/src/components/multi-panel-view/multi-panel-view.tsx index fd192d13..05c1de05 100644 --- a/src/components/multi-panel-view/multi-panel-view.tsx +++ b/src/components/multi-panel-view/multi-panel-view.tsx @@ -28,28 +28,32 @@ const styles: StyleRulesCallback = theme => ({ interface MPVHideablePanelDataProps { name: string; visible: boolean; + maximized: boolean; children: ReactNode; } interface MPVHideablePanelActionProps { doHidePanel: () => void; + doMaximizePanel: () => void; } type MPVHideablePanelProps = MPVHideablePanelDataProps & MPVHideablePanelActionProps; -const MPVHideablePanel = ({doHidePanel, name, visible, ...props}: MPVHideablePanelProps) => +const MPVHideablePanel = ({doHidePanel, doMaximizePanel, name, visible, maximized, ...props}: MPVHideablePanelProps) => visible ? <> - {React.cloneElement((props.children as ReactElement), { doHidePanel, panelName: name })} + {React.cloneElement((props.children as ReactElement), { doHidePanel, doMaximizePanel,panelName: name, panelMaximized: maximized })} : null; interface MPVPanelDataProps { panelName?: string; + panelMaximized?: boolean; } interface MPVPanelActionProps { doHidePanel?: () => void; + doMaximizePanel?: () => void; } // Props received by panel implementors @@ -58,9 +62,9 @@ export type MPVPanelProps = MPVPanelDataProps & MPVPanelActionProps; type MPVPanelContentProps = {children: ReactElement} & MPVPanelProps & GridProps; // Grid item compatible component for layout and MPV props passing -export const MPVPanelContent = ({doHidePanel, panelName, ...props}: MPVPanelContentProps) => +export const MPVPanelContent = ({doHidePanel, doMaximizePanel, panelName, panelMaximized, ...props}: MPVPanelContentProps) => - {React.cloneElement(props.children, { doHidePanel, panelName })} + {React.cloneElement(props.children, { doHidePanel, doMaximizePanel, panelName, panelMaximized })} ; export interface MPVPanelState { @@ -97,6 +101,14 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo ...panelVisibility.slice(idx+1) ]) }; + const maximizeFn = (idx: number) => () => { + // Maximize X == hide all but X + setPanelVisibility([ + ...panelVisibility.slice(0, idx).map(() => false), + true, + ...panelVisibility.slice(idx+1).map(() => false), + ]) + }; const toggleIcon = panelVisibility[idx] ? : @@ -109,6 +121,8 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo const toggleTooltip = panelVisibility[idx] ? `Hide ${panelName} panel` : `Show ${panelName} panel`; + const panelIsMaximized = panelVisibility[idx] && + panelVisibility.filter(e => e).length === 1; toggles = [ ...toggles, @@ -123,7 +137,9 @@ const MPVContainerComponent = ({children, panelStates, classes, ...props}: MPVCo ]; const aPanel = - + {children[idx]} ; panels = [...panels, aPanel]; diff --git a/src/views/process-panel/process-information-card.tsx b/src/views/process-panel/process-information-card.tsx index 8be7d1cc..4c938017 100644 --- a/src/views/process-panel/process-information-card.tsx +++ b/src/views/process-panel/process-information-card.tsx @@ -5,7 +5,7 @@ import React from 'react'; import { StyleRulesCallback, WithStyles, withStyles, Card, - CardHeader, IconButton, CardContent, Grid, Chip, Typography, Tooltip, Button + CardHeader, IconButton, CardContent, Grid, Chip, Typography, Tooltip } from '@material-ui/core'; import { ArvadosTheme } from 'common/custom-theme'; import { CloseIcon, MoreOptionsIcon, ProcessIcon } from 'components/icon/icon'; @@ -114,7 +114,7 @@ export const ProcessInformationCard = withStyles(styles, { withTheme: true })( { doHidePanel && - + } } diff --git a/src/views/subprocess-panel/subprocess-panel-root.tsx b/src/views/subprocess-panel/subprocess-panel-root.tsx index 49354671..41a8f66b 100644 --- a/src/views/subprocess-panel/subprocess-panel-root.tsx +++ b/src/views/subprocess-panel/subprocess-panel-root.tsx @@ -94,5 +94,7 @@ export const SubprocessPanelRoot = (props: SubprocessPanelProps & MPVPanelProps) messages={DEFAULT_VIEW_MESSAGES} /> } doHidePanel={props.doHidePanel} + doMaximizePanel={props.doMaximizePanel} + panelMaximized={props.panelMaximized} panelName={props.panelName} />; }; \ No newline at end of file -- 2.30.2