Important Links
The new global header will be a new core piece of the app’s layout that will house the elements identified below. Each of the core products (Messaging, Playbooks, Focalboard) will have their own slightly different versions of the Global Header.
...
Contents
...
The Messaging Global Header will house the following elements:
Product Switcher
Product Brand Identifier
Back/Forward History Buttons (Desktop app only)
Search
Help
Recent Mentions
Saved Messages
Settings
User Profile Avatar
Playbooks Global Header
...
The Playbooks Global Header will house the following elements:
Product Switcher
Product Brand Identifier
Back/Forward History Buttons (Desktop app only)
Tasks
Activity
Help
Settings
User Profile Avatar
Focalboard Global Header
...
The Playbooks Global Header will house the following elements:
...
Product Switcher
...
Product Brand Identifier
...
| Table of Contents | ||||
|---|---|---|---|---|
|
Global Header Shared Elements
...
Each product will have its own nuanced version of the global header, but will still feel like the same family of products. The following elements will exist in every instance of the global header (although they may be be positioned in different locations in some cases)
Product Switcher Icon Button + Menu
Product Brand
Navigator Icon Buttons (Desktop app only)
Help Icon Button
Settings Icon Button
User
...
Avatar + Menu
Product Switcher
A global control that will give users access to switch to other products in the “Mattermost Suite”. Tapping this button will open a popover menu to switch to one of the other products. The core products will each open in a new tab as indicated by the open in new tab icon.
...
Product Brand Identifier
Each product in the suite will display a product branding identifier next to the product switcher. This will help ensure users are oriented and that they land where they expect when switching between products.
| Info |
|---|
NOTE: Branding shown in these screens are for placement only until each product’s brand is finalized |
Help
The existing Help Icon Button and associated menu move out of the Channel Header and into the Global Header.
...
Account Avatar
The authenticated user’s avatar, accompanying status menu and other account-related items move to a new Account Menu in the Global Header. Custom Statuses will also display next to the user’s avatar here.
Default State
...
With Custom Status Showing
...
Account Menu Open
...
Messaging Global Header
...
In addition to the standard shared elements of the global header, the Messaging Global Header will house the following elements:
Search
Recent Mentions
Saved Messages
Search
Search will be moved out of the Channel Header and into the global header. When users engage the Search input, a new Search popover displays. This will make way for the vision of a ‘Command Palette’ in the future.
Ideally, we’d like to fit ‘Recent Searches' into this popover as well if it can be included in Phase 1.
| Info |
|---|
NOTE: For this first phase, search results will remain in the Right Sidebar. Also, Search will stay scoped to the current Team (as is currently), but the goal is to scope this across the server. |
Default State
...
Open State
...
Help
The existing Help Icon Button and associated menu move out of the Channel Header and into the Global Header.
...
Recent Mentions
Access to Recent Mentions is moved out of the Channel Header and into the Global Header. Still opens up in the Right Sidebar.
| Info |
|---|
NOTE: For the first phase, Recent Mentions will stay scoped to the current Team (as is currently), but the goal is to scope this across the server. |
...
Saved
Access to Saved Messages is moved out of the Channel Header and into the Global Header. Still opens up in the Right Sidebar.
| Info |
|---|
NOTE: For the first phase, Saved Messages will stay scoped to the current Team (as is currently), but the goal is to scope this across the server. |
...
Account Avatar
The authenticated user’s avatar, accompanying status menu and other account-related items move to a new Account Menu in the Global Header. Custom Statuses will also display next to the user’s avatar here.
Default State
With Custom Status Showing
Account Menu Open
...
Playbooks Global Header
...
In addition to the standard shared elements of the global header, the Playbooks Global Header will house the following elements. Search will be added at a later update.
Tasks
Activity
A couple of other differences to note:
The Navigator Icon Buttons are positioned differently
The Help Icon Button is positioned differently
Focalboard Global Header
...
To start, the Focalboard Global Header will only house the standard shared elements in its global header. Search will be added at a later update.
A couple of differences in layout to note:
The Navigator Icon Buttons are positioned differently
The Help Icon Button is positioned differently