Multiple UI improvements (#3220)

* Multiple UI improvements * Pushing time fix * Fixing absolute time stamps on IOS
2016-06-03 00:34:47 +05:00
--- a/webapp/components/post_view/components/post_attachment.jsx
+++ b/webapp/components/post_view/components/post_attachment.jsx
@@ -9,11 +9,11 @@ import {intlShape, injectIntl, defineMessages} from 'react-intl';
 const holders = defineMessages({
    collapse: {
        id: 'post_attachment.collapse',
-        defaultMessage: '▲ collapse text'
+        defaultMessage: 'Show less...'
    },
    more: {
        id: 'post_attachment.more',
-        defaultMessage: '▼ read more'
+        defaultMessage: 'Show more...'
    }
 });

@@ -44,7 +44,7 @@ class PostAttachment extends React.Component {
    getInitState() {
        const shouldCollapse = this.shouldCollapse();
        const text = TextFormatting.formatText(this.props.attachment.text || '');
-        const uncollapsedText = text + (shouldCollapse ? `<a class="attachment-link-more" href="#">${this.props.intl.formatMessage(holders.collapse)}</a>` : '');
+        const uncollapsedText = text + (shouldCollapse ? `<div><a class="attachment-link-more" href="#">${this.props.intl.formatMessage(holders.collapse)}</a></div>` : '');
        const collapsedText = shouldCollapse ? this.getCollapsedText() : text;

        return {
@@ -78,7 +78,7 @@ class PostAttachment extends React.Component {
            text = text.substr(0, 700);
        }

-        return TextFormatting.formatText(text) + `<a class="attachment-link-more" href="#">${this.props.intl.formatMessage(holders.more)}</a>`;
+        return TextFormatting.formatText(text) + `<div><a class="attachment-link-more" href="#">${this.props.intl.formatMessage(holders.more)}</a></div>`;
    }

    getFieldsTable() {
@@ -99,7 +99,7 @@ class PostAttachment extends React.Component {
            if (rowPos === 2 || !(field.short === true) || lastWasLong) {
                fieldTables.push(
                    <table
-                        className='attachment___fields'
+                        className='attachment-fields'
                        key={'attachment__table__' + nrTables}
                    >
                        <thead>
@@ -122,7 +122,7 @@ class PostAttachment extends React.Component {
            }
            headerCols.push(
                <th
-                    className='attachment___field-caption'
+                    className='attachment-field__caption'
                    key={'attachment__field-caption-' + i + '__' + nrTables}
                    width='50%'
                >
@@ -131,7 +131,7 @@ class PostAttachment extends React.Component {
            );
            bodyCols.push(
                <td
-                    className='attachment___field'
+                    className='attachment-field'
                    key={'attachment__field-' + i + '__' + nrTables}
                    dangerouslySetInnerHTML={{__html: TextFormatting.formatText(field.value || '')}}
                >
@@ -143,7 +143,7 @@ class PostAttachment extends React.Component {
        if (headerCols.length > 0) { // Flush last fields
            fieldTables.push(
                <table
-                    className='attachment___fields'
+                    className='attachment-fields'
                    key={'attachment__table__' + nrTables}
                >
                    <thead>
--- a/webapp/components/post_view/components/post_body.jsx
+++ b/webapp/components/post_view/components/post_body.jsx
@@ -171,6 +171,7 @@ export default class PostBody extends React.Component {
                <PostBodyAdditionalContent
                    post={this.props.post}
                    message={messageWrapper}
+                    compactDisplay={this.props.compactDisplay}
                />
            );
        }
--- a/webapp/components/post_view/components/post_body_additional_content.jsx
+++ b/webapp/components/post_view/components/post_body_additional_content.jsx
@@ -97,16 +97,18 @@ export default class PostBodyAdditionalContent extends React.Component {
            );
        }

-        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}
-                    />
-                );
+        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}
+                        />
+                    );
+                }
            }
        }

@@ -158,5 +160,6 @@ export default class PostBodyAdditionalContent extends React.Component {

 PostBodyAdditionalContent.propTypes = {
    post: React.PropTypes.object.isRequired,
+    compactDisplay: React.PropTypes.bool,
    message: React.PropTypes.element.isRequired
 };
--- a/webapp/components/rhs_root_post.jsx
+++ b/webapp/components/rhs_root_post.jsx
@@ -41,6 +41,7 @@ export default class RhsRootPost extends React.Component {
    render() {
        const post = this.props.post;
        const user = this.props.user;
+        const mattermostLogo = Constants.MATTERMOST_ICON_SVG;
        var isOwner = this.props.currentUser.id === post.user_id;
        var isAdmin = TeamStore.isTeamAdminForCurrentTeam() || UserStore.isSystemAdminForCurrentUser();
        const isSystemMessage = post.type && post.type.startsWith(Constants.SYSTEM_MESSAGE_PREFIX);
@@ -201,7 +202,7 @@ export default class RhsRootPost extends React.Component {
            );
        }

-        const profilePic = (
+        let profilePic = (
            <img
                className='post-profile-img'
                src={PostUtils.getProfilePicSrcForPost(post, timestamp)}
@@ -210,6 +211,15 @@ export default class RhsRootPost extends React.Component {
            />
        );

+        if (PostUtils.isSystemMessage(post)) {
+            profilePic = (
+                <span
+                    className='icon'
+                    dangerouslySetInnerHTML={{__html: mattermostLogo}}
+                />
+            );
+        }
+
        const messageWrapper = (
            <div
                ref='message_holder'
--- a/webapp/components/sidebar.jsx
+++ b/webapp/components/sidebar.jsx
@@ -629,8 +629,8 @@ export default class Sidebar extends React.Component {
                    onClick={this.showMoreDirectChannelsModal}
                >
                    <FormattedMessage
-                        id='sidebar.more'
-                        defaultMessage='More'
+                        id='sidebar.moreElips'
+                        defaultMessage='More...'
                    />
                </a>
            </li>
--- a/webapp/components/time_since.jsx
+++ b/webapp/components/time_since.jsx
@@ -4,10 +4,6 @@
 import Constants from 'utils/constants.jsx';
 import * as Utils from 'utils/utils.jsx';

-import {FormattedRelative, FormattedDate} from 'react-intl';
-
-import {Tooltip, OverlayTrigger} from 'react-bootstrap';
-
 import React from 'react';
 import PureRenderMixin from 'react-addons-pure-render-mixin';

@@ -26,38 +22,10 @@ export default class TimeSince extends React.Component {
        clearInterval(this.intervalId);
    }
    render() {
-        if (this.props.sameUser || this.props.compactDisplay) {
-            return (
-                <time className='post__time'>
-                    {Utils.displayTimeFormatted(this.props.eventTime)}
-                </time>
-            );
-        }
-
-        const tooltip = (
-            <Tooltip id={'time-since-tooltip-' + this.props.eventTime}>
-                <FormattedDate
-                    value={this.props.eventTime}
-                    month='long'
-                    day='numeric'
-                    year='numeric'
-                    hour12={!Utils.isMilitaryTime()}
-                    hour='numeric'
-                    minute='2-digit'
-                />
-            </Tooltip>
-        );
-
        return (
-            <OverlayTrigger
-                delayShow={Constants.OVERLAY_TIME_DELAY}
-                placement='top'
-                overlay={tooltip}
-            >
-                <time className='post__time'>
-                    <FormattedRelative value={this.props.eventTime}/>
-                </time>
-            </OverlayTrigger>
+            <time className='post__time'>
+                {Utils.displayTimeFormatted(this.props.eventTime)}
+            </time>
        );
    }
 }
--- a/webapp/components/user_settings/user_settings_display.jsx
+++ b/webapp/components/user_settings/user_settings_display.jsx
@@ -386,7 +386,7 @@ export default class UserSettingsDisplay extends React.Component {
                            />
                            <FormattedMessage
                                id='user.settings.display.messageDisplayClean'
-                                defaultMessage='Clean'
+                                defaultMessage='Standard'
                            />
                        </label>
                        <br/>
@@ -439,7 +439,7 @@ export default class UserSettingsDisplay extends React.Component {
                describe = (
                    <FormattedMessage
                        id='user.settings.display.messageDisplayClean'
-                        defaultMessage='Clean'
+                        defaultMessage='Standard'
                    />
                );
            } else {