diff --git a/packages/ketcher-react/src/constants.ts b/packages/ketcher-react/src/constants.ts index 34fdad4631..f79a91d146 100644 --- 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/packages/ketcher-react/src/script/ui/data/schema/options-schema.ts b/packages/ketcher-react/src/script/ui/data/schema/options-schema.ts index 53e1b7ca22..22f171d306 100644 --- a/packages/ketcher-react/src/script/ui/data/schema/options-schema.ts +++ b/packages/ketcher-react/src/script/ui/data/schema/options-schema.ts @@ -259,7 +259,7 @@ const render: { title: 'Bond thickness', type: 'integer', default: defaultBondThickness, - minimum: 1, + minimum: 0.1, maximum: 96, }, bondThicknessUnit: { diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.module.less index 6e5acb457b..c3ba6f2dea 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.module.less +++ b/packages/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 index f02e94cda7..6c0228580a 100644 --- 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(); @@ -143,7 +145,6 @@ const SettingsDialog = (props: Props) => { label: 'General', content: (