Position the file uploader box to the center of workspace

cncjs · Apr 23, 2016 · 557fca6 · 557fca6
1 parent 7a8c50e
commit 557fca6
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 3 deletions.
diff --git 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 <html>
@@ -108,7 +136,7 @@ class FileUploader extends React.Component {
 
         return (
             <div className="file-uploader-block">
-                <div className="file-uploader-box">
+                <div className="file-uploader-box" ref="file-uploader-box">
                     <div className="file-uploader-content" disabled={!canClick}>
                         <i style={{ fontSize: 48 }} className="fa fa-arrow-circle-o-up"></i>
                         <h4>{i18n._('Drop G-code file here or click below to upload.')}</h4>

diff --git 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;