Add overlay widget #655

src/assets/css/overlayfield.css

@@ -0,0 +1,20 @@
+.overlay-field {
+    background: rgba(255,255,255,0.8);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 500;
+}
+
+.overlay-type-field {
+    top: 40%;
+    position: absolute;
+    width: 80%;
+    left: 10%;
+    font-size: 70px;
+    height: 20%;
+    text-align: center;
+    border: none;
+}

src/assets/css/styles.css

@@ -14,6 +14,7 @@
 @import './inputs.css';
 @import './notification.css';
 @import './panel.css';
+@import './overlayfield.css';
 @import './table.css';
 @import './tabs.css';
 @import './tag.css';

src/components/app/OverlayField.js

@@ -0,0 +1,21 @@
+import React, { Component } from 'react';
+
+class OverlayField extends Component {
+
+    componentDidMount(){
+        this.overlayWidget.focus();
+    }
+
+    render() {
+        return (
+            <div className="overlay-field">
+                <input
+                    className="overlay-type-field"
+                    ref={c => this.overlayWidget = c}
+                />
+            </div>
+        )
+    }
+}
+
+export default OverlayField

src/containers/DocList.js

@@ -6,6 +6,7 @@ import DocumentList from '../components/app/DocumentList';
 import Container from '../components/Container';
 import Modal from '../components/app/Modal';
 import RawModal from '../components/app/RawModal';
+import OverlayField from '../components/app/OverlayField';
 
 import {
     getWindowBreadcrumb
@@ -77,7 +78,11 @@ class DocList extends Component {
                 query={query}
                 showIndicator={!modal.visible && !rawModal.visible}
             >
-                {modal.visible &&
+                {
+                    modal.visible &&
+                    (!modal.layout.layoutType ||
+                    modal.layout.layoutType === 'panel') &&
+
                     <Modal
                         windowType={modal.type}
                         data={modal.data}
@@ -100,6 +105,11 @@ class DocList extends Component {
                         }
                      />
                  }
+                 {
+                     modal.visible &&
+                     modal.layout.layoutType === 'singleOverlayField' &&
+                    <OverlayField/>
+                 }
                  {rawModal.visible &&
                      <RawModal
                          modalTitle={modalTitle}