Skip to content

File Explorer drag and drop to move files #109

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 28 commits into from
Jul 23, 2021

Conversation

mofojed
Copy link
Member

@mofojed mofojed commented Jul 13, 2021

  • Add back the drag and drop to move files functionality
  • Switch FileList to use ItemList instead of SingleClickItemList; this allowed removing the FileListItem type entirely and just using FileStorageItem
  • Changed keyboardIndex to focusIndex in ItemList, and fire an onFocusChange event to allow handling.
  • Update selection after drop
  • Expand a folder by hovering over it while dragging files
  • Emit signal for all renamed files
  • Converted ItemList unit tests to tsx, added some more
  • Don't focus a notebook panel when opening it in preview mode (cursor was getting lost in file list)
  • Fixed up MockIrisGridModel so styleguide works correctly
    Fixes Notebook UI: Drag and Drop to move #86

mofojed added 12 commits July 12, 2021 10:27
Add drag and drop styling

Some clean up before review
- Fix Shift-Click selection. It wasn't updating the selection properly, this has been broken since powell
--> A couple of functions like handleItemBlur and handleItemFocus were unnecessary, just removed them.
- Update selection after dropping
- Emit signal for all renamed files
…emList

- Got it mostly done... except a lot of the styling...
- Don't want to translate items when dragging, which is what react-beautiful-dnd does out of the box
- Fixed up stealing focus when opening preview notebook
- Mostly functioning but the render function isn't getting the dropTargetItem... I think there's too much rendering going on as well, probably not memoizing something properly
- Needed to reset the mouse state when a drag starts
- Still need to fix up the styling
@mofojed mofojed added the enhancement New feature or request label Jul 13, 2021
@mofojed mofojed added this to the July 2021 milestone Jul 13, 2021
@mofojed mofojed requested a review from vbabich July 13, 2021 15:38
@mofojed mofojed self-assigned this Jul 13, 2021
mofojed added 3 commits July 19, 2021 10:38
Wasn't checking if the dataTransfer items list had no items.
- Drag past the last element to drop at the root
@mofojed mofojed requested a review from dsmmcken July 21, 2021 17:39
@mofojed
Copy link
Member Author

mofojed commented Jul 21, 2021

Adding @dsmmcken to review styling

mofojed and others added 3 commits July 22, 2021 14:42
No need for updateDimensions to be called, since the AutoSizer already properly handles resizing
Copy link
Contributor

@dsmmcken dsmmcken left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • 1. Dragging folder into self deletes folder 😨
  • 2, Styling of selection should match command history exactly see commandhistoryitem.scss, maybe even re-use? note the use of focus, active, hover, focus-within active styling and borders.
  • 3. Selecting multiple items, then initiating a drag shows the drag item that initiated as de-selected, rather than remaining selected
  • 4. ctrl/shift selection clicks shouldn't trigger opening of that notebook.

@vbabich
Copy link
Collaborator

vbabich commented Jul 22, 2021

  • In Chrome/Mac the cursor has a green "+" icon when dragging items

@mofojed
Copy link
Member Author

mofojed commented Jul 23, 2021

@dsmmcken Should I be building the border/transitions directly into ItemList? Not sure if there was a reason that styling was only added to command history or not.

In any case I've pushed a change with the styling applied to FileList

@mofojed mofojed requested a review from dsmmcken July 23, 2021 13:58
mofojed added 2 commits July 23, 2021 10:17
Some default styling was being applied when dragging items
@mofojed mofojed requested a review from vbabich July 23, 2021 14:40
@dsmmcken
Copy link
Contributor

@dsmmcken Should I be building the border/transitions directly into ItemList? Not sure if there was a reason that styling was only added to command history or not.

In any case I've pushed a change with the styling applied to FileList

Could re-use between filelist and command history list, but this list is also used a bunch in the table sidebar menu, where it has different styling

vbabich
vbabich previously approved these changes Jul 23, 2021
@mofojed mofojed dismissed dsmmcken’s stale review July 23, 2021 22:12

I've fixed all his changes and he verbally approved

@mofojed mofojed merged commit 62f799c into deephaven:main Jul 23, 2021
@mofojed mofojed deleted the 86-dnd-file-move-draggable-list branch July 23, 2021 22:14
@mofojed mofojed mentioned this pull request Jul 30, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request web-client-ui
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Notebook UI: Drag and Drop to move
3 participants