diff --git a/redisinsight/ui/src/components/query/DedicatedEditor/DedicatedEditor.tsx b/redisinsight/ui/src/components/query/DedicatedEditor/DedicatedEditor.tsx index f683acbf4b..090055a924 100644 --- a/redisinsight/ui/src/components/query/DedicatedEditor/DedicatedEditor.tsx +++ b/redisinsight/ui/src/components/query/DedicatedEditor/DedicatedEditor.tsx @@ -34,9 +34,14 @@ export interface Props { onSubmit: (query?: string) => void onCancel: () => void onKeyDown?: (e: React.KeyboardEvent, script: string) => void - width: number + height: number + initialHeight: number } +// paddings of main editor +const WRAPPER_PADDINGS_HEIGHT = 18 +const BOTTOM_INDENT_PADDING = 6 + const langs: MonacoSyntaxLang = { [DSL.cypher]: { name: DSLNaming[DSL.cypher], @@ -50,12 +55,13 @@ let decorations: string[] = [] const notCommandRegEx = /^\s|\/\// const DedicatedEditor = (props: Props) => { - const { width, query = '', lang, onCancel, onSubmit } = props + const { height, initialHeight, query = '', lang, onCancel, onSubmit } = props const selectedLang = langs[lang] let contribution: Nullable = null const [value, setValue] = useState(query) const monacoObjects = useRef>(null) + const rndRef = useRef>(null) let disposeCompletionItemProvider = () => {} useEffect(() => @@ -66,6 +72,16 @@ const DedicatedEditor = (props: Props) => { }, []) + useEffect(() => { + if (height === 0) return + + const rndHeight = rndRef?.current.resizableElement.current.offsetHeight || 0 + const rndTop = rndRef?.current.draggable.state.y + if (height < rndTop + rndHeight + WRAPPER_PADDINGS_HEIGHT) { + rndRef?.current.updatePosition({ x: 0, y: height - rndHeight - WRAPPER_PADDINGS_HEIGHT }) + } + }, [height]) + useEffect(() => { if (!monacoObjects.current) return const commands = value.split('\n') @@ -182,14 +198,28 @@ const DedicatedEditor = (props: Props) => { return (
diff --git a/redisinsight/ui/src/components/query/DedicatedEditor/styles.module.scss b/redisinsight/ui/src/components/query/DedicatedEditor/styles.module.scss index 1b45128b05..202d6a4383 100644 --- a/redisinsight/ui/src/components/query/DedicatedEditor/styles.module.scss +++ b/redisinsight/ui/src/components/query/DedicatedEditor/styles.module.scss @@ -1,5 +1,5 @@ .rnd { - position: fixed !important; + width: 100% !important; z-index: 100; } .container { diff --git a/redisinsight/ui/src/components/query/Query/Query.tsx b/redisinsight/ui/src/components/query/Query/Query.tsx index e7dcbcda1a..0cf45f1fa4 100644 --- a/redisinsight/ui/src/components/query/Query/Query.tsx +++ b/redisinsight/ui/src/components/query/Query/Query.tsx @@ -1,4 +1,5 @@ import React, { useContext, useEffect, useRef, useState } from 'react' +import AutoSizer from 'react-virtualized-auto-sizer' import { useSelector } from 'react-redux' import { compact, findIndex } from 'lodash' import cx from 'classnames' @@ -416,8 +417,13 @@ const Query = (props: Props) => { } return ( - <> -
+
+
{
{isDedicatedEditorOpen && ( - + + {({ height }) => ( +
+ +
+ )} +
)} - +
) } diff --git a/redisinsight/ui/src/components/query/Query/styles.module.scss b/redisinsight/ui/src/components/query/Query/styles.module.scss index 5e71f0714a..859c342684 100644 --- a/redisinsight/ui/src/components/query/Query/styles.module.scss +++ b/redisinsight/ui/src/components/query/Query/styles.module.scss @@ -1,3 +1,16 @@ +:global { + .editorBounder { + position: absolute; + top: 12px; + bottom: 6px; + left: 18px; + right: 46px; + } +} +.wrapper { + position: relative; + height: 100%; +} .container { display: flex; padding: 8px 0 8px 16px; @@ -11,6 +24,10 @@ border: 1px solid var(--euiColorLightShade); } +.disabled { + opacity: 0.8; +} + .containerPlaceholder { display: flex; padding: 8px 16px 8px 16px; diff --git a/redisinsight/ui/src/styles/base/_monaco.scss b/redisinsight/ui/src/styles/base/_monaco.scss index b47a024891..8996e72b74 100644 --- a/redisinsight/ui/src/styles/base/_monaco.scss +++ b/redisinsight/ui/src/styles/base/_monaco.scss @@ -58,6 +58,11 @@ font-size: 12px; cursor: pointer; + &:hover { + background: var(--hoverInListColorDarken); + border-color: var(--hoverInListColorLight); + } + &__title { color: var(--euiTextSubduedColor); }