Merge remote-tracking branch 'origin/#1044-Text-Tool-Add-special-symb…

…ols' into #1044-Text-Tool-Add-special-symbols # Conflicts: # packages/ketcher-react/src/icons/index.tsx
epam · Dec 1, 2021 · 42286a7 · 42286a7
2 parents 49db909 + 362782f
commit 42286a7
Show file tree

Hide file tree

Showing 12 changed files with 61 additions and 50 deletions.
diff --git a/packages/ketcher-react/src/Editor.module.less b/packages/ketcher-react/src/Editor.module.less
@@ -58,14 +58,13 @@
     line-height: 20 / 14;
     height: 2.4em;
     padding: 0.35em 0.15em 0.35em 0.3em;
-    margin: 2px;
     border: none;
     box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
     box-sizing: border-box;
 
     &:active,
     &:focus {
-      outline: 0;
+      outline: 1px solid @active-color;
     }
 
     &:hover,

diff --git a/packages/ketcher-react/src/icons/files/not-found.svg b/packages/ketcher-react/src/icons/files/not-found.svg
diff --git a/packages/ketcher-react/src/icons/index.tsx b/packages/ketcher-react/src/icons/index.tsx
@@ -53,6 +53,7 @@ import LayoutIcon from './files/layout.svg'
 import LogoIcon from './files/logo.svg'
 import MiewIcon from './files/miew.svg'
 import ClearIcon from './files/clear.svg'
+import NotFoundIcon from './files/not-found.svg'
 import OpenIcon from './files/open.svg'
 import PasteIcon from './files/paste.svg'
 import PeriodTableIcon from './files/period-table.svg'
