From d02b0b412112199d00a0d962fd55151f87cf551b Mon Sep 17 00:00:00 2001 From: Anastasiia Moskvina <77681522+AnaMoskvina@users.noreply.github.com> Date: Wed, 1 Dec 2021 11:49:37 +0300 Subject: [PATCH 1/2] #1021 redesign the floating windows - functional groups window (#1035) * redesign: TemplateTable grid, EmptySearchResult * rename not-found icon according to convention * move all TemplateTable styles into TemplateTable.module.less Co-authored-by: Anastasiia Moskvina --- packages/ketcher-react/src/Editor.module.less | 3 +-- .../ketcher-react/src/icons/files/not-found.svg | 5 +++++ packages/ketcher-react/src/icons/index.tsx | 4 +++- .../script/ui/dialog/template/EmptySearchResult.tsx | 8 +++++++- .../ui/dialog/template/TemplateTable.module.less | 13 +++++++++---- .../src/script/ui/dialog/template/TemplateTable.tsx | 8 +------- .../dialog/template/emptySearchResult.module.less | 1 + 7 files changed, 27 insertions(+), 15 deletions(-) create mode 100644 packages/ketcher-react/src/icons/files/not-found.svg diff --git a/packages/ketcher-react/src/Editor.module.less b/packages/ketcher-react/src/Editor.module.less index c636b88c57..8831c744b3 100644 --- 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 new file mode 100644 index 0000000000..154059feb0 --- /dev/null +++ b/packages/ketcher-react/src/icons/files/not-found.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/ketcher-react/src/icons/index.tsx b/packages/ketcher-react/src/icons/index.tsx index d711882392..99bc921382 100644 --- 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' @@ -215,7 +216,8 @@ const icons = { 'shape-ellipse': ShapeEllipseIcon, 'shape-rectangle': ShapeRectangleIcon, 'shape-polyline': ShapePolylineIcon, - 'shape-line': ShapeLineIcon + 'shape-line': ShapeLineIcon, + 'not-found': NotFoundIcon } function emptyIcon() { diff --git a/packages/ketcher-react/src/script/ui/dialog/template/EmptySearchResult.tsx b/packages/ketcher-react/src/script/ui/dialog/template/EmptySearchResult.tsx index 28dcdc1e86..56dbb06263 100644 --- 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
{textInfo}
+ return ( +
+

{textInfo}

+ +
+ ) } 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 index f90314636e..d5fca2d6a3 100644 --- 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 index e72dbbeb87..dbbed9a801 100644 --- 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 = 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 ? ( ) : ( -
+
{templates.map((tmpl, i) => { return ( @@ -91,7 +86,6 @@ const TemplateTable: FC = props => { ? `${tmpl.struct.name}_${i}` : `${tmpl.struct.name}_${i}_selected` } - style={tmplStyles} > Date: Wed, 1 Dec 2021 11:51:18 +0300 Subject: [PATCH 2/2] #953 redesign the floating windows r groups (#1046) * change styles * change styles for rgroupLogic, add variables Co-authored-by: Anastasiia Moskvina --- .../script/ui/component/form/form/form.jsx | 4 +- .../dialog/toolbox/rgroup/rgroup.module.less | 39 +++++++------------ .../RgroupLogic/RgroupLogic.module.less | 15 ++++--- .../toolbox/RgroupLogic/RgroupLogic.tsx | 4 +- .../ketcher-react/src/style/variables.less | 7 ++++ 5 files changed, 34 insertions(+), 35 deletions(-) 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 index ba6cbca240..d28c91d11d 100644 --- 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 (