/
Channel Header & Channel Menus

Channel Header & Channel Menus

Ready for implementation

Important Links

Channel Header and Channel Menu Designs

MM-40156: Webapp: Updated channel menuBacklog

Since a number of elements will be removed from the Channel Header, it will be refreshed to work with the rest of the layout.

The following changes will be made to the update the channel header and accommodate for restructuring menus:

 

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.

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

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.

Default state, no header set

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

The new Channel Settings modal includes all the functions to rename the channel, edit its URL, convert it to a private channel, edit the purpose and edit the header.

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

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

In the next phase, the channel menu and channel info will display in a new Channel Info Right Sidebar View.

 

Related content