@@ -217,7 +218,8 @@ const icons = {
   'shape-rectangle': ShapeRectangleIcon,
   'shape-polyline': ShapePolylineIcon,
   'shape-line': ShapeLineIcon,
-  symbols: Symbols
+  symbols: Symbols,
+  'not-found': NotFoundIcon
 }
 
 function emptyIcon() {

diff --git a/packages/ketcher-react/src/script/ui/component/form/form/form.jsx b/packages/ketcher-react/src/script/ui/component/form/form/form.jsx
@@ -101,7 +101,7 @@ function Label({ labelPos, title, children, ...props }) {
 }
 
 function Field(props) {
-  const { name, onChange, component, labelPos, ...rest } = props
+  const { name, onChange, component, labelPos, className, ...rest } = props
   const { schema, stateStore } = useFormContext()
   const desc = rest.schema || schema.properties[name]
   const { dataError, ...fieldOpts } = stateStore.field(name, onChange)
@@ -115,7 +115,7 @@ function Field(props) {
   if (labelPos === false) return formField
   return (
     <Label
-      className={clsx({ [classes.dataError]: dataError })}
+      className={clsx({ [classes.dataError]: dataError }, className)}
       error={dataError}
       title={rest.title || desc.title}
       labelPos={labelPos}

diff --git a/packages/ketcher-react/src/script/ui/dialog/template/EmptySearchResult.tsx b/packages/ketcher-react/src/script/ui/dialog/template/EmptySearchResult.tsx
@@ -15,9 +15,15 @@
  ***************************************************************************/
 
 import classes from './emptySearchResult.module.less'
+import Icon from '../../component/view/icon'
 
 const EmptySearchResult = ({ textInfo }) => {
-  return <div className={classes.emptySearch}>{textInfo}</div>
+  return (
+    <div className={classes.emptySearch}>
+      <p>{textInfo}</p>
+      <Icon name="not-found" />
+    </div>
+  )
 }
 
 export default EmptySearchResult
diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.module.less b/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.module.less
@@ -21,6 +21,7 @@
   display: flex;
   flex-wrap: wrap;
   width: 555px;
+  min-width: 100px;
   padding: 0;
   overflow: hidden;
 }
@@ -30,12 +31,13 @@
   }
 
   height: 312px;
-  display: flex;
-  flex-wrap: wrap;
-  align-content: flex-start;
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
+  grid-gap: 24px;
   overflow-y: scroll;
   overflow-x: hidden;
   width: 100%;
+  margin: 10px 15px;
 
   .scrollbar();
 }
@@ -55,6 +57,8 @@
 
 .td {
   position: relative;
+  width: 100px;
+  height: 100px;
   &::before {
     position: absolute;
     z-index: 10;
@@ -68,7 +72,7 @@
     content: attr(title);
     overflow: hidden;
     width: content-box;
-    max-width: 155px;
+    max-width: 85px;
   }
   &.selected .struct {
     background-color: lighten(@form-selected-background, 15%);
@@ -96,4 +100,5 @@
 }
 div.struct {
   padding: 0; // TODO: tmp hack to fit viewbox
+  background-color: white;
 }
diff --git a/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx b/packages/ketcher-react/src/script/ui/dialog/template/TemplateTable.tsx
@@ -65,17 +65,12 @@ const RenderTmpl: FC<{
 const TemplateTable: FC<TemplateTableProps> = props => {
   const { templates, selected, onSelect, onDelete, onAttach } = props
   const ITEMS_COUNT = templates ? templates.length : 0
-  const ITEM_SIZE = { width: 178, height: 120 }
-  const tmplStyles = {
-    width: `${ITEM_SIZE.width}px`,
-    height: `${ITEM_SIZE.height}px`
-  }
   const options = useSelector(state => getSettingsSelector(state))
 
   return !ITEMS_COUNT ? (
     <EmptySearchResult textInfo="No items found" />
   ) : (
-    <div className={classes.table} style={{ minWidth: ITEM_SIZE.width }}>
+    <div className={classes.table}>
       <div className={classes.tableContent}>
         {templates.map((tmpl, i) => {
           return (
@@ -91,7 +86,6 @@ const TemplateTable: FC<TemplateTableProps> = props => {
                   ? `${tmpl.struct.name}_${i}`
                   : `${tmpl.struct.name}_${i}_selected`
               }
-              style={tmplStyles}
             >
               <RenderTmpl
                 tmpl={tmpl}

diff --git a/packages/ketcher-react/src/script/ui/dialog/template/emptySearchResult.module.less b/packages/ketcher-react/src/script/ui/dialog/template/emptySearchResult.module.less
@@ -1,5 +1,6 @@
 .emptySearch {
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   width: 550px;

diff --git a/packages/ketcher-react/src/script/ui/dialog/toolbox/rgroup/rgroup.module.less b/packages/ketcher-react/src/script/ui/dialog/toolbox/rgroup/rgroup.module.less
@@ -19,44 +19,33 @@
 
 .rgroup {
   ul {
-    width: 24em;
     padding: 0.5em;
-    display: flex;
-    height: 10.4em;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(8, 41px);
+    grid-template-rows: repeat(4, 29px);
+    grid-column-gap: 6px;
+    grid-row-gap: 10px;
     overflow: hidden;
   }
-  li {
-    display: inline-block;
-    margin: 0.2em 0.1em;
-  }
   form button {
     .btn();
 
+    border: none;
     font-size: 1.3em;
-    width: 2.3em;
-    height: 2em;
+    width: 100%;
+    height: 100%;
     line-height: 1;
-    vertical-align: middle;
     padding: 0.15em;
-    background: inherit;
+    background: @light-background-color;
+    color: @main-font-color;
     &::first-letter {
       font-weight: 600;
-      color: lighten(@main-color, 20%);
-    }
-    &:hover {
-      .highlight-scale(@scale:1.005);
-      .highlight-shadow(black);
-    }
-    &:active {
-      .highlight-scale(none);
-      .highlight-shadow(none);
+      color: @main-dark-color;
     }
+    &:hover,
+    &:active,
     &.selected {
-      .highlight-invert;
-      &::first-letter {
-        color: darken(white, 30%);
-      }
+      background: @button-hover-color;
     }
   }
 }
diff --git a/...er-react/src/script/ui/views/modal/components/toolbox/RgroupLogic/RgroupLogic.module.less b/...er-react/src/script/ui/views/modal/components/toolbox/RgroupLogic/RgroupLogic.module.less
@@ -17,12 +17,15 @@
 @import '../../../../../../../style/variables.less';
 
 .rgroupLogic {
+  width: 24.5em;
   label {
-    display: inline-block;
-    text-align: right;
-    line-height: @input-height;
-  }
-  input[type='text'] {
-    width: 7em;
+    display: flex;
+    flex-direction: column;
+    line-height: 2em;
+    margin: 1em 0;
+
+    &.resth {
+      flex-direction: row;
+    }
   }
 }
diff --git a/...es/ketcher-react/src/script/ui/views/modal/components/toolbox/RgroupLogic/RgroupLogic.tsx b/...es/ketcher-react/src/script/ui/views/modal/components/toolbox/RgroupLogic/RgroupLogic.tsx
@@ -36,7 +36,7 @@ const RgroupLogic = (props: Props) => {
   const { formState, label, rgroupLabels, ...rest } = props
   return (
     <Dialog
-      title="R-Group Logic"
+      title="R-Group Logic Condition"
       className={classes.rgroupLogic}
       result={() => formState.result}
       valid={() => formState.valid}
@@ -49,7 +49,7 @@ const RgroupLogic = (props: Props) => {
         {...formState}
       >
         <Field name="range" />
-        <Field name="resth" />
+        <Field name="resth" labelPos="after" className={classes.resth} />
         <IfThenSelect name="ifthen" label={label} rgroupLabels={rgroupLabels} />
       </Form>
     </Dialog>

diff --git a/packages/ketcher-react/src/style/variables.less b/packages/ketcher-react/src/style/variables.less
@@ -14,6 +14,13 @@
  * limitations under the License.
  ***************************************************************************/
 
+// new styles
+@button-hover-color: #ddd;
+@main-font-color: #585858;
+@main-dark-color: #343434;
+@light-background-color: #fff;
+
+// old styles 
 @static-path: '.';
 
 @main-color: #333;