From 14f920ab0ec163ddfb54c7cad4d7eceaff6cd5fd Mon Sep 17 00:00:00 2001
From: tangjiang <465264938@qq.com>
Date: Tue, 31 Dec 2019 17:53:13 +0800
Subject: [PATCH] update test-code style

---
 public/react/src/modules/page/MainContent.js  |  7 +++-
 public/react/src/modules/page/VNC.css         | 41 +++++++++++++++++++
 public/react/src/modules/page/VNCContainer.js | 15 ++++++-
 public/react/src/modules/page/VNCDisplay.js   |  4 +-
 4 files changed, 62 insertions(+), 5 deletions(-)

diff --git a/public/react/src/modules/page/MainContent.js b/public/react/src/modules/page/MainContent.js
index a1b7566d0..175ea7bc0 100644
--- a/public/react/src/modules/page/MainContent.js
+++ b/public/react/src/modules/page/MainContent.js
@@ -41,6 +41,7 @@ class MainContent extends Component {
 	hideCodeEvaluate = () => {
 		const vncContainer = this.refs['vncContainer']
 		if (vncContainer) {
+			// console.log('点击的关闭按钮')
 			vncContainer.onBottomDrawerClose  && vncContainer.onBottomDrawerClose()
 		}
 	}
@@ -124,7 +125,7 @@ class MainContent extends Component {
 									</div>
 								}
 							></VNCContainer>
-							<div id="actionView" className="-layout-h -center -bg-grey-90 -grey-20 -bg-darkblack" style={{height:'48px'}}>
+							<div id="actionView" className="-layout-h -center -bg-grey-90 -grey-20 -bg-darkblack">
 								<ActionView  {...this.props}
 									onRunCodeTest={onRunCodeTest}
 								></ActionView>
@@ -179,7 +180,9 @@ class MainContent extends Component {
     						</div>
     					</div>
 
-    					<div id="actionView" className="-layout-h -center -bg-grey-90 -grey-20 -bg-darkblack" style={{height:'48px'}}>
+							<div id="actionView" 
+								style={{ position: 'absolute', width: '100%', bottom: '0', height: '51px'}}
+								className="-layout-h -center -bg-grey-90 -grey-20 -bg-darkblack">
     						<ActionView  {...this.props} onRunCodeTest={onRunCodeTest}></ActionView>
     					</div>
 
diff --git a/public/react/src/modules/page/VNC.css b/public/react/src/modules/page/VNC.css
index 1180baf76..58a45d735 100644
--- a/public/react/src/modules/page/VNC.css
+++ b/public/react/src/modules/page/VNC.css
@@ -39,6 +39,47 @@
     user-select: none;
 }
 
+.btn_test_case,
+.btn_test_case_active{
+    display: inline-block;
+    position: absolute;
+    width: 56px;
+    height: 28px;
+    bottom: 23px; 
+    line-height: 28px;
+    background: rgba(42,58,79,1);
+    z-index: 10;
+    left: 50%;
+    margin-left: -28px;
+    border-bottom-left-radius: 100px;
+    border-bottom-right-radius: 100px;
+    color: #fff;
+    text-align: center;
+    cursor: pointer;
+    opacity: .4;
+    transition: all .3s;
+}
+
+.btn_test_case:hover,
+.btn_test_case_active:hover{
+    opacity: 1;
+}
+.btn_test_case .btn-arrow{
+    position: relative;
+    font-size: 12px;
+    line-height: 28px;
+    bottom: 2px;
+}
+
+.btn_test_case_active{
+    bottom: 203px;
+    z-index: 10000;
+
+}
+.btn_test_case_active .btn-arrow{
+    bottom: 4px;
+}
+
 @keyframes mymove
 {
     from {right:0px;}
diff --git a/public/react/src/modules/page/VNCContainer.js b/public/react/src/modules/page/VNCContainer.js
index aa4d82e78..30e439e8d 100644
--- a/public/react/src/modules/page/VNCContainer.js
+++ b/public/react/src/modules/page/VNCContainer.js
@@ -204,6 +204,10 @@ class VNCContainer extends Component {
   	render() {
   		const { challenge, vnc_url, git_url } = this.props
 
+			const _classCtx = this.state.bottomDrawer ? 'btn_test_case_active' : 'btn_test_case';
+			const _classes = this.state.bottomDrawer 
+				? `iconfont icon-xiajiantou btn-arrow` 
+				: 'iconfont icon-shangjiantou btn-arrow';
 		const secondDrawerChildren = this.renderSecondDrawerChildren();
 	    return (
 	      	<React.Fragment>
@@ -352,9 +356,16 @@ class VNCContainer extends Component {
 					>
 						{ this.props.codeEvaluate }
 					</Drawer>
-					<FloatButton onClick={this.swtichBottomDrawer}
+					{/* <FloatButton onClick={this.swtichBottomDrawer}
 						className="codeEvaluateFloatButton"
-					>测试集</FloatButton>
+					>测试集</FloatButton> */}
+					<div 
+						className={_classCtx}
+						onClick={this.swtichBottomDrawer}
+					>
+						{/* <span className="iconfont icon-shangjiantou btn-arrow"></span> */}
+						<span className={_classes}></span>
+					</div>
 				</VNCDisplay>
 
                 
diff --git a/public/react/src/modules/page/VNCDisplay.js b/public/react/src/modules/page/VNCDisplay.js
index 536ba43cb..98c4cb5e7 100644
--- a/public/react/src/modules/page/VNCDisplay.js
+++ b/public/react/src/modules/page/VNCDisplay.js
@@ -135,11 +135,13 @@ class VNCDisplay extends Component {
 	      	<div className="vncDisply" style={{height: '100%'}}>
                 <style>{`
                     .vncDisply #top_bar {
+                        position: absolute;
                         background-color: #6e84a3;
                         color: white;
                         font: bold 12px Helvetica;
                         padding: 6px 5px 4px 5px;
                         border-bottom: 1px outset;
+                        width: 100%;
                     }
                     .vncDisply #status {
                         text-align: center;
@@ -166,7 +168,7 @@ class VNCDisplay extends Component {
                     <div id="status">Loading</div>
                     <div id="sendCtrlAltDelButton">Send CtrlAltDel</div>
                 </div>
-                <div id="screen">
+                <div id="screen" style={{ height: 'calc(100vh - 105px)' }}>
                     
                 </div>
                 {this.props.children}