master/rekordbox-viewer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ui(playlists): restore subtle borders; use box-shadow for drag highlight without altering base border styles

Browse Source
This commit is contained in:
Geert Rademakes 2025-08-08 13:25:16 +02:00
parent 4e123d2597
commit 8394f4b42f
1 changed files with 5 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
packages/frontend/src/components/PlaylistManager.tsx
View File

@ -164,8 +164,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
} }
setIsDragOver(false); setIsDragOver(false);
}} }}
borderColor={isDragOver ? 'blue.400' : undefined} boxShadow={isDragOver ? 'inset 0 0 0 1px var(--chakra-colors-blue-400)' : 'none'}
borderWidth={isDragOver ? '1px' : undefined}
> >
{level > 0 && ( {level > 0 && (
<Box <Box
@ -225,6 +224,9 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
borderRight="1px solid" borderRight="1px solid"
borderRightColor="whiteAlpha.200" borderRightColor="whiteAlpha.200"
position="relative" position="relative"
border="1px solid"
borderColor={selectedItem === node.name ? 'blue.800' : 'transparent'}
_hover={{ ...(selectedItem === node.name ? {} : { borderColor: 'whiteAlpha.300' }) }}
onDragOver={(e) => { onDragOver={(e) => {
e.preventDefault(); e.preventDefault();
const types = Array.from((e.dataTransfer.types || []) as any); const types = Array.from((e.dataTransfer.types || []) as any);
@ -248,8 +250,7 @@ const PlaylistItem: React.FC<PlaylistItemProps> = React.memo(({
} }
setIsDragOver(false); setIsDragOver(false);
}} }}
borderColor={isDragOver ? 'blue.400' : (selectedItem === node.name ? 'blue.700' : 'transparent')} boxShadow={isDragOver ? 'inset 0 0 0 1px var(--chakra-colors-blue-400)' : 'none'}
borderWidth={isDragOver || selectedItem === node.name ? '1px' : undefined}
> >
{level > 0 && ( {level > 0 && (
<Box <Box