[PLT-4276] Adapt file upload progress to latest requirements

- Rebase on latest master - Fix latest changes
mattermost · Mar 6, 2017 · 3be5817 · 3be5817
1 parent 27c86ad
commit 3be5817
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 29 deletions.
diff --git a/webapp/components/file_preview.jsx b/webapp/components/file_preview.jsx
@@ -51,14 +51,16 @@ export default class FilePreview extends React.Component {
                     className={className}
                     title={info.name}
                 >
-                    {previewImage}
-                    <a
-                        className='file-preview__remove'
-                        onClick={this.handleRemove.bind(this, info.id)}
-                    >
-                        <i className='fa fa-remove'/>
-                    </a>
-                    <TruncateText length='15'>{info.name}</TruncateText>
+                    <div className='file-preview__image-container'>
+                        {previewImage}
+                        <a
+                            className='file-preview__remove'
+                            onClick={this.handleRemove.bind(this, info.id)}
+                        >
+                            <i className='fa fa-remove'/>
+                        </a>
+                    </div>
+                    <TruncateText length={20}>{info.name}</TruncateText>
                 </div>
             );
         });
@@ -70,7 +72,7 @@ export default class FilePreview extends React.Component {
             if (this.props.uploadsProgressPercent[clientId]) {
                 percent = this.props.uploadsProgressPercent[clientId].percent;
                 fileName = this.props.uploadsProgressPercent[clientId].fileName;
-                uploadComponent = <p>{'Uploading '} <TruncateText length='10'>{fileName}</TruncateText></p>;
+                uploadComponent = <p><TruncateText length={20}>{'Uploading '} {fileName}</TruncateText></p>;
             }
             previews.push(
                 <div
@@ -80,13 +82,15 @@ export default class FilePreview extends React.Component {
                     data-client-id={clientId}
                     title={fileName}
                 >
-                    <FileUploadProgress percent={Math.min(percent, 98)}/>
-                    <a
-                        className='file-preview__remove'
-                        onClick={this.handleRemove.bind(this, clientId)}
-                    >
-                        <i className='fa fa-remove'/>
-                    </a>
+                    <div className='file-preview__image-container'>
+                        <FileUploadProgress percent={Math.min(percent, 98)}/>
+                        <a
+                            className='file-preview__remove'
+                            onClick={this.handleRemove.bind(this, clientId)}
+                        >
+                            <i className='fa fa-remove'/>
+                        </a>
+                    </div>
                     {uploadComponent}
                 </div>
             );

diff --git a/webapp/components/truncate_text.jsx b/webapp/components/truncate_text.jsx
@@ -4,20 +4,32 @@ export default class TruncateText extends React.Component {
     render() {
         const {length, children} = this.props;
         const truncatedText = this.truncateText({length, text: children});
-        return (<span title={children}>{truncatedText}</span>);
+        return (
+            <span
+                title={children}
+                className='truncate-text__wrap'
+            >
+                {truncatedText}
+            </span>
+        );
     }
 
     truncateText(options) {
         const {
             length,
             text
         } = options;
-
+        let result = '';
         if (text && length < text.length) {
             const halfTruncated = length / 2;
-            return text.substr(0, halfTruncated) + '...' + text.substr(-halfTruncated);
+            result = text.substr(0, halfTruncated) + '...' + text.substr(-halfTruncated);
+        } else {
+            result = text + '\n';
+        }
+        while (result.length < length) {
+            result += ' ';
         }
-        return text;
+        return result;
     }
 }
 

diff --git a/webapp/sass/components/_files.scss b/webapp/sass/components/_files.scss
@@ -1,9 +1,9 @@
 @charset 'UTF-8';
 
 .file-preview__container {
-    height: 100px;
+    height: 120px;
     margin: 1px 0 10px;
-    max-height: 100px;
+    max-height: 120px;
     overflow-x: auto;
     overflow-y: hidden;
     position: relative;
@@ -14,20 +14,29 @@
 .file-preview {
     @include clearfix;
     display: inline-block;
-    height: 100px;
+    height: 80px;
     margin: 0 0 0 10px;
     position: relative;
-    width: 120px;
+    width: 100px;
+    overflow: visible;
 
     &:first-child {
         margin-left: 0;
     }
 
-    &.custom-file {
-        .file-preview__image, .file-icon {
-            border: 1px solid $light-gray;
-            height: 80%;
-        }
+    .truncate-text__wrap {
+        white-space: pre-wrap;
+        word-break: break-all;
+    }
+
+    .file-preview__image-container {
+        height: 80%;
+        border: 1px solid $light-gray;
+    }
+
+    .file-preview__image, .file-icon {
+        max-height: 100%;
+        overflow:hidden;
     }
 
     .spinner {