From 2b861c4773ef6ba7c2770d2fe429c07bb74a159d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Fri, 19 Jun 2015 13:17:40 +0200 Subject: [PATCH 1/5] copy fineuploader theme --- sass/ascribe_react_s3_fineuploader.scss | 64 +++++++++++++++++++++++++ sass/main.scss | 2 +- 2 files changed, 65 insertions(+), 1 deletion(-) create mode 100644 sass/ascribe_react_s3_fineuploader.scss diff --git a/sass/ascribe_react_s3_fineuploader.scss b/sass/ascribe_react_s3_fineuploader.scss new file mode 100644 index 00000000..e6583313 --- /dev/null +++ b/sass/ascribe_react_s3_fineuploader.scss @@ -0,0 +1,64 @@ +.file-drag-and-drop { + display: table-cell; + outline: 1px dashed #616161; + cursor: pointer; + vertical-align: middle; + text-align: center; + height:208px; + width: 672px; + background-color: #FAFAFA; + transition: .1s linear background-color; +} + +.file-drag-and-drop:hover { + background-color: rgba(72, 218, 203, 0.2); +} + +.file-drag-and-drop > span { + font-size: 1.5em; +} + +.has-files { + text-align: left; + padding: 3em 0 0 0; +} + +.file-drag-and-drop-position { + display: inline-block; + margin: 0 0 3em 3em; + float:left; +} + +.file-drag-and-drop-preview-table-wrapper { + display: table; + height:94px; + width:104px; +} + +.file-drag-and-drop-preview { + overflow:hidden; + cursor: default; + background-color: #EEEEEE; + border: 1px solid #616161; +} + +.file-drag-and-drop-preview-image { + display: table; + height:104px; + width:104px; + overflow:hidden; + border: 1px solid #616161; +} + +.file-drag-and-drop-preview-other { + display: table-cell; + text-align: center; + vertical-align: middle; + +} + +.file-drag-and-drop-preview-other span { + font-size: 1.1em; + display: block; + margin-top: -10px; +} diff --git a/sass/main.scss b/sass/main.scss index d6a6681b..b2a5ad6d 100644 --- a/sass/main.scss +++ b/sass/main.scss @@ -19,7 +19,7 @@ $BASE_URL: '<%= BASE_URL %>'; @import 'ascribe-global-notification'; @import 'offset_right'; @import 'ascribe_settings'; -@import '../node_modules/react-s3-fineuploader/scss/ascribe-theme'; +@import 'ascribe_react_s3_fineuploader'; body { background-color: #FDFDFD; From bf2a766e840f42ec81a9fc3f9814461e6b866829 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Wed, 24 Jun 2015 15:52:43 +0200 Subject: [PATCH 2/5] implement submission for autofill firefox and chrome --- gulpfile.js | 2 +- js/components/ascribe_forms/form.js | 7 ++- .../react_s3_fine_uploader.js | 48 ++++++++++--------- js/components/login_container.js | 17 ++++++- js/components/register_piece.js | 2 +- 5 files changed, 47 insertions(+), 29 deletions(-) diff --git a/gulpfile.js b/gulpfile.js index e570c2ff..fe7e75a8 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -69,7 +69,7 @@ gulp.task('js:build', function() { bundle(false); }); -gulp.task('serve', ['browser-sync', 'run-server', 'lint:watch', 'sass:build', 'sass:watch', 'copy'], function() { +gulp.task('serve', ['browser-sync', 'run-server', 'sass:build', 'sass:watch', 'copy'], function() { bundle(true); }); diff --git a/js/components/ascribe_forms/form.js b/js/components/ascribe_forms/form.js index b8ff1539..319214c1 100644 --- a/js/components/ascribe_forms/form.js +++ b/js/components/ascribe_forms/form.js @@ -137,9 +137,12 @@ let Form = React.createClass({ }); }, render() { - return ( -
+ {this.getErrors()} {this.renderChildren()} {this.getButtons()} diff --git a/js/components/ascribe_uploader/react_s3_fine_uploader.js b/js/components/ascribe_uploader/react_s3_fine_uploader.js index 4302b1ca..797ca0eb 100644 --- a/js/components/ascribe_uploader/react_s3_fine_uploader.js +++ b/js/components/ascribe_uploader/react_s3_fine_uploader.js @@ -118,7 +118,7 @@ var ReactS3FineUploader = React.createClass({ }, getCookie(name) { - console.log(document.cookie); + //console.log(document); let value = '; ' + document.cookie; let parts = value.split('; ' + name + '='); if (parts.length === 2) { @@ -126,31 +126,33 @@ var ReactS3FineUploader = React.createClass({ } }, requestKey(fileId) { + //console.log(this.getCookie('csrftoken')); let filename = this.state.uploader.getName(fileId); - let defer = new fineUploader.Promise(); - fetch(this.props.keyRoutine.url, { - method: 'post', - headers: { - 'Accept': 'application/json', - 'Content-Type': 'application/json', - 'X-CSRFToken': this.getCookie('csrftoken') - }, - credentials: 'include', - body: JSON.stringify({ - 'filename': filename, - 'file_class': 'digitalwork' + return new Promise((resolve, reject) => { + fetch(this.props.keyRoutine.url, { + method: 'post', + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + 'X-CSRFToken': this.getCookie('csrftoken') + }, + credentials: 'include', + body: JSON.stringify({ + 'filename': filename, + 'file_class': 'digitalwork' + }) }) - }) - .then((res) => { - return res.json(); - }) - .then((res) =>{ - defer.success(res.key); - }) - .catch((err) => { - console.error(err); + .then((res) => { + return res.json(); + }) + .then((res) =>{ + resolve(res.key); + }) + .catch((err) => { + console.error(err); + reject(err); + }); }); - return defer; }, /* FineUploader specific callback function handlers */ diff --git a/js/components/login_container.js b/js/components/login_container.js index fcdf6523..8c149d8c 100644 --- a/js/components/login_container.js +++ b/js/components/login_container.js @@ -37,16 +37,27 @@ let LoginForm = React.createClass({ handleSuccess(){ let notification = new GlobalNotificationModel('Login successsful', 'success', 10000); GlobalNotificationActions.appendGlobalNotification(notification); - this.transitionTo('pieces'); + /*Taken from http://stackoverflow.com/a/14916411 */ + /* + We actually have to trick the Browser into showing the "save password" dialog + as Chrome expects the login page to be reloaded after the login. + Users on Stack Overflow claim this is a bug in chrome and should be fixed in the future. + Until then, we redirect the HARD way, but reloading the whole page using window.location + */ + window.location = '/collection'; }, + render() { return ( + } spinner={ @@ -61,6 +72,7 @@ let LoginForm = React.createClass({ type="email" placeholder="Enter your email" autoComplete="on" + name="username" required/>
diff --git a/js/components/register_piece.js b/js/components/register_piece.js index 384f0d23..693c43be 100644 --- a/js/components/register_piece.js +++ b/js/components/register_piece.js @@ -40,7 +40,7 @@ let RegisterPiece = React.createClass( { return data; }, handleChange(){ - this.setState({digital_work_key: this.refs.uploader.refs.fineuploader.state.filesToUpload[0].key}) + this.setState({digital_work_key: this.refs.uploader.refs.fineuploader.state.filesToUpload[0].key}); }, render() { From b82b72cf84f646a3dc868de425b6470b626aae72 Mon Sep 17 00:00:00 2001 From: diminator Date: Wed, 24 Jun 2015 14:03:18 +0000 Subject: [PATCH 3/5] README.md edited online with Bitbucket --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index aeb01081..e48a9788 100644 --- a/README.md +++ b/README.md @@ -111,4 +111,4 @@ Moar stuff - [24ways.org: JavaScript Modules the ES6 Way](http://24ways.org/2014/javascript-modules-the-es6-way/) - [Babel: Learn ES6](https://babeljs.io/docs/learn-es6/) - [egghead's awesome reactjs and flux tutorials](https://egghead.io/) -- [Crockford's genious Javascript: The Good Parts (Tim has a copy)](http://www.amazon.de/JavaScript-Parts-Working-Shallow-Grain/dp/0596517742) +- [Crockford's genious Javascript: The Good Parts (Tim has a copy)](http://www.amazon.de/JavaScript-Parts-Working-Shallow-Grain/dp/0596517742) \ No newline at end of file From 7e530ceb0fde85e9fce1d55cd4cf269bf81207bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tim=20Daubensch=C3=BCtz?= Date: Wed, 24 Jun 2015 17:00:45 +0200 Subject: [PATCH 4/5] added readme for local development with spool --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index aeb01081..58bfa28b 100644 --- a/README.md +++ b/README.md @@ -91,6 +91,12 @@ Error: watch ENOSPC ``` A: Use `npm dedupe` to remove duplicates in npm. This might fix that you're not [running out of watchers in your system (read the comments)](http://stackoverflow.com/a/17437601/1263876). +Q: How can I use a local copy of SPOOL and Onion? +A: Easily by starting the your gulp process with the following command: +``` +ONION_BASE_URL='/beta/' ONION_API_ENDPOINT='http://localhost:8000/api' gulp serve +``` + Reading list ============ From 857aa8e0bb608f19567575b6d2146db699f85982 Mon Sep 17 00:00:00 2001 From: TimDaubenschuetz Date: Wed, 24 Jun 2015 15:47:01 +0000 Subject: [PATCH 5/5] README.md edited online with Bitbucket --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 2ae4fac9..9fdbfde8 100644 --- a/README.md +++ b/README.md @@ -94,7 +94,7 @@ A: Use `npm dedupe` to remove duplicates in npm. This might fix that you're not Q: How can I use a local copy of SPOOL and Onion? A: Easily by starting the your gulp process with the following command: ``` -ONION_BASE_URL='/beta/' ONION_API_ENDPOINT='http://localhost:8000/api' gulp serve +ONION_BASE_URL='/' ONION_API_ENDPOINT='http://localhost:8000/api/' ONION_SERVER_URL='http://localhost:8000/' gulp serve ``` Reading list