From 06fc58ebda9076e74c4a2aeb1a514b84990e41ca Mon Sep 17 00:00:00 2001 From: "Mariia_Khrustaleva(EPAM)" Date: Thu, 23 Nov 2023 19:38:17 +0400 Subject: [PATCH] #3580 - Macro: Add possibility to expand "Select Attachment Points" Modal add new icons, add expand functionality to modal window, change layout of Monomer Connections Modal to match new functionality --- .../monomerConnection/MonomerConnections.tsx | 34 +++++++++-------- .../monomerConnection/styledComponents.ts | 34 ++++++----------- .../src/components/shared/icon/icon.tsx | 4 ++ .../src/components/shared/modal/Modal.tsx | 38 +++++++++++++++---- .../components/Icon/utils/iconNameToIcon.ts | 4 ++ 5 files changed, 69 insertions(+), 45 deletions(-) diff --git a/packages/ketcher-polymer-editor-react/src/components/modal/monomerConnection/MonomerConnections.tsx b/packages/ketcher-polymer-editor-react/src/components/modal/monomerConnection/MonomerConnections.tsx index ca9d622d3e..b28ee1bd81 100644 --- a/packages/ketcher-polymer-editor-react/src/components/modal/monomerConnection/MonomerConnections.tsx +++ b/packages/ketcher-polymer-editor-react/src/components/modal/monomerConnection/MonomerConnections.tsx @@ -12,17 +12,13 @@ import { AttachmentPointName, MonomerName, ConnectionSymbol, - AttachmentPointSelectionContainer, AttachmentPointsRow, - MonomerNamesRow, ModalContent, } from './styledComponents'; import { MonomerConnectionProps } from '../modalContainer/types'; const StyledModal = styled(Modal)({ '& .MuiPaper-root': { - width: 'auto', - height: 'fit-content', background: '#fff !important', }, @@ -32,12 +28,19 @@ const StyledModal = styled(Modal)({ }); export const StyledStructRender = styled(StructRender)(({ theme }) => ({ - height: '150px', - width: '150px', + display: 'flex', border: `1.5px solid ${theme.ketcher.outline.color}`, borderRadius: '6px', padding: 5, + maxHeight: '100%', + minHeight: '150px', + alignSelf: 'stretch', + '& svg': { + maxWidth: 'fit-content', + margin: 'auto', + }, })); + export const ActionButtonLeft = styled(ActionButton)(() => ({ marginRight: 'auto', width: '97px', @@ -46,10 +49,12 @@ export const ActionButtonLeft = styled(ActionButton)(() => ({ export const ActionButtonRight = styled(ActionButton)(() => ({ width: '97px', })); + export const ActionButtonAttachmentPoint = styled(ActionButton)( ({ theme }) => ({ borderRadius: 5, width: '45px', + minHeight: '0', padding: '4px', border: `1px solid ${theme.ketcher.color.border.secondary}`, }), @@ -94,25 +99,24 @@ const MonomerConnection = ({ return ( - - {firstMonomer.monomerItem.props.Name} - {secondMonomer.monomerItem.props.Name} - + {firstMonomer.monomerItem.props.Name} - + + + {secondMonomer.monomerItem.props.Name} + <> ))} - + ); } diff --git a/packages/ketcher-polymer-editor-react/src/components/modal/monomerConnection/styledComponents.ts b/packages/ketcher-polymer-editor-react/src/components/modal/monomerConnection/styledComponents.ts index 8bf8e991c7..d28fb6f9ab 100644 --- a/packages/ketcher-polymer-editor-react/src/components/modal/monomerConnection/styledComponents.ts +++ b/packages/ketcher-polymer-editor-react/src/components/modal/monomerConnection/styledComponents.ts @@ -3,9 +3,10 @@ import styled from '@emotion/styled'; export const AttachmentPointList = styled.div({ display: 'flex', flexWrap: 'wrap', - justifyContent: 'space-between', + justifyContent: 'center', alignSelf: 'flex-start', width: '100%', + gap: '8px', }); export const AttachmentPoint = styled.div({ @@ -33,7 +34,6 @@ export const MonomerName = styled.h3(({ theme }) => ({ display: 'block', fontSize: theme.ketcher.font.size.regular, fontWeight: theme.ketcher.font.weight.regular, - maxWidth: '200px', flexBasis: '200px', })); @@ -44,31 +44,19 @@ export const ConnectionSymbol = styled.div(({ theme }) => ({ color: theme.ketcher.color.button.secondary.hover, backgroundColor: theme.ketcher.color.button.secondary.hover, borderRadius: 20, - margin: '76px 12px 0', -})); - -export const AttachmentPointSelectionContainer = styled.div(() => ({ - display: 'flex', - flexDirection: 'column', - gap: '8px', - justifyContent: 'space-around', - maxWidth: '150px', + margin: 'auto', })); export const AttachmentPointsRow = styled.div(() => ({ - display: 'flex', - justifyContent: 'space-around', + display: 'grid', + gridAutoFlow: 'column', + gridTemplateRows: '1em auto auto', + gridTemplateColumns: '1fr 10px 1fr', + justifyContent: 'center', alignItems: 'flex-start', padding: '12px', + height: '100%', + gap: '8px', })); -export const MonomerNamesRow = styled.div(() => ({ - display: 'flex', - gap: '34px', - justifyContent: 'space-between', - alignItems: 'flex-end', - marginTop: '12px', - paddingBottom: '6px', -})); - -export const ModalContent = styled.div(() => ({})); +export const ModalContent = styled.div(() => ({ height: '100%' })); diff --git a/packages/ketcher-polymer-editor-react/src/components/shared/icon/icon.tsx b/packages/ketcher-polymer-editor-react/src/components/shared/icon/icon.tsx index 432128598b..734ee88f52 100644 --- a/packages/ketcher-polymer-editor-react/src/components/shared/icon/icon.tsx +++ b/packages/ketcher-polymer-editor-react/src/components/shared/icon/icon.tsx @@ -52,6 +52,8 @@ import UndoIcon from 'assets/icons/files/undo.svg'; import SaveIcon from 'assets/icons/files/save.svg'; import ErrorIcon from 'assets/icons/files/error.svg'; import FullscreenIcon from 'assets/icons/files/fullscreen.svg'; +import ExpandIcon from 'assets/icons/files/expand.svg'; +import MinimizeExpansionIcon from 'assets/icons/files/minimize-expansion.svg'; const iconMap = { 'arrow-down': ArrowDownIcon, @@ -90,6 +92,8 @@ const iconMap = { undo: UndoIcon, save: SaveIcon, error: ErrorIcon, + expand: ExpandIcon, + 'minimize-expansion': MinimizeExpansionIcon, }; type IconNameType = keyof typeof iconMap; diff --git a/packages/ketcher-polymer-editor-react/src/components/shared/modal/Modal.tsx b/packages/ketcher-polymer-editor-react/src/components/shared/modal/Modal.tsx index d259345050..8863c5284a 100644 --- a/packages/ketcher-polymer-editor-react/src/components/shared/modal/Modal.tsx +++ b/packages/ketcher-polymer-editor-react/src/components/shared/modal/Modal.tsx @@ -16,12 +16,15 @@ interface ModalProps { title: string; isOpen: boolean; showCloseButton?: boolean; + showExpandButton?: boolean; onClose: VoidFunction; className?: string; } const StyledDialog = styled(Dialog)` .MuiPaper-root { min-width: 304px; + max-width: calc(min(1280px, 100%)); + max-height: calc(min(980px, 100%)); } `; @@ -80,10 +83,12 @@ export const Modal = ({ title, isOpen, showCloseButton = true, + showExpandButton = false, onClose, className, }: ModalProps) => { const theme = useTheme(); + const [expanded, setExpanded] = React.useState(false); const paperProps = useMemo( () => ({ @@ -91,9 +96,15 @@ export const Modal = ({ background: theme.ketcher.color.background.primary, borderRadius: '8px', color: theme.ketcher.color.text.primary, + width: expanded ? '100%' : '350px', + height: expanded ? '100%' : undefined, }, }), - [theme.ketcher.color.text.primary, theme.ketcher.color.background.canvas], + [ + theme.ketcher.color.text.primary, + theme.ketcher.color.background.canvas, + expanded, + ], ); const backdropProps = useMemo( @@ -127,15 +138,28 @@ export const Modal = ({ onClose={onClose} disableEscapeKeyDown={!showCloseButton} className={className} + sx={{ padding: '24px' }} > - {title || showCloseButton ? ( + {title || showCloseButton || showExpandButton ? (
{title} - {showCloseButton && ( - - - - )} + + {showExpandButton && ( + { + setExpanded(!expanded); + }} + > + + + )} + {showCloseButton && ( + + + + )} +
) : ( '' diff --git a/packages/ketcher-react/src/components/Icon/utils/iconNameToIcon.ts b/packages/ketcher-react/src/components/Icon/utils/iconNameToIcon.ts index 6ca5b55f56..77c6020a40 100644 --- a/packages/ketcher-react/src/components/Icon/utils/iconNameToIcon.ts +++ b/packages/ketcher-react/src/components/Icon/utils/iconNameToIcon.ts @@ -216,6 +216,8 @@ import Phosphate from '../../../assets/icons/files/phosphate.svg'; import Preset from '../../../assets/icons/files/preset.svg'; import EditFilled from '../../../assets/icons/files/edit-filled.svg'; import VerticalDots from '../../../assets/icons/files/vertical-dots.svg'; +import ExpandIcon from '../../../assets/icons/files/expand.svg'; +import MinimizeExpansionIcon from '../../../assets/icons/files/minimize-expantion.svg'; export const iconNameToIcon = { α, @@ -432,4 +434,6 @@ export const iconNameToIcon = { preset: Preset, 'edit-filled': EditFilled, 'vertical-dots': VerticalDots, + expand: ExpandIcon, + 'minimize-expansion': MinimizeExpansionIcon, } as const;