From 848a8663ed7f856aee3f801a62b82e87b20de0ea Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmoodspin@users.noreply.github.com>
Date: Fri, 3 Jun 2016 00:34:47 +0500
Subject: Multiple UI improvements (#3220)

* Multiple UI improvements

* Pushing time fix

* Fixing absolute time stamps on IOS
---
 .../post_view/components/post_attachment.jsx       | 16 ++++-----
 .../components/post_view/components/post_body.jsx  |  1 +
 .../components/post_body_additional_content.jsx    | 23 +++++++------
 webapp/components/rhs_root_post.jsx                | 12 ++++++-
 webapp/components/sidebar.jsx                      |  4 +--
 webapp/components/time_since.jsx                   | 38 ++--------------------
 .../user_settings/user_settings_display.jsx        |  4 +--
 7 files changed, 40 insertions(+), 58 deletions(-)

(limited to 'webapp/components')

diff --git a/webapp/components/post_view/components/post_attachment.jsx b/webapp/components/post_view/components/post_attachment.jsx
index 8b5ff91f2..4442b735a 100644
--- 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>
diff --git a/webapp/components/post_view/components/post_body.jsx b/webapp/components/post_view/components/post_body.jsx
index 75ba30f23..eba62ad77 100644
--- 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}
                 />
             );
         }
diff --git a/webapp/components/post_view/components/post_body_additional_content.jsx b/webapp/components/post_view/components/post_body_additional_content.jsx
index 89941f5b2..ea6e1cb49 100644
--- 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
 };
diff --git a/webapp/components/rhs_root_post.jsx b/webapp/components/rhs_root_post.jsx
index e6edcb86a..f7c9c9141 100644
--- 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'
diff --git a/webapp/components/sidebar.jsx b/webapp/components/sidebar.jsx
index 8abf3fa55..f6958e721 100644
--- 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>
diff --git a/webapp/components/time_since.jsx b/webapp/components/time_since.jsx
index 50a0f7d04..2fbf73e31 100644
--- 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>
         );
     }
 }
diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx
index 16175d4de..a7015d403 100644
--- 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 {
-- 
cgit v1.2.3-1-g7c22