#5156 - add new option in settings acs style (#5492)

* #5156 - added new options and field * #5156 -- removed the popup & added acs style button that updates the fromState * #5156 -- options schema clean up * #5156 -- autotests update --------- Co-authored-by: Mikhail Vialov <mikhail_vialov@epam.com>
epam · Sep 17, 2024 · e892013 · e892013
1 parent 379a2f7
commit e892013
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 18 deletions.
diff --git a/...splay-styles---IUPAC-style-selected-by-default-in-settings-1-chromium-linux.png b/...splay-styles---IUPAC-style-selected-by-default-in-settings-1-chromium-linux.png
diff --git a/...-and-Hetero”-is-set-for-default-for-“Show-hydrogen-labels”-1-chromium-linux.png b/...-and-Hetero”-is-set-for-default-for-“Show-hydrogen-labels”-1-chromium-linux.png
diff --git a/...ec.ts-snapshots/Open-Ketcher-Verify-Ketcher-settings-panel-1-chromium-linux.png b/...ec.ts-snapshots/Open-Ketcher-Verify-Ketcher-settings-panel-1-chromium-linux.png
diff --git a/...cation.spec.ts-snapshots/Open-Ketcher-Verify-settings-menu-1-chromium-linux.png b/...cation.spec.ts-snapshots/Open-Ketcher-Verify-settings-menu-1-chromium-linux.png
diff --git a/.../Undo-Redo-Actions-Undo-deletes-previously-placed-template-1-chromium-linux.png b/.../Undo-Redo-Actions-Undo-deletes-previously-placed-template-1-chromium-linux.png
diff --git a/...hots/Toolbar-palette-and-settings-Settings-UI-verification-1-chromium-linux.png b/...hots/Toolbar-palette-and-settings-Settings-UI-verification-1-chromium-linux.png
diff --git a/packages/ketcher-react/src/constants.ts b/packages/ketcher-react/src/constants.ts
@@ -34,3 +34,23 @@ export const KETCHER_MACROMOLECULES_ROOT_NODE_SELECTOR = `.${EditorClassName}`;
 export const STRUCT_SERVICE_NO_RENDER_INITIALIZED_EVENT =
   'struct-service-no-render-initialized';
 export const STRUCT_SERVICE_INITIALIZED_EVENT = 'struct-service-initialized';
+export const ACS_STYLE_DEFAULT_SETTINGS = {
+  atomColoring: false,
+  font: '30px Arial',
+  fontsz: 10,
+  fontszUnit: 'pt',
+  fontszsub: 10,
+  fontszsubUnit: 'pt',
+  reactionComponentMarginSize: 1.6,
+  reactionComponentMarginSizeUnit: 'pt',
+  imageResolution: '600',
+  bondLength: 14.4,
+  bondLengthUnit: 'pt',
+  bondSpacing: 18,
+  bondThickness: 0.6,
+  bondThicknessUnit: 'pt',
+  stereoBondWidth: 2,
+  stereoBondWidthUnit: 'pt',
+  hashSpacing: 2.5,
+  hashSpacingUnit: 'pt',
+};
diff --git a/...ges/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.module.less b/...ges/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.module.less
@@ -15,6 +15,7 @@
  ***************************************************************************/
 
 @import '../../../../../../../style/variables.less';
+@import '../../../../../../../style/mixins.less';
 
 .headerContent {
   display: flex;
@@ -30,15 +31,15 @@
     color: @color-icon-active;
     padding: 0;
     font-size: 0;
-  
+
     input[type='file'] {
       display: none;
     }
-  
+
     &:hover {
       color: @color-icon-hover;
     }
-    
+
     &:disabled {
       color: @color-icon-disabled;
     }
@@ -54,7 +55,7 @@
   }
 
   ul {
-    > li {
+    >li {
       padding: 10px 16px;
     }
   }
@@ -73,8 +74,9 @@
       top: 0;
     }
 
-    span > div,
-    select, input {
+    span>div,
+    select,
+    input {
       width: 120px;
       margin-right: auto;
     }
@@ -92,23 +94,29 @@
   overflow: hidden;
 
   fieldset[disabled] {
-    label > span {
+    label>span {
       opacity: 0.3;
     }
 
-    label > div {
+    label>div {
       opacity: 0.6;
     }
   }
 
-   > header{
-      flex-shrink: 0;
-      box-shadow: 0 2px 4px 0 @color-accordion-shadow;
-      z-index: 10; 
-   }
+  >header {
+    flex-shrink: 0;
+    box-shadow: 0 2px 4px 0 @color-accordion-shadow;
+    z-index: 10;
+  }
+
+  >footer {
+    box-shadow: 0 -2px 4px 0 @color-accordion-shadow;
+    z-index: 10;
+  }
+}
+
+.acsStyleButton {
+  margin-right: auto;
 
-   > footer {
-      box-shadow: 0 -2px 4px 0 @color-accordion-shadow;
-      z-index: 10;
-   }
+  .button-primary();
 }
diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.tsx
@@ -41,6 +41,7 @@ import settingsSchema, {
 import fieldGroups from './fieldGroups';
 import { isEqual } from 'lodash';
 import { Icon } from 'components';
+import { ACS_STYLE_DEFAULT_SETTINGS } from 'src/constants';
 
 interface SettingsProps extends BaseProps {
   initState: any;
@@ -59,6 +60,7 @@ interface SettingsProps extends BaseProps {
 interface SettingsCallProps extends BaseCallProps {
   onOpenFile: (any) => void;
   onReset: () => void;
+  onACSStyle: (result) => void;
 }
 
 const defaultSettings = getDefaultOptions();
@@ -317,6 +319,23 @@ const SettingsDialog = (props: Props) => {
     ),
   };
 
+  const onACSStyle = () => {
+    prop.onACSStyle({
+      ...formState.result,
+      ...ACS_STYLE_DEFAULT_SETTINGS,
+    });
+  };
+
+  const ACSStyleButton = (
+    <button
+      className={classes.acsStyleButton}
+      key="acsstylebutton"
+      onClick={onACSStyle}
+    >
+      ACS Style
+    </button>
+  );
+
   const tabs = [
     generalTab,
     stereoTab,
@@ -334,7 +353,7 @@ const SettingsDialog = (props: Props) => {
       valid={() => formState.valid}
       params={prop}
       buttonsNameMap={{ OK: 'Apply' }}
-      buttons={['Cancel', 'OK']}
+      buttons={[ACSStyleButton, 'Cancel', 'OK']}
       withDivider
       needMargin={false}
       headerContent={
@@ -379,6 +398,9 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
     dispatch(saveSettings(res));
     ownProps.onOk(res);
   },
+  onACSStyle: (result) => {
+    dispatch(updateFormState({ result }));
+  },
 });
 
 const Settings = connect(mapStateToProps, mapDispatchToProps)(SettingsDialog);