refactor: enhance styling of StepInput

KaiVolland · Jun 19, 2024 · e84536a · e84536a
1 parent ff20dad
commit e84536a
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 10 deletions.
diff --git a/src/Component/FunctionUI/FunctionUI.tsx b/src/Component/FunctionUI/FunctionUI.tsx
@@ -42,7 +42,7 @@ import BooleanExpressionInput from '../ExpressionInput/BooleanExpressionInput/Bo
 import { FunctionConfig, functionConfigs } from './functionConfigs';
 import CaseInput from './CaseInput/CaseInput';
 import UnknownInput from './UnknownInput/UnknownInput';
-import StepInput from './SetpInput/StepInput';
+import StepInput from './StepInput/StepInput';
 
 type Type = 'string' | 'number' | 'boolean' | 'unknown';
 
@@ -118,12 +118,16 @@ export const FunctionUI = <T extends GeoStylerFunction>({
       );
     }
     if (cfg.type === 'unknown') {
-      return <UnknownInput
-        value={functionArgs?.[index]}
-        onChange={(val) => {
-          updateFunctionArg(val, index);
-        }}
-      />;
+      return (
+        <div className='gs-function-arg' key={`${key}${index}`}>
+          <i className='tree-icon' /><UnknownInput
+            value={functionArgs?.[index]}
+            onChange={(val) => {
+              updateFunctionArg(val, index);
+            }}
+          />
+        </div>
+      );
     }
 
     if (isGeoStylerFunction(functionArgs?.[index])) {

diff --git a/src/Component/FunctionUI/SetpInput/StepInput.less b/src/Component/FunctionUI/SetpInput/StepInput.less
diff --git a/src/Component/FunctionUI/StepInput/StepInput.less b/src/Component/FunctionUI/StepInput/StepInput.less
@@ -0,0 +1,7 @@
+.gs-step-input {
+  display: flex;
+
+  .number-expression-input {
+    flex: 1;
+  }
+}
diff --git a/...ponent/FunctionUI/SetpInput/StepInput.tsx → ...ponent/FunctionUI/StepInput/StepInput.tsx b/...ponent/FunctionUI/SetpInput/StepInput.tsx → ...ponent/FunctionUI/StepInput/StepInput.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback } from 'react';
 import { Expression, FStepParameter } from 'geostyler-style';
-import { Input } from 'antd';
 import './StepInput.less';
 import NumberExpressionInput from '../../ExpressionInput/NumberExpressionInput/NumberExpressionInput';
+import UnknownInput from '../UnknownInput/UnknownInput';
 
 export type StepInputProps = {
   value?: FStepParameter;
@@ -29,13 +29,13 @@ export const StepInput: React.FC<StepInputProps> = ({
   }, [value, onChange]);
 
   return (
-    <div className="gs-boundary-input">
+    <div className="gs-step-input">
       <NumberExpressionInput
         onChange={onBoundaryChante}
         onCancel={() => onChange(undefined)}
         value={value?.boundary}
       />
-      <Input
+      <UnknownInput
         onChange={onValueChange}
         value={value?.value as any}
       />