#3580 - Macro: Add possibility to expand "Select Attachment Points" M…

…odal add new icons, add expand functionality to modal window, change layout of Monomer Connections Modal to match new functionality
epam · Nov 23, 2023 · 06fc58e · 06fc58e
1 parent 1520449
commit 06fc58e
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 45 deletions.
diff --git a/...etcher-polymer-editor-react/src/components/modal/monomerConnection/MonomerConnections.tsx b/...etcher-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 (
     <StyledModal
-      title=""
+      title="Select Attachment Points"
       isOpen={isModalOpen}
-      showCloseButton={false}
       onClose={cancelBondCreationAndClose}
+      showExpandButton
     >
       <Modal.Content>
         <ModalContent>
-          <MonomerNamesRow>
-            <MonomerName>{firstMonomer.monomerItem.props.Name}</MonomerName>
-            <MonomerName>{secondMonomer.monomerItem.props.Name}</MonomerName>
-          </MonomerNamesRow>
           <AttachmentPointsRow>
+            <MonomerName>{firstMonomer.monomerItem.props.Name}</MonomerName>
             <AttachmentPointSelectionPanel
               monomer={firstMonomer}
               selectedAttachmentPoint={firstSelectedAttachmentPoint}
               onSelectAttachmentPoint={setFirstSelectedAttachmentPoint}
             />
-
+            <span />
             <ConnectionSymbol />
+            <span />
+            <MonomerName>{secondMonomer.monomerItem.props.Name}</MonomerName>
 
             <AttachmentPointSelectionPanel
               monomer={secondMonomer}
@@ -160,7 +164,7 @@ function AttachmentPointSelectionPanel({
   );
 
   return (
-    <AttachmentPointSelectionContainer>
+    <>
       <StyledStructRender
         struct={monomer.monomerItem.struct}
         options={{
@@ -198,7 +202,7 @@ function AttachmentPointSelectionPanel({
           </AttachmentPoint>
         ))}
       </AttachmentPointList>
-    </AttachmentPointSelectionContainer>
+    </>
   );
 }
 

diff --git a/...s/ketcher-polymer-editor-react/src/components/modal/monomerConnection/styledComponents.ts b/...s/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
@@ -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
@@ -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,20 +83,28 @@ export const Modal = ({
   title,
   isOpen,
   showCloseButton = true,
+  showExpandButton = false,
   onClose,
   className,
 }: ModalProps) => {
   const theme = useTheme();
+  const [expanded, setExpanded] = React.useState(false);
 
   const paperProps = useMemo(
     () => ({
       style: {
         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 ? (
         <Header>
           <Title>{title}</Title>
-          {showCloseButton && (
-            <IconButton title={'Close window'} onClick={onClose}>
-              <StyledIcon name={'close'} />
-            </IconButton>
-          )}
+          <span>
+            {showExpandButton && (
+              <IconButton
+                title={'expand window'}
+                onClick={() => {
+                  setExpanded(!expanded);
+                }}
+              >
+                <StyledIcon name={expanded ? 'minimize-expansion' : 'expand'} />
+              </IconButton>
+            )}
+            {showCloseButton && (
+              <IconButton title={'Close window'} onClick={onClose}>
+                <StyledIcon name={'close'} />
+              </IconButton>
+            )}
+          </span>
         </Header>
       ) : (
         ''

diff --git 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;