Macro: #3041 – RNA Builder. Delete presets.

ketcher-autotests/tests/Macromolecule-editor/RNAEditor/delete-preset.spec.ts

@@ -35,7 +35,6 @@ test.describe('Macromolecules delete RNA presets', () => {
     await page.getByTestId('A_Copy_A_R_P').click({ button: 'right' });
 
     await page.getByTestId('deletepreset').click();
-
     await takePageScreenshot(page);
 
     await page.getByTitle('Delete').click();

packages/ketcher-polymer-editor-react/src/components/contextMenu/RNAContextMenu.tsx

@@ -16,7 +16,7 @@ export const RNAContextMenu = () => {
   ];
 
   const isItemDisabled = (name: string) => {
-    if (name === 'deletepreset' && activePreset?.default) {
+    if (['deletepreset', 'edit'].includes(name) && activePreset?.default) {
       return true;
     }
     return false;

packages/ketcher-polymer-editor-react/src/components/contextMenu/styles.ts

@@ -3,6 +3,13 @@ import { Menu } from 'react-contexify';
 
 export const StyledMenu = styled(Menu)`
   --contexify-activeItem-bgColor: rgba(243, 245, 247, 1);
-  --contexify-menu-minWidth:width: 160px;
+  --contexify-menu-minWidth: 140px;
   --contexify-activeItem-color: rgba(51, 51, 51, 1);
+  .contexify_itemContent {
+    font-family: ${({ theme }) => theme.ketcher.font.family.inter};
+    font-size: ${({ theme }) => theme.ketcher.font.size.regular};
+  }
+  .contexify_separator {
+    color: rgba(225, 229, 234, 1);
+  }
 `;

packages/ketcher-polymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaAccordion/RnaAccordion.tsx

@@ -142,17 +142,6 @@ export const RnaAccordion = ({
     dispatch(setActiveRnaBuilderItem(groupName));
   };
 
-  const handleContextMenu = (preset: IRnaPreset) => (event: MouseEvent) => {
-    dispatch(setActivePreset(preset));
-    show({
-      event,
-      props: {
-        duplicatePreset,
-        activateEditMode,
-      },
-    });
-  };
-
   useEffect(() => {
     setExpandedAccordion(activeRnaBuilderItem);
   }, [activeRnaBuilderItem]);
@@ -167,7 +156,7 @@ export const RnaAccordion = ({
     );
   }, [isEditMode]);
 
-  const selectPreset = (preset: IRnaPreset) => {
+  const selectPreset = (preset: IRnaPreset) => () => {
     dispatch(setActivePreset(preset));
     editor.events.selectPreset.dispatch(preset);
   };
@@ -178,6 +167,37 @@ export const RnaAccordion = ({
     dispatch(setIsEditMode(true));
   };
 
+  const getMenuPosition = (currentPresetCard: HTMLElement) => {
+    const isDivCard = currentPresetCard instanceof HTMLDivElement;
+    if (!isDivCard && currentPresetCard.parentElement) {
+      currentPresetCard = currentPresetCard.parentElement;
+    }
+    const boundingBox = currentPresetCard.getBoundingClientRect();
+    const parentBox = currentPresetCard.offsetParent?.getBoundingClientRect();
+    const contextMenuWidth = 140;
+    let x = boundingBox.right - contextMenuWidth;
+    const y = boundingBox.y + boundingBox.height / 2;
+    if (parentBox?.x && parentBox?.x > x) {
+      x = boundingBox.x;
+    }
+    return {
+      x,
+      y,
+    };
+  };
+
+  const handleContextMenu = (preset: IRnaPreset) => (event: MouseEvent) => {
+    dispatch(setActivePreset(preset));
+    show({
+      event,
+      props: {
+        duplicatePreset,
+        activateEditMode,
+      },
+      position: getMenuPosition(event.currentTarget as HTMLElement),
+    });
+  };
+
   return (
     <RnaAccordionContainer data-testid="rna-accordion">
       {groupsData.map((groupData) => {
@@ -207,7 +227,7 @@ export const RnaAccordion = ({
                       <RnaPresetItem
                         key={`${preset.name}${index}`}
                         preset={preset}
-                        onClick={() => selectPreset(preset)}
+                        onClick={selectPreset(preset)}
                         onContextMenu={handleContextMenu(preset)}
                         isSelected={activePreset?.presetInList === preset}
                       />

packages/ketcher-polymer-editor-react/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/RnaEditorExpanded.tsx

@@ -113,7 +113,11 @@ export const RnaEditorExpanded = ({
     );
   } else {
     mainButton = (
-      <StyledButton data-testid="edit-btn" onClick={onEdit}>
+      <StyledButton
+        data-testid="edit-btn"
+        onClick={onEdit}
+        disabled={activePreset.default}
+      >
         Edit
       </StyledButton>
     );

packages/ketcher-polymer-editor-react/src/components/shared/actionButton/ActionButton.tsx

@@ -33,6 +33,8 @@ const PrimaryButton = styled(MuiButton)(
     border: `1px solid ${theme.ketcher.color.button.primary.active}`,
     color: 'rgb(245, 245, 245)',
     fontWeight: theme.ketcher.font.weight.regular,
+    width: '62px',
+    height: '24px',
 
     '&:hover': {
       backgroundColor: theme.ketcher.color.button.primary.hover,
@@ -52,6 +54,8 @@ const SecondaryButton = styled(MuiButton)(
     border: `1px solid ${theme.ketcher.color.button.secondary.active}`,
     color: theme.ketcher.color.button.secondary.active,
     fontWeight: theme.ketcher.font.weight.regular,
+    width: '72px',
+    height: '24px',
 
     '&:hover': {
       border: `1px solid ${theme.ketcher.color.button.secondary.hover}`,

packages/ketcher-polymer-editor-react/src/components/shared/modal/Modal.tsx

@@ -22,6 +22,8 @@ interface ModalProps {
 const StyledDialog = styled(Dialog)`
   .MuiPaper-root {
     width: 304px;
+    background: #ffffff !important;
+    border-radius: 4px !important;
   }
 `;
 
@@ -55,6 +57,7 @@ const Content = styled(DialogContent)`
   font-size: ${({ theme }) => theme.ketcher.font.size.medium};
   letter-spacing: 1.25px;
   line-height: 17px;
+  color: #000000;
   ${({ theme }) => scrollbarThin(theme)};
 `;
 
@@ -64,8 +67,7 @@ const Footer = styled(DialogActions)`
   padding: 0;
   .MuiButtonBase-root {
     border-radius: 4px;
-    width: 72px;
-    font-size: ${({ theme }) => theme.ketcher.font.size.medium};
+    font-size: ${({ theme }) => theme.ketcher.font.size.regular};
   }
 `;
 

packages/ketcher-polymer-editor-react/src/theming/defaultTheme/defaultTheme.ts

@@ -72,7 +72,7 @@ export const defaultTheme: EditorTheme = {
         disabled: 'rgba(0, 131, 143, 0.4)',
       },
       secondary: {
-        active: '#717171',
+        active: '#585858',
         hover: '#333333',
         clicked: '#AEAEAE',
         disabled: 'rgba(113, 113, 113, 0.4)',