Multiple UI improvements (#3220)

* Multiple UI improvements

* Pushing time fix

* Fixing absolute time stamps on IOS

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>

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

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

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'

webapp/components/sidebar.jsx

@@ -629,8 +629,8 @@ export default class Sidebar extends React.Component {
                     onClick={this.showMoreDirectChannelsModal}
                 >
                     <FormattedMessage
-                        id='sidebar.more'
+                        id='sidebar.moreElips'
-                        defaultMessage='More'
+                        defaultMessage='More...'
                     />
                 </a>
             </li>

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
+            <time className='post__time'>
-                delayShow={Constants.OVERLAY_TIME_DELAY}
+                {Utils.displayTimeFormatted(this.props.eventTime)}
-                placement='top'
+            </time>
-                overlay={tooltip}
-            >
-                <time className='post__time'>
-                    <FormattedRelative value={this.props.eventTime}/>
-                </time>
-            </OverlayTrigger>
         );
     }
 }

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 {

webapp/i18n/en.json

@@ -1027,8 +1027,8 @@
   "pending_post_actions.cancel": "Cancel",
   "pending_post_actions.retry": "Retry",
   "permalink.error.access": "Permalink belongs to a channel you do not have access to",
-  "post_attachment.collapse": "▲ collapse text",
+  "post_attachment.collapse": "Show less...",
-  "post_attachment.more": "▼ read more",
+  "post_attachment.more": "Show more...",
   "post_body.commentedOn": "Commented on {name}{apostrophe} message: ",
   "post_body.deleted": "(message deleted)",
   "post_body.plusMore": " plus {count} other files",
@@ -1278,7 +1278,7 @@
   "user.settings.display.fontTitle": "Display Font",
   "user.settings.display.fullScreen": "Full width",
   "user.settings.display.language": "Language",
-  "user.settings.display.messageDisplayClean": "Clean",
+  "user.settings.display.messageDisplayClean": "Standard",
   "user.settings.display.messageDisplayCompact": "Compact",
   "user.settings.display.messageDisplayDescription": "Select how messages in a channel should be displayed.",
   "user.settings.display.messageDisplayTitle": "Message Display",

webapp/sass/components/_mentions.scss

@@ -10,17 +10,19 @@
 }
 
 .mentions__name {
+    @include clearfix;
     cursor: pointer;
     font-size: 13px;
     height: 36px;
     line-height: 36px;
+    margin: 5px 0;
     padding: 2px;
     position: relative;
     white-space: nowrap;
     width: 100%;
     z-index: 101;
 
-    .mention-align {
+    .mention--align {
         @include clearfix;
         text-overflow: ellipsis;
         width: calc(100% - 50px);

webapp/sass/layout/_headers.scss

@@ -68,7 +68,6 @@
 .channel-intro {
     border-bottom: 1px solid $light-gray;
     margin: 0 auto 15px;
-    max-width: 990px;
     padding: 0 15px;
 
     .intro-links {

webapp/sass/layout/_post.scss

@@ -258,6 +258,10 @@ body.ios {
         position: absolute;
         width: 100%;
 
+        .modal-open & {
+            @include clearfix;
+        }
+
         &.active {
             display: inline;
         }
@@ -484,6 +488,26 @@ body.ios {
     }
 
     &.post--compact {
+        blockquote {
+            display: inline-block;
+            font-size: 1em;
+            margin-left: 0;
+            padding: 3px 0 0 25px;
+            vertical-align: top;
+
+            &:before {
+                font-size: 15px;
+                left: 4px;
+                top: 2px;
+            }
+        }
+
+        .post__embed-container {
+            img {
+                max-height: 150px;
+                max-width: 150px;
+            }
+        }
 
         .markdown__heading {
             font-size: 1em;
@@ -492,8 +516,15 @@ body.ios {
 
         .post__body {
             background: transparent !important;
+            line-height: 1.2;
             margin-top: -1px;
             padding: 3px 0;
+
+            ol,
+            ul {
+                display: inline-block;
+                padding-left: 30px;
+            }
         }
 
         .post-image__columns {
@@ -547,7 +578,7 @@ body.ios {
 
         .post__img {
             padding-top: 3px;
-            width: 28px;
+            width: 27px;
 
             img,
             svg {
@@ -586,8 +617,8 @@ body.ios {
 
     &.post--comment {
         .post__body {
-            padding-left: 7px;
             border-left: 4px solid $gray;
+            padding-left: 7px;
         }
     }
 
@@ -595,6 +626,33 @@ body.ios {
         &.same--user {
             padding: 0 .5em 0 1em;
 
+            &.post--system {
+                padding: 8px .5em 0 1em;
+
+                .post__header {
+                    height: auto;
+                    margin-bottom: 2px;
+
+                    .col__name {
+                        display: inline-block;
+                    }
+
+                    .col__reply {
+
+                    }
+                }
+
+                .post__time {
+                    @include opacity(.6);
+                    font-size: .9em;
+                    left: inherit;
+                    line-height: inherit;
+                    position: inherit;
+                    text-rendering: inherit;
+                    top: inherit;
+                }
+            }
+
             &:hover {
                 .post__time {
                     @include opacity(.5);
@@ -1047,102 +1105,6 @@ body.ios {
     padding: 2px 4px;
 }
 
-.attachment {
-    .attachment__content {
-        border-radius: 4px;
-        border-style: solid;
-        border-width: 1px;
-        margin: 0 0 5px 0;
-        padding: 2px 5px;
-    }
-
-    .attachment__thumb-pretext {
-        background: transparent;
-        border: none;
-        margin-left: 5px;
-    }
-
-    .attachment__container {
-        border-left-style: solid;
-        border-left-width: 4px;
-        padding: 2px 0 2px 10px;
-
-        &.attachment__container--good {
-            border-left-color: #00c100;
-        }
-
-        &.attachment__container--warning {
-            border-left-color: #dede01;
-        }
-
-        &.attachment__container--danger {
-            border-left-color: #e40303;
-        }
-    }
-
-    .attachment__body {
-        float: left;
-        overflow-x: auto;
-        overflow-y: hidden;
-        padding-right: 5px;
-        width: 80%;
-
-        &.attachment__body--no_thumb {
-            width: 100%;
-        }
-    }
-
-    .attachment__text p:last-of-type {
-        display: inline-block;
-    }
-
-    .attachment__title {
-        font-size: 16px;
-        height: 22px;
-        line-height: 16px;
-        margin: 5px 0;
-        padding: 0;
-
-        a {
-            font-size: 16px;
-        }
-    }
-
-    .attachment__author-icon {
-        @include border-radius(50px);
-        height: 14px;
-        margin-right: 5px;
-        width: 14px;
-    }
-
-    .attachment__image {
-        margin-bottom: 1em;
-        max-width: 100%;
-    }
-
-    .attachment__thumb-container {
-        float: right;
-        width: 20%;
-
-        img {
-            max-height: 75px;
-            max-width: 100%;
-        }
-    }
-
-    .attachment___fields {
-        width: 100%;
-
-        .attachment___field-caption {
-            font-weight: 700;
-        }
-
-        .attachment___field p {
-            margin: 0;
-        }
-    }
-}
-
 .permalink-text {
     overflow: hidden;
 }

webapp/sass/layout/_sidebar-left.scss

@@ -184,10 +184,6 @@
                     }
                 }
 
-                &.nav-more {
-                    text-decoration: underline;
-                }
-
                 &.unread-title {
                     font-weight: 600;
                 }

webapp/sass/layout/_webhooks.scss

@@ -35,3 +35,110 @@
         padding-right: 20px;
     }
 }
+
+
+.attachment {
+    .attachment__content {
+        border-radius: 4px;
+        border-style: solid;
+        border-width: 1px;
+        margin: 0 0 5px 0;
+        padding: 2px 5px;
+    }
+
+    .attachment__thumb-pretext {
+        background: transparent;
+        border: none;
+        margin-left: 5px;
+    }
+
+    .attachment__container {
+        border-left-style: solid;
+        border-left-width: 4px;
+        padding: 10px;
+
+        &.attachment__container--good {
+            border-left-color: #00c100;
+        }
+
+        &.attachment__container--warning {
+            border-left-color: #dede01;
+        }
+
+        &.attachment__container--danger {
+            border-left-color: #e40303;
+        }
+    }
+
+    .attachment__body {
+        float: left;
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding-right: 5px;
+        width: 80%;
+
+        &.attachment__body--no_thumb {
+            width: 100%;
+        }
+    }
+
+    .attachment__text p:last-of-type {
+        display: inline-block;
+    }
+
+    .attachment__author-name {
+        @include opacity(.6);
+    }
+
+    .attachment__title {
+        font-size: 14px;
+        font-weight: 600;
+        height: 22px;
+        line-height: 18px;
+        margin: 5px 0;
+        padding: 0;
+    }
+
+    .attachment-link-more {
+        display: inline-block;
+        font-size: .9em;
+        margin: 5px 0;
+    }
+
+    .attachment__author-icon {
+        @include border-radius(50px);
+        height: 14px;
+        margin-right: 5px;
+        width: 14px;
+    }
+
+    .attachment__image {
+        margin-bottom: 1em;
+        max-width: 100%;
+    }
+
+    .attachment__thumb-container {
+        float: right;
+        width: 20%;
+
+        img {
+            max-height: 75px;
+            max-width: 100%;
+        }
+    }
+
+    .attachment-fields {
+        width: 100%;
+
+        .attachment-field__caption {
+            font-weight: 600;
+            padding-top: .7em;
+        }
+
+        .attachment-field {
+            p {
+                margin: 0;
+            }
+        }
+    }
+}

webapp/sass/responsive/_tablet.scss

@@ -113,6 +113,21 @@
 
                 .col__name {
                     font-weight: bold;
+                    margin-right: 2px;
+                    padding-right: 10px;
+                    position: relative;
+                    z-index: 1;
+
+                    &:after {
+                        content: ':';
+                        display: inline-block;
+                        font-family: FontAwesome;
+                        font-size: 19px;
+                        position: absolute;
+                        right: 3px;
+                        text-rendering: auto;
+                        top: -5px;
+                    }
                 }
 
                 .col__reply {
@@ -202,6 +217,13 @@
                 }
 
                 &.post--compact {
+                    &.post--system {
+                        .post__time {
+                            position: absolute;
+                            top: 3px;
+                        }
+                    }
+
                     .post__time {
                         font-size: .85em;
                         left: -70px;

webapp/sass/routes/_settings.scss

@@ -141,17 +141,12 @@
                     }
 
                     .group--code {
-
                         select {
                             @include appearance(none);
                             appearance: none;
                             padding-right: 25px;
                         }
 
-                        select::ms-expand {
-                            display: none;
-                        }
-
                         &:before {
                             @include font-smoothing;
                             content: '\f0d7';
@@ -163,6 +158,10 @@
                             text-rendering: auto;
                             top: 11px;
                             z-index: 5;
+
+                            .browser--ie & {
+                                display: none;
+                            }
                         }
                     }
 

webapp/utils/utils.jsx

@@ -229,8 +229,8 @@ export function displayTimeFormatted(ticks) {
     return (
         <FormattedTime
             value={ticks}
-            hour='numeric'
+            hour='2-digit'
-            minute='numeric'
+            minute='2-digit'
             hour12={!useMilitaryTime}
         />
     );
@@ -633,7 +633,7 @@ export function applyTheme(theme) {
     }
 
     if (theme.centerChannelBg) {
-        changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content', 'background:' + theme.centerChannelBg, 1);
+        changeCss('.app__body .app__content, .app__body .markdown__table, .app__body .markdown__table tbody tr, .app__body .suggestion-list__content, .app__body .modal .modal-content, .app__body .post.post--compact .post-image__column', 'background:' + theme.centerChannelBg, 1);
         changeCss('#post-list .post-list-holder-by-time', 'background:' + theme.centerChannelBg, 1);
         changeCss('#post-create', 'background:' + theme.centerChannelBg, 1);
         changeCss('.app__body .date-separator .separator__text, .app__body .new-separator .separator__text', 'background:' + theme.centerChannelBg, 1);
@@ -654,6 +654,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .post-list__arrows', 'fill:' + changeOpacity(theme.centerChannelColor, 0.3), 1);
         changeCss('.app__body .sidebar--left, .app__body .sidebar--right .sidebar--right__header, .app__body .suggestion-list__content .command', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.app__body .app__content, .app__body .post-create__container .post-create-body .btn-file, .app__body .post-create__container .post-create-footer .msg-typing, .app__body .suggestion-list__content .command, .app__body .modal .modal-content, .app__body .dropdown-menu, .app__body .popover, .app__body .mentions__name, .app__body .tip-overlay', 'color:' + theme.centerChannelColor, 1);
+        changeCss('.app__body .post .post__link', 'color:' + changeOpacity(theme.centerChannelColor, 0.6), 1);
         changeCss('.app__body #archive-link-home, .video-div .video-thumbnail__error', 'background:' + changeOpacity(theme.centerChannelColor, 0.15), 1);
         changeCss('.app__body #post-create', 'color:' + theme.centerChannelColor, 2);
         changeCss('.app__body .mentions--top, .app__body .suggestion-list', 'box-shadow:' + changeOpacity(theme.centerChannelColor, 0.2) + ' 1px -3px 12px', 3);
@@ -706,6 +707,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .scrollbar--horizontal, .app__body .scrollbar--vertical', 'background:' + changeOpacity(theme.centerChannelColor, 0.5), 2);
         changeCss('.app__body .post-list__new-messages-below', 'background:' + changeColor(theme.centerChannelColor, 0.5), 2);
         changeCss('.app__body .post.post--comment .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
+        changeCss('@media(min-width: 768px){.app__body .post.post--compact.same--root.post--comment .post__content', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
         changeCss('.app__body .post.post--comment.current--user .post__body', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2), 1);
     }