update test-code style

dev_tpm_ui
tangjiang 5 years ago
parent 14f920ab0e
commit 7f4989a039

@ -39,6 +39,7 @@
user-select: none; user-select: none;
} }
.btn_test_case, .btn_test_case,
.btn_test_case_active{ .btn_test_case_active{
display: inline-block; display: inline-block;
@ -80,6 +81,32 @@
bottom: 4px; bottom: 4px;
} }
.blacktab_con_abs{
position: absolute !important;
left: 150px;
right: 150px;
top: 0;
height: 34px;
background: gold;
}
.code_evalute_icon{
position: absolute;
top: 0;
width: 56px;
height: 28px;
left: 50%;
margin-left: -28px;
background: rgba(42,58,79,1);
z-index: 10;
border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;
color: #fff;
text-align: center;
cursor: pointer;
opacity: .4;
transition: all .3s;
}
@keyframes mymove @keyframes mymove
{ {
from {right:0px;} from {right:0px;}

@ -224,6 +224,10 @@ class VNCContainer extends Component {
> >
<style>{` <style>{`
/* 评测结果 */ /* 评测结果 */
.codeEvaluateDrawer{
// position: absolute;
// bottom: 84px;
}
.codeEvaluateDrawer #game_test_set_results { .codeEvaluateDrawer #game_test_set_results {
height: 198px; height: 198px;
} }
@ -233,7 +237,10 @@ class VNCContainer extends Component {
.codeEvaluateDrawer .ant-drawer-content-wrapper, .codeEvaluateDrawer .ant-drawer-mask { .codeEvaluateDrawer .ant-drawer-content-wrapper, .codeEvaluateDrawer .ant-drawer-mask {
position: absolute; position: absolute;
} }
.codeEvaluateDrawer .ant-drawer-content-wrapper .ant-drawer-content{
height: 100%;
background: rgb(5, 16, 26) !important;
}
.codeEvaluateFloatButton { .codeEvaluateFloatButton {
bottom: 180px !important; bottom: 180px !important;
@ -345,7 +352,8 @@ class VNCContainer extends Component {
className={'codeEvaluateDrawer'} className={'codeEvaluateDrawer'}
placement="bottom" placement="bottom"
getContainer={false} getContainer={false}
style={{ position: 'absolute', bottom: '-25px', zIndex: 1 }} // style={{ position: 'absolute', bottom: '-25px', zIndex: 1 }}
style={{ position: 'absolute', bottom: '50px', zIndex: 1 }}
afterVisibleChange={(visible) => { afterVisibleChange={(visible) => {
if (visible) { if (visible) {
const canvas = $('.vncDisply canvas')[0] const canvas = $('.vncDisply canvas')[0]
@ -356,16 +364,16 @@ class VNCContainer extends Component {
> >
{ this.props.codeEvaluate } { this.props.codeEvaluate }
</Drawer> </Drawer>
{/* <FloatButton onClick={this.swtichBottomDrawer} <FloatButton onClick={this.swtichBottomDrawer}
className="codeEvaluateFloatButton" className="codeEvaluateFloatButton"
>测试集</FloatButton> */} >测试集</FloatButton>
<div {/* <div
className={_classCtx} className={_classCtx}
onClick={this.swtichBottomDrawer} onClick={this.swtichBottomDrawer}
> > */}
{/* <span className="iconfont icon-shangjiantou btn-arrow"></span> */} {/* <span className="iconfont icon-shangjiantou btn-arrow"></span> */}
<span className={_classes}></span> {/* <span className={_classes}></span> */}
</div> {/* </div> */}
</VNCDisplay> </VNCDisplay>

@ -1,9 +1,11 @@
#actionView { #actionView {
position: relative;
background:rgba(5,16,26,1); background:rgba(5,16,26,1);
min-height: 49px; min-height: 49px;
/*box-shadow: inset 0 0 10px #27324c;*/ /*box-shadow: inset 0 0 10px #27324c;*/
z-index: 9; z-index: 9;
box-shadow: 0px -1px 4px 0px rgba(76,172,255,0.08); box-shadow: 0px -1px 4px 0px rgba(76,172,255,0.08);
z-index: 10001;
} }
#time-consuming span { #time-consuming span {
color: #747A7F; color: #747A7F;

@ -1,3 +1,4 @@
import '../VNC.css';
import React, { Component } from 'react'; import React, { Component } from 'react';
import IconButton from 'material-ui/IconButton'; import IconButton from 'material-ui/IconButton';
@ -302,34 +303,39 @@ class CodeEvaluateView extends Component {
return ( return (
<React.Fragment> <React.Fragment>
<ul id="blacktab_nav"> <ul id="blacktab_nav">
<li className="blacktab_con undis" > <li className="blacktab_con undis" >
</li> </li>
{ challenge.isHtml ? { challenge.isHtml ?
<li className={`blacktab_con ${ tabIndex === 0 ? 'tab_hover' : ''}`} onClick={() => this.tabIndexChange(0)}> <li className={`blacktab_con ${ tabIndex === 0 ? 'tab_hover' : ''}`} onClick={() => this.tabIndexChange(0)}>
<a href="javascript:void(0);" className="tab_type tab_color">效果显示</a> <a href="javascript:void(0);" className="tab_type tab_color">效果显示</a>
</li> : ''} </li> : ''}
<li className={`blacktab_con ${ tabIndex === 1 ? 'tab_hover' : ''}`} onClick={() => this.tabIndexChange(1)}> <li className={`blacktab_con ${ tabIndex === 1 ? 'tab_hover' : ''}`} onClick={() => this.tabIndexChange(1)}>
<a href="javascript:void(0);" className="tab_type tab_color">测试结果</a> <a href="javascript:void(0);" className="tab_type tab_color">测试结果</a>
</li> </li>
{/* <li className="blacktab_con_abs">
{this.props.inDrawer ? <Tooltip id="tooltip-icon-expand" title={ "收起" }> <span className="code_evalute_icon">
{/*TODO 按钮大小改造css*/} <span className="iconfont icon-xiajiantou btn-arrow"></span>
{/* icon-guanbi */} </span>
<a className="iconButton fr mr15 mt4" onClick={this.props.hideCodeEvaluate} id="extend_and_zoom" > </li> */}
<i className={ "font-18 iconfont icon-guanbi" }></i>
</a> {this.props.inDrawer ? <Tooltip id="tooltip-icon-expand" title={ "收起" }>
{/*TODO 按钮大小改造css*/}
</Tooltip> : <Tooltip id="tooltip-icon-expand" title={ evaluateViewExpanded ? "" : ""}> {/* icon-guanbi */}
{/*TODO 按钮大小改造css*/} <a className="iconButton fr mr15 mt4" onClick={this.props.hideCodeEvaluate} id="extend_and_zoom" >
<i className={ "font-18 iconfont icon-guanbi" }></i>
<a className="iconButton fr mr15" onClick={this.onEvaluateViewExpand} id="extend_and_zoom" > </a>
<i className={ evaluateViewExpanded ? "font-18 iconfont icon-shousuo" : "iconfont icon-zhankai font-18" }></i>
</a> </Tooltip> : <Tooltip id="tooltip-icon-expand" title={ evaluateViewExpanded ? "" : ""}>
{/*TODO 按钮大小改造css*/}
</Tooltip>}
<a className="iconButton fr mr15" onClick={this.onEvaluateViewExpand} id="extend_and_zoom" >
<div className="cl"></div> <i className={ evaluateViewExpanded ? "font-18 iconfont icon-shousuo" : "iconfont icon-zhankai font-18" }></i>
</ul> </a>
</Tooltip>}
<div className="cl"></div>
</ul>
<CircularProgress size={40} thickness={3} <CircularProgress size={40} thickness={3}

@ -296,32 +296,58 @@ class CodeRepositoryViewContainer extends Component {
render() { render() {
return ( return (
<React.Fragment> // <React.Fragment>
{this.props.isOnlyContainer == true ? // {this.props.isOnlyContainer == true ?
React.Children.map(this.props.children, child => { // React.Children.map(this.props.children, child => {
if(!child) { // if(!child) {
return '' // return ''
} // }
return React.cloneElement(child, Object.assign({...this.state}, { // return React.cloneElement(child, Object.assign({...this.state}, {
loadRepoFiles: this.loadRepoFiles, // loadRepoFiles: this.loadRepoFiles,
onTreeSelect: this.onTreeSelect, // onTreeSelect: this.onTreeSelect,
onLoadData: this.onLoadData, // onLoadData: this.onLoadData,
})) // }))
}) // })
: // :
<CodeRepositoryView {...this.props} // <CodeRepositoryView {...this.props}
{...this.state} // {...this.state}
showFilesDrawer={this.showFilesDrawer} // showFilesDrawer={this.showFilesDrawer}
loadRepoFiles={this.loadRepoFiles} // loadRepoFiles={this.loadRepoFiles}
onLoadData={this.onLoadData} // onLoadData={this.onLoadData}
onTreeSelect={ this.onTreeSelect } // onTreeSelect={ this.onTreeSelect }
onRepositoryViewExpand={this.onRepositoryViewExpand} // onRepositoryViewExpand={this.onRepositoryViewExpand}
tabIndexChange={this.tabIndexChange} // tabIndexChange={this.tabIndexChange}
showSettingDrawer={this.showSettingDrawer} // showSettingDrawer={this.showSettingDrawer}
></CodeRepositoryView> } // ></CodeRepositoryView> }
</React.Fragment> // </React.Fragment>
<React.Fragment>
{this.props.isOnlyContainer == true ?
React.Children.map(this.props.children, child => {
if(!child) {
return ''
}
return React.cloneElement(child, Object.assign({...this.state}, {
loadRepoFiles: this.loadRepoFiles,
onTreeSelect: this.onTreeSelect,
onLoadData: this.onLoadData,
}))
})
:
<CodeRepositoryView {...this.props}
{...this.state}
showFilesDrawer={this.showFilesDrawer}
loadRepoFiles={this.loadRepoFiles}
onLoadData={this.onLoadData}
onTreeSelect={ this.onTreeSelect }
onRepositoryViewExpand={this.onRepositoryViewExpand}
tabIndexChange={this.tabIndexChange}
showSettingDrawer={this.showSettingDrawer}
></CodeRepositoryView> }
</React.Fragment>
); );
} }
} }

Loading…
Cancel
Save