Merge pull request #1581 from epam/release/2.5

Release/2.5

Author: AnaMoskvina

packages/ketcher-react/src/script/ui/action/functionalGroups.ts

@@ -21,7 +21,7 @@ const functionalGroupsLib = {
     shortcut: 'Shift+f',
     // TODO Update HELP about current tools
     title: 'Functional Groups',
-    action: { dialog: 'fGroups' },
+    action: { dialog: 'templates', prop: { tab: 1 } },
     selected: (editor) => editor._tool.mode === 'fg',
     disabled: (_, __, options) => {
       return !options.app.functionalGroups

packages/ketcher-react/src/script/ui/dialog/template/TemplateDialog.tsx

@@ -73,6 +73,7 @@ interface TemplateLibProps {
   lib: Array<Template>
   selected: Template
   mode: string
+  initialTab: number
 }
 
 interface TemplateLibCallProps {
@@ -140,12 +141,13 @@ const TemplateDialog: FC<Props> = (props) => {
     onFilter,
     onChangeGroup,
     mode,
+    initialTab,
     functionalGroups,
     lib: templateLib,
     ...rest
   } = props
 
-  const [tab, setTab] = useState(TemplateTabs.TemplateLibrary)
+  const [tab, setTab] = useState(initialTab ?? TemplateTabs.TemplateLibrary)
   const [expandedAccordions, setExpandedAccordions] = useState<string[]>([
     props.group
   ])
@@ -306,6 +308,7 @@ const TemplateDialog: FC<Props> = (props) => {
 export default connect(
   (store) => ({
     ...omit(['attach'], (store as any).templates),
+    initialTab: (store as any).modal?.prop?.tab,
     functionalGroups: functionalGroupsSelector(store).map((template) => {
       const struct = template.struct.clone()
       struct.sgroups.delete(0)

packages/ketcher-react/src/script/ui/dialog/template/template-attach.jsx

@@ -76,6 +76,8 @@ const LeftColumn = styled('div')`
 
 const RightColumn = styled('div')`
   width: 40%;
+  min-width: 200px;
+  box-sizing: border-box;
   padding: 12px;
   display: flex;
   flex-direction: column;

packages/ketcher-react/src/script/ui/dialog/template/template-lib.module.less

@@ -17,8 +17,6 @@
 @import '../../../../style/mixins';
 @import '../../../../style/variables';
 
-@shadow-color: #DEE1E4;
-
 .warning {
   color: @error-color;
 
@@ -59,7 +57,7 @@
   }
 
   & > footer {
-    box-shadow: 0 -6px 6px 0 @shadow-color;
+    box-shadow: 0 -6px 6px 0 @color-accordion-shadow;
     z-index: 10;
 
     & > input {
@@ -141,7 +139,7 @@
 
   :global(.MuiAccordionDetails-root) {
     background-color: @color-primary-light;
-    box-shadow: inset 0 -2px 8px 0 @shadow-color;
+    box-shadow: inset 0 -2px 8px 0 @color-accordion-shadow;
     width: 424px;
     padding: 12px 14px 4px;
   }
@@ -183,7 +181,7 @@
   }
 
   .tabs {
-    box-shadow: 0 6px 6px 0 @shadow-color;
+    box-shadow: 0 6px 6px 0 @color-accordion-shadow;
     z-index: 10;  
   }
 

packages/ketcher-react/src/script/ui/dialog/toolbox/sgroup.module.less

@@ -99,7 +99,7 @@
       margin-bottom: 0;
     }
 
-    & > textarea {
+    textarea {
       margin-top: 4px;
       resize: vertical;
       max-height: 240px;

packages/ketcher-react/src/script/ui/state/shared.js

@@ -30,7 +30,7 @@ export function onAction(action) {
   if (action && action.dialog) {
     return {
       type: 'MODAL_OPEN',
-      data: { name: action.dialog }
+      data: { name: action.dialog, prop: action.prop }
     }
   }
   if (action && action.thunk) {

packages/ketcher-react/src/script/ui/views/components/StructEditor/StructEditor.module.less

@@ -107,6 +107,10 @@
   position: relative;
 
   .scrollbar();
+
+  &::-webkit-scrollbar {
+    background-color: @color-background-primary;
+  }
 }
 // stylelint-disable-next-line selector-pseudo-class-no-unknown
 :global(.smallEditor) .canvas {

packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.module.less

@@ -16,8 +16,6 @@
 
 @import '../../../../../../../style/variables.less';
 
-@shadow-color: #DEE1E4;
-
 .button {
   background-color: transparent;
   border: none;
@@ -102,11 +100,12 @@
 
    > header{
       flex-shrink: 0;
-       box-shadow: 0 2px 4px 0 @shadow-color;
-       z-index: 10; 
+      box-shadow: 0 2px 4px 0 @color-accordion-shadow;
+      z-index: 10; 
    }
 
    > footer {
-        box-shadow: 0 -2px 4px 0 @shadow-color;
+      box-shadow: 0 -2px 4px 0 @color-accordion-shadow;
+      z-index: 10;
    }
 }

packages/ketcher-react/src/script/ui/views/modal/components/toolbox/Atom/Atom.module.less

@@ -19,7 +19,6 @@
 @import '../../../../../../../style/variables.less';
 @import '../../../../../../../style/mixins.less';
 
-@shadow-color: #DEE1E4;
 @padding-container: 11.5px;
 
 .atomProps {
@@ -35,7 +34,7 @@
 
   > header {
     flex-shrink: 0;
-    box-shadow: 0 2px 4px 0 @shadow-color;
+    box-shadow: 0 2px 4px 0 @color-accordion-shadow;
     z-index: 10; 
   }
 
@@ -46,7 +45,8 @@
     }
 
   > footer {
-    box-shadow: 0 -2px 4px 0 @shadow-color;
+    box-shadow: 0 -2px 4px 0 @color-accordion-shadow;
+    z-index: 10;
   }
 }
 

packages/ketcher-react/src/style/variables.less

@@ -107,6 +107,7 @@
 // Shadows
 @color-dropcontainer-shadow: rgba(103, 104, 132, 0.18);
 @color-open-window-shadow: rgba(103, 104, 132, 0.25);
+@color-accordion-shadow: rgba(1, 1, 50, 0.1);
 
 // Dropdown
 @color-dropdown-hover: #dddddd;