From b8713762920add4501d4a55465bdb79aab71d734 Mon Sep 17 00:00:00 2001 From: Ovgodd Date: Tue, 16 Jul 2024 09:12:00 +0200 Subject: [PATCH 1/8] add header to channel preview Changelog: fixed --- .../channel_header/channel_header.tsx | 30 ++++++++++++------- 1 file changed, 19 insertions(+), 11 deletions(-) diff --git a/webapp/channels/src/components/channel_header/channel_header.tsx b/webapp/channels/src/components/channel_header/channel_header.tsx index 2894fe4248..c043d1207e 100644 --- a/webapp/channels/src/components/channel_header/channel_header.tsx +++ b/webapp/channels/src/components/channel_header/channel_header.tsx @@ -276,6 +276,15 @@ class ChannelHeader extends React.PureComponent { hideGuestTags, } = this.props; const {formatMessage} = this.props.intl; + const isDirect = (channel.type === Constants.DM_CHANNEL); + const isGroup = (channel.type === Constants.GM_CHANNEL); + const isPrivate = (channel.type === Constants.PRIVATE_CHANNEL); + + const channelNamesMap = channel.props && channel.props.channel_mentions; + const headerText = (isDirect && dmUser?.is_bot) ? dmUser.bot_description : channel.header; + const imageProps = { + hideUtilities: true, + }; const ariaLabelChannelHeader = this.props.intl.formatMessage({id: 'accessibility.sections.channelHeader', defaultMessage: 'channel header region'}); let showMeetBtn = true; @@ -306,7 +315,7 @@ class ChannelHeader extends React.PureComponent { >
{ {channel.name} + + +
); @@ -334,12 +352,6 @@ class ChannelHeader extends React.PureComponent { ); } - const channelNamesMap = channel.props && channel.props.channel_mentions; - - const isDirect = (channel.type === Constants.DM_CHANNEL); - const isGroup = (channel.type === Constants.GM_CHANNEL); - const isPrivate = (channel.type === Constants.PRIVATE_CHANNEL); - if (isGroup) { if (hasGuests && !hideGuestTags) { hasGuestsText = ( @@ -468,11 +480,7 @@ class ChannelHeader extends React.PureComponent { } let headerTextContainer; - const headerText = (isDirect && dmUser?.is_bot) ? dmUser.bot_description : channel.header; if (headerText) { - const imageProps = { - hideUtilities: true, - }; const popoverContent = ( Date: Wed, 6 Nov 2024 16:35:41 +0100 Subject: [PATCH 2/8] implementation sync between chan preview header & regular chan header Changelog: changed --- .../channel_header/channel_header.tsx | 103 +++++++++--------- .../components/header_icon_wrapper.tsx | 9 ++ .../components/_channel-header__icon.scss | 4 +- webapp/channels/src/sass/layout/_headers.scss | 4 +- 4 files changed, 66 insertions(+), 54 deletions(-) diff --git a/webapp/channels/src/components/channel_header/channel_header.tsx b/webapp/channels/src/components/channel_header/channel_header.tsx index c043d1207e..40362c5855 100644 --- a/webapp/channels/src/components/channel_header/channel_header.tsx +++ b/webapp/channels/src/components/channel_header/channel_header.tsx @@ -286,7 +286,7 @@ class ChannelHeader extends React.PureComponent { hideUtilities: true, }; const ariaLabelChannelHeader = this.props.intl.formatMessage({id: 'accessibility.sections.channelHeader', defaultMessage: 'channel header region'}); - let showMeetBtn = true; + let showMeetBtn = !isEmptyObject(channelMember); let hasGuestsText: ReactNode = ''; if (hasGuests) { @@ -302,55 +302,56 @@ class ChannelHeader extends React.PureComponent { ); } - if (isEmptyObject(channelMember) && !isGuest(dmUser?.roles ?? '')) { // light header for the preview mode feature - return ( - - ); - } + // if (isEmptyObject(channelMember) && !isGuest(dmUser?.roles ?? '')) { // light header for the preview mode feature + // return ( + // + // ); + // } const channelIsArchived = channel.delete_at !== 0; - if (isEmptyObject(channel) || - isEmptyObject(channelMember) || - isEmptyObject(currentUser) || - (!dmUser && channel.type === Constants.DM_CHANNEL) - ) { - // Use an empty div to make sure the header's height stays constant - return ( -
- ); - } + + // if (isEmptyObject(channel) || + // isEmptyObject(channelMember) || + // isEmptyObject(currentUser) || + // (!dmUser && channel.type === Constants.DM_CHANNEL) + // ) { + // // Use an empty div to make sure the header's height stays constant + // return ( + //
+ // ); + // } if (isGroup) { if (hasGuests && !hideGuestTags) { @@ -438,6 +439,7 @@ class ChannelHeader extends React.PureComponent { if (!isDirect) { const membersIconClass = classNames('member-rhs__trigger channel-header__icon channel-header__icon--left channel-header__icon--wide', { 'channel-header__icon--active': rhsState === RHSStates.CHANNEL_MEMBERS, + disabled: isEmptyObject(channelMember), }); const membersIcon = this.props.memberCount ? ( <> @@ -469,11 +471,12 @@ class ChannelHeader extends React.PureComponent { memberListButton = ( {} : this.toggleChannelMembersRHS} tooltipKey={'channelMembers'} /> ); diff --git a/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx b/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx index 9e00261142..2cce258cc3 100644 --- a/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx +++ b/webapp/channels/src/components/channel_header/components/header_icon_wrapper.tsx @@ -27,6 +27,9 @@ type Props = { tooltipText?: React.ReactNode; isRhsOpen?: boolean; pluginId?: string; + + // Infomaniak: for disabling actions in channel preview mode + disabled?: boolean; } type TooltipInfo = { @@ -48,6 +51,9 @@ const HeaderIconWrapper = (props: Props) => { tooltipText, isRhsOpen, pluginId, + + // Infomaniak: for disabling actions in channel preview mode + disabled = false, } = props; const toolTips: Record = { @@ -159,6 +165,9 @@ const HeaderIconWrapper = (props: Props) => { >