From 242061154a6f4667123d3e4707fd08e9f9e1224a Mon Sep 17 00:00:00 2001
From: hjm <63528605@qq.com>
Date: Thu, 5 Sep 2019 14:53:00 +0800
Subject: [PATCH] float reader

---
 public/react/src/modules/page/MainContent.js  |   6 +-
 public/react/src/modules/page/VNC.css         |  16 +++
 public/react/src/modules/page/VNCContainer.js |  33 +++++
 .../src/modules/page/component/FloatButton.js |  24 ++++
 .../modules/page/component/SecondDrawer.js    | 117 ++++++++++++++++++
 .../src/modules/page/images/float_switch.jpg  | Bin 0 -> 1303 bytes
 6 files changed, 193 insertions(+), 3 deletions(-)
 create mode 100644 public/react/src/modules/page/VNC.css
 create mode 100644 public/react/src/modules/page/VNCContainer.js
 create mode 100644 public/react/src/modules/page/component/FloatButton.js
 create mode 100644 public/react/src/modules/page/component/SecondDrawer.js
 create mode 100644 public/react/src/modules/page/images/float_switch.jpg

diff --git a/public/react/src/modules/page/MainContent.js b/public/react/src/modules/page/MainContent.js
index 601c002a9..30603370a 100644
--- a/public/react/src/modules/page/MainContent.js
+++ b/public/react/src/modules/page/MainContent.js
@@ -13,7 +13,7 @@ import ChooseEvaluateView from './main/ChooseEvaluateView'
 
 import { CircularProgress } from 'material-ui/Progress';
 import Button from 'material-ui/Button';
-import VNCDisplay from './VNCDisplay'
+import VNCContainer from './VNCContainer'
 
 import './tpiPage.css';
 import './tpiPageForMobile.css';
@@ -94,9 +94,9 @@ class MainContent extends Component {
 						    <div className="fl pr tip-right-con" id="update_game_tip"></div>
 						</div>*/}
 
