Merge pull request #5719 from matrix-org/travis/file-representation

UI refresh for uploaded files

res/css/views/messages/_MFileBody.scss

@@ -45,3 +45,46 @@ limitations under the License.
      * big the content of the iframe is. */
     height: 1.5em;
 }
+
+.mx_MFileBody_info {
+    background-color: $message-body-panel-bg-color;
+    border-radius: 4px;
+    width: 270px;
+    padding: 8px;
+    color: $message-body-panel-fg-color;
+
+    .mx_MFileBody_info_icon {
+        background-color: $message-body-panel-icon-bg-color;
+        border-radius: 20px;
+        display: inline-block;
+        width: 32px;
+        height: 32px;
+        position: relative;
+        vertical-align: middle;
+        margin-right: 12px;
+
+        &::before {
+            content: '';
+            mask-repeat: no-repeat;
+            mask-position: center;
+            mask-size: cover;
+            mask-image: url('$(res)/img/element-icons/room/composer/attach.svg');
+            background-color: $message-body-panel-fg-color;
+            width: 13px;
+            height: 15px;
+
+            position: absolute;
+            top: 8px;
+            left: 9px;
+        }
+    }
+
+    .mx_MFileBody_info_filename {
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        display: inline-block;
+        width: calc(100% - 32px - 12px); // 32px icon, 12px margin on the icon
+        vertical-align: middle;
+    }
+}

res/css/views/rooms/_IRCLayout.scss

