From 557fca6d4ec559e6b62f3854603d605b7586ea22 Mon Sep 17 00:00:00 2001 From: Cheton Wu Date: Sat, 23 Apr 2016 19:46:30 +0800 Subject: [PATCH] Position the file uploader box to the center of workspace --- .../widgets/visualizer/FileUploader.jsx | 30 ++++++++++++++++++- .../components/widgets/visualizer/index.styl | 4 +-- 2 files changed, 31 insertions(+), 3 deletions(-) diff --git a/src/web/components/widgets/visualizer/FileUploader.jsx b/src/web/components/widgets/visualizer/FileUploader.jsx index 52c32faa8..b8415ccec 100644 --- a/src/web/components/widgets/visualizer/FileUploader.jsx +++ b/src/web/components/widgets/visualizer/FileUploader.jsx @@ -12,10 +12,38 @@ class FileUploader extends React.Component { state = { isUploading: false }; + pubsubTokens = []; componentDidMount() { + this.subscribe(); } componentWillUnmount() { + this.unsubscribe(); + } + subscribe() { + { // resize + const token = pubsub.subscribe('resize', (msg) => { + this.repositionFileUploaderBox(); + }); + this.pubsubTokens.push(token); + } + } + unsubscribe() { + _.each(this.pubsubTokens, (token) => { + pubsub.unsubscribe(token); + }); + this.pubsubTokens = []; + } + // Position the file uploader box to the center of workspace + repositionFileUploaderBox() { + const containerEl = document.querySelector('[data-ns=workspace] .default-container'); + const left = parseInt(containerEl.style.left, 10) || 0; + const right = parseInt(containerEl.style.right, 10) || 0; + const offset = left - right; + const ref = this.refs['file-uploader-box']; + + ref.style.marginLeft = offset > 0 ? offset + 'px' : ''; + ref.style.marginRight = offset < 0 ? -offset + 'px' : ''; } startWaiting() { // Adds the 'wait' class to @@ -108,7 +136,7 @@ class FileUploader extends React.Component { return (
-
+

{i18n._('Drop G-code file here or click below to upload.')}

diff --git a/src/web/components/widgets/visualizer/index.styl b/src/web/components/widgets/visualizer/index.styl index cf3d78712..460fce1cf 100644 --- a/src/web/components/widgets/visualizer/index.styl +++ b/src/web/components/widgets/visualizer/index.styl @@ -46,8 +46,8 @@ } .file-uploader-block { - position: absolute; - top: 0; + position: fixed; + top: 50px; bottom: 0; left: 0; right: 0;