diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js index 8d61203e1..1bc809e79 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/StyledWrapper.js @@ -33,8 +33,7 @@ const Wrapper = styled.div` overflow: hidden; } - &:hover, - &.item-hovered { + &:hover { background: ${(props) => props.theme.sidebar.collection.item.hoverBg}; .menu-icon { .dropdown { @@ -45,6 +44,14 @@ const Wrapper = styled.div` } } + &.dnd-drag-over { + background: ${(props) => props.theme.sidebar.collection.item.hoverBg}; + } + + &.dnd-hl-drop-after { + border-bottom: ${(props) => props.theme.sidebar.collection.item.dndPlacementHighlightBorder}; + } + &.item-focused-in-tab { background: ${(props) => props.theme.sidebar.collection.item.bg}; diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js index a08fac3b7..3b393a2fb 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/index.js @@ -86,7 +86,10 @@ const CollectionItem = ({ item, collection, searchText }) => { const itemRowClassName = classnames('flex collection-item-name items-center', { 'item-focused-in-tab': item.uid == activeTabUid, - 'item-hovered': isOver + 'dnd-drag-over': isOver, + // Show drop-placement-highlight unless the dragged-item can be dropped into + // folder, i.e. if this item happens to be a folder. + 'dnd-hl-drop-after': isOver && item.type !== 'folder' }); const handleRun = async () => { diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js index 5c06cc42a..9b075b5dc 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/StyledWrapper.js @@ -12,15 +12,12 @@ const Wrapper = styled.div` transform: rotateZ(90deg); } - &.item-hovered { + &.dnd-drag-over { background: ${(props) => props.theme.sidebar.collection.item.hoverBg}; - .collection-actions { - .dropdown { - div[aria-expanded='false'] { - visibility: visible; - } - } - } + } + + &.dnd-hl-drop-before { + border-top: ${(props) => props.theme.sidebar.collection.item.dndPlacementHighlightBorder}; } .collection-actions { diff --git a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js index a18547406..96c0e6f7b 100644 --- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js +++ b/packages/bruno-app/src/components/Sidebar/Collections/Collection/index.js @@ -140,7 +140,7 @@ const Collection = ({ collection, searchText }) => { } }); - const [{ isOver }, drop] = useDrop({ + const [{ isOver, draggedItemType }, drop] = useDrop({ accept: ["collection", `collection-item-${collection.uid}`], drop: (draggedItem, monitor) => { const itemType = monitor.getItemType(); @@ -155,6 +155,7 @@ const Collection = ({ collection, searchText }) => { }, collect: (monitor) => ({ isOver: monitor.isOver(), + draggedItemType: monitor.getItem()?.type, }), }); @@ -167,8 +168,13 @@ const Collection = ({ collection, searchText }) => { } const collectionRowClassName = classnames('flex py-1 collection-name items-center', { - 'item-hovered': isOver - }); + 'dnd-drag-over': isOver, + // Show drop-placement-highlight unless the item can be dropped into this collection. + // Anything other than another collection can be + // dropped into a collection(folder, request, etc.). + // Here, assuming if there is no `.type`, its not a collection. + 'dnd-hl-drop-before': isOver && !draggedItemType + }); // we need to sort request items by seq property const sortRequestItems = (items = []) => { diff --git a/packages/bruno-app/src/themes/dark.js b/packages/bruno-app/src/themes/dark.js index a47abb8d2..3bacd81ab 100644 --- a/packages/bruno-app/src/themes/dark.js +++ b/packages/bruno-app/src/themes/dark.js @@ -61,7 +61,8 @@ const darkTheme = { indentBorder: 'solid 1px #585858', active: { indentBorder: 'solid 1px #4c4c4c' - } + }, + dndPlacementHighlightBorder: "3px solid #4f4f4f" } }, diff --git a/packages/bruno-app/src/themes/light.js b/packages/bruno-app/src/themes/light.js index 9d3439895..9abea4fe9 100644 --- a/packages/bruno-app/src/themes/light.js +++ b/packages/bruno-app/src/themes/light.js @@ -61,7 +61,8 @@ const lightTheme = { indentBorder: 'solid 1px #e1e1e1', active: { indentBorder: 'solid 1px #d0d0d0' - } + }, + dndPlacementHighlightBorder: "3px solid #c1c1c1" } },