Merge pull request #89 from dbeaver/feat-data-filter

chore(data-viewer-plugin): change filter style

webapp/packages/core/src/app/shared/InlineEditor/InlineEditor.tsx

@@ -20,22 +20,28 @@ import { useStyles } from '@dbeaver/core/theming';
 import { EditorDialog } from './EditorDialog';
 import { InlineEditorStyles } from './styles';
 
-export type InlineEditorControls = 'right' | 'top' | 'bottom'
+export type InlineEditorControls = 'right' | 'top' | 'bottom' | 'inside'
 
 export type InlineEditorProps = {
   value: string;
+  placeholder?: string;
   controlsPosition?: InlineEditorControls;
+  simple?: boolean;
   onChange(value: string): void;
   onSave(): void;
   onReject(): void;
+  className?: string;
 }
 
 export const InlineEditor = observer(function InlineEditor({
   value,
+  placeholder,
   controlsPosition = 'right',
+  simple,
   onChange,
   onSave,
   onReject,
+  className,
 }: InlineEditorProps) {
   const commonDialogService = useService(CommonDialogService);
 
@@ -66,14 +72,21 @@ export const InlineEditor = observer(function InlineEditor({
   }, []);
 
   return styled(useStyles(InlineEditorStyles))(
-    <editor as="div">
+    <editor as="div" className={className}>
       <editor-container as="div">
-        <input type="text" value={value} onChange={handleChange} onKeyDown={handleKeyDown} ref={inputRef}/>
+        <input
+          type="text"
+          value={value}
+          onChange={handleChange}
+          onKeyDown={handleKeyDown}
+          ref={inputRef}
+          placeholder={placeholder}
+        />
       </editor-container>
       <editor-actions as="div" {...use({ position: controlsPosition })}>
         <editor-action as="div" onClick={onSave}><Icon name="apply" viewBox="0 0 12 10" /></editor-action>
         <editor-action as="div" onClick={onReject}><Icon name="reject" viewBox="0 0 11 11" /></editor-action>
-        <editor-action as="div" onClick={handlePopup}><Icon name="edit" viewBox="0 0 13 13" /></editor-action>
+        {!simple && <editor-action as="div" onClick={handlePopup}><Icon name="edit" viewBox="0 0 13 13" /></editor-action>}
       </editor-actions>
     </editor>
   );

webapp/packages/core/src/app/shared/InlineEditor/styles.ts

@@ -28,6 +28,7 @@ export const InlineEditorStyles = composes(
   editor {
     position: relative;
     box-sizing: border-box;
+    display: flex;
     width: 100%;
     height: 100%;
     border: solid 1px #01cca3;
@@ -36,6 +37,7 @@ export const InlineEditorStyles = composes(
   editor-container {
     position: relative;
     height: 100%;
+    flex: 1;
 
     & input {
       color: inherit;
@@ -66,6 +68,14 @@ export const InlineEditorStyles = composes(
     border-bottom-color: #01cca3 !important;
   }
 
+  editor-actions[|position=inside] {
+    position: relative;
+    flex: 0 0 auto;
+    bottom: auto;
+    left: auto;
+    border-right: none !important;
+  }
+
   editor-actions[|position=bottom],
   editor-actions[|position=top] {
     right: -1px;

webapp/packages/data-viewer-plugin/src/TableViewer/TableHeader/TableWhereFilter.tsx

@@ -10,6 +10,7 @@ import { observer } from 'mobx-react';
 import { useCallback } from 'react';
 import styled, { css } from 'reshadow';
 
+import { InlineEditor } from '@dbeaver/core/app';
 import { InputField, IconButton, SubmittingForm } from '@dbeaver/core/blocks';
 import { useTranslate } from '@dbeaver/core/localization';
 import { composes, useStyles } from '@dbeaver/core/theming';
@@ -18,8 +19,8 @@ import { TableViewerModel } from '../TableViewerModel';
 
 const styles = composes(
   css`
-    IconButton {
-      composes: theme-text-primary theme-ripple from global;
+    InlineEditor {
+      composes: theme-background-surface theme-text-on-surface from global;
     }
   `,
   css`
@@ -29,15 +30,10 @@ const styles = composes(
       display: flex;
       align-items: center;
     }
-    InputField {
+    InlineEditor {
       flex: 1;
-    }
-    IconButton {
-      margin-right: 14px;
-      position: relative;
       height: 24px;
-      width: 24px;
-      display: block;
+      margin: 0 12px;
     }
   `
 );
@@ -64,16 +60,15 @@ export const TableWhereFilter = observer(function TableWhereFilter({
 
   return styled(useStyles(styles))(
     <SubmittingForm onSubmit={() => context.applyQueryFilters()}>
-      <InputField
-        type='text'
-        name='whereFilter'
-        placeholder={translate('table_header_sql_expression')}
+      <InlineEditor
         value={context.getQueryWhereFilter() || ''}
+        onSave={() => context.applyQueryFilters()}
+        onReject={resetFilter}
         onChange={handleChange}
-        mod='surface'
+        placeholder={translate('table_header_sql_expression')}
+        controlsPosition='inside'
+        simple
       />
-      <IconButton name='apply' viewBox='' onClick={() => context.applyQueryFilters()}/>
-      <IconButton name='reject' viewBox='' onClick={resetFilter}/>
     </SubmittingForm>
   );
 });