Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Version History

« Previous Version 53 Next »

Design Complete

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 channel header:

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.

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.

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)

  • 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).

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).

New Channel Settings Modal

Because we are reducing the edit functions to one menu item, we will be 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 includes all the functions to rename the channel, edit its URL, convert it to a private channel, edit the purpose and edit the header.

In the future, the Channel Settings modal will have a left sidebar for more channel settings options.

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. (warning) Not an imperative though

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.

  • No labels