Convert to button, move to the border

elastic · Aug 4, 2022 · 8a0a47c · 8a0a47c
1 parent d1fb8c0
commit 8a0a47c
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 23 deletions.
diff --git a/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/index.tsx b/src/plugins/unified_search/public/query_string_input/text_based_languages_editor/index.tsx
@@ -150,14 +150,12 @@ export const TextBasedLanguagesEditor = memo(function TextBasedLanguagesEditor({
   const onKeyDownResizeHandler = useCallback(
     (keyDownEvent) => {
       let height = editorHeight;
-      if (keyDownEvent.keyCode === KEYCODE_ARROW_UP) {
-        height = height - 1;
-        const validatedHeight = Math.min(Math.max(height, EDITOR_MIN_HEIGHT), EDITOR_MAX_HEIGHT);
-        setEditorHeight(validatedHeight);
-      }
-
-      if (keyDownEvent.keyCode === KEYCODE_ARROW_DOWN) {
-        height = height + 1;
+      if (
+        keyDownEvent.keyCode === KEYCODE_ARROW_UP ||
+        keyDownEvent.keyCode === KEYCODE_ARROW_DOWN
+      ) {
+        const step = keyDownEvent.keyCode === KEYCODE_ARROW_UP ? -10 : 10;
+        height = height + step;
         const validatedHeight = Math.min(Math.max(height, EDITOR_MIN_HEIGHT), EDITOR_MAX_HEIGHT);
         setEditorHeight(validatedHeight);
       }

diff --git a/...nified_search/public/query_string_input/text_based_languages_editor/resizable_button.scss b/...nified_search/public/query_string_input/text_based_languages_editor/resizable_button.scss
@@ -1,6 +1,12 @@
 
+.unifiedTextLangEditor--resizableButtonWrapper {
+  position: relative;
+}
+
 .unifiedTextLangEditor--resizableButtonContainer {
-  text-align: center;
+  position: absolute;
+  width: 100%;
+  top: $euiSizeS;
 }
 
 .unifiedTextLangEditor--resizableButton {
@@ -35,7 +41,7 @@
   }
 
   &:after {
-    transform: translate(-50%, 1px);
+    transform: translate(-50%, 2px);
   }
 
   //Lighten the "grab" icon on :hover

diff --git a/...unified_search/public/query_string_input/text_based_languages_editor/resizable_button.tsx b/...unified_search/public/query_string_input/text_based_languages_editor/resizable_button.tsx
@@ -7,29 +7,38 @@
  */
 
 import React from 'react';
+import { EuiFlexGroup } from '@elastic/eui';
 
 import './resizable_button.scss';
 
 export function ResizableButton({
   onMouseDownResizeHandler,
   onKeyDownResizeHandler,
 }: {
-  onMouseDownResizeHandler: (mouseDownEvent: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+  onMouseDownResizeHandler: (
+    mouseDownEvent: React.MouseEvent<HTMLButtonElement, MouseEvent>
+  ) => void;
   onKeyDownResizeHandler: (keyDownEvernt: React.KeyboardEvent) => void;
 }) {
-  const setFocus = (e: React.MouseEvent<HTMLDivElement>) => e.currentTarget.focus();
+  const setFocus = (e: React.MouseEvent<HTMLButtonElement>) => e.currentTarget.focus();
 
   return (
-    // <div className="unifiedTextLangEditor--resizableButtonContainer">
-    <div
-      data-test-subj="unifiedTextLangEditor-resize"
-      tabIndex={-1}
-      className="unifiedTextLangEditor--resizableButton"
-      onMouseDown={onMouseDownResizeHandler}
-      onKeyDown={onKeyDownResizeHandler}
-      onClick={setFocus}
-      aria-hidden="true"
-    />
-    // </div>
+    <div className="unifiedTextLangEditor--resizableButtonWrapper">
+      <EuiFlexGroup
+        direction="column"
+        gutterSize="none"
+        className="unifiedTextLangEditor--resizableButtonContainer"
+      >
+        <button
+          data-test-subj="unifiedTextLangEditor-resize"
+          tabIndex={-1}
+          className="unifiedTextLangEditor--resizableButton"
+          onMouseDown={onMouseDownResizeHandler}
+          onKeyDown={onKeyDownResizeHandler}
+          onClick={setFocus}
+          aria-hidden="true"
+        />
+      </EuiFlexGroup>
+    </div>
   );
 }