PLT-3157 - Adding display width customisation to intro message (matte…

…rmost#3521) * PLT-3157 - Adding display width customisation to intro message * Fixing error
Revanth47 · Jul 12, 2016 · dbfdcad · dbfdcad
1 parent 5259889
commit dbfdcad
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 21 deletions.
diff --git a/components/post_view/components/post_list.jsx b/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/sass/layout/_headers.scss b/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/utils/channel_intro_messages.jsx b/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'