jupytertpi调整

chromesetting
杨树明 5 years ago
parent bfee0b7989
commit a5077c3011

@ -1,9 +1,16 @@
/*
* @Author: your name
* @Date: 2019-12-20 11:40:56
* @LastEditTime : 2019-12-20 13:38:49
* @LastEditors : Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /notebook/Users/yangshuming/Desktop/new__educode/educoder/public/react/public/js/jupyter.js
*/
window.onload=function(){
// require(["base/js/namespace"],function(Jupyter) {
// Jupyter.notebook.save_checkpoint();
// });
$('.navbar-nav').children().eq(7).css({'display':'none'})
console.log($('.navbar-nav').children().eq(7))
require(["base/js/namespace"],function(Jupyter) {
Jupyter.notebook.save_checkpoint();
});
}

@ -38,5 +38,5 @@
}
.newjupyter_float_button{
right: 257px;
right: 330px;
}

@ -9,7 +9,7 @@
import './index.scss';
import React, { useEffect, useState } from 'react';
import SplitPane from 'react-split-pane';
import { Button, Modal,Drawer } from 'antd';
import { Button, Modal,Drawer ,Pagination,Empty,Tooltip,Icon,message} from 'antd';
import {
connect
} from 'react-redux';
@ -18,6 +18,25 @@ import UserInfo from '../../developer/components/userInfo';
import actions from '../../../redux/actions';
import LeftPane from './leftPane';
import RightPane from './rightPane';
import MyIcon from "../../../common/components/MyIcon";
function jsCopy(s) {
var copyEle = document.getElementById(s);
const range = document.createRange(); // 创造range
window.getSelection().removeAllRanges(); //清除页面中已有的selection
range.selectNode(copyEle); // 选中需要复制的节点
window.getSelection().addRange(range); // 执行选中元素
const copyStatus = document.execCommand("Copy"); // 执行copy操作
// 对成功与否定进行提示
copyStatuss(copyStatus)
}
function copyStatuss(copyStatus){
if (copyStatus) {
message.success('复制成功');
} else {
message.error('复制失败');
}
}
function JupyterTPI (props) {
// 获取 identifier 值
@ -45,11 +64,17 @@ function JupyterTPI (props) {
drawervisible,
} = props;
const emptyCtx = (
<div className="jupyter_empty">
<Empty />
</div>
);
const {identifier} = params;
const [userInfo, setUserInfo] = useState({});
const [jupyterInfo, setJupyterInfo] = useState({});
const [updateTip, setUpdateTip] = useState(true);
const [myIdentifier, setMyIdentifier] = useState('');
const [renderCtx, setRenderCtx] = useState(() => (emptyCtx));
useEffect(() => {
/* jupyter TPI
* 获取 用户信息,
@ -170,6 +195,45 @@ function JupyterTPI (props) {
const firstDrawerWidth = ()=>{
return 260
};
// 分页处理
const handleChangePage = (page) => {
// console.log(page, pageSize);
handlePageChange(page);
}
// const listCtx = ;
useEffect(() => {
if (dataSets.length > 0) {
console.log('数据集的个数: ', dataSets.length);
const oList = dataSets.map((item, i) => {
return (
<li className="jupyter_item" key={`key_${i}`}>
<Tooltip
placement="right"
// title={item.file_path}
mouseLeaveDelay={0.3}
>
<Icon type="file-text" className="jupyter_icon"/>
<span className="jupyter_name ml10">{item.title}</span>
<a className={"fr color-blue"}
onClick={() => {
jsCopy("file_path"+i)
}}>复制地址</a>
<input id={"file_path"+i} className={"file_path_input"} value={item.file_path}/>
</Tooltip>
</li>
);
});
const oUl = (
<ul className="jupyter_data_list">
{ oList }
</ul>
);
setRenderCtx(oUl);
}
}, [props]);
return (
<div className="jupyter_area">
<div className="jupyter_header">
@ -232,10 +296,27 @@ function JupyterTPI (props) {
mask={false}
// onClose={this.onClose}
visible={drawervisible}
className={"RightPaneDrawer"}
>
<p>Some contents...</p>
<p>Some contents...</p>
<p>Some contents...</p>
<p className={"RightPaneDrawertop"}></p>
<div className="jupyter_data_sets_area newjupyter_data_sets_area">
<h2 className="jupyter_h2_title">
{/*<MyIcon type="iconwenti" className="jupyter_data_icon"/>*/}
<i className={"iconfont icon-base"}></i>
{/* <span className="iconfont icon-java jupyter_data_icon"></span>数据集 */}
</h2>
{ renderCtx }
<div className='jupyter_pagination'>
{total<20?"":<Pagination
simple
current={pagination.page}
pageSize={pagination.limit}
total={total}
onChange={handleChangePage}
/>}
</div>
</div>
</Drawer>
</div>
</div>

@ -104,3 +104,58 @@
}
}
}
.RightPaneDrawer{
.RightPaneDrawertop{
width:330px;
height:29px;
background:rgba(17,28,36,1);
}
.ant-drawer-content-wrapper{
width:330px !important;
box-shadow: -2px 0 8px #070F1A !important;
}
.ant-drawer-body{
padding: 0px;
}
.ant-drawer-wrapper-body{
padding-top: 60px;
background: #070F1A;
overflow: hidden !important;
}
.ant-pagination{
color:#fff !important;
}
}
.newjupyter_data_sets_area{
background:#070F1A !important;
.jupyter_h2_title {
height:49px;
line-height: 49px;
background: #070F1A !important;
border-bottom: 1px solid #17212F !important;
color:#FFFFFF !important;
border-top: 1px solid #17212F !important;
}
.iconfont{
color:#28b887!important;
font-size: 30px !important;
margin-right: 20px;
}
.jupyter_pagination{
border-top: 1px solid #070F1A !important;
}
.jupyter_name{
color:#FFFFFF !important;
}
.file_path_input{
position: absolute;
right: -50%;
}
}

@ -2,15 +2,15 @@
height: 100%;
background: #fff;
.jupyter_h2_title{
height: 44px;
line-height: 44px;
//height: 44px;
//line-height: 44px;
// background-color: #EEEEEE;
background: #fff;
padding: 0 20px;
font-size: 16px;
// box-size: border-box;
box-sizing: border-box;
border-bottom: 1px solid rgba(238,238,238,1);
//border-bottom: 1px solid rgba(238,238,238,1);
.jupyter_data_icon{
// color: #7286ff;
color: #1890ff;
@ -24,14 +24,15 @@
.jupyter_data_list,
.jupyter_empty{
height: calc(100vh - 160px);
//height: calc(100vh - 160px);
min-height: 350px;
overflow-y: auto;
}
.jupyter_data_list{
.jupyter_item{
line-height:45px;
border-bottom: 1px solid rgba(238,238,238, 1);
//border-bottom: 1px solid rgba(238,238,238, 1);
padding: 0 30px 0 60px;
overflow: hidden;
text-overflow:ellipsis;

@ -410,8 +410,6 @@ class Challengesjupyter extends Component {
</div>
</div>
</div>
</div>
:
""
)

Loading…
Cancel
Save