#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 30, 2023 · d7bf402 · d7bf402
1 parent caaf9cf
commit d7bf402
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 44 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,9 +12,7 @@ import {
   AttachmentPointName,
   MonomerName,
   ConnectionSymbol,
-  AttachmentPointSelectionContainer,
   AttachmentPointsRow,
-  MonomerNamesRow,
   ModalContent,
 } from './styledComponents';
 import { MonomerConnectionProps } from '../modalContainer/types';
@@ -26,8 +24,6 @@ interface IStyledButtonProps {
 
 const StyledModal = styled(Modal)({
   '& .MuiPaper-root': {
-    width: 'auto',
-    height: 'fit-content',
     background: '#fff !important',
   },
 
@@ -37,11 +33,17 @@ 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)(() => ({
@@ -55,6 +57,7 @@ export const ActionButtonRight = styled(ActionButton)<IStyledButtonProps>(
     color: props.disabled ? 'rgba(51, 51, 51, 0.6)' : '',
     background: props.disabled ? 'rgba(225, 229, 234, 1) !important' : '',
     opacity: '1 !important',
+    minHeight: '0',
   }),
 );
 
@@ -107,25 +110,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}
@@ -182,7 +184,7 @@ function AttachmentPointSelectionPanel({
   };
 
   return (
-    <AttachmentPointSelectionContainer>
+    <>
       <StyledStructRender
         struct={monomer.monomerItem.struct}
         options={{
@@ -226,7 +228,7 @@ function AttachmentPointSelectionPanel({
           );
         })}
       </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
@@ -6,6 +6,7 @@ export const AttachmentPointList = styled.div({
   justifyContent: 'start',
   alignSelf: 'flex-start',
   width: '100%',
+  gap: '8px',
 });
 
 interface IStyledAttachmentPointProps {
@@ -60,31 +61,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: '0 12px',
-}));
-
-export const MonomerNamesRow = styled.div(() => ({
-  display: 'flex',
-  gap: '34px',
-  justifyContent: 'space-between',
-  alignItems: 'flex-end',
-  margin: '12px 12px 0px',
-  paddingBottom: '6px',
+  padding: '12px',
+  height: '100%',
+  gap: '8px',
 }));
 
-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/assets/icons/files/expand.svg b/packages/ketcher-react/src/assets/icons/files/expand.svg
diff --git a/packages/ketcher-react/src/assets/icons/files/minimize-expantion.svg b/packages/ketcher-react/src/assets/icons/files/minimize-expantion.svg
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;