Merge pull request #1476 from lowcoder-org/event_header_indicator

Add indicator to all headers in event popup

Author: FalkWolsky

client/packages/lowcoder-design/src/components/Trees.tsx

@@ -52,7 +52,7 @@ const BranchStyle = css`
     background-color: #d7d9e0;
   }
 `;
-export const BranchDiv = styled.div<{ $type?: "inline" | "switch" }>`
+export const BranchDiv = styled.div<{ $type?: "inline" | "switch" | "center" }>`
   position: relative;
   ${BranchStyle}
   ${(props) => {
@@ -81,6 +81,16 @@ export const BranchDiv = styled.div<{ $type?: "inline" | "switch" }>`
             bottom: 11px;
           }
         `;
+      case "center":
+        return css`
+          &::before {
+            top: calc(50% - 2px);
+          }
+
+          &::after {
+            top: 50%;
+          }
+        `;
       default:
         return css``;
     }

client/packages/lowcoder-design/src/components/keyValueList.tsx

@@ -4,6 +4,7 @@ import { TacoButton } from "./button";
 import { ReactNode } from "react";
 import { BluePlusIcon } from "icons";
 import { trans } from "i18n/design";
+import { BranchDiv } from "./Trees";
 
 const KeyValueListItem = styled.div`
   display: flex;
@@ -77,18 +78,23 @@ export const KeyValueList = (props: {
   onAdd: () => void;
   onDelete: (item: ReactNode, index: number) => void;
   isStatic?: boolean;
-}) => (
-  <>
+  indicatorForAll?: boolean;
+}) => {
+  let IndicatorWrapper = ({children}: any) => (<>{children}</>);
+  if(props.indicatorForAll) IndicatorWrapper = BranchDiv;
+  return <>
     {props.list.map((item, index) => (
-      <KeyValueListItem key={index /* FIXME: find a proper key instead of `index` */}>
-        {item}
-        {!props.isStatic &&
-          <DelIcon
-            onClick={() => props.list.length > 1 && props.onDelete(item, index)}
-            $forbidden={props.list.length === 1}
-          />
-        }
-      </KeyValueListItem>
+      <IndicatorWrapper $type={"inline"} key={index}>
+        <KeyValueListItem key={index /* FIXME: find a proper key instead of `index` */}>
+          {item}
+          {!props.isStatic &&
+            <DelIcon
+              onClick={() => props.list.length > 1 && props.onDelete(item, index)}
+              $forbidden={props.list.length === 1}
+            />
+          }
+        </KeyValueListItem>
+      </IndicatorWrapper>
     ))}
     {!props.isStatic && 
     <AddBtn onClick={props.onAdd}>
@@ -97,4 +103,4 @@ export const KeyValueList = (props: {
     </AddBtn>
     }
   </>
-);
+};

client/packages/lowcoder/src/comps/controls/actionSelector/executeQueryAction.tsx

@@ -61,6 +61,7 @@ const ExecuteQueryPropertyView = ({
       layout: "vertical",
       isStatic: true,
       keyFixed: true,
+      indicatorForAll: true,
     });
   }, [comp.children.queryVariables.getView()])
 
@@ -89,11 +90,9 @@ const ExecuteQueryPropertyView = ({
           )}
         </EditorContext.Consumer>
       </BranchDiv>
-      <BranchDiv>
-        <EditorContext.Consumer>
-          {(editorState) => getVariableOptions(editorState)}
-        </EditorContext.Consumer>
-      </BranchDiv>
+      <EditorContext.Consumer>
+        {(editorState) => getVariableOptions(editorState)}
+      </EditorContext.Consumer>
     </>
   );
 }

client/packages/lowcoder/src/comps/controls/keyValueControl.tsx

@@ -49,6 +49,7 @@ export type KeyValueControlParams = ControlParams & {
   valueFlexBasics?: number;
   isStatic?: boolean;
   keyFixed?: boolean;
+  indicatorForAll?: boolean;
 };
 
 /**
@@ -143,6 +144,7 @@ export function keyValueListControl<T extends OptionsType>(
             onAdd={() => this.dispatch(this.pushAction({}))}
             onDelete={(item, index) => this.dispatch(this.deleteAction(index))}
             isStatic={params.isStatic}
+            indicatorForAll={params.indicatorForAll}
           />
         </ControlPropertyViewWrapper>
       );