diff options
Diffstat (limited to 'web/react/utils')
| -rw-r--r-- | web/react/utils/channel_intro_messages.jsx | 146 |
1 files changed, 115 insertions, 31 deletions
diff --git a/web/react/utils/channel_intro_messages.jsx b/web/react/utils/channel_intro_messages.jsx index 9685f94b0..69e08f143 100644 --- a/web/react/utils/channel_intro_messages.jsx +++ b/web/react/utils/channel_intro_messages.jsx @@ -11,6 +11,8 @@ import Constants from '../utils/constants.jsx'; import TeamStore from '../stores/team_store.jsx'; import * as EventHelpers from '../dispatcher/event_helpers.jsx'; +import {FormattedMessage, FormattedHTMLMessage, FormattedDate} from 'mm-intl'; + export function createChannelIntroMessage(channel) { if (channel.type === 'D') { return createDMIntroMessage(channel); @@ -48,8 +50,13 @@ export function createDMIntroMessage(channel) { </strong> </div> <p className='channel-intro-text'> - {'This is the start of your direct message history with ' + teammateName + '.'}<br/> - {'Direct messages and files shared here are not shown to people outside this area.'} + <FormattedHTMLMessage + id='intro_messages.DM' + defaultMessage='This is the start of your direct message history with {teammate}.<br />Direct messages and files shared here are not shown to people outside this area.' + values={{ + teammate: teammateName + }} + /> </p> {createSetHeaderButton(channel)} </div> @@ -58,7 +65,12 @@ export function createDMIntroMessage(channel) { return ( <div className='channel-intro'> - <p className='channel-intro-text'>{'This is the start of your direct message history with this teammate. Direct messages and files shared here are not shown to people outside this area.'}</p> + <p className='channel-intro-text'> + <FormattedMessage + id='intro_messages.teammate' + defaultMessage='This is the start of your direct message history with this teammate. Direct messages and files shared here are not shown to people outside this area.' + /> + </p> </div> ); } @@ -66,11 +78,13 @@ export function createDMIntroMessage(channel) { export function createOffTopicIntroMessage(channel) { return ( <div className='channel-intro'> - <h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4> - <p className='channel-intro__content'> - {'This is the start of ' + channel.display_name + ', a channel for non-work-related conversations.'} - <br/> - </p> + <FormattedHTMLMessage + id='intro_messages.offTopic' + defaultMessage='<h4 class="channel-intro__title">Beginning of {display_name}</h4><p class="channel-intro__content">This is the start of {display_name}, a channel for non-work-related conversations.<br/></p>' + values={{ + display_name: channel.display_name + }} + /> {createSetHeaderButton(channel)} {createInviteChannelMemberButton(channel, 'channel')} </div> @@ -87,7 +101,11 @@ export function createDefaultIntroMessage(channel) { href='#' onClick={EventHelpers.showInviteMemberModal} > - <i className='fa fa-user-plus'></i>{'Invite others to this team'} + <i className='fa fa-user-plus'></i> + <FormattedMessage + id='intro_messages.inviteOthers' + defaultMessage='Invite others to this team' + /> </a> ); } else { @@ -97,19 +115,24 @@ export function createDefaultIntroMessage(channel) { href='#' onClick={EventHelpers.showGetTeamInviteLinkModal} > - <i className='fa fa-user-plus'></i>{'Invite others to this team'} + <i className='fa fa-user-plus'></i> + <FormattedMessage + id='intro_messages.inviteOthers' + defaultMessage='Invite others to this team' + /> </a> ); } return ( <div className='channel-intro'> - <h4 className='channel-intro__title'>{'Beginning of ' + channel.display_name}</h4> - <p className='channel-intro__content'> - <strong>{'Welcome to ' + channel.display_name + '!'}</strong> - <br/><br/> - {'This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.'} - </p> + <FormattedHTMLMessage + id='intro_messages.default' + defaultMessage="<h4 class='channel-intro__title'>Beginning of {display_name}</h4><p class='channel-intro__content'><strong>Welcome to {display_name}!'</strong><br/><br/>This is the first channel teammates see when they sign up - use it for posting updates everyone needs to know.</p>" + values={{ + display_name: channel.display_name + }} + /> {inviteModalLink} {createSetHeaderButton(channel)} <br/> @@ -124,33 +147,83 @@ export function createStandardIntroMessage(channel) { var uiType; var memberMessage; if (channel.type === 'P') { - uiType = 'private group'; - memberMessage = ' Only invited members can see this private group.'; + uiType = ( + <FormattedMessage + id='intro_messages.group' + defaultMessage='private group' + /> + ); + memberMessage = ( + <FormattedMessage + id='intro_messages.onlyInvited' + defaultMessage=' Only invited members can see this private group.' + /> + ); } else { - uiType = 'channel'; - memberMessage = ' Any member can join and read this channel.'; + uiType = ( + <FormattedMessage + id='intro_messages.channel' + defaultMessage='channel' + /> + ); + memberMessage = ( + <FormattedMessage + id='intro_messages.anyMember' + defaultMessage=' Any member can join and read this channel.' + /> + ); } + const date = ( + <FormattedDate + value={channel.create_at} + month='long' + day='2-digit' + year='numeric' + /> + ); + var createMessage; if (creatorName === '') { - createMessage = 'This is the start of the ' + uiName + ' ' + uiType + ', created on ' + Utils.displayDate(channel.create_at) + '.'; + createMessage = ( + <FormattedMessage + id='intro_messages.noCreator' + defaultMessage='This is the start of the {name} {type}, created on {date}.' + values={{ + name: (uiName), + type: (uiType), + date: (date) + }} + /> + ); } else { createMessage = ( <span> - {'This is the start of the '} - <strong>{uiName}</strong> - {' '} - {uiType}{', created by '} - <strong>{creatorName}</strong> - {' on '} - <strong>{Utils.displayDate(channel.create_at)}</strong> + <FormattedHTMLMessage + id='intro_messages.creator' + defaultMessage='This is the start of the <strong>{name}</strong> {type}, created by <strong>{creator}</strong> on <strong>{date}</strong>' + values={{ + name: (uiName), + type: (uiType), + date: (date), + creator: creatorName + }} + /> </span> ); } return ( <div className='channel-intro'> - <h4 className='channel-intro__title'>{'Beginning of ' + uiName}</h4> + <h4 className='channel-intro__title'> + <FormattedMessage + id='intro_messages.beginning' + defaultMessage='Beginning of {name}' + values={{ + name: (uiName) + }} + /> + </h4> <p className='channel-intro__content'> {createMessage} {memberMessage} @@ -169,7 +242,14 @@ function createInviteChannelMemberButton(channel, uiType) { dialogType={ChannelInviteModal} dialogProps={{channel}} > - <i className='fa fa-user-plus'></i>{'Invite others to this ' + uiType} + <i className='fa fa-user-plus'></i> + <FormattedMessage + id='intro_messages.invite' + defaultMessage='Invite others to this {type}' + values={{ + type: (uiType) + }} + /> </ToggleModalButton> ); } @@ -181,7 +261,11 @@ function createSetHeaderButton(channel) { dialogType={EditChannelHeaderModal} dialogProps={{channel}} > - <i className='fa fa-pencil'></i>{'Set a header'} + <i className='fa fa-pencil'></i> + <FormattedMessage + id='intro_messages.setHeader' + defaultMessage='Set a Header' + /> </ToggleModalButton> ); } |