diff options
-rw-r--r-- | webapp/components/post_view/components/post_list.jsx | 19 | ||||
-rw-r--r-- | webapp/sass/layout/_headers.scss | 4 | ||||
-rw-r--r-- | webapp/utils/channel_intro_messages.jsx | 33 |
3 files changed, 35 insertions, 21 deletions
diff --git a/webapp/components/post_view/components/post_list.jsx b/webapp/components/post_view/components/post_list.jsx index 17e29da2e..690cd96c7 100644 --- a/webapp/components/post_view/components/post_list.jsx +++ b/webapp/components/post_view/components/post_list.jsx @@ -18,11 +18,15 @@ import DelayedAction from 'utils/delayed_action.jsx'; import Constants from 'utils/constants.jsx'; const ScrollTypes = Constants.ScrollTypes; +import PreferenceStore from 'stores/preference_store.jsx'; + import {FormattedDate, FormattedMessage} from 'react-intl'; import React from 'react'; import ReactDOM from 'react-dom'; +const Preferences = Constants.Preferences; + export default class PostList extends React.Component { constructor(props) { super(props); @@ -44,16 +48,17 @@ export default class PostList extends React.Component { this.scrollStopAction = new DelayedAction(this.handleScrollStop); - if (props.channel) { - this.introText = createChannelIntroMessage(props.channel); - } else { - this.introText = this.getArchivesIntroMessage(); - } - this.state = { isScrolling: false, + fullWidthIntro: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.CHANNEL_DISPLAY_MODE, Preferences.CHANNEL_DISPLAY_MODE_DEFAULT) === Preferences.CHANNEL_DISPLAY_MODE_FULL_SCREEN, topPostId: null }; + + if (props.channel) { + this.introText = createChannelIntroMessage(props.channel, this.state.fullWidthIntro); + } else { + this.introText = this.getArchivesIntroMessage(); + } } isAtBottom() { @@ -395,7 +400,7 @@ export default class PostList extends React.Component { getArchivesIntroMessage() { return ( - <div className='channel-intro'> + <div className={'channel-intro'}> <h4 className='channel-intro__title'> <FormattedMessage id='post_focus_view.beginning' diff --git a/webapp/sass/layout/_headers.scss b/webapp/sass/layout/_headers.scss index 56f7cd6e8..1e7046340 100644 --- a/webapp/sass/layout/_headers.scss +++ b/webapp/sass/layout/_headers.scss @@ -162,6 +162,10 @@ margin: 0 auto 15px; padding: 0 15px; + &.channel-intro--centered { + max-width: 1020px; + } + .intro-links { display: inline-block; margin: 0 1.5em 10px 0; diff --git a/webapp/utils/channel_intro_messages.jsx b/webapp/utils/channel_intro_messages.jsx index 50d12ed42..9a232dbc0 100644 --- a/webapp/utils/channel_intro_messages.jsx +++ b/webapp/utils/channel_intro_messages.jsx @@ -16,20 +16,25 @@ import Client from 'utils/web_client.jsx'; import React from 'react'; import {FormattedMessage, FormattedHTMLMessage, FormattedDate} from 'react-intl'; -export function createChannelIntroMessage(channel) { +export function createChannelIntroMessage(channel, fullWidthIntro) { + let centeredIntro = ''; + if (!fullWidthIntro) { + centeredIntro = 'channel-intro--centered'; + } + if (channel.type === 'D') { - return createDMIntroMessage(channel); + return createDMIntroMessage(channel, centeredIntro); } else if (ChannelStore.isDefault(channel)) { - return createDefaultIntroMessage(channel); + return createDefaultIntroMessage(channel, centeredIntro); } else if (channel.name === Constants.OFFTOPIC_CHANNEL) { - return createOffTopicIntroMessage(channel); + return createOffTopicIntroMessage(channel, centeredIntro); } else if (channel.type === 'O' || channel.type === 'P') { - return createStandardIntroMessage(channel); + return createStandardIntroMessage(channel, centeredIntro); } return null; } -export function createDMIntroMessage(channel) { +export function createDMIntroMessage(channel, centeredIntro) { var teammate = Utils.getDirectTeammate(channel.id); if (teammate) { @@ -39,7 +44,7 @@ export function createDMIntroMessage(channel) { } return ( - <div className='channel-intro'> + <div className={'channel-intro ' + centeredIntro}> <div className='post-profile-img__container channel-intro-img'> <img className='post-profile-img' @@ -68,7 +73,7 @@ export function createDMIntroMessage(channel) { } return ( - <div className='channel-intro'> + <div className={'channel-intro ' + centeredIntro}> <p className='channel-intro-text'> <FormattedMessage id='intro_messages.teammate' @@ -79,9 +84,9 @@ export function createDMIntroMessage(channel) { ); } -export function createOffTopicIntroMessage(channel) { +export function createOffTopicIntroMessage(channel, centeredIntro) { return ( - <div className='channel-intro'> + <div className={'channel-intro ' + centeredIntro}> <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>' @@ -95,7 +100,7 @@ export function createOffTopicIntroMessage(channel) { ); } -export function createDefaultIntroMessage(channel) { +export function createDefaultIntroMessage(channel, centeredIntro) { let inviteModalLink = ( <a className='intro-links' @@ -122,7 +127,7 @@ export function createDefaultIntroMessage(channel) { } return ( - <div className='channel-intro'> + <div className={'channel-intro ' + centeredIntro}> <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>" @@ -137,7 +142,7 @@ export function createDefaultIntroMessage(channel) { ); } -export function createStandardIntroMessage(channel) { +export function createStandardIntroMessage(channel, centeredIntro) { var uiName = channel.display_name; var creatorName = ''; @@ -211,7 +216,7 @@ export function createStandardIntroMessage(channel) { } return ( - <div className='channel-intro'> + <div className={'channel-intro ' + centeredIntro}> <h4 className='channel-intro__title'> <FormattedMessage id='intro_messages.beginning' |