Merge branch 'master' of https://github.com/epam/ketcher into #1795-f…

…ix-colors-in-svg-and-png
epam · Nov 8, 2022 · 8f8721f · 8f8721f
2 parents 27d23a4 + fca3123
commit 8f8721f
Show file tree

Hide file tree

Showing 15 changed files with 255 additions and 181 deletions.
diff --git a/DEVNOTES.md b/DEVNOTES.md
@@ -49,28 +49,28 @@ The latest version of Ketcher is based on yarn workspaces. So before starting de
 yarn install
 ```
 
-After that component library and application should be started separately.
+After that component library and application should be started separately. First should be started ketcher-core package.
 
-#### Build ketcher-react package
+#### Build ketcher-core package
 
 ```sh
-cd packages/ketcher-react
+cd packages/ketcher-core
 yarn install
 yarn start
 ```
 
-#### Build ketcher-standalone package
+#### Build ketcher-react package
 
 ```sh
-cd packages/ketcher-standalone
+cd packages/ketcher-react
 yarn install
 yarn start
 ```
 
-#### Build ketcher-core package
+#### Build ketcher-standalone package
 
 ```sh
-cd packages/ketcher-core
+cd packages/ketcher-standalone
 yarn install
 yarn start
 ```

diff --git a/example/src/ErrorModal/ErrorModal.css → example/src/ErrorModal/ErrorModal.module.css b/example/src/ErrorModal/ErrorModal.css → example/src/ErrorModal/ErrorModal.module.css
diff --git a/example/src/ErrorModal/ErrorModal.tsx b/example/src/ErrorModal/ErrorModal.tsx
@@ -13,7 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  ***************************************************************************/
-import './ErrorModal.css'
+import styles from './ErrorModal.module.css'
 
 interface ErrorModalProps {
   message: string
@@ -22,13 +22,13 @@ interface ErrorModalProps {
 
 const ErrorModal = ({ message, close }: ErrorModalProps): JSX.Element => {
   return (
-    <div className="modalOverlay">
-      <div className="modalWindow">
+    <div className={styles.modalOverlay}>
+      <div className={styles.modalWindow}>
         <header>Error Message</header>
-        <div className="modalBody">{message}</div>
+        <div className={styles.modalBody}>{message}</div>
         <footer>
           <button
-            className="ok"
+            className={styles.ok}
             onClick={() => {
               close()
             }}

diff --git a/...ple/src/PolymerToggler/PolymerToggler.css → .../PolymerToggler/PolymerToggler.module.css b/...ple/src/PolymerToggler/PolymerToggler.css → .../PolymerToggler/PolymerToggler.module.css
@@ -53,11 +53,11 @@
   border-radius: 50%;
 }
 
-input:checked + .slider {
+.switch input:checked + .slider {
   background-color: #343434;
 }
 
-input:checked + .slider::before {
+.switch input:checked + .slider::before {
   background-color: #fff;
   -webkit-transform: translateX(12px);
   -ms-transform: translateX(12px);

diff --git a/example/src/PolymerToggler/PolymerToggler.tsx b/example/src/PolymerToggler/PolymerToggler.tsx
@@ -14,17 +14,17 @@
  * limitations under the License.
  ***************************************************************************/
 
-import './PolymerToggler.css'
+import styles from './PolymerToggler.module.css'
 
 export interface PolymerTogglerProps {
   toggle: (isEnabled: boolean) => void
 }
 
 const PolymerToggler = ({ toggle }: PolymerTogglerProps): JSX.Element => {
   return (
-    <label className="switch">
+    <label className={styles.switch}>
       <input type="checkbox" onChange={(e) => toggle(e.target.checked)} />
-      <span className="slider" />
+      <span className={styles.slider} />
     </label>
   )
 }

diff --git a/packages/ketcher-core/package.json b/packages/ketcher-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ketcher-core",
-  "version": "2.6.0-rc.3",
+  "version": "2.6.0",
   "description": "Web-based molecule sketcher",
   "license": "Apache-2.0",
   "homepage": "http://lifescience.opensource.epam.com/ketcher",

diff --git a/packages/ketcher-react/package.json b/packages/ketcher-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ketcher-react",
-  "version": "2.6.0-rc.3",
+  "version": "2.6.0",
   "description": "Web-based molecule sketcher",
   "license": "Apache-2.0",
   "homepage": "http://lifescience.opensource.epam.com/ketcher",

diff --git a/packages/ketcher-react/src/script/ui/App/App.tsx b/packages/ketcher-react/src/script/ui/App/App.tsx
@@ -57,6 +57,7 @@ const App = (props: Props) => {
   useEffect(() => {
     checkServer()
     dispatch(initFGTemplates(staticResourcesUrl))
+    window.scrollTo(0, 0)
   }, [])
 
   return (

diff --git a/packages/ketcher-react/src/script/ui/component/form/input.jsx b/packages/ketcher-react/src/script/ui/component/form/input.jsx
@@ -34,7 +34,7 @@ export function GenericInput({
         value={value}
         onInput={onChange}
         onChange={onChange}
-        className={classes.input}
+        className={clsx(classes.input, classes.genericInput)}
         {...props}
       />
       {type === 'checkbox' && <span className={classes.checkbox} />}
@@ -68,6 +68,7 @@ function CheckBox({ schema, value = '', onChange, ...rest }) {
         checked={value}
         onClick={onChange}
         onChange={onChange}
+        className={classes.input}
         {...rest}
       />
       <span className={classes.checkbox} />
@@ -126,7 +127,7 @@ function FieldSet({
   ...rest
 }) {
   return (
-    <fieldset onClick={onSelect} className="radio">
+    <fieldset onClick={onSelect}>
       {enumSchema(schema, (title, val) => (
         <li key={title} className={classes.fieldSetItem}>
           <label className={classes.fieldSetLabel}>
@@ -136,6 +137,7 @@ function FieldSet({
                 type === 'radio' ? selected(val, checked) : selected(val, value)
               }
               value={typeof val !== 'object' && val}
+              className={classes.input}
               {...rest}
             />
             {type === 'checkbox' && <span className={classes.checkbox} />}

diff --git a/packages/ketcher-react/src/script/ui/component/form/input.module.less b/packages/ketcher-react/src/script/ui/component/form/input.module.less
@@ -1,60 +1,60 @@
 @import '../../../../style/variables';
 
-  .fieldSetLabel {
-    position: relative;
-  }
+.fieldSetLabel {
+  position: relative;
+}
 
-  input[type='radio'],
-  input[type='checkbox'] {
-    position: absolute;
-    opacity: 0;
-  }
+.input[type='radio'],
+.input[type='checkbox'] {
+  position: absolute;
+  opacity: 0;
+}
 
-  input[type='checkbox'] + .checkbox {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    vertical-align: middle;
-    margin-right: 6px;
-    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill='white' stroke='%23B4B9D6'/%3E%3C/svg%3E%0A");
-    background-repeat: no-repeat;
-    background-size: 100%;
-  }
+.input[type='checkbox'] + .checkbox {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+  margin-right: 6px;
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill='white' stroke='%23B4B9D6'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
 
-  input[type='checkbox']:hover + .checkbox {
-    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.75' y='0.75' width='14.5' height='14.5' rx='3.25' fill='white' stroke='%2343B5C0' stroke-width='1.5'/%3E%3C/svg%3E%0A");
-  }
+.input[type='checkbox']:hover + .checkbox {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.75' y='0.75' width='14.5' height='14.5' rx='3.25' fill='white' stroke='%2343B5C0' stroke-width='1.5'/%3E%3C/svg%3E%0A");
+}
 
-  input[type='checkbox']:checked + .checkbox {
-    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' rx='4' fill='%23167782'/%3E%3Cpath d='M6.33711 11.8079L2.42578 7.63124L3.39911 6.71991L6.36845 9.89124L12.6171 3.64258L13.5598 4.58524L6.33711 11.8079Z' fill='white'/%3E%3C/svg%3E%0A");
-  }
+.input[type='checkbox']:checked + .checkbox {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='16' height='16' rx='4' fill='%23167782'/%3E%3Cpath d='M6.33711 11.8079L2.42578 7.63124L3.39911 6.71991L6.36845 9.89124L12.6171 3.64258L13.5598 4.58524L6.33711 11.8079Z' fill='white'/%3E%3C/svg%3E%0A");
+}
 
-  input[type='radio'] + .radioButton {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    vertical-align: middle;
-    margin-right: 8px;
-    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' stroke='@{color-input-default}' stroke-width='2'/%3E%3C/svg%3E%0A");
-    background-repeat: no-repeat;
-    background-size: 100%;
-  }
+.input[type='radio'] + .radioButton {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  vertical-align: middle;
+  margin-right: 8px;
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' stroke='@{color-input-default}' stroke-width='2'/%3E%3C/svg%3E%0A");
+  background-repeat: no-repeat;
+  background-size: 100%;
+}
 
-  input[type='radio']:hover + .radioButton {
-    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' stroke='@{color-input-hover-svg}' stroke-width='2'/%3E%3C/svg%3E%0A");
-  }
+.input[type='radio']:hover + .radioButton {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' stroke='@{color-input-hover-svg}' stroke-width='2'/%3E%3C/svg%3E%0A");
+}
 
-  input[type='radio']:checked + .radioButton {
-    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='@{color-input}' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' stroke='@{color-input}' stroke-width='2'/%3E%3Ccircle cx='8' cy='8' r='4' fill='@{color-input}'/%3E%3C/svg%3E%0A");
-  }
+.input[type='radio']:checked + .radioButton {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='@{color-input}' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' stroke='@{color-input}' stroke-width='2'/%3E%3Ccircle cx='8' cy='8' r='4' fill='@{color-input}'/%3E%3C/svg%3E%0A");
+}
 
-  input[type='radio']:disabled + .radioButton {
-    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' stroke='@{color-input-default}' stroke-width='2' /%3E%3C/svg%3E%0A");
-  }
+.input[type='radio']:disabled + .radioButton {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' stroke='@{color-input-default}' stroke-width='2' /%3E%3C/svg%3E%0A");
+}
 
-  input[type='radio']:checked:disabled + .radioButton {
-    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='@{color-input-default}' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' stroke='@{color-input-default}' stroke-width='2'/%3E%3Ccircle cx='8' cy='8' r='4' fill='@{color-input-default}'/%3E%3C/svg%3E%0A");
-  }
+.input[type='radio']:checked:disabled + .radioButton {
+  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='@{color-input-default}' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7' stroke='@{color-input-default}' stroke-width='2'/%3E%3Ccircle cx='8' cy='8' r='4' fill='@{color-input-default}'/%3E%3C/svg%3E%0A");
+}
 
 .slider.slider {
   position: relative;
@@ -107,10 +107,10 @@
 }
 
 .select,
-.input {
+.genericInput {
   color: @color-text-primary;
 }
 
 .select {
   min-width: 40px;
-}
+}
diff --git a/packages/ketcher-standalone/package.json b/packages/ketcher-standalone/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ketcher-standalone",
-  "version": "2.6.0-rc.3",
+  "version": "2.6.0",
   "description": "Web-based molecule sketcher",
   "license": "Apache-2.0",
   "homepage": "http://lifescience.opensource.epam.com/ketcher",
@@ -39,7 +39,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "indigo-ketcher": "1.8.0-rc.2",
+    "indigo-ketcher": "1.8.0",
     "ketcher-core": "workspace:*"
   },
   "devDependencies": {