From 1deeb0eee04f49b61dde9c99cd1ad844864b7ac3 Mon Sep 17 00:00:00 2001 From: ViktorMakarov-EPAM Date: Fri, 8 Apr 2022 17:57:34 +0300 Subject: [PATCH 1/8] open window redesign --- .../ketcher-react/src/icons/files/close.svg | 4 +- .../src/icons/files/image-frame.svg | 8 ++- .../ketcher-react/src/icons/files/paste1.svg | 5 ++ .../ketcher-react/src/icons/files/upload.svg | 4 ++ packages/ketcher-react/src/icons/index.tsx | 6 +- .../components/Dialog/Dialog.module.less | 10 ++- .../ui/views/components/Dialog/Dialog.tsx | 2 +- .../components/document/Open/Open.module.less | 22 ++++--- .../document/Open/components/DropButton.tsx | 36 ---------- .../Open/components/FileDrop.module.less | 3 + .../document/Open/components/FileDrop.tsx | 20 +++--- .../Open/components/OpenOptions.module.less | 65 ++++++++++++------- .../document/Open/components/OpenOptions.tsx | 17 ++--- .../ketcher-react/src/style/variables.less | 6 +- 14 files changed, 113 insertions(+), 95 deletions(-) create mode 100644 packages/ketcher-react/src/icons/files/paste1.svg create mode 100644 packages/ketcher-react/src/icons/files/upload.svg delete mode 100644 packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/DropButton.tsx diff --git a/packages/ketcher-react/src/icons/files/close.svg b/packages/ketcher-react/src/icons/files/close.svg index e4b3232c10..ec93d988db 100644 --- a/packages/ketcher-react/src/icons/files/close.svg +++ b/packages/ketcher-react/src/icons/files/close.svg @@ -1,3 +1,3 @@ - - + + diff --git a/packages/ketcher-react/src/icons/files/image-frame.svg b/packages/ketcher-react/src/icons/files/image-frame.svg index 381c851adb..eb3e60dc72 100644 --- a/packages/ketcher-react/src/icons/files/image-frame.svg +++ b/packages/ketcher-react/src/icons/files/image-frame.svg @@ -1,3 +1,7 @@ - - + + + + + + diff --git a/packages/ketcher-react/src/icons/files/paste1.svg b/packages/ketcher-react/src/icons/files/paste1.svg new file mode 100644 index 0000000000..91d66d4ca6 --- /dev/null +++ b/packages/ketcher-react/src/icons/files/paste1.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/ketcher-react/src/icons/files/upload.svg b/packages/ketcher-react/src/icons/files/upload.svg new file mode 100644 index 0000000000..1e06d6bd1e --- /dev/null +++ b/packages/ketcher-react/src/icons/files/upload.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/ketcher-react/src/icons/index.tsx b/packages/ketcher-react/src/icons/index.tsx index c13b691722..1c58efff7d 100644 --- a/packages/ketcher-react/src/icons/index.tsx +++ b/packages/ketcher-react/src/icons/index.tsx @@ -63,6 +63,8 @@ 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 PasteIcon1 from './files/paste1.svg' +import UploadIcon from './files/upload.svg' import PeriodTableIcon from './files/period-table.svg' import ReactionArrowBothEndsFilledTriangle from './files/reaction-arrow-both-ends-filled-triangle.svg' import ReactionArrowDashedOpenAngle from './files/reaction-arrow-dashed-open-angle.svg' @@ -289,7 +291,9 @@ const icons = { 'debugging-white': DebuggingWhiteIcon, 'dropdown-indicator': DropdownIndicatorIcon, 'text-special-symbols': TextSpecialSymbolsIcon, - chevron: ChevronIcon + chevron: ChevronIcon, + paste1: PasteIcon1, + upload: UploadIcon } function emptyIcon() { diff --git a/packages/ketcher-react/src/script/ui/views/components/Dialog/Dialog.module.less b/packages/ketcher-react/src/script/ui/views/components/Dialog/Dialog.module.less index 78cd6adddf..9962f30946 100644 --- a/packages/ketcher-react/src/script/ui/views/components/Dialog/Dialog.module.less +++ b/packages/ketcher-react/src/script/ui/views/components/Dialog/Dialog.module.less @@ -76,12 +76,13 @@ line-height: @line-height-header; border-radius: 0.7em 0.7em 0 0; color: @color-text-primary; + height: 12px; .btnContainer { margin-left: 6px; flex-grow: 1; display: flex; - align-items: baseline; + align-items: flex-end; } .buttonTop { @@ -89,6 +90,13 @@ border: none; margin-left: auto; padding-right: 0; + align-self: center; + + .closeButton { + height: 16px; + width: 16px; + } + } } diff --git a/packages/ketcher-react/src/script/ui/views/components/Dialog/Dialog.tsx b/packages/ketcher-react/src/script/ui/views/components/Dialog/Dialog.tsx index 416be1d77f..0f6f4a478c 100644 --- a/packages/ketcher-react/src/script/ui/views/components/Dialog/Dialog.tsx +++ b/packages/ketcher-react/src/script/ui/views/components/Dialog/Dialog.tsx @@ -121,7 +121,7 @@ const Dialog: FC = (props) => {
{buttonsTop && buttonsTop.map((button) => button)}
diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less index c6fee2ab67..5aa4a89b16 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less @@ -18,6 +18,19 @@ @import '../../../../../../../style/mixins.less'; .open { + -moz-box-shadow: 0 5px 20px #67688440; + -webkit-box-shadow: 0 5px 20px #67688440; + box-shadow: 0 5px 20px #67688440; + background-color: @color-background-primary; + + > header { + margin: 0; + padding: @margin-top-bottom; + border-bottom: 1px solid #E1E5EA; + } + > div { + margin: 0; + } label { display: block; width: 22.5em; @@ -40,15 +53,6 @@ } } -.dropButton { - .button-main(); - - border: none; - border-radius: 2px; - text-align: center; - height: 24px; -} - .dialogButton { border: none; margin-right: 2px; diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/DropButton.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/DropButton.tsx deleted file mode 100644 index 80ce461437..0000000000 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/DropButton.tsx +++ /dev/null @@ -1,36 +0,0 @@ -/**************************************************************************** - * Copyright 2021 EPAM Systems - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - ***************************************************************************/ - -import styles from '../Open.module.less' - -type Props = { - label: string - clickHandler: () => void - disabled?: boolean -} - -export const DropButton = ({ label, clickHandler, disabled }: Props) => { - return ( - - ) -} diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.module.less index 0bc47b74c6..b81be64041 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.module.less @@ -19,3 +19,6 @@ .isHovered { background-color: @color-background-secondary; } +.isDisabled { + cursor: auto; +} diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.tsx index af7330e292..2eaf8a06e9 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.tsx +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.tsx @@ -19,7 +19,6 @@ import { useDropzone, DropzoneOptions } from 'react-dropzone' import parentStyles from './OpenOptions.module.less' import styles from './FileDrop.module.less' -import { DropButton } from './DropButton' import Icon from 'src/script/ui/component/view/icon' type FileDropProps = { @@ -40,7 +39,6 @@ const FileDrop = ({ }: FileDropProps) => { const { getRootProps, getInputProps, isDragActive, open } = useDropzone({ multiple: false, - noClick: true, disabled, ...rest }) @@ -48,26 +46,32 @@ const FileDrop = ({ const getClassesString = useMemo((): string => { const classes = [ parentStyles.dropContainer, - isDragActive ? styles.isHovered : null + isDragActive ? styles.isHovered : null, + disabled ? styles.isDisabled : null ] return classes.join(' ') }, [isDragActive]) return (
- +
+ +
{disabled ? ( -

{disabledText}

+

{disabledText}

) : ( <> -

{textLabel}

-
- +
+

{textLabel}

+
+
+

{buttonLabel}

)} diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.module.less index 6be4f65c4e..79b716dab5 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.module.less @@ -21,47 +21,64 @@ flex-direction: row; justify-content: space-between; align-items: flex-start; - margin-bottom: 20px; - width: 490px; + margin-bottom: 6px; + width: 430px; + padding: @margin-top-bottom; + box-sizing: border-box; } .dropContainer { - width: 152px; - height: 112px; - border: 1px solid @color-divider; //@TODO Change to variable - border-radius: 4px; - flex: 1; + width: 128px; + height: 134px; + border-radius: 12px; + padding: 16px; + cursor: pointer; display: flex; flex-direction: column; - padding-top: @margin-top-bottom; align-items: center; + justify-content: space-between; box-sizing: border-box; position: relative; + -moz-box-shadow: 0 4px 12px #6768842E; + -webkit-box-shadow: 0 4px 12px #6768842E; + box-shadow: 0 4px 12px #6768842E; - &:first-child { - margin-right: @margin-left-right; - } - - &:last-child { - margin-left: @margin-left-right; + div { + margin: 0; + padding: 0; } - & > p { - margin-top: 6px; - color: @color-text-secondary; + p { + margin: 0; text-align: center; + font-family: @Inter; + line-height: 12.1px; + font-size: 10px; } - .dropIconWrapper { - position: absolute; - bottom: 13px; - height: 30px; + .buttonLabelWrapper { + height: 24px; display: flex; flex-direction: column; justify-content: center; + } + .buttonLabel { + color: @color-text-secondary; + font-weight: 500; + text-transform: uppercase; + } + + .textLabelWrapper { + height: 12px; + } - svg { - fill: @color-button-primary; - } + .textLabel { + color: @color-text-primary; + opacity: 50%; + font-weight: 400; + } + + .dropIconWrapper { + height: 40px; } } diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.tsx index 0f6b1ca9f9..31cf7349e0 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.tsx +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.tsx @@ -18,12 +18,11 @@ import { FC } from 'react' import Icon from 'src/script/ui/component/view/icon' import styles from './OpenOptions.module.less' -import { DropButton } from './DropButton' import { FileDrop } from './FileDrop' const ICON_NAMES = { - PASTE: 'capital-t', - FILE: 'arrow-upward', + PASTE: 'paste1', + FILE: 'upload', IMAGE: 'image-frame' } @@ -44,14 +43,16 @@ export const OpenOptions: FC = ({ }) => { return (
-
- +
+
+ {/*

or press Ctrl + V

*/} +
+
+

Paste from clipboard

+
Date: Fri, 8 Apr 2022 18:29:29 +0300 Subject: [PATCH 2/8] fix style mistakes --- .../ui/views/modal/components/document/Open/Open.module.less | 2 ++ .../components/document/Open/components/FileDrop.module.less | 1 + .../components/document/Open/components/OpenOptions.module.less | 1 + 3 files changed, 4 insertions(+) diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less index 5aa4a89b16..87405a2b10 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less @@ -28,9 +28,11 @@ padding: @margin-top-bottom; border-bottom: 1px solid #E1E5EA; } + > div { margin: 0; } + label { display: block; width: 22.5em; diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.module.less index b81be64041..b1419824b0 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.module.less @@ -19,6 +19,7 @@ .isHovered { background-color: @color-background-secondary; } + .isDisabled { cursor: auto; } diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.module.less index 79b716dab5..d2ff42b208 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.module.less @@ -62,6 +62,7 @@ flex-direction: column; justify-content: center; } + .buttonLabel { color: @color-text-secondary; font-weight: 500; From 133e60282b2a7d28a108818fad4b3beea1a7e775 Mon Sep 17 00:00:00 2001 From: ViktorMakarov-EPAM Date: Mon, 11 Apr 2022 12:16:42 +0300 Subject: [PATCH 3/8] rename icons --- .../files/{paste1.svg => open-window-paste-icon.svg} | 0 .../files/{upload.svg => open-window-upload-icon.svg} | 0 packages/ketcher-react/src/icons/index.tsx | 8 ++++---- .../components/document/Open/components/OpenOptions.tsx | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) rename packages/ketcher-react/src/icons/files/{paste1.svg => open-window-paste-icon.svg} (100%) rename packages/ketcher-react/src/icons/files/{upload.svg => open-window-upload-icon.svg} (100%) diff --git a/packages/ketcher-react/src/icons/files/paste1.svg b/packages/ketcher-react/src/icons/files/open-window-paste-icon.svg similarity index 100% rename from packages/ketcher-react/src/icons/files/paste1.svg rename to packages/ketcher-react/src/icons/files/open-window-paste-icon.svg diff --git a/packages/ketcher-react/src/icons/files/upload.svg b/packages/ketcher-react/src/icons/files/open-window-upload-icon.svg similarity index 100% rename from packages/ketcher-react/src/icons/files/upload.svg rename to packages/ketcher-react/src/icons/files/open-window-upload-icon.svg diff --git a/packages/ketcher-react/src/icons/index.tsx b/packages/ketcher-react/src/icons/index.tsx index 1c58efff7d..cad7adfa58 100644 --- a/packages/ketcher-react/src/icons/index.tsx +++ b/packages/ketcher-react/src/icons/index.tsx @@ -63,8 +63,8 @@ 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 PasteIcon1 from './files/paste1.svg' -import UploadIcon from './files/upload.svg' +import OpenWindowPasteIcon from './files/open-window-paste-icon.svg' +import OpenWindowUploadIcon from './files/open-window-upload-icon.svg' import PeriodTableIcon from './files/period-table.svg' import ReactionArrowBothEndsFilledTriangle from './files/reaction-arrow-both-ends-filled-triangle.svg' import ReactionArrowDashedOpenAngle from './files/reaction-arrow-dashed-open-angle.svg' @@ -292,8 +292,8 @@ const icons = { 'dropdown-indicator': DropdownIndicatorIcon, 'text-special-symbols': TextSpecialSymbolsIcon, chevron: ChevronIcon, - paste1: PasteIcon1, - upload: UploadIcon + 'open-window-paste-icon': OpenWindowPasteIcon, + 'open-window-upload-icon': OpenWindowUploadIcon } function emptyIcon() { diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.tsx index 31cf7349e0..160afba412 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.tsx +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.tsx @@ -21,8 +21,8 @@ import styles from './OpenOptions.module.less' import { FileDrop } from './FileDrop' const ICON_NAMES = { - PASTE: 'paste1', - FILE: 'upload', + PASTE: 'open-window-paste-icon', + FILE: 'open-window-upload-icon', IMAGE: 'image-frame' } From a30df3019cd2bf5a97e41c22a20effcb583d0334 Mon Sep 17 00:00:00 2001 From: ViktorMakarov-EPAM Date: Mon, 11 Apr 2022 12:26:58 +0300 Subject: [PATCH 4/8] remove vendor prefixes --- .../ui/views/modal/components/document/Open/Open.module.less | 2 -- .../components/document/Open/components/OpenOptions.module.less | 2 -- 2 files changed, 4 deletions(-) diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less index 87405a2b10..7e5bb5e24d 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less @@ -18,8 +18,6 @@ @import '../../../../../../../style/mixins.less'; .open { - -moz-box-shadow: 0 5px 20px #67688440; - -webkit-box-shadow: 0 5px 20px #67688440; box-shadow: 0 5px 20px #67688440; background-color: @color-background-primary; diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.module.less index d2ff42b208..5de8634359 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.module.less @@ -39,8 +39,6 @@ justify-content: space-between; box-sizing: border-box; position: relative; - -moz-box-shadow: 0 4px 12px #6768842E; - -webkit-box-shadow: 0 4px 12px #6768842E; box-shadow: 0 4px 12px #6768842E; div { From ce809ecef360b2ab6cb9e35aac7d17dd698d14e5 Mon Sep 17 00:00:00 2001 From: ViktorMakarov-EPAM Date: Mon, 11 Apr 2022 12:53:24 +0300 Subject: [PATCH 5/8] add less variables --- .../views/modal/components/document/Open/Open.module.less | 4 ++-- .../document/Open/components/OpenOptions.module.less | 6 +++--- packages/ketcher-react/src/style/variables.less | 8 +++++++- 3 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less index 7e5bb5e24d..4344f5814d 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/Open.module.less @@ -18,12 +18,12 @@ @import '../../../../../../../style/mixins.less'; .open { - box-shadow: 0 5px 20px #67688440; + box-shadow: 0 5px 20px @color-open-window-shadow; background-color: @color-background-primary; > header { margin: 0; - padding: @margin-top-bottom; + padding: @padding-modal; border-bottom: 1px solid #E1E5EA; } diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.module.less index 5de8634359..bbafc7b96f 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.module.less @@ -22,8 +22,8 @@ justify-content: space-between; align-items: flex-start; margin-bottom: 6px; - width: 430px; - padding: @margin-top-bottom; + width: @width-medium-new; + padding: @padding-modal; box-sizing: border-box; } @@ -39,7 +39,7 @@ justify-content: space-between; box-sizing: border-box; position: relative; - box-shadow: 0 4px 12px #6768842E; + box-shadow: 0 4px 12px @color-dropcontainer-shadow; div { margin: 0; diff --git a/packages/ketcher-react/src/style/variables.less b/packages/ketcher-react/src/style/variables.less index dbb3dd9286..c342c743ab 100644 --- a/packages/ketcher-react/src/style/variables.less +++ b/packages/ketcher-react/src/style/variables.less @@ -30,7 +30,9 @@ Arial, sans-serif; //Modal margin @margin-top-bottom: 12px; -@margin-left-right: 12px; +@margin-left-right: 15px; + +@padding-modal: 12px; @color-gray: #DDDDDD; @@ -87,6 +89,10 @@ Arial, sans-serif; @color-border-hover: #DDDDDD; @color-border-main: #005662; +// Shadows +@color-dropcontainer-shadow: rgba(103, 104, 132, 0.18); +@color-open-window-shadow: rgba(103, 104, 132, 0.25); + // Dropdown @color-dropdown-hover: #DDDDDD; From 88430cc7b187e783c334f5a4fef04bac333e3100 Mon Sep 17 00:00:00 2001 From: ViktorMakarov-EPAM Date: Mon, 11 Apr 2022 15:29:15 +0300 Subject: [PATCH 6/8] set grayscale and opacity on disabled item image --- .../components/document/Open/components/FileDrop.module.less | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.module.less index b1419824b0..ff7013b563 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.module.less @@ -22,4 +22,9 @@ .isDisabled { cursor: auto; + + svg { + filter: grayscale(1); + opacity: '60%'; + } } From 252661b85e94a8ad788fed43f8ebe920da6dbc85 Mon Sep 17 00:00:00 2001 From: ViktorMakarov-EPAM Date: Mon, 11 Apr 2022 15:44:00 +0300 Subject: [PATCH 7/8] chenge validation, change disabled message --- packages/ketcher-react/src/script/ui/action/server.js | 4 +--- .../modal/components/document/Open/components/OpenOptions.tsx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/ketcher-react/src/script/ui/action/server.js b/packages/ketcher-react/src/script/ui/action/server.js index 4836c6e743..a7d444c670 100644 --- a/packages/ketcher-react/src/script/ui/action/server.js +++ b/packages/ketcher-react/src/script/ui/action/server.js @@ -78,9 +78,7 @@ const config = { action: { dialog: 'recognize' }, disabled: (editor, server, options) => // TODO: provide the list of disabled functions as array - !options.app.server || - global.ketcher.standalone || - !options.app.imagoVersions, + !options.app.server || !options.app.imagoVersions?.length > 0, hidden: (options) => isHidden(options, 'recognize') }, miew: { diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.tsx index 160afba412..9875c1f57a 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.tsx +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/OpenOptions.tsx @@ -66,7 +66,7 @@ export const OpenOptions: FC = ({ errorHandler( From e3a27ed9d73280ae485a586ace44730a711f9829 Mon Sep 17 00:00:00 2001 From: ViktorMakarov-EPAM Date: Mon, 11 Apr 2022 15:49:25 +0300 Subject: [PATCH 8/8] fix opacity style --- .../components/document/Open/components/FileDrop.module.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.module.less b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.module.less index ff7013b563..de1d67be07 100644 --- a/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.module.less +++ b/packages/ketcher-react/src/script/ui/views/modal/components/document/Open/components/FileDrop.module.less @@ -25,6 +25,6 @@ svg { filter: grayscale(1); - opacity: '60%'; + opacity: 0.6; } }