From 8d491bda9abdc1a8d5f0ac8bcea3bf77eb221888 Mon Sep 17 00:00:00 2001 From: Lucas Di Pentima Date: Wed, 26 Oct 2022 17:05:49 -0300 Subject: [PATCH] 19300: Adds un-maximize button to every maximizable panel. Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima --- src/components/data-explorer/data-explorer.tsx | 14 ++++++++++++-- src/components/icon/icon.tsx | 6 ++++-- src/views/process-panel/process-io-card.tsx | 16 ++++++++++++++-- src/views/process-panel/process-log-card.tsx | 7 ++++++- .../subprocess-panel/subprocess-panel-root.tsx | 1 + 5 files changed, 37 insertions(+), 7 deletions(-) diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx index 40617f73..4e14b996 100644 --- a/src/components/data-explorer/data-explorer.tsx +++ b/src/components/data-explorer/data-explorer.tsx @@ -11,7 +11,13 @@ 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, IconType, MaximizeIcon, MoreOptionsIcon } from 'components/icon/icon'; +import { + CloseIcon, + IconType, + MaximizeIcon, + UnMaximizeIcon, + MoreOptionsIcon +} from 'components/icon/icon'; import { PaperProps } from '@material-ui/core/Paper'; import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view'; @@ -152,7 +158,7 @@ export const DataExplorer = withStyles(styles)( items, itemsAvailable, onRowClick, onRowDoubleClick, classes, defaultViewIcon, defaultViewMessages, hideColumnSelector, actions, paperProps, hideSearchInput, paperKey, fetchMode, currentItemUuid, title, - doHidePanel, doMaximizePanel, panelName, panelMaximized, elementPath + doHidePanel, doMaximizePanel, doUnMaximizePanel, panelName, panelMaximized, elementPath } = this.props; return @@ -176,6 +182,10 @@ export const DataExplorer = withStyles(styles)( columns={columns} onColumnToggle={onColumnToggle} />} + { doUnMaximizePanel && panelMaximized && + + + } { doMaximizePanel && !panelMaximized && diff --git a/src/components/icon/icon.tsx b/src/components/icon/icon.tsx index daa776a0..a6c118fc 100644 --- a/src/components/icon/icon.tsx +++ b/src/components/icon/icon.tsx @@ -66,7 +66,8 @@ import Computer from '@material-ui/icons/Computer'; import WrapText from '@material-ui/icons/WrapText'; import TextIncrease from '@material-ui/icons/ZoomIn'; import TextDecrease from '@material-ui/icons/ZoomOut'; -import CropFreeSharp from '@material-ui/icons/CropFreeSharp'; +import FullscreenSharp from '@material-ui/icons/FullscreenSharp'; +import FullscreenExitSharp from '@material-ui/icons/FullscreenExitSharp'; import ExitToApp from '@material-ui/icons/ExitToApp'; import CheckCircleOutline from '@material-ui/icons/CheckCircleOutline'; import RemoveCircleOutline from '@material-ui/icons/RemoveCircleOutline'; @@ -167,7 +168,8 @@ export const FileInputIcon: IconType = (props) => export const KeyIcon: IconType = (props) => ; export const LogIcon: IconType = (props) => ; export const MailIcon: IconType = (props) => ; -export const MaximizeIcon: IconType = (props) => ; +export const MaximizeIcon: IconType = (props) => ; +export const UnMaximizeIcon: IconType = (props) => ; export const MoreOptionsIcon: IconType = (props) => ; export const MoveToIcon: IconType = (props) => ; export const NewProjectIcon: IconType = (props) => ; diff --git a/src/views/process-panel/process-io-card.tsx b/src/views/process-panel/process-io-card.tsx index 5fd444b5..28f0065a 100644 --- a/src/views/process-panel/process-io-card.tsx +++ b/src/views/process-panel/process-io-card.tsx @@ -27,7 +27,15 @@ import { CircularProgress, } from '@material-ui/core'; import { ArvadosTheme } from 'common/custom-theme'; -import { CloseIcon, ImageIcon, InputIcon, ImageOffIcon, OutputIcon, MaximizeIcon } from 'components/icon/icon'; +import { + CloseIcon, + ImageIcon, + InputIcon, + ImageOffIcon, + OutputIcon, + MaximizeIcon, + UnMaximizeIcon +} from 'components/icon/icon'; import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view'; import { BooleanCommandInputParameter, @@ -227,7 +235,7 @@ const mapDispatchToProps = (dispatch: Dispatch): ProcessIOCardActionProps => ({ type ProcessIOCardProps = ProcessIOCardDataProps & ProcessIOCardActionProps & WithStyles & MPVPanelProps; export const ProcessIOCard = withStyles(styles)(connect(null, mapDispatchToProps)( - ({ classes, label, params, raw, mounts, outputUuid, doHidePanel, doMaximizePanel, panelMaximized, panelName, process, navigateTo }: ProcessIOCardProps) => { + ({ classes, label, params, raw, mounts, outputUuid, doHidePanel, doMaximizePanel, doUnMaximizePanel, panelMaximized, panelName, process, navigateTo }: ProcessIOCardProps) => { const [mainProcTabState, setMainProcTabState] = useState(0); const handleMainProcTabChange = (event: React.MouseEvent, value: number) => { setMainProcTabState(value); @@ -260,6 +268,10 @@ export const ProcessIOCard = withStyles(styles)(connect(null, mapDispatchToProps { mainProcess && {setShowImagePreview(!showImagePreview)}}>{showImagePreview ? : } } + { doUnMaximizePanel && panelMaximized && + + + } { doMaximizePanel && !panelMaximized && diff --git a/src/views/process-panel/process-log-card.tsx b/src/views/process-panel/process-log-card.tsx index 936b31a5..f3b3831e 100644 --- a/src/views/process-panel/process-log-card.tsx +++ b/src/views/process-panel/process-log-card.tsx @@ -22,6 +22,7 @@ import { CopyIcon, LogIcon, MaximizeIcon, + UnMaximizeIcon, TextDecreaseIcon, TextIncreaseIcon, WordWrapOffIcon, @@ -92,7 +93,7 @@ type ProcessLogsCardProps = ProcessLogsCardDataProps export const ProcessLogsCard = withStyles(styles)( ({ classes, process, filters, selectedFilter, lines, onLogFilterChange, navigateToLog, onCopy, - doHidePanel, doMaximizePanel, panelMaximized, panelName }: ProcessLogsCardProps) => { + doHidePanel, doMaximizePanel, doUnMaximizePanel, panelMaximized, panelName }: ProcessLogsCardProps) => { const [wordWrap, setWordWrap] = useState(true); const [fontSize, setFontSize] = useState(3); const fontBaseSize = 10; @@ -144,6 +145,10 @@ export const ProcessLogsCard = withStyles(styles)( + { doUnMaximizePanel && panelMaximized && + + + } { doMaximizePanel && !panelMaximized && diff --git a/src/views/subprocess-panel/subprocess-panel-root.tsx b/src/views/subprocess-panel/subprocess-panel-root.tsx index d4ccae9c..52fbc51f 100644 --- a/src/views/subprocess-panel/subprocess-panel-root.tsx +++ b/src/views/subprocess-panel/subprocess-panel-root.tsx @@ -91,6 +91,7 @@ export const SubprocessPanelRoot = (props: SubprocessPanelProps & MPVPanelProps) defaultViewMessages={DEFAULT_VIEW_MESSAGES} doHidePanel={props.doHidePanel} doMaximizePanel={props.doMaximizePanel} + doUnMaximizePanel={props.doUnMaximizePanel} panelMaximized={props.panelMaximized} panelName={props.panelName} />; }; -- 2.30.2