From fcd61dea3e56b619ee1e8f1ef3e4e5ddca857b50 Mon Sep 17 00:00:00 2001
From: tengge1 <930372551@qq.com>
Date: Sat, 15 Jun 2019 21:16:04 +0800
Subject: [PATCH] mask

---
 ShadowEditor.UI/src/editor/viewport/Viewport.jsx |  2 +-
 ShadowEditor.UI/src/window/Window.jsx            |  8 ++++++--
 ShadowEditor.UI/src/window/css/Window.css        | 12 +++++++++++-
 3 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/ShadowEditor.UI/src/editor/viewport/Viewport.jsx b/ShadowEditor.UI/src/editor/viewport/Viewport.jsx
index e6f84b7f..099423f6 100644
--- a/ShadowEditor.UI/src/editor/viewport/Viewport.jsx
+++ b/ShadowEditor.UI/src/editor/viewport/Viewport.jsx
@@ -65,7 +65,7 @@ class Viewport extends React.Component {
     render() {
         return <>
             <Canvas className={'Viewport'} ref={this.canvas}></Canvas>
-            <Window title={'Message'}>
+            <Window title={'Message'} mask={false}>
                 <Content>
                     Welcome to use ShadowEditor!
                 </Content>
diff --git a/ShadowEditor.UI/src/window/Window.jsx b/ShadowEditor.UI/src/window/Window.jsx
index 4cdfd004..b908e57f 100644
--- a/ShadowEditor.UI/src/window/Window.jsx
+++ b/ShadowEditor.UI/src/window/Window.jsx
@@ -26,7 +26,7 @@ class Window extends React.Component {
     }
 
     render() {
-        const { className, style, title, children, width, height } = this.props;
+        const { className, style, title, children, width, height, mask } = this.props;
 
         const content = children.filter(n => {
             return n.type === Content;
@@ -43,7 +43,7 @@ class Window extends React.Component {
             height: height,
         });
 
-        return <div className={classNames('Window', this.state.hidden && 'hidden', className)} style={_style}>
+        const box = <div className={classNames('Window', this.state.hidden && 'hidden', className)} style={_style}>
             <div className={'wrap'}>
                 <div className={'title'}>
                     <span>{title}</span>
@@ -59,6 +59,8 @@ class Window extends React.Component {
                 </div>
             </div>
         </div>;
+
+        return mask ? <div className={'WindowMask'}>{box}</div> : box;
     }
 }
 
@@ -70,6 +72,7 @@ Window.propTypes = {
     width: PropTypes.string,
     height: PropTypes.string,
     hidden: PropTypes.bool,
+    mask: PropTypes.bool,
 };
 
 Window.defaultProps = {
@@ -80,6 +83,7 @@ Window.defaultProps = {
     width: '600px',
     height: '400px',
     hidden: false,
+    mask: true,
 };
 
 export default Window;
\ No newline at end of file
diff --git a/ShadowEditor.UI/src/window/css/Window.css b/ShadowEditor.UI/src/window/css/Window.css
index 43036289..b176cdc3 100644
--- a/ShadowEditor.UI/src/window/css/Window.css
+++ b/ShadowEditor.UI/src/window/css/Window.css
@@ -1,7 +1,17 @@
-.Window {
+.WindowMask {
     position: fixed;
     left: 0;
     top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.6);
+    z-index: 900;
+}
+
+.Window {
+    position: absolute;
+    left: 0;
+    top: 0;
     width: 600px;
     height: 400px;
     padding: 0px 5px 5px;