From fc65b5d1b6776e1c8e46df6f4f1c98189fb5a294 Mon Sep 17 00:00:00 2001 From: tangjiang <465264938@qq.com> Date: Fri, 3 Jan 2020 13:59:18 +0800 Subject: [PATCH] update tpi ui --- .../newOrEditTask/leftpane/editorTab/index.js | 3 +- public/react/src/modules/page/VNC.css | 18 +++++-- public/react/src/modules/page/VNCContainer.js | 53 ++++++++++++++---- .../src/modules/page/main/CodeEvaluateView.js | 54 +++++++++++++++---- public/react/src/redux/actions/actionTypes.js | 3 ++ public/react/src/redux/actions/index.js | 10 +++- public/react/src/redux/actions/tpi.js | 23 ++++++++ public/react/src/redux/reducers/index.js | 4 +- public/react/src/redux/reducers/tpiReducer.js | 36 +++++++++++++ 9 files changed, 178 insertions(+), 26 deletions(-) create mode 100644 public/react/src/redux/actions/tpi.js create mode 100644 public/react/src/redux/reducers/tpiReducer.js diff --git a/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js b/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js index 9c98e4b01..250437bcd 100644 --- a/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js +++ b/public/react/src/modules/developer/newOrEditTask/leftpane/editorTab/index.js @@ -4,7 +4,7 @@ * @Github: * @Date: 2019-11-20 10:35:40 * @LastEditors : tangjiang - * @LastEditTime : 2020-01-03 09:20:12 + * @LastEditTime : 2020-01-03 11:28:26 */ import './index.scss'; // import 'katex/dist/katex.css'; @@ -324,6 +324,7 @@ class EditTab extends React.Component { console.log(choid_ids); return ( {` /* 评测结果 */ .codeEvaluateDrawer{ - // position: absolute; - // bottom: 84px; + position: absolute; + bottom: 84px; + transition: all .3s; + // bottom: px; + } + + .codeEvaluateDrawer.active{ + bottom: 50px; + } + + .code_evaluate_stretch{ + top: 0px; } + .codeEvaluateDrawer #game_test_set_results { height: 198px; } @@ -242,6 +257,14 @@ class VNCContainer extends Component { background: rgb(5, 16, 26) !important; } + .code_evaluate_stretch .ant-drawer-content-wrapper{ + height: 100% !important; + } + + .code_evaluate_stretch #game_test_set_results { + height: calc(100vh - 136px) !important; + } + .codeEvaluateFloatButton { bottom: 180px !important; left: unset; @@ -348,12 +371,12 @@ class VNCContainer extends Component { width={firstDrawerWidth} closable={false} onClose={this.onBottomDrawerClose} - visible={this.state.bottomDrawer===undefined?false:this.state.bottomDrawer} - className={'codeEvaluateDrawer'} + visible={isCollapse} + className={_drawClasses} placement="bottom" getContainer={false} // style={{ position: 'absolute', bottom: '-25px', zIndex: 1 }} - style={{ position: 'absolute', bottom: '50px', zIndex: 1 }} + // style={{ position: 'absolute', bottom: '50px', top: 0, zIndex: 1 }} afterVisibleChange={(visible) => { if (visible) { const canvas = $('.vncDisply canvas')[0] @@ -364,9 +387,9 @@ class VNCContainer extends Component { > { this.props.codeEvaluate } - 测试集 + >测试集 */} {/*
{ + const { showOrHide, isCollapse } = state.tpiReducer; + return { + showOrHide, + isCollapse + } +}; + +export default connect( + mapStateToProps +)(VNCContainer); diff --git a/public/react/src/modules/page/main/CodeEvaluateView.js b/public/react/src/modules/page/main/CodeEvaluateView.js index 760ccd1ad..e70d02008 100644 --- a/public/react/src/modules/page/main/CodeEvaluateView.js +++ b/public/react/src/modules/page/main/CodeEvaluateView.js @@ -4,10 +4,11 @@ import React, { Component } from 'react'; import IconButton from 'material-ui/IconButton'; import Tooltip from 'material-ui/Tooltip'; import Button from 'material-ui/Button'; - +import { connect } from 'react-redux'; import './CodeEvaluateView.css' import { CircularProgress } from 'material-ui/Progress'; import { on, off } from 'educoder' +import actions from '../../../redux/actions'; const testSetsExpandedArrayInitVal = [false, false, false, false, false, false, false, false, false, false, false, false, false, false, false, @@ -274,9 +275,24 @@ class CodeEvaluateView extends Component { }) } + onHandleTestCase () { + // console.log(this); + const {showOrHide, showOrHideTpiTestCase} = this.props; + showOrHideTpiTestCase(!showOrHide); + } + + handleShowTestCase () { + // console.log('111111111'); + const {isCollapse, isCollpaseTsetCase, showOrHideTpiTestCase} = this.props; + isCollpaseTsetCase(!isCollapse); + if (isCollapse) { + showOrHideTpiTestCase(false); + } + } + render() { const { evaluateViewExpanded, tabIndex } = this.state; - const { output_sets, latest_output, record, challenge, gameBuilding, myshixun } = this.props; + const { output_sets, latest_output, record, challenge, gameBuilding, myshixun, showOrHide, isCollapse } = this.props; if (!output_sets) { return ( @@ -300,6 +316,8 @@ class CodeEvaluateView extends Component { onclick="check_tab('blacktab_con','blacktab_hover',this);" */ + + const _arrowClasses = isCollapse ? 'iconfont icon-xiajiantou btn-arrow' : 'iconfont icon-shangjiantou btn-arrow'; return (
    @@ -312,17 +330,20 @@ class CodeEvaluateView extends Component {
  • this.tabIndexChange(1)}> 测试结果
    • - {/*
  • - - +
  • + this.handleShowTestCase()}> + -
    • */} + - {this.props.inDrawer ? + {this.props.inDrawer ? {/*TODO 按钮大小改造，css*/} {/* icon-guanbi */} - + {/* + */} + this.onHandleTestCase()}> + : @@ -398,4 +419,19 @@ class CodeEvaluateView extends Component { } } -export default CodeEvaluateView; +const mapStateToProps = (state) => { + const { showOrHide, isCollapse } = state.tpiReducer; + return { + showOrHide, + isCollapse + } +}; +const mapDispatchToProps = (dispatch) => ({ + showOrHideTpiTestCase: (flag) => dispatch(actions.showOrHideTpiTestCase(flag)), + isCollpaseTsetCase: (flag) => dispatch(actions.isCollpaseTsetCase(flag)) +}); + +export default connect( + mapStateToProps, + mapDispatchToProps +)(CodeEvaluateView); diff --git a/public/react/src/redux/actions/actionTypes.js b/public/react/src/redux/actions/actionTypes.js index 867563ea7..9ba1d58cf 100644 --- a/public/react/src/redux/actions/actionTypes.js +++ b/public/react/src/redux/actions/actionTypes.js @@ -84,6 +84,9 @@ const types = { DELETE_COMMENTS: 'DELETE_COMMENTS', // 删除评论 SAVE_COMMENT_IDENTIFIER: 'SAVE_COMMENT_IDENTIFIER', // 评论时的identifier CHANGE_COMMENT_PAGINATION_PARAMS: 'CHANGE_COMMENT_PAGINATION_PARAMS', // 改变分页 + /** tpi */ + SHOW_OR_HIDE_TPI_TEST_CASE: 'SHOW_OR_HIDE_TPI_TEST_CASE', // 显示或隐藏tpi测试集弹框 + IS_COLLAPSE_TEST_CASE: 'IS_COLLAPSE_TEST_CASE' // 是否展开测试集 } export default types; diff --git a/public/react/src/redux/actions/index.js b/public/react/src/redux/actions/index.js index 99ab53f2f..897923f94 100644 --- a/public/react/src/redux/actions/index.js +++ b/public/react/src/redux/actions/index.js @@ -96,6 +96,11 @@ import { updataspinning } from './jupyter'; +import { + showOrHideTpiTestCase, + isCollpaseTsetCase +} from './tpi'; + export default { toggleTodo, getOJList, @@ -169,5 +174,8 @@ export default { deleteComment, likeComment, showOrHideComment, - changePagination + changePagination, + // tpi + showOrHideTpiTestCase, + isCollpaseTsetCase } \ No newline at end of file diff --git a/public/react/src/redux/actions/tpi.js b/public/react/src/redux/actions/tpi.js new file mode 100644 index 000000000..8fe134c32 --- /dev/null +++ b/public/react/src/redux/actions/tpi.js @@ -0,0 +1,23 @@ +/* + * @Description: + * @Author: tangjiang + * @Github: + * @Date: 2020-01-03 10:24:43 + * @LastEditors : tangjiang + * @LastEditTime : 2020-01-03 11:45:22 + */ +import types from './actionTypes'; + +export const showOrHideTpiTestCase = (flag) => { + return { + type: types.SHOW_OR_HIDE_TPI_TEST_CASE, + payload: flag + } +} + +export const isCollpaseTsetCase = (flag) => { + return { + type: types.IS_COLLAPSE_TEST_CASE, + payload: flag + } +} diff --git a/public/react/src/redux/reducers/index.js b/public/react/src/redux/reducers/index.js index 206f34384..7c9601d52 100644 --- a/public/react/src/redux/reducers/index.js +++ b/public/react/src/redux/reducers/index.js @@ -15,6 +15,7 @@ import commonReducer from './commonReducer'; import userReducer from './userReducer'; import jupyterReducer from './jupyterReducer'; import commentReducer from './commentReducer'; +import tpiReducer from './tpiReducer'; export default combineReducers({ testReducer, @@ -24,5 +25,6 @@ export default combineReducers({ commonReducer, userReducer, jupyterReducer, - commentReducer + commentReducer, + tpiReducer }); diff --git a/public/react/src/redux/reducers/tpiReducer.js b/public/react/src/redux/reducers/tpiReducer.js new file mode 100644 index 000000000..d03ae3a4a --- /dev/null +++ b/public/react/src/redux/reducers/tpiReducer.js @@ -0,0 +1,36 @@ +/* + * @Description: + * @Author: tangjiang + * @Github: + * @Date: 2020-01-03 10:24:31 + * @LastEditors : tangjiang + * @LastEditTime : 2020-01-03 11:44:26 + */ +import types from "../actions/actionTypes"; + +const initialState = { + showOrHide: false, + isCollapse: false, // 是否展开测试集 +}; + +const tpiReducer = (state = initialState, action) => { + const { type, payload } = action; + switch (type) { + case types.SHOW_OR_HIDE_TPI_TEST_CASE: + return { + ...state, + showOrHide: payload + } + case types.IS_COLLAPSE_TEST_CASE: + return { + ...state, + isCollapse: payload + } + default: + return { + ...state + } + } +} + +export default tpiReducer;