@@ -181,8 +181,7 @@ $irc-line-height: $font-18px;
         > span {
             display: flex;
 
-            > .mx_SenderProfile_name,
+            > .mx_SenderProfile_name {
-            > .mx_SenderProfile_aux {
                 overflow: hidden;
                 text-overflow: ellipsis;
                 min-width: var(--name-width);
@@ -212,8 +211,7 @@ $irc-line-height: $font-18px;
             background: transparent;
 
             > span {
-                > .mx_SenderProfile_name,
+                > .mx_SenderProfile_name {
-                > .mx_SenderProfile_aux {
                     min-width: inherit;
                 }
             }

res/themes/dark/css/_dark.scss

@@ -200,6 +200,10 @@ $breadcrumb-placeholder-bg-color: #272c35;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
+$message-body-panel-bg-color: #21262c82;
+$message-body-panel-icon-bg-color: #8e99a4;
+$message-body-panel-fg-color: $primary-fg-color;
+
 // Appearance tab colors
 $appearance-tab-border-color: $room-highlight-color;
 

res/themes/legacy-dark/css/_legacy-dark.scss

@@ -195,6 +195,10 @@ $breadcrumb-placeholder-bg-color: #272c35;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
+$message-body-panel-bg-color: #21262c82;
+$message-body-panel-icon-bg-color: #8e99a4;
+$message-body-panel-fg-color: $primary-fg-color;
+
 // Appearance tab colors
 $appearance-tab-border-color: $room-highlight-color;
 

res/themes/legacy-light/css/_legacy-light.scss

@@ -320,6 +320,10 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
+$message-body-panel-bg-color: #e3e8f082;
+$message-body-panel-icon-bg-color: #ffffff;
+$message-body-panel-fg-color: $muted-fg-color;
+
 // FontSlider colors
 $appearance-tab-border-color: $input-darker-bg-color;
 

res/themes/light/css/_light.scss

@@ -318,6 +318,10 @@ $breadcrumb-placeholder-bg-color: #e8eef5;
 
 $user-tile-hover-bg-color: $header-panel-bg-color;
 
+$message-body-panel-bg-color: #e3e8f082;
+$message-body-panel-icon-bg-color: #ffffff;
+$message-body-panel-fg-color: $muted-fg-color;
+
 // FontSlider colors
 $appearance-tab-border-color: $input-darker-bg-color;
 

src/components/views/messages/MAudioBody.js

@@ -105,7 +105,7 @@ export default class MAudioBody extends React.Component {
         return (
             <span className="mx_MAudioBody">
                 <audio src={contentUrl} controls />
-                <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />
+                <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
             </span>
         );
     }

src/components/views/messages/MFileBody.js

@@ -126,6 +126,12 @@ export default class MFileBody extends React.Component {
         onHeightChanged: PropTypes.func,
         /* the shape of the tile, used */
         tileShape: PropTypes.string,
+        /* whether or not to show the default placeholder for the file. Defaults to true. */
+        showGenericPlaceholder: PropTypes.bool,
+    };
+
+    static defaultProps = {
+        showGenericPlaceholder: true,
     };
 
     constructor(props) {
@@ -145,9 +151,10 @@ export default class MFileBody extends React.Component {
      * link text.
      *
      * @param {Object} content The "content" key of the matrix event.
+     * @param {boolean} withSize Whether to include size information. Default true.
      * @return {string} the human readable link text for the attachment.
      */
-    presentableTextForFile(content) {
+    presentableTextForFile(content, withSize = true) {
         let linkText = _t("Attachment");
         if (content.body && content.body.length > 0) {
             // The content body should be the name of the file including a
@@ -155,7 +162,7 @@ export default class MFileBody extends React.Component {
             linkText = content.body;
         }
 
-        if (content.info && content.info.size) {
+        if (content.info && content.info.size && withSize) {
             // If we know the size of the file then add it as human readable
             // string to the end of the link text so that the user knows how
             // big a file they are downloading.
@@ -218,6 +225,16 @@ export default class MFileBody extends React.Component {
         const fileSize = content.info ? content.info.size : null;
         const fileType = content.info ? content.info.mimetype : "application/octet-stream";
 
+        let placeholder = null;
+        if (this.props.showGenericPlaceholder) {
+            placeholder = (
+                <div className="mx_MFileBody_info">
+                    <span className="mx_MFileBody_info_icon" />
+                    <span className="mx_MFileBody_info_filename">{this.presentableTextForFile(content, false)}</span>
+                </div>
+            );
+        }
+
         if (isEncrypted) {
             if (this.state.decryptedBlob === null) {
                 // Need to decrypt the attachment
@@ -248,6 +265,7 @@ export default class MFileBody extends React.Component {
                 // but it is not guaranteed between various browsers' settings.
                 return (
                     <span className="mx_MFileBody">
+                        {placeholder}
                         <div className="mx_MFileBody_download">
                             <AccessibleButton onClick={decrypt}>
                                 { _t("Decrypt %(text)s", { text: text }) }
@@ -278,6 +296,7 @@ export default class MFileBody extends React.Component {
             // If the attachment is encrypted then put the link inside an iframe.
             return (
                 <span className="mx_MFileBody">
+                    {placeholder}
                     <div className="mx_MFileBody_download">
                         <div style={{display: "none"}}>
                             { /*
@@ -346,6 +365,7 @@ export default class MFileBody extends React.Component {
             if (this.props.tileShape === "file_grid") {
                 return (
                     <span className="mx_MFileBody">
+                        {placeholder}
                         <div className="mx_MFileBody_download">
                             <a className="mx_MFileBody_downloadLink" {...downloadProps}>
                                 { fileName }
@@ -359,6 +379,7 @@ export default class MFileBody extends React.Component {
             } else {
                 return (
                     <span className="mx_MFileBody">
+                        {placeholder}
                         <div className="mx_MFileBody_download">
                             <a {...downloadProps}>
                                 <img src={tintedDownloadImageURL} width="12" height="14" ref={this._downloadImage} />
@@ -371,6 +392,7 @@ export default class MFileBody extends React.Component {
         } else {
             const extra = text ? (': ' + text) : '';
             return <span className="mx_MFileBody">
+                {placeholder}
                 { _t("Invalid file%(extra)s", { extra: extra }) }
             </span>;
         }

src/components/views/messages/MImageBody.js

@@ -452,7 +452,7 @@ export default class MImageBody extends React.Component {
 
     // Overidden by MStickerBody
     getFileBody() {
-        return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />;
+        return <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />;
     }
 
     render() {

src/components/views/messages/MVideoBody.tsx

@@ -243,7 +243,7 @@ export default class MVideoBody extends React.PureComponent<IProps, IState> {
                     onPlay={this.videoOnPlay}
                 >
                 </video>
-                <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} />
+                <MFileBody {...this.props} decryptedBlob={this.state.decryptedBlob} showGenericPlaceholder={false} />
             </span>
         );
     }

src/components/views/messages/SenderProfile.js

@@ -18,14 +18,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Flair from '../elements/Flair.js';
 import FlairStore from '../../../stores/FlairStore';
-import { _t } from '../../../languageHandler';
 import {getUserNameColorClass} from '../../../utils/FormattingUtils';
 import MatrixClientContext from "../../../contexts/MatrixClientContext";
 
 export default class SenderProfile extends React.Component {
     static propTypes = {
         mxEvent: PropTypes.object.isRequired, // event whose sender we're showing
-        text: PropTypes.string, // Text to show. Defaults to sender name
         onClick: PropTypes.func,
     };
 
@@ -118,17 +116,10 @@ export default class SenderProfile extends React.Component {
             { flair }
         </span>;
 
-        const content = this.props.text ?
-            <span>
-                <span className="mx_SenderProfile_aux">
-                    { _t(this.props.text, { senderName: () => nameElem }) }
-                </span>
-            </span> : nameFlair;
-
         return (
             <div className="mx_SenderProfile" dir="auto" onClick={this.props.onClick}>
                 <div className="mx_SenderProfile_hover">
-                    { content }
+                    { nameFlair }
                 </div>
             </div>
         );

src/components/views/rooms/EventTile.js

@@ -22,7 +22,7 @@ import React, {createRef} from 'react';
 import PropTypes from 'prop-types';
 import classNames from "classnames";
 import {EventType} from "matrix-js-sdk/src/@types/event";
-import { _t, _td } from '../../../languageHandler';
+import { _t } from '../../../languageHandler';
 import * as TextForEvent from "../../../TextForEvent";
 import * as sdk from "../../../index";
 import dis from '../../../dispatcher/dispatcher';
@@ -888,15 +888,10 @@ export default class EventTile extends React.Component {
         }
 
         if (needsSenderProfile) {
-            let text = null;
             if (!this.props.tileShape || this.props.tileShape === 'reply' || this.props.tileShape === 'reply_preview') {
-                if (msgtype === 'm.image') text = _td('%(senderName)s sent an image');
-                else if (msgtype === 'm.video') text = _td('%(senderName)s sent a video');
-                else if (msgtype === 'm.file') text = _td('%(senderName)s uploaded a file');
                 sender = <SenderProfile onClick={this.onSenderProfileClick}
                                         mxEvent={this.props.mxEvent}
-                                        enableFlair={this.props.enableFlair && !text}
+                                        enableFlair={this.props.enableFlair} />;
-                                        text={text} />;
             } else {
                 sender = <SenderProfile mxEvent={this.props.mxEvent} enableFlair={this.props.enableFlair} />;
             }

src/i18n/strings/en_EN.json

@@ -1430,9 +1430,6 @@
     "Edit message": "Edit message",
     "Mod": "Mod",
     "This event could not be displayed": "This event could not be displayed",
-    "%(senderName)s sent an image": "%(senderName)s sent an image",
-    "%(senderName)s sent a video": "%(senderName)s sent a video",
-    "%(senderName)s uploaded a file": "%(senderName)s uploaded a file",
     "Your key share request has been sent - please check your other sessions for key share requests.": "Your key share request has been sent - please check your other sessions for key share requests.",
     "Key share requests are sent to your other sessions automatically. If you rejected or dismissed the key share request on your other sessions, click here to request the keys for this session again.": "Key share requests are sent to your other sessions automatically. If you rejected or dismissed the key share request on your other sessions, click here to request the keys for this session again.",
     "If your other sessions do not have the key for this message you will not be able to decrypt them.": "If your other sessions do not have the key for this message you will not be able to decrypt them.",