| Info |
|---|
Ready for implementation |
Important Links
https://mattermost.atlassian.net/browse/
|
Since a number of elements will be removed from the Channel Header, it will be refreshed to work with the rest of the layout.
...
| Table of Contents | ||||||
|---|---|---|---|---|---|---|
|
Remove Apps and Plugin Icons from Channel Header
All apps that currently reside in the Channel Header will move to the Apps Bar as the new home for apps. (This should be done before any work on the channel header updates)
Add a new ‘Meet’ button
If video conference apps are configured for the user/server, a new ‘Meet’ button displays in the Channel Header.
If there are multiple conference apps or plugins on the server, the button becomes a dropdown button with a menu displaying all conference options.
| Info |
|---|
NOTE: This can be scoped as a separate project and does not necessarily need to be part of this work on the channel header. |
Clean up and arrange remaining icons and controls
Shorten the height of the Channel Header to 56px (now matches Right Sidebar Header)
Add a new secondary bar for Channel Header description
| Info |
|---|
NOTE: The RHS’s header will need to match the height of the main channel header bar (see screenshot below) |
...
Updates to all Channel Header Variants
All channel header variants have been given a refreshed UI as well. Below outlines all the variants of the channel header and their different states.
Channel (Public or Private)
The standard header for channels. Below shows two states for when the header text is set or not.
...
Long channel header text
If a the header text is longer than the visible area, truncate the text with ... and display the full header text as a popover when hovering over the header text area.
...
Muted channels
Muted channels show the mute icon next to the channel name. This icon can also be clicked to unmute.
...
DM
The updated DM header now includes an avatar image + status next to the name.
...
Bot
The bot avatar also displays the bot’s avatar next to the name
...
GM
...
Long GM or Channel names
In cases where the channel header’s width can’t fit the length of the GM name, it will need to be truncated to ensure enough space for the icons and other core functions in the channel header (like we already do currently).
Threads
...
Updated Channel Menu
The channel menu gets too long in some cases, so the below proposal aims to reduce the number of items and to make them easier to find.
Add icons to menu items for quick recognition
Re-organize the channel menu (see screenshot below)
Add ‘More actions’ submenu for Plugin/App actions.
One menu item for editing the channel details: Needs a new ‘Channel Settings’ modal (see below)
Channel Admins see ‘Channel settings’, all other users see ‘View Info’
Archive Channel also moves to the Channel Settings modal
Just have one ‘Members’ menu item (opens the view or manage members modal depending on access)
...
Note for mobile views
The Channel Menu on mobile, must include the following menu items since they don’t appear in the channel header on mobile:
Favorite/Remove from Favorites
Pinned Messages
Files
...
Channel Menu for DMs
Since the only settings that can be changed on a DM is the header, ‘Channel Settings’ changes to ‘Edit Header’. This will open the Edit Header modal (current).
...
Also, View info and Notifications are not available for DMs.
...
Channel Menu for GMs
Since the only settings that can be changed on a GM is the header, ‘Channel Settings’ changes to ‘Edit Header’. This will open the Edit Header modal (current).
...
Also, View info is hidden for GMs.
...
New Channel Settings Modal
| Info |
|---|
Because we are reducing the edit functions to one menu item, we will put all the editing into one Channel Settings modal. This modal will also allow us to offer other Channel Settings that are currently only available in the System Console. This will open it up to other settings in the future as well. |
...
The new Channel Settings modal will also have a left sidebar for more channel settings options.
View the full details on the New Channel Settings Modal
| Note |
|---|
NOTE: This modal has the same fields as the ‘New Channel’ modal so it might be worth considering updating that at the same time to match the new style. |
...
New Notification Preferences Modal
While doing the work for the channel settings modal, it would be nice to also update the notification preferences modal for the channel. This is just a UI update, so if it can be squeezed in, that would be great.
See full details for this update.
...
Future Updates
The updates above will help pave the way to allow for proper bookmarks/links functionality in the header - rather than relying on markdown formatting. TBD
...