Move Decks with Drag and Drop

[in5omnia]

Purpose / Description

We propose a Move Decks feature using drag and drop, so that we can move decks into and out of other decks on our phones, and not have to use Anki via computer just to do this.

How to use it:

• Go to the options menu in the DeckPicker screen and click the Move Decks option.
• Drag and drop decks to move them:
  • If you want to turn a deck A into a subdeck of a deck B, drag A until it's above B and drop it there;
  • If you want a deck to stop being a subdeck of another, drag it into an area of the screen without decks (above or below).
• To exit the Move Decks mode, click the Floating Done button at the end of the screen.

Implements

• Implements Create subdecks by drag-and-drop #14544

Approach

We implemented drag and drop based on how Anki Desktop does it, to ensure consistency between both platforms (We also considered using Tasks' approach because of how they do indentation). To implement the "Done button" we replicated the code of the "Add button" already present in AnkiDroid, to avoid changing AnkiDroid's design.

What we did:

• Added a new Move Decks option to the Options Menu in the DeckPicker. When clicked, it will enable the "drag and drop mode" and:

  • disable the pullToSyncWrapper (to allow dragging down);
  • switch the Floating Add Button (fabMain) for a Floating Done Button (fabDone);
  • change the supportActionBar subtitle to an informative message and temporarily showing a Snackbar informing the user that they have entered the "Move Decks mode".

• Added a Floating Done Button, which returns the DeckPicker to its normal state.

Screenshots and Video

How Has This Been Tested?

To test we used both our phones (Samsung S21 Ultra, Samsung A33) and an emulator.
We refactored an old unit test for reparent that was commented and updated it to contain the correct order for decks (based on anki desktop)

Learning

To implement this feature we ended up using ItemTouchHelper as it made enabling the movement required to drag and drop very easy. It was also extremely simple to retrieve the element underneath the one being dragged.

As alluded to previously, we tried to look at other apps for inspiration, one that we came across was Tasks. Tasks' way to handle reordering tasks is worth considering as the indent gives the user a better perception on what indent level each task (in our case deck) is.

Collaborator

This feature was co-developed by @powy-e.

Checklist

• You have a descriptive commit message with a short title (first line, max 50 chars).
• You have commented your code, particularly in hard-to-understand areas
• You have performed a self-review of your own code
• UI changes: include screenshots of all affected screens (in particular showing any new or changed strings)
• UI Changes: You have tested your change using the Google Accessibility Scanner

[github-actions]

Message to maintainers, this PR contains strings changes.

1. Before merging this PR, it is best to run the "Sync Translations" GitHub action, then make and merge a PR from the i18n_sync branch to get translations cleaned out.
2. Then merge this PR, and immediately do another translation PR so the huge change made by this PR's key changes are all by themselves.

Read more about updating strings on the wiki,

• localization-administration
• download-localized-strings

[BrayanDSO]

Particularly, I feel that the menu option shouldn't be required.

[in5omnia]

Particularly, I feel that the menu option shouldn't be required.

We decided to use a menu option as the usual drag and drop action would conflict with the long press action already present.
The only other idea we had was to add it to the long click menu but because its options operate on a single deck, we decided that it would not make sense to add it there.

Nonetheless, we are of course open to other ideas to activate this "mode"!

[brishtibheja]

Nonetheless, we are of course open to other ideas to activate this "mode"!

Just an idea. I saw some app once using a candy box like icon on the left that you hold to move things vertically. Not holding that would not work. Issue here is there's already a icon used on that spot to denote parent deck.

Now this is obviously outside the purview of this PR, but eventually having an icon on the right to open the menu instead of long pressing might be a good idea. It would also look better. I am thinking of Notion's UI.

[powy-e]

Now this is obviously outside the purview of this PR, but eventually having an icon on the right to open the menu instead of long pressing might be a good idea. It would also look better. I am thinking of Notion's UI.

Thank you for your suggestion! While adding an icon to open the menu on the right is indeed outside the scope of this PR (as it would alter the existing UX), it is a very interesting idea. However, given that the review counts are already displayed on the right, adding an additional button might clutter the UI.

[github-actions]

Hello 👋, this PR has had no activity for more than 2 weeks and needs a reply from the author. If you think this is a mistake please comment and ping a maintainer to get this merged ASAP! Thanks for contributing! You have 7 days until this gets closed automatically

[in5omnia]

Hi @BrayanDSO,

I responded to your concern about the menu option not being required, but it seems it might have been missed. Could you please take a look at my previous response and let me know if you have any further suggestions or if this approach is acceptable?

Please do not close this PR, as it is awaiting review from the maintainer.

Thank you!

[david-allison]

@BrayanDSO I believe this is still pending

[BrayanDSO]

Sorry, but I can't look at this at the moment. Please disregard any comments that I did if it impedes the PR to move forward.

[github-actions]

Hello 👋, this PR has had no activity for more than 2 weeks and needs a reply from the author. If you think this is a mistake please comment and ping a maintainer to get this merged ASAP! Thanks for contributing! You have 7 days until this gets closed automatically