@ -7,12 +7,13 @@ import { SessionIconButton, SessionIconSize, SessionIconType } from '../session/
import { SessionButton , SessionButtonColor , SessionButtonType } from '../session/SessionButton' ; import { SessionButton , SessionButtonColor , SessionButtonType } from '../session/SessionButton' ;
import { ConversationAvatar } from '../session/usingClosedConversationDetails' ; import { ConversationAvatar } from '../session/usingClosedConversationDetails' ;
import { MemoConversationHeaderMenu } from '../session/menu/ConversationHeaderMenu' ; import { MemoConversationHeaderMenu } from '../session/menu/ConversationHeaderMenu' ;
import { contextMenu } from 'react-contexify' ; import { contextMenu , theme } from 'react-contexify' ;
import { useTheme } from 'styled-components' ; import styled , { useTheme } from 'styled-components' ;
import { ConversationNotificationSettingType } from '../../models/conversation' ; import { ConversationNotificationSettingType } from '../../models/conversation' ;
import { import {
getConversationHeaderProps ,
getConversationHeaderProps ,
getConversationHeaderTitleProps ,
getConversationHeaderTitleProps ,
getCurrentNotificationSettingText ,
getSelectedConversation ,
getSelectedConversation ,
getSelectedMessageIds ,
getSelectedMessageIds ,
isMessageDetailView ,
isMessageDetailView ,
@ -74,7 +75,6 @@ const SelectionOverlay = (props: {
} ) = > { } ) = > {
const { onDeleteSelectedMessages , onCloseOverlay , isPublic } = props ;
const { onDeleteSelectedMessages , onCloseOverlay , isPublic } = props ;
const { i18n } = window ;
const { i18n } = window ;
const theme = useTheme ( ) ;
const isServerDeletable = isPublic ;
const isServerDeletable = isPublic ;
const deleteMessageButtonText = i18n ( isServerDeletable ? 'deleteForEveryone' : 'delete' ) ;
const deleteMessageButtonText = i18n ( isServerDeletable ? 'deleteForEveryone' : 'delete' ) ;
@ -86,7 +86,7 @@ const SelectionOverlay = (props: {
iconType = { SessionIconType . Exit }
iconType = { SessionIconType . Exit }
iconSize = { SessionIconSize . Medium }
iconSize = { SessionIconSize . Medium }
onClick = { onCloseOverlay }
onClick = { onCloseOverlay }
theme = { theme }
theme = { useTheme( ) }
/ >
/ >
< / div >
< / div >
@ -104,7 +104,6 @@ const SelectionOverlay = (props: {
const TripleDotsMenu = ( props : { triggerId : string ; showBackButton : boolean } ) = > { const TripleDotsMenu = ( props : { triggerId : string ; showBackButton : boolean } ) = > {
const { showBackButton } = props ;
const { showBackButton } = props ;
const theme = useTheme ( ) ;
if ( showBackButton ) {
if ( showBackButton ) {
return < > < / > ;
return < > < / > ;
}
}
@ -121,7 +120,7 @@ const TripleDotsMenu = (props: { triggerId: string; showBackButton: boolean }) =
< SessionIconButton
< SessionIconButton
iconType = { SessionIconType . Ellipses }
iconType = { SessionIconType . Ellipses }
iconSize = { SessionIconSize . Medium }
iconSize = { SessionIconSize . Medium }
theme = { theme }
theme = { useTheme( ) }
/ >
/ >
< / div >
< / div >
) ;
) ;
@ -175,7 +174,6 @@ const AvatarHeader = (props: {
const BackButton = ( props : { onGoBack : ( ) = > void ; showBackButton : boolean } ) = > { const BackButton = ( props : { onGoBack : ( ) = > void ; showBackButton : boolean } ) = > {
const { onGoBack , showBackButton } = props ;
const { onGoBack , showBackButton } = props ;
const theme = useTheme ( ) ;
if ( ! showBackButton ) {
if ( ! showBackButton ) {
return null ;
return null ;
}
}
@ -186,11 +184,29 @@ const BackButton = (props: { onGoBack: () => void; showBackButton: boolean }) =>
iconSize = { SessionIconSize . Large }
iconSize = { SessionIconSize . Large }
iconRotation = { 90 }
iconRotation = { 90 }
onClick = { onGoBack }
onClick = { onGoBack }
theme = { theme }
theme = { useTheme( ) }
/ >
/ >
) ;
) ;
} ; } ;
interface StyledSubtitleContainerProps {
margin? : string ;
}
export const StyledSubtitleContainer = styled . div `
display : flex ;
flex - direction : column ;
align - items : center ;
justify - content : center ;
span {
margin - bottom : $ { ( p : StyledSubtitleContainerProps ) = > p . margin || '5px' } ;
}
span :last - child {
margin - bottom : 0 ;
}
` ;
export type ConversationHeaderTitleProps = { export type ConversationHeaderTitleProps = {
phoneNumber : string ;
phoneNumber : string ;
profileName? : string ;
profileName? : string ;
@ -201,6 +217,7 @@ export type ConversationHeaderTitleProps = {
subscriberCount? : number ;
subscriberCount? : number ;
isKickedFromGroup : boolean ;
isKickedFromGroup : boolean ;
name? : string ;
name? : string ;
currentNotificationSetting? : ConversationNotificationSettingType ;
} ; } ;
const ConversationHeaderTitle = ( ) = > { const ConversationHeaderTitle = ( ) = > {
@ -245,21 +262,36 @@ const ConversationHeaderTitle = () => {
text = i18n ( 'members' , [ count ] ) ;
text = i18n ( 'members' , [ count ] ) ;
}
}
const textEl =
const notificationSetting = useSelector ( getCurrentNotificationSettingText ) ;
text === '' || isKickedFromGroup ? null : (
const notificationSubtitle = notificationSetting
< span className = "module-conversation-header__title-text" > { text } < / span >
? window . i18n ( 'notificationSubtitle' , notificationSetting )
) ;
: null ;
const title = profileName || name || phoneNumber ;
const title = profileName || name || phoneNumber ;
return (
return (
< div className = "module-conversation-header__title" >
< div className = "module-conversation-header__title" >
< span className = "module-contact-name__profile-name" > { title } < / span >
< span className = "module-contact-name__profile-name" > { title } < / span >
{ textEl }
< StyledSubtitleContainer margin = { useTheme ( ) . common . margins . xs } >
{ isKickedFromGroup ? null : < ConversationHeaderSubtitle text = { text } / > }
< ConversationHeaderSubtitle text = { notificationSubtitle } / >
< / StyledSubtitleContainer >
< / div >
< / div >
) ;
) ;
} ; } ;
/ * *
* The subtitle beneath a conversation title when looking at a conversation screen .
* @param props props for subtitle . Text to be displayed
* @returns JSX Element of the subtitle of conversation header
* /
export const ConversationHeaderSubtitle = ( props : { text? : string | null } ) : JSX . Element | null = > {
const { text } = props ;
if ( ! text ) {
return null ;
}
return < span className = "module-conversation-header__title-text" > { text } < / span > ;
} ;
export const ConversationHeaderWithDetails = ( ) = > { export const ConversationHeaderWithDetails = ( ) = > {
const headerProps = useSelector ( getConversationHeaderProps ) ;
const headerProps = useSelector ( getConversationHeaderProps ) ;
Warrick Corfe-Tan
4 years ago