-						{ showIframeContent && vnc_url ? <VNCDisplay
+						{ showIframeContent && vnc_url ? <VNCContainer
 							vnc_url={vnc_url}
-						></VNCDisplay>
+						></VNCContainer>
 						:
 						<React.Fragment>
 
diff --git a/public/react/src/modules/page/VNC.css b/public/react/src/modules/page/VNC.css
new file mode 100644
index 000000000..a890d3b15
--- /dev/null
+++ b/public/react/src/modules/page/VNC.css
@@ -0,0 +1,16 @@
+.float_button {
+    background-image: url(./images/float_switch.jpg);
+    height: 112px;
+    width: 38px;
+    position: absolute;
+    left: -38px;
+    top: 32%;
+    cursor: pointer;
+}
+.float_button .text {
+    position: relative;
+    writing-mode: vertical-rl;
+    top: 36px;
+    color: #fff;
+    left: 10px;
+}
\ No newline at end of file
diff --git a/public/react/src/modules/page/VNCContainer.js b/public/react/src/modules/page/VNCContainer.js
new file mode 100644
index 000000000..24bee99ae
--- /dev/null
+++ b/public/react/src/modules/page/VNCContainer.js
@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import VNCDisplay from './VNCDisplay'
+import FloatButton from './component/FloatButton'
+import SecondDrawer from './component/SecondDrawer'
+
+import './VNC.css'
+const $ = window.$;
+class VNCContainer extends Component {
+	componentDidMount() {
+		
+
+	}
+	
+  	render() {
+  		const { challenge,  vnc_url } = this.props
+
+	    return (
+	      	<React.Fragment>
+                <SecondDrawer
+                    floatText={'版本库'}
+                ></SecondDrawer>
+                <FloatButton></FloatButton>
+                <VNCDisplay
+                    {...this.props}
+                ></VNCDisplay>
+
+                
+		    </React.Fragment>
+	    );
+  	}
+}
+
+export default VNCContainer;
diff --git a/public/react/src/modules/page/component/FloatButton.js b/public/react/src/modules/page/component/FloatButton.js
new file mode 100644
index 000000000..1b9e191f2
--- /dev/null
+++ b/public/react/src/modules/page/component/FloatButton.js
@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+
+const $ = window.$;
+class FloatButton extends Component {
+	componentDidMount() {
+		
+
+	}
+	
+  	render() {
+  		const { challenge,  vnc_url, children } = this.props
+
+	    return (
+            <div className="float_button" onClick={this.props.onClick}>
+                <style>{`
+                    
+                `}</style>
+                <span class="text">{children || '版本库'}</span>
+            </div>
+	    );
+  	}
+}
+
+export default FloatButton;
diff --git a/public/react/src/modules/page/component/SecondDrawer.js b/public/react/src/modules/page/component/SecondDrawer.js
new file mode 100644
index 000000000..e8a231019
--- /dev/null
+++ b/public/react/src/modules/page/component/SecondDrawer.js
@@ -0,0 +1,117 @@
+import React from "react";
+import ReactDOM from "react-dom";
+import { Drawer } from "antd";
+import FloatButton from './FloatButton'
+
+export default class SecondDrawer extends React.Component {
+  state = { visible: false, childrenDrawer: false };
+
+  showDrawer = () => {
+    this.setState({
+      visible: true
+    });
+  };
+
+  onClose = () => {
+    this.setState({
+      visible: false
+    });
+  };
+
+  showChildrenDrawer = () => {
+    this.setState({
+      childrenDrawer: true
+    });
+  };
+
+  onChildrenDrawerClose = () => {
+    this.setState({
+      childrenDrawer: false
+    });
+  };
+  onCloseInner = () => {};
+  swtichFirstDrawer = () => {
+    this.setState({
+      visible: !this.state.visible,
+      childrenDrawer: false
+    });
+  };
+  componentDidMount() {
+    this.setState({ visible: true }, () => {
+      this.setState({ visible: false });
+    });
+  }
+  render() {
+    const { floatText } = this.props
+    return (
+      <div>
+        <Drawer
+          title="Multi-level drawer"
+          width={520}
+          closable={false}
+          onClose={this.onClose}
+          visible={this.state.visible}
+        >
+          <button type="primary" onClick={this.showChildrenDrawer}>
+            Two-level drawer
+          </button>
+          <FloatButton onClick={this.swtichFirstDrawer}>{floatText}</FloatButton>
+          {/* <button
+            type="primary"
+            onClick={this.swtichFirstDrawer}
+            style={{
+              left: "-48px",
+              position: "absolute"
+            }}
+          >
+            Show first
+          </button> */}
+          <Drawer
+            mask={false}
+            title="Two-level Drawer"
+            width={320}
+            closable={false}
+            onClose={this.onChildrenDrawerClose}
+            visible={this.state.childrenDrawer}
+          >
+            This is two-level drawer
+            <button
+              style={{
+                marginRight: 8
+              }}
+              onClick={this.onChildrenDrawerClose}
+            >
+              Cancel
+            </button>
+          </Drawer>
+          <div
+            style={{
+              position: "absolute",
+              bottom: 0,
+              width: "100%",
+              borderTop: "1px solid #e8e8e8",
+              padding: "10px 16px",
+              textAlign: "right",
+              left: 0,
+              background: "#fff",
+              borderRadius: "0 0 4px 4px"
+            }}
+          >
+            <button
+              style={{
+                marginRight: 8
+              }}
+              onClick={this.onClose}
+            >
+              Cancel
+            </button>
+            <button onClick={this.onClose} type="primary">
+              Submit
+            </button>
+          </div>
+        </Drawer>
+      </div>
+    );
+  }
+}
+
diff --git a/public/react/src/modules/page/images/float_switch.jpg b/public/react/src/modules/page/images/float_switch.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..12fc6f8788b42a66affd16e81914f5f2202b23be
GIT binary patch
literal 1303
zcmV+y1?c*TP)<h;3K|Lk000e1NJLTq001Tc003_Y1^@s6fNHV|00001b5ch_0Itp)
z=>Px((Md!>RCodHTRm?aRTQ1ijhEd_9NWlCEX-Q5B}+m13qgWF6bVrfBt!=YS{fv3
z8h!wxM06=qQ6eGHq@qd_rHV-eT`Dhj)-EDuxaVol<nCxDJ1^dScBFTu*?Zr8=e~R9
z%$r@wo(TePb_#@c@VTL9_MHis8<pn^wd&al^nA?|N3Hv{2A+^oU7xxf+7$Rm@G--h
z7MM|1JI%G|0b*<jA+fu=yWK>LVBoYh<u#@*)^&)hV~|45kjtOt@6-{~MQEbOjOj7o
z#)ya4F>9$-jzkd@A8BGNAeiIoVmeRkEU#<ydaMI6LvH8t&No8rCW*0-Ko-Bq16!?Q
zebp1E*VCAMeSN*#@AtnFQr}~OKn-FJKAK?Q8FL;rh-o@zPW!34!C-JcNs?ijrkha|
zU5&!%^P(tLSfIhkaZDoGV~*oM&hS#d+rKH9>tPrU<rv7qeJ*@bPa;@{F`L83a%dk3
zp+T?L`%cdA)5*NJ`J3KjS`iT9Q4$+&4sWEL^rv|$({xH`N~M~Jfqb&Hwe@w9Ccn5K
z1+tn9m4Q+qQ~KeX!w-^9^0VZCabiu1l_b~J*4{|Zr9TQAXQXiEni%4eki<|d%ChWR
zSC>!vl|~hKN$CyA)z#HYa`$~wq8$bx05UubAsL%|*3aIT7|J=fI$|YB`9^-%IipEK
z5QCA-R2)X(rkOp34=TpiBxt<+%&c?5wXZ4$LZ!*w*eeH)0}|71r^x9EmvJ32^yejY
z$z`fn6R|1KX$&;6GjRzif+oh?ned*N?Pc(adBtoMu*Lg5<`uJ5z!vZKm{-hJ0b9J^
zV_q>^1#I!H_SoKEdjXDHw>~z9ZIhS5w<7j33!k*c6SGy&E9MomRlpYS_n24ARsmbQ
z-(y}eTLo<KevjEIhQCywlLP<JO)Ea$zP$Zda;IYcQrgPy74wSODqxHEd(10ltAH)u
z?=i2Ktpc`qzsI~{whGwdUx_`&C&X<}ZXx(rLNR^j<zwtR=`yZU>`Yuz5~D&>q~uY+
zu}hV7FA&pYG(mY1uy~@uF5{|V=uL7#kr)5CB%^y#F_OW{BxRiE`5zkWGOi;Aa)#i+
z(}Uk7{?8>L_A(E8%YY9{f+*wg`1p9dd~tb0Zi2U2;L3v-iJ&K97;|A9$M?J4?q`zg
zm>EYOnpjC@LJSnbqobp7*2^A7arB|eV{V~FVr-%nV=fpSj2>NBzHlIq&|i}zG3ERs
z0uY;JxJ!f4Xml?-pFN0^_&pge{IXUR(<BWcNtAx{?`Th6aJnN$CO5<tnZwPp5PK0Z
z-4Nu=SIBrge!9QE|C_u9bh{IG{+0_X9K&1=s5mzzx#2Yl=HU7D0neE8s6kBAF>~5a
z)vc_oye99uy%h)XFigTLvVXr6@art#V)Q!Cg_=CD)jHN!J#l(1VsJHzjg5`Y($dlw
zLhuLqjZXCDXE6)lxxW~jMP$IAF8)f)^5s^TtjTe?&f($VGua}4ijw<+xlu=^n$u&(
z^dQ{Eh}WJm>UqM(?`-e<suj}>bdk<8o?587aLpKXtkE%Z^kz;}>*5~|bp{|!lhk?6
zxACmQT8QaUt7D7{dGGSBZi?ihtgcU84*ktZG)=lBSli1rF_380^MA+Q<D1H)G6(<w
N002ovPDHLkV1mh)e*^#k

literal 0
HcmV?d00001