PLT-3182 - Improving switch channels modal and some minor UI improvements (#3238)

* PLT-3182 - Improving switch channels modal and some minor UI improvements Enabling link previews Adding compact layout to RHS Improving timestamps * Adding update code for RHS components
2016-06-06 17:46:03 +05:00
--- a/webapp/components/channel_switch_modal.jsx
+++ b/webapp/components/channel_switch_modal.jsx
@@ -98,10 +98,12 @@ export default class SwitchChannelModal extends React.Component {
                </Modal.Header>

                <Modal.Body>
-                    <FormattedMessage
-                        id='channel_switch_modal.help'
-                        defaultMessage='↑↓ to browse, TAB to select, ↵ to confirm, ESC to dismiss'
-                    />
+                    <div className='modal__hint'>
+                        <FormattedMessage
+                            id='channel_switch_modal.help'
+                            defaultMessage='↑↓ to browse, TAB to select, ↵ to confirm, ESC to dismiss'
+                        />
+                    </div>
                    <SuggestionBox
                        ref='search'
                        className='form-control focused'
@@ -118,9 +120,9 @@ export default class SwitchChannelModal extends React.Component {
                    />
                </Modal.Body>
                <Modal.Footer>
-                    <label className='control-label'>
+                    <div className='modal__error'>
                        {message}
-                    </label>
+                    </div>
                    <button
                        type='button'
                        className='btn btn-default'
--- a/webapp/components/post_view/components/post_body_additional_content.jsx
+++ b/webapp/components/post_view/components/post_body_additional_content.jsx
@@ -97,18 +97,16 @@ export default class PostBodyAdditionalContent extends React.Component {
            );
        }

-        if (!this.props.compactDisplay) {
-            for (let i = 0; i < Constants.IMAGE_TYPES.length; i++) {
-                const imageType = Constants.IMAGE_TYPES[i];
-                const suffix = link.substring(link.length - (imageType.length + 1));
-                if (suffix === '.' + imageType || suffix === '=' + imageType) {
-                    return (
-                        <PostImage
-                            channelId={this.props.post.channel_id}
-                            link={link}
-                        />
-                    );
-                }
+        for (let i = 0; i < Constants.IMAGE_TYPES.length; i++) {
+            const imageType = Constants.IMAGE_TYPES[i];
+            const suffix = link.substring(link.length - (imageType.length + 1));
+            if (suffix === '.' + imageType || suffix === '=' + imageType) {
+                return (
+                    <PostImage
+                        channelId={this.props.post.channel_id}
+                        link={link}
+                    />
+                );
            }
        }

--- a/webapp/components/rhs_comment.jsx
+++ b/webapp/components/rhs_comment.jsx
@@ -35,6 +35,9 @@ export default class RhsComment extends React.Component {
        GlobalActions.showGetPostLinkModal(this.props.post);
    }
    shouldComponentUpdate(nextProps) {
+        if (nextProps.compactDisplay !== this.props.compactDisplay) {
+            return true;
+        }
        if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
            return true;
        }
@@ -186,6 +189,11 @@ export default class RhsComment extends React.Component {
            );
        }

+        let compactClass = '';
+        if (this.props.compactDisplay) {
+            compactClass = 'post--compact';
+        }
+
        var dropdown = this.createDropdown();

        var fileAttachment;
@@ -195,12 +203,13 @@ export default class RhsComment extends React.Component {
                    filenames={post.filenames}
                    channelId={post.channel_id}
                    userId={post.user_id}
+                    compactDisplay={this.props.compactDisplay}
                />
            );
        }

        return (
-            <div className={'post ' + currentUserCss}>
+            <div className={'post post--thread ' + currentUserCss + ' ' + compactClass}>
                <div className='post__content'>
                    <div className='post__img'>
                        <img
@@ -249,5 +258,6 @@ export default class RhsComment extends React.Component {
 RhsComment.propTypes = {
    post: React.PropTypes.object,
    user: React.PropTypes.object.isRequired,
-    currentUser: React.PropTypes.object.isRequired
+    currentUser: React.PropTypes.object.isRequired,
+    compactDisplay: React.PropTypes.bool
 };
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -32,6 +32,9 @@ export default class RhsRootPost extends React.Component {
        GlobalActions.showGetPostLinkModal(this.props.post);
    }
    shouldComponentUpdate(nextProps) {
+        if (nextProps.compactDisplay !== this.props.compactDisplay) {
+            return true;
+        }
        if (!Utils.areObjectsEqual(nextProps.post, this.props.post)) {
            return true;
        }
@@ -220,6 +223,11 @@ export default class RhsRootPost extends React.Component {
            );
        }

+        let compactClass = '';
+        if (this.props.compactDisplay) {
+            compactClass = 'post--compact';
+        }
+
        const messageWrapper = (
            <div
                ref='message_holder'
@@ -229,7 +237,7 @@ export default class RhsRootPost extends React.Component {
        );

        return (
-            <div className={'post post--root ' + userCss + ' ' + systemMessageClass}>
+            <div className={'post post--root post--thread ' + userCss + ' ' + systemMessageClass + ' ' + compactClass}>
                <div className='post-right-channel__name'>{channelName}</div>
                <div className='post__content'>
                    <div className='post__img'>
@@ -279,5 +287,6 @@ RhsRootPost.propTypes = {
    post: React.PropTypes.object.isRequired,
    user: React.PropTypes.object.isRequired,
    currentUser: React.PropTypes.object.isRequired,
-    commentCount: React.PropTypes.number
+    commentCount: React.PropTypes.number,
+    compactDisplay: React.PropTypes.bool
 };
--- a/webapp/components/rhs_thread.jsx
+++ b/webapp/components/rhs_thread.jsx
@@ -12,6 +12,7 @@ import RhsHeaderPost from './rhs_header_post.jsx';
 import RootPost from './rhs_root_post.jsx';
 import Comment from './rhs_comment.jsx';
 import Constants from 'utils/constants.jsx';
+const Preferences = Constants.Preferences;
 import FileUploadOverlay from './file_upload_overlay.jsx';
 import Scrollbars from 'react-custom-scrollbars';

@@ -50,12 +51,14 @@ export default class RhsThread extends React.Component {
        this.onPostChange = this.onPostChange.bind(this);
        this.onUserChange = this.onUserChange.bind(this);
        this.forceUpdateInfo = this.forceUpdateInfo.bind(this);
+        this.onPreferenceChange = this.onPreferenceChange.bind(this);
        this.handleResize = this.handleResize.bind(this);

        const state = this.getPosts();
        state.windowWidth = Utils.windowWidth();
        state.windowHeight = Utils.windowHeight();
        state.profiles = JSON.parse(JSON.stringify(UserStore.getProfiles()));
+        state.compactDisplay = PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT;

        this.state = state;
    }
@@ -63,6 +66,7 @@ export default class RhsThread extends React.Component {
        PostStore.addSelectedPostChangeListener(this.onPostChange);
        PostStore.addChangeListener(this.onPostChange);
        PreferenceStore.addChangeListener(this.forceUpdateInfo);
+        PreferenceStore.addChangeListener(this.onPreferenceChange);
        UserStore.addChangeListener(this.onUserChange);

        this.scrollToBottom();
@@ -74,6 +78,7 @@ export default class RhsThread extends React.Component {
        PostStore.removeSelectedPostChangeListener(this.onPostChange);
        PostStore.removeChangeListener(this.onPostChange);
        PreferenceStore.removeChangeListener(this.forceUpdateInfo);
+        PreferenceStore.removeChangeListener(this.onPreferenceChange);
        UserStore.removeChangeListener(this.onUserChange);

        window.removeEventListener('resize', this.handleResize);
@@ -103,6 +108,10 @@ export default class RhsThread extends React.Component {
            return true;
        }

+        if (nextState.compactDisplay !== this.state.compactDisplay) {
+            return true;
+        }
+
        if (!Utils.areObjectsEqual(nextState.profiles, this.state.profiles)) {
            return true;
        }
@@ -124,6 +133,11 @@ export default class RhsThread extends React.Component {
            windowHeight: Utils.windowHeight()
        });
    }
+    onPreferenceChange() {
+        this.setState({
+            compactDisplay: PreferenceStore.get(Preferences.CATEGORY_DISPLAY_SETTINGS, Preferences.MESSAGE_DISPLAY, Preferences.MESSAGE_DISPLAY_DEFAULT) === Preferences.MESSAGE_DISPLAY_COMPACT
+        });
+    }
    onPostChange() {
        if (this.mounted) {
            this.setState(this.getPosts());
@@ -228,6 +242,7 @@ export default class RhsThread extends React.Component {
                                commentCount={postsArray.length}
                                user={profile}
                                currentUser={this.props.currentUser}
+                                compactDisplay={this.state.compactDisplay}
                            />
                            <div className='post-right-comments-container'>
                                {postsArray.map((comPost) => {
@@ -244,6 +259,7 @@ export default class RhsThread extends React.Component {
                                            post={comPost}
                                            user={p}
                                            currentUser={this.props.currentUser}
+                                            compactDisplay={this.state.compactDisplay}
                                        />
                                    );
                                })}