Merge pull request #631 from asaadmahmoodspin/mm-1866

MM-1866 - Adding download icon and adding download links

web/react/components/file_attachment.jsx

@@ -97,6 +97,7 @@ export default class FileAttachment extends React.Component {
         var filename = this.props.filename;
 
         var fileInfo = utils.splitFileLocation(filename);
+        var fileUrl = utils.getFileUrl(filename);
         var type = utils.getFileType(fileInfo.ext);
 
         var thumbnail;
@@ -150,14 +151,25 @@ export default class FileAttachment extends React.Component {
                     {thumbnail}
                 </a>
                 <div className='post-image__details'>
-                    <div
+                    <a
+                        href={fileUrl}
+                        download={filenameString}
                         data-toggle='tooltip'
                         title={filenameString}
                         className='post-image__name'
                     >
                         {trimmedFilename}
-                    </div>
+                    </a>
                     <div>
+                        <a
+                            href={fileUrl}
+                            download={filenameString}
+                            className='post-image__download'
+                        >
+                            <span
+                                className='fa fa-download'
+                            />
+                        </a>
                         <span className='post-image__type'>{fileInfo.ext.toUpperCase()}</span>
                         <span className='post-image__size'>{fileSizeString}</span>
                     </div>

web/react/components/setting_item_min.jsx

@@ -12,14 +12,18 @@ export default class SettingItemMin extends React.Component {
                         href='#'
                         onClick={this.props.updateSection}
                     >
-                        Edit
+                        <i className='fa fa-pencil'/>
+                        {'Edit'}
                     </a>
                 </li>
             );
         }
 
         return (
-            <ul className='section-min'>
+            <ul
+                className='section-min'
+                onClick={this.props.updateSection}
+            >
                 <li className='col-sm-10 section-title'>{this.props.title}</li>
                 {editButton}
                 <li className='col-sm-7 section-describe'>{this.props.describe}</li>

web/react/components/team_export_tab.jsx

@@ -75,15 +75,13 @@ export default class TeamExportTab extends React.Component {
                     <li className='col-xs-offset-3 col-xs-8'>
                         <ul className='setting-list'>
                             <li className='setting-list-item'>
-                                <span className='btn btn-sm btn-primary btn-file sel-btn'>
+                                <a
-                                    <a
+                                    className='btn btn-sm btn-primary btn-file sel-btn'
-                                        className='btn btn-sm btn-primary'
+                                    href='#'
-                                        href='#'
+                                    onClick={this.doExport}
-                                        onClick={this.doExport}
+                                >
-                                    >
+                                {'Export'}
-                                    {'Export'}
+                                </a>
-                                    </a>
-                                </span>
                             </li>
                         </ul>
                     </li>

web/react/components/user_settings_general.jsx

@@ -238,7 +238,7 @@ export default class UserSettingsGeneralTab extends React.Component {
                     key='firstNameSetting'
                     className='form-group'
                 >
-                    <label className='col-sm-5 control-label'>First Name</label>
+                    <label className='col-sm-5 control-label'>{'First Name'}</label>
                     <div className='col-sm-7'>
                         <input
                             className='form-control'
@@ -255,7 +255,7 @@ export default class UserSettingsGeneralTab extends React.Component {
                     key='lastNameSetting'
                     className='form-group'
                 >
-                    <label className='col-sm-5 control-label'>Last Name</label>
+                    <label className='col-sm-5 control-label'>{'Last Name'}</label>
                     <div className='col-sm-7'>
                         <input
                             className='form-control'
@@ -278,14 +278,14 @@ export default class UserSettingsGeneralTab extends React.Component {
                     href='#'
                     onClick={notifClick.bind(this)}
                 >
-                    Notifications
+                    {'Notifications'}
                 </a>
             );
 
             const extraInfo = (
                 <span>
-                    By default, you will receive mention notifications when someone types your first name.
+                    {'By default, you will receive mention notifications when someone types your first name. '}
-                    Go to {notifLink} settings to change this default.
+                    {'Go to '} {notifLink} {'settings to change this default.'}
                 </span>
             );
 
@@ -351,8 +351,8 @@ export default class UserSettingsGeneralTab extends React.Component {
 
             const extraInfo = (
                 <span>
-                    Use Nickname for a name you might be called that is different from your first name and user name.
+                    {'Use Nickname for a name you might be called that is different from your first name and user name.'}
-                    This is most often used when two or more people have similar sounding names and usernames.
+                    {'This is most often used when two or more people have similar sounding names and usernames.'}
                 </span>
             );
 
@@ -406,7 +406,7 @@ export default class UserSettingsGeneralTab extends React.Component {
                 </div>
             );
 
-            const extraInfo = (<span>Pick something easy for teammates to recognize and recall.</span>);
+            const extraInfo = (<span>{'Pick something easy for teammates to recognize and recall.'}</span>);
 
             usernameSection = (
                 <SettingItemMax
@@ -438,13 +438,13 @@ export default class UserSettingsGeneralTab extends React.Component {
             let helpText = <div>Email is used for notifications, and requires verification if changed.</div>;
 
             if (!this.state.emailEnabled) {
-                helpText = <div className='text-danger'><br />Email has been disabled by your system administrator. No notification emails will be sent until it is enabled.</div>;
+                helpText = <div className='setting-list__hint text-danger'>{'Email has been disabled by your system administrator. No notification emails will be sent until it is enabled.'}</div>;
             }
 
             inputs.push(
                 <div key='emailSetting'>
                     <div className='form-group'>
-                        <label className='col-sm-5 control-label'>Primary Email</label>
+                        <label className='col-sm-5 control-label'>{'Primary Email'}</label>
                         <div className='col-sm-7'>
                             <input
                                 className='form-control'
@@ -526,18 +526,18 @@ export default class UserSettingsGeneralTab extends React.Component {
                         data-dismiss='modal'
                         aria-label='Close'
                     >
-                        <span aria-hidden='true'>&times;</span>
+                        <span aria-hidden='true'>{'×'}</span>
                     </button>
                     <h4
                         className='modal-title'
                         ref='title'
                     >
                         <i className='modal-back'></i>
-                        General Settings
+                        {'General Settings'}
                     </h4>
                 </div>
                 <div className='user-settings'>
-                    <h3 className='tab-header'>General Settings</h3>
+                    <h3 className='tab-header'>{'General Settings'}</h3>
                     <div className='divider-dark first'/>
                     {nameSection}
                     <div className='divider-light'/>

web/sass-files/sass/partials/_files.scss

@@ -61,8 +61,8 @@
       cursor: pointer;
       z-index: 5;
       opacity: inherit;
-        text-shadow: 0 0px 3px #444;
+      text-shadow: 0 0px 3px #444;
-        text-shadow: 0 0px 3px rgba(0, 0, 0, 0.7);
+      text-shadow: 0 0px 3px rgba(0, 0, 0, 0.7);
     }
   }
 }
@@ -159,6 +159,14 @@
     padding: 7px;
     .post-image__name {
       margin-bottom: 3px;
+      display: block;
+      color: #333;
+    }
+    .post-image__download {
+      display: inline-block;
+      padding-right: 7px;
+      cursor: pointer;
+      color: #555;
     }
     .post-image__type {
       color: grey;

web/sass-files/sass/partials/_settings.scss

@@ -56,7 +56,17 @@
             .section-min {
                 padding: 1em 0;
                 margin-bottom: 0;
+                cursor: pointer;
                 @include clearfix;
+                &:hover {
+                    background: #f9f9f9;
+                }
+                &:hover .fa {
+                    display: inline-block;
+                }
+                &:hover .section-edit {
+                    text-decoration: underline;
+                }
             }
 
             .section-max {
@@ -77,6 +87,12 @@
             .section-edit {
                 text-align: right;
                 margin-bottom: 5px;
+                .fa {
+                    margin-right: 7px;
+                    font-size: 12px;
+                    color: #aaa;
+                    display: none;
+                }
             }
 
             .section-describe {
@@ -97,7 +113,6 @@
             }
 
             .setting-list__hint {
-                color: #555;
                 margin-top: 20px;
             }