Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit316e098

Browse files
sarikesunlei
authored and
sunlei
committed
feat: highlight drop in folder
(cherry picked from commit 119f570a8602c984da20330acb6a1a504ee6a722)
1 parentd80b7b9 commit316e098

File tree

4 files changed

+68
-44
lines changed

4 files changed

+68
-44
lines changed

‎client/packages/openblocks-design/src/components/edit.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,10 @@ export const EditText = (props: EditTextProps) => {
131131
{props.text}
132132
</TextWrapper>
133133
<EditIcon
134-
onClick={()=>!props.disabled&&setEditing(true)}
134+
onClick={(e)=>{
135+
e.stopPropagation();
136+
!props.disabled&&setEditing(true);
137+
}}
135138
className={"taco-edit-text-icon"}
136139
/>
137140
</EditTextWrapper>

‎client/packages/openblocks/src/components/DraggableTree/DraggableItem.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import styled from "styled-components";
44
import{DraggableTreeContext}from"./DraggableTreeContext";
55

66
constWrapper=styled.div<{
7+
showPositionLine:boolean;
78
dragging:boolean;
89
isOver:boolean;
910
dropInAsSub:boolean;
@@ -27,7 +28,9 @@ const Wrapper = styled.div<{
2728
&::before {
2829
content: "";
2930
display:${(props)=>
30-
(props.showPositionLineDot??false)&&props.isOver ?"block" :"none"};
31+
(props.showPositionLineDot??false)&&props.isOver&&props.showPositionLine
32+
?"block"
33+
:"none"};
3134
position: absolute;
3235
background-color: #315efb;
3336
height:${(props)=>props.positionLineDotDiameter}px;
@@ -43,7 +46,7 @@ const Wrapper = styled.div<{
4346
4447
&::after {
4548
content: "";
46-
display:${(props)=>(props.isOver ?"block" :"none")};
49+
display:${(props)=>(props.isOver&&props.showPositionLine?"block" :"none")};
4750
height:${(props)=>props.positionLineHeight??4}px;
4851
border-radius: 4px;
4952
position: absolute;
@@ -76,8 +79,10 @@ function DraggableItem(props: IProps, ref: Ref<HTMLDivElement>) {
7679
}=props;
7780
constcontext=useContext(DraggableTreeContext);
7881
constpositionLineIndent=context.positionLineIndent?.(path,dropInAsSub);
82+
constshowPositionLine=(context.showDropInPositionLine??true)||!dropInAsSub;
7983
return(
8084
<Wrapper
85+
showPositionLine={showPositionLine}
8186
positionLineIndent={positionLineIndent}
8287
positionLineDotDiameter={context.positionLineDotDiameter}
8388
showPositionLineDot={context.showPositionLineDot}

‎client/packages/openblocks/src/components/DraggableTree/DraggableTreeContext.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ export interface DraggableTreeContextValue {
88
showPositionLineDot?:boolean;
99
positionLineDotDiameter?:number;
1010
showSubInDragOverlay?:boolean;
11+
showDropInPositionLine?:boolean;
1112
positionLineIndent?(path:number[],dropInAsSub:boolean):number;
1213

1314
toggleFold(id:string):void;

‎client/packages/openblocks/src/pages/editor/bottom/BottomSidebar.tsx‎

Lines changed: 56 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import {
2424
DraggableTreeNodeItemRenderProps,
2525
}from"components/DraggableTree/types";
2626
importRefTreeCompfrom"comps/comps/refTreeComp";
27-
import{ActiveTextColor,NormalMenuIconColor}from"constants/style";
27+
import{ActiveTextColor,BorderActiveColor,NormalMenuIconColor}from"constants/style";
2828

2929
constContain=styled.div`
3030
flex-grow: 1;
@@ -269,6 +269,7 @@ export function BottomSidebar(props: BottomSidebarProps) {
269269
disable={!!search}
270270
unfoldAll={!!search}
271271
showSubInDragOverlay={false}
272+
showDropInPositionLine={false}
272273
showPositionLineDot
273274
positionLineDotDiameter={4}
274275
positionLineHeight={1}
@@ -316,20 +317,28 @@ export function BottomSidebar(props: BottomSidebarProps) {
316317
);
317318
}
318319

319-
constColumnDiv=styled.div<{
320+
constHighlightBorder=styled.div<{active:boolean;foldable:boolean;level:number}>`
321+
flex: 1;
322+
display: flex;
323+
padding-left:${(props)=>props.level*20+(props.foldable ?0 :14)}px;
324+
border-radius: 4px;
325+
border: 1px solid${(props)=>(props.active ?BorderActiveColor :"transparent")};
326+
align-items: center;
327+
justify-content: center;
328+
`;
329+
330+
interfaceColumnDivProps{
320331
$color?:boolean;
321-
level:number;
322-
foldable:boolean;
323332
isOverlay:boolean;
324-
}>`
333+
}
334+
335+
constColumnDiv=styled.div<ColumnDivProps>`
325336
width: 100%;
326337
height: 25px;
327338
display: flex;
328339
user-select: none;
329-
align-items: center;
330-
justify-content: center;
331-
padding: 0 15px 0 2px;
332-
padding-left:${(props)=>2+props.level*20+(props.foldable ?0 :14)}px;
340+
padding-left: 2px;
341+
padding-right: 15px;
333342
/* background-color: #ffffff; */
334343
/* margin: 2px 0; */
335344
background-color:${(props)=>(props.isOverlay ?"rgba(255, 255, 255, 0.11)" :"")};
@@ -403,8 +412,18 @@ interface BottomSidebarItemProps extends DraggableTreeNodeItemRenderProps {
403412
}
404413

405414
functionBottomSidebarItem(props:BottomSidebarItemProps){
406-
const{ id, resComp, isOverlay, path, isFolded, onDelete, onCopy, onSelect, onToggleFold}=
407-
props;
415+
const{
416+
id,
417+
resComp,
418+
isOver,
419+
isOverlay,
420+
path,
421+
isFolded,
422+
onDelete,
423+
onCopy,
424+
onSelect,
425+
onToggleFold,
426+
}=props;
408427
const[error,setError]=useState<string|undefined>(undefined);
409428
const[editing,setEditing]=useState(false);
410429
consteditorState=useContext(EditorContext);
@@ -451,36 +470,32 @@ function BottomSidebarItem(props: BottomSidebarItemProps) {
451470
};
452471

453472
return(
454-
<ColumnDiv
455-
level={level}
456-
foldable={isFolder}
457-
onClick={handleClickItem}
458-
$color={isSelected}
459-
isOverlay={isOverlay}
460-
>
461-
{isFolder&&<FoldIconBtn>{!isFolded ?<FoldedIcon/> :<UnfoldIcon/>}</FoldIconBtn>}
462-
{icon}
463-
<divstyle={{flexGrow:1,marginRight:"8px",width:"calc(100% - 62px)"}}>
464-
<EditText
465-
text={name}
466-
forceClickIcon={isFolder}
467-
disabled={!isSelected||readOnly||isOverlay}
468-
onFinish={handleFinishRename}
469-
onChange={handleNameChange}
470-
onEditStateChange={(editing)=>setEditing(editing)}
471-
/>
472-
<PopupCard
473-
editorFocus={!!error&&editing}
474-
title={error ?trans("error") :""}
475-
content={error}
476-
hasError={!!error}
477-
/>
478-
</div>
479-
{!readOnly&&!isOverlay&&(
480-
<EditPopovercopy={!isFolder ?onCopy :undefined}del={onDelete}>
481-
<IcontabIndex={-1}/>
482-
</EditPopover>
483-
)}
473+
<ColumnDivonClick={handleClickItem}$color={isSelected}isOverlay={isOverlay}>
474+
<HighlightBorderactive={isOver&&isFolder}level={level}foldable={isFolder}>
475+
{isFolder&&<FoldIconBtn>{!isFolded ?<FoldedIcon/> :<UnfoldIcon/>}</FoldIconBtn>}
476+
{icon}
477+
<divstyle={{flexGrow:1,marginRight:"8px",width:"calc(100% - 62px)"}}>
478+
<EditText
479+
text={name}
480+
forceClickIcon={isFolder}
481+
disabled={!isSelected||readOnly||isOverlay}
482+
onFinish={handleFinishRename}
483+
onChange={handleNameChange}
484+
onEditStateChange={(editing)=>setEditing(editing)}
485+
/>
486+
<PopupCard
487+
editorFocus={!!error&&editing}
488+
title={error ?trans("error") :""}
489+
content={error}
490+
hasError={!!error}
491+
/>
492+
</div>
493+
{!readOnly&&!isOverlay&&(
494+
<EditPopovercopy={!isFolder ?onCopy :undefined}del={onDelete}>
495+
<IcontabIndex={-1}/>
496+
</EditPopover>
497+
)}
498+
</HighlightBorder>
484499
</ColumnDiv>
485500
);
486501
}

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp