summaryrefslogtreecommitdiffstats
path: root/web
diff options
context:
space:
mode:
authorAsaad Mahmood <Unknowngi@live.com>2015-08-21 00:54:35 +0500
committerAsaad Mahmood <Unknowngi@live.com>2015-08-21 00:54:35 +0500
commit796a3001ccf7dd2729ff06f4dfd0e8614ae5de3a (patch)
treeb151c35be9cb27bf9fd5bf43c59df48dfa2864f4 /web
parent19123e5523453d7c4e9caad4794a2942c5ce5aa4 (diff)
downloadchat-796a3001ccf7dd2729ff06f4dfd0e8614ae5de3a.tar.gz
chat-796a3001ccf7dd2729ff06f4dfd0e8614ae5de3a.tar.bz2
chat-796a3001ccf7dd2729ff06f4dfd0e8614ae5de3a.zip
MM-1696 - Improvements for Slack Import
Diffstat (limited to 'web')
-rw-r--r--web/react/components/setting_upload.jsx28
-rw-r--r--web/react/components/team_import_tab.jsx8
-rw-r--r--web/sass-files/sass/partials/_settings.scss10
3 files changed, 37 insertions, 9 deletions
diff --git a/web/react/components/setting_upload.jsx b/web/react/components/setting_upload.jsx
index 870710850..02789f5dd 100644
--- a/web/react/components/setting_upload.jsx
+++ b/web/react/components/setting_upload.jsx
@@ -46,17 +46,25 @@ module.exports = React.createClass({
serverError: ''
});
},
+ onFileSelect: function(e) {
+ var filename = $(e.target).val();
+ if (filename.substring(3, 11) === 'fakepath') {
+ filename = filename.substring(12);
+ }
+ $(e.target).closest('li').find('.file-status').addClass('hide');
+ $(e.target).closest('li').find('.file-name').removeClass('hide').html(filename);
+ },
render: function() {
var clientError = null;
if (this.state.clientError) {
clientError = (
- <div className='form-group has-error'><label className='control-label'>{this.state.clientError}</label></div>
+ <div className='file-status'>{this.state.clientError}</div>
);
}
var serverError = null;
if (this.state.serverError) {
serverError = (
- <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>
+ <div className='file-status'>{this.state.serverError}</div>
);
}
return (
@@ -65,11 +73,21 @@ module.exports = React.createClass({
<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'>Select file<input ref='uploadinput' accept={this.props.fileTypesAccepted} type='file' onChange={this.onFileSelect}/></span>
+ <a
+ className={'btn btn-sm btn-primary'}
+ onClick={this.doSubmit}>
+ Import
+ </a>
+ <a
+ className='btn btn-sm btn-link theme'
+ href='#'
+ onClick={this.doCancel}>
+ Cancel
+ </a>
+ <div className='file-status file-name hide'></div>
{serverError}
{clientError}
- <span className='btn btn-sm btn-primary btn-file sel-btn'>SelectFile<input ref='uploadinput' accept={this.props.fileTypesAccepted} type='file' onChange={this.onFileSelect}/></span>
- <a className={'btn btn-sm btn-primary'} onClick={this.doSubmit}>Import</a>
- <a className='btn btn-sm theme' href='#' onClick={this.doCancel}>Cancel</a>
</li>
</ul>
</li>
diff --git a/web/react/components/team_import_tab.jsx b/web/react/components/team_import_tab.jsx
index 131add999..c21701c0e 100644
--- a/web/react/components/team_import_tab.jsx
+++ b/web/react/components/team_import_tab.jsx
@@ -34,17 +34,17 @@ module.exports = React.createClass({
break;
case 'in-progress':
messageSection = (
- <p>Importing...</p>
+ <p className="confirm-import alert alert-warning"><i className="fa fa-spinner fa-pulse"></i> Importing...</p>
);
break;
case 'done':
messageSection = (
- <p>Import sucessfull: <a href={this.state.link} download='MattermostImportSummery.txt'>View Summery</a></p>
+ <p className="confirm-import alert alert-success"><i className="fa fa-check"></i> Import sucessfull: <a href={this.state.link} download='MattermostImportSummery.txt'>View Summery</a></p>
);
break;
case 'fail':
messageSection = (
- <p>Import failure: <a href={this.state.link} download='MattermostImportSummery.txt'>View Summery</a></p>
+ <p className="confirm-import alert alert-warning"><i className="fa fa-warning"></i> Import failure: <a href={this.state.link} download='MattermostImportSummery.txt'>View Summery</a></p>
);
break;
}
@@ -59,8 +59,8 @@ module.exports = React.createClass({
<h3 className='tab-header'>Import</h3>
<div className='divider-dark first'/>
{uploadSection}
- {messageSection}
<div className='divider-dark'/>
+ {messageSection}
</div>
</div>
);
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index 0262ef60c..99a7eb7bc 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/web/sass-files/sass/partials/_settings.scss
@@ -111,6 +111,16 @@
}
}
+ .file-status {
+ font-size: 13px;
+ margin-top: 8px;
+ color: #555;
+ }
+
+ .confirm-import {
+ padding: 4px 10px;
+ margin: 10px 0;
+ }
}
}