Home View

Owned by Matt Birtch
Last updated: Dec 19, 2022
5 min read

Design Complete

https://mattermost.atlassian.net/browse/MM-32767

https://mattermost.atlassian.net/browse/MM-31441

Figma Design

Figma Prototype

Figma Prototype (Old)

Channel Sidebar Header - Figma Component

Channel Sidebar Item - Figma Component

Summary of what’s new

  1. Sidebar = Home

  2. Header Updates

  3. A new Team Menu

  4. UI Updates to Channel Menu Items - including the use of avatars for DMs

  5. Collapsable custom categories (will be done in v1 of the app: https://mattermost.atlassian.net/browse/MM-28474)

  6. Access to Threads view (above the channel list)

  7. Revised Channel Organization

  8. A New ‘Find Channels’ UX

  9. A new Team Sidebar

  10. Multi-Server Support

Home View

With the new mobile v2 app, the sidebar is no longer a sidebar, but the ‘Home’ view, which is accessible from the new bottom tab bar.

Header Updates

The new Header in the Channel Sidebar now displays:

  • The Team name

  • The Server name

  • A new Team Menu to access key team functions not currently accessible in the app

  • Updated Jump to input to Find Channels. Details for the Find Channels UX:

  • A new Servers button (see below)

Multiple Teams - No Servers Button

 

When a user has multiple teams, the Servers Button does not display in the header area - it displays above the team sidebar (see below)

Single Team - Server Button Visible

 

When a user only has one team, the Servers button displays as part of the Channel Sidebar Header since the Team Sidebar is not visible.

In Context

And this is how it displays in the context of the rest of the Home Screen.

Multiple Teams

Single Team

When multi-server is not allowed

In cases where EMM providers do not allow their end-users to add other servers, the server button does not display. When this is the case the layout needs to adjust slightly. For multiple teams scenario, the team bar moves up to collapse the space where the servers button was. For a single team scenario, the the header moves to the left to collapse the space where the server button was. See screens below for reference.

Multiple Teams, no other servers allowed

Single Team, No other servers allowed

Connectivity issues

 

 

 

 

 

Team Menu

The new team menu is accessed through the dropdown menu at the Home screen. Depending on scope and complexity, certain elements from this menu may not be included in phase 1. The proposed menu items are:

  • View Members: a new modal that would show a listing of Team Members (similar to the web app). This item may be cut for phase 1

  • Invite People to this Team: a new modal for inviting members. This item may be cut for phase 1 due to complexity of introducing an entirely new flow

  • Join Another Team: This menu item only shows if the user has access to create or join other teams. If so, this opens the Join Team Bottom Sheet.

  • Leave This Team: Opens an alert to confirm the destructive action. Once confirmed, removes the current team from the sidebar.


Plus + Menu

  • Open Direct Message: opens the existing ‘New Conversation’ modal

  • Create a New Channel: opens an action sheet to choose between New Public Channel and New Private Channel

  • Channel Directory: opens the existing 'More Channels' modal

 

Access to Global Threads

Once the new threads UX is implemented, a global ‘Threads’ menu item will display above all channels in the sidebar.

 

UI Updates to Channel Menu Items

The Channel Menu Item component has been updated with the following:

  • Avatars for DMs

  • Larger channel icons for better balance

  • Updated Mention Badges to align with web app badges

States

Default

Active

Unread, Mentions

Default (Read)

Unread

Mentions

Types

Public Channel

Private Channel

Archived Channel

DM

Group Message

Collapsable Custom Categories

Custom categories are now introduced to align with desktop. These categories are expandable/collapsable. This work is currently underway with v1 of the app and should carry over to v2. See the Jira ticket.

When a category is collapsed (notice the ‘Favourites’ category below), the channels in that category hide, and the chevron icon points to the right instead of down.

Expanded Category Header

 

Collapsed Category Header

 

Not Expandable

In Context

Below shows the expandable/collapsable categories in context of the entire sidebar.

Expanded Category (Favorites)

 

 

 

Collapsed Category (Favorites)

 

 

 

 

 

Collapse/Expand Animation

animation-timing-function: cubic-bezier(0.5, 0, 0.3, 1);
animation-duration: 250ms;

Channel organization

  • The ‘Unreads’ category always shows at the top above all other categories

  • Use the order for every other category that is in the webapp (including favourites, direct messages, etc).

  • Combine Public and Private channels categories in to one ‘Channels’ category (as per webapp)

  • Each category is collapsable (except for ‘Unreads’)

Gesture Transitions between Channel View and Home View

  • From the Channel screen, swipe right from the left edge to return Home

  • From the Home screen, swipe left from the right edge to return to the last active channel

Tablet Layout

Landscape

 

 

Portrait