feat: highlight drop in folder

sarike · sunlei · commit 316e098dd2f9 · 2023-03-23T05:16:42.000Z
(cherry picked from commit 119f570a8602c984da20330acb6a1a504ee6a722)
diff --git a/client/packages/openblocks-design/src/components/edit.tsx b/client/packages/openblocks-design/src/components/edit.tsx
@@ -131,7 +131,10 @@ export const EditText = (props: EditTextProps) => {
             {props.text}
           </TextWrapper>
           <EditIcon
-            onClick={() => !props.disabled && setEditing(true)}
+            onClick={(e) => {
+              e.stopPropagation();
+              !props.disabled && setEditing(true);
+            }}
             className={"taco-edit-text-icon"}
           />
         </EditTextWrapper>
diff --git a/client/packages/openblocks/src/components/DraggableTree/DraggableItem.tsx b/client/packages/openblocks/src/components/DraggableTree/DraggableItem.tsx
@@ -4,6 +4,7 @@ import styled from "styled-components";
 import { DraggableTreeContext } from "./DraggableTreeContext";
 
 const Wrapper = styled.div<{
+  showPositionLine: boolean;
   dragging: boolean;
   isOver: boolean;
   dropInAsSub: boolean;
@@ -27,7 +28,9 @@ const Wrapper = styled.div<{
   &::before {
     content: "";
     display: ${(props) =>
-      (props.showPositionLineDot ?? false) && props.isOver ? "block" : "none"};
+      (props.showPositionLineDot ?? false) && props.isOver && props.showPositionLine
+        ? "block"
+        : "none"};
     position: absolute;
     background-color: #315efb;
     height: ${(props) => props.positionLineDotDiameter}px;
@@ -43,7 +46,7 @@ const Wrapper = styled.div<{
 
   &::after {
     content: "";
-    display: ${(props) => (props.isOver ? "block" : "none")};
+    display: ${(props) => (props.isOver && props.showPositionLine ? "block" : "none")};
     height: ${(props) => props.positionLineHeight ?? 4}px;
     border-radius: 4px;
     position: absolute;
@@ -76,8 +79,10 @@ function DraggableItem(props: IProps, ref: Ref<HTMLDivElement>) {
   } = props;
   const context = useContext(DraggableTreeContext);
   const positionLineIndent = context.positionLineIndent?.(path, dropInAsSub);
+  const showPositionLine = (context.showDropInPositionLine ?? true) || !dropInAsSub;
   return (
     <Wrapper
+      showPositionLine={showPositionLine}
       positionLineIndent={positionLineIndent}
       positionLineDotDiameter={context.positionLineDotDiameter}
       showPositionLineDot={context.showPositionLineDot}
diff --git a/client/packages/openblocks/src/components/DraggableTree/DraggableTreeContext.tsx b/client/packages/openblocks/src/components/DraggableTree/DraggableTreeContext.tsx
@@ -8,6 +8,7 @@ export interface DraggableTreeContextValue {
   showPositionLineDot?: boolean;
   positionLineDotDiameter?: number;
   showSubInDragOverlay?: boolean;
+  showDropInPositionLine?: boolean;
   positionLineIndent?(path: number[], dropInAsSub: boolean): number;
 
   toggleFold(id: string): void;
diff --git a/client/packages/openblocks/src/pages/editor/bottom/BottomSidebar.tsx b/client/packages/openblocks/src/pages/editor/bottom/BottomSidebar.tsx
@@ -24,7 +24,7 @@ import {
   DraggableTreeNodeItemRenderProps,
 } from "components/DraggableTree/types";
 import RefTreeComp from "comps/comps/refTreeComp";
-import { ActiveTextColor, NormalMenuIconColor } from "constants/style";
+import { ActiveTextColor, BorderActiveColor, NormalMenuIconColor } from "constants/style";
 
 const Contain = styled.div`
   flex-grow: 1;
@@ -269,6 +269,7 @@ export function BottomSidebar(props: BottomSidebarProps) {
               disable={!!search}
               unfoldAll={!!search}
               showSubInDragOverlay={false}
+              showDropInPositionLine={false}
               showPositionLineDot
               positionLineDotDiameter={4}
               positionLineHeight={1}
@@ -316,20 +317,28 @@ export function BottomSidebar(props: BottomSidebarProps) {
   );
 }
 
-const ColumnDiv = styled.div<{
+const HighlightBorder = styled.div<{ active: boolean; foldable: boolean; level: number }>`
+  flex: 1;
+  display: flex;
+  padding-left: ${(props) => props.level * 20 + (props.foldable ? 0 : 14)}px;
+  border-radius: 4px;
+  border: 1px solid ${(props) => (props.active ? BorderActiveColor : "transparent")};
+  align-items: center;
+  justify-content: center;
+`;
+
+interface ColumnDivProps {
   $color?: boolean;
-  level: number;
-  foldable: boolean;
   isOverlay: boolean;
-}>`
+}
+
+const ColumnDiv = styled.div<ColumnDivProps>`
   width: 100%;
   height: 25px;
   display: flex;
   user-select: none;
-  align-items: center;
-  justify-content: center;
-  padding: 0 15px 0 2px;
-  padding-left: ${(props) => 2 + props.level * 20 + (props.foldable ? 0 : 14)}px;
+  padding-left: 2px;
+  padding-right: 15px;
   /* background-color: #ffffff; */
   /* margin: 2px 0; */
   background-color: ${(props) => (props.isOverlay ? "rgba(255, 255, 255, 0.11)" : "")};
@@ -403,8 +412,18 @@ interface BottomSidebarItemProps extends DraggableTreeNodeItemRenderProps {
 }
 
 function BottomSidebarItem(props: BottomSidebarItemProps) {
-  const { id, resComp, isOverlay, path, isFolded, onDelete, onCopy, onSelect, onToggleFold } =
-    props;
+  const {
+    id,
+    resComp,
+    isOver,
+    isOverlay,
+    path,
+    isFolded,
+    onDelete,
+    onCopy,
+    onSelect,
+    onToggleFold,
+  } = props;
   const [error, setError] = useState<string | undefined>(undefined);
   const [editing, setEditing] = useState(false);
   const editorState = useContext(EditorContext);
@@ -451,36 +470,32 @@ function BottomSidebarItem(props: BottomSidebarItemProps) {
   };
 
   return (
-    <ColumnDiv
-      level={level}
-      foldable={isFolder}
-      onClick={handleClickItem}
-      $color={isSelected}
-      isOverlay={isOverlay}
-    >
-      {isFolder && <FoldIconBtn>{!isFolded ? <FoldedIcon /> : <UnfoldIcon />}</FoldIconBtn>}
-      {icon}
-      <div style={{ flexGrow: 1, marginRight: "8px", width: "calc(100% - 62px)" }}>
-        <EditText
-          text={name}
-          forceClickIcon={isFolder}
-          disabled={!isSelected || readOnly || isOverlay}
-          onFinish={handleFinishRename}
-          onChange={handleNameChange}
-          onEditStateChange={(editing) => setEditing(editing)}
-        />
-        <PopupCard
-          editorFocus={!!error && editing}
-          title={error ? trans("error") : ""}
-          content={error}
-          hasError={!!error}
-        />
-      </div>
-      {!readOnly && !isOverlay && (
-        <EditPopover copy={!isFolder ? onCopy : undefined} del={onDelete}>
-          <Icon tabIndex={-1} />
-        </EditPopover>
-      )}
+    <ColumnDiv onClick={handleClickItem} $color={isSelected} isOverlay={isOverlay}>
+      <HighlightBorder active={isOver && isFolder} level={level} foldable={isFolder}>
+        {isFolder && <FoldIconBtn>{!isFolded ? <FoldedIcon /> : <UnfoldIcon />}</FoldIconBtn>}
+        {icon}
+        <div style={{ flexGrow: 1, marginRight: "8px", width: "calc(100% - 62px)" }}>
+          <EditText
+            text={name}
+            forceClickIcon={isFolder}
+            disabled={!isSelected || readOnly || isOverlay}
+            onFinish={handleFinishRename}
+            onChange={handleNameChange}
+            onEditStateChange={(editing) => setEditing(editing)}
+          />
+          <PopupCard
+            editorFocus={!!error && editing}
+            title={error ? trans("error") : ""}
+            content={error}
+            hasError={!!error}
+          />
+        </div>
+        {!readOnly && !isOverlay && (
+          <EditPopover copy={!isFolder ? onCopy : undefined} del={onDelete}>
+            <Icon tabIndex={-1} />
+          </EditPopover>
+        )}
+      </HighlightBorder>
     </ColumnDiv>
   );
 }
