Commit 06eacf30 authored by Asaad Mahmood's avatar Asaad Mahmood Committed by Joram Wilander

PLT-3157 - Adding display width customisation to intro message (#3521)

* PLT-3157 - Adding display width customisation to intro message

* Fixing error
parent 3f0d6ee6
......@@ -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'
......
......@@ -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;
......
......@@ -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'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment