Mattermost-server: Drag and Drop to reorder team sidebar

[mattermod]

---

Behavior
– Constrain drag to the vertical axis only
– Draggable objects should not be allowed to pan
– Cursor should use the grabbing cursor when drag event starts
java .grabbing {cursor: -webkit-grabbing; cursor: grabbing;}
– Secondary objects shouldn’t move until the cursor crosses the midpoint of the object above or below

Note: Mac dock is a working example of this. ^ Also see working examples in Discord and Slack, but keep in mind the UX differences outlined here:

---

Behaviour Notes:

1. New teams joined should get added to the bottom of the team sidebar list (above the +)
2. The default case when users upgrade to the new webapp version with this feature is that their teams are still sorted the same as whatever order they were in before the upgrade (ie alphabetical). Once drag and drop is used, the custom order is respected from then on.

---

Keyboard Shortcuts
Shortcut will change based on the new position

• if Team 1 was dragged to position 2, then Team 2 now becomes Team 1 and Team 1 becomes Team 2 in terms of keyboard shortcuts. See outstanding PR for adding team keyboard shortcuts: https://github.com/mattermost/mattermost-webapp/pull/3678

Optional: Dragula Framework

This may be a potential library for drag and drop, but may need more investiagion. We’ll need control over the timing and transition which will be important to ensure the best experience.

http://bevacqua.github.io/react-dragula/

---

Mobile

Note that mobile app should respect the order set on web/desktop but should not allow re-ordering with drag and drop.

---

If you're interested please comment here and come join our "Contributors" community channel on our daily build server, where you can discuss questions with community members and the Mattermost core team. For technical advice or questions, please join our "Developers" community channel.

New contributors please see our Developer's Guide.

JIRA: https://mattermost.atlassian.net/browse/MM-18527

[rakhi2104]

I'm working on this

[esethna]

Hey @rakhi2104! Any updates on this? Happy to provide some guidance if you're hitting issues

[rakhi2104]

Hey @esethna, I have been a little busy at work. But could make some progress on this.
:white_check_mark: added custom user preferences for order of Teams.

I am not clear on how to handle cases like these:

• :grey_question: when the user is added to a new Team, should we group the previous with the preferences and push the new ones to a secondary group?
• :grey_question: handle the default case when the user hasn't saved any order of teams.
• :grey_question: get preferences on onComponentWillMount

Any help would be appreciated.
:v:

[esethna]

Thanks @rakhi2104, really looking forward to this feature!

1. New teams joined should get added to the bottom of the team sidebar list (above the +)
2. The default case when users upgrade to the new webapp version with this feature is that their teams are still sorted the same as whatever order they were in before the upgrade (ie alphabetical). Once drag and drop is used, the custom order is respected from then on.
3. Will refer to dev

Regarding the implementation of the above, I'll refer to dev, @hmhealey any guidance you can provide on the above?

[esethna]

@rakhi2104 feel free to reach out to me directly on the community server @eric.sethna if you have any UX questions I can help with. https://community-release.mattermost.com/core/channels/tickets

[rakhi2104]

Thanks @esethna for clarifying things. Most of your thoughts aligned with my implementation till now. Will keep you posted

[ylluminate]

@rakhi2104 thanks so much for working on this.

Could you also please add the ability to allow users to set their team order independently instead of this being a system wide preference? We have a quantity of teams that creates different priorities for different team members as far as what teams appear at the top.

What do you think about adding item #2 from here to your effort in this regard?