调整左侧课堂导航栏

dev_hjm_a
杨树林 6 years ago
parent 5ef85cde10
commit 35937ad3c4

@ -57,6 +57,7 @@ class Coursesleftnav extends Component{
positiontype:undefined,
toopvisible:false,
toopvisibleindex:undefined,
toopvisibleindexs:undefined,
sandiantypes:undefined,
antIcon:false,
chapterupdate:false,
@ -314,7 +315,11 @@ class Coursesleftnav extends Component{
twosandianshow=(e,key,type)=>{
// console.log("twosandianshow");
// console.log(key);
// console.log(type);
this.setState({
toopvisibleindexs:key,
twosandiantype:key,
toopvisible:false,
toopvisibleindex:undefined,
@ -322,11 +327,29 @@ class Coursesleftnav extends Component{
})
e.stopPropagation();//阻止冒泡
}
twosandianshowys=(e,key,type)=>{
// console.log("twosandianshow");
// console.log(key);
// console.log(type);
this.setState({
toopvisibleindexs:key,
})
e.stopPropagation();//阻止冒泡
}
twosandianshowyss=(e,key,type)=>{
// console.log("twosandianshow");
// console.log(key);
// console.log(type);
this.setState({
toopvisibleindexs:undefined,
})
e.stopPropagation();//阻止冒泡
}
twosandianhide=(e,index,type)=>{
// console.log(index)
this.setState({
toopvisibleindexs:undefined,
twosandiantype:undefined,
twosandiantypenum:undefined,
toopvisible:true,
@ -336,6 +359,13 @@ class Coursesleftnav extends Component{
e.stopPropagation();//阻止冒泡
}
twosandianhideys=(e,index,type)=>{
// console.log(index)
this.setState({
toopvisibleindexs:undefined,
})
e.stopPropagation();//阻止冒泡
}
//置顶
editSetup=(e,id)=>{
@ -820,6 +850,7 @@ class Coursesleftnav extends Component{
ModalSave,
loadtype,
twosandiantypes,
toopvisibleindexs
}=this.state;
let {course_modules,hidden_modules,is_teacher} =this.props;
@ -992,6 +1023,8 @@ class Coursesleftnav extends Component{
}
}
}
// console.log(iem.category_name);
// console.log(iem.category_name.length);
return(
<Draggable
key={'id'+index}
@ -1001,33 +1034,53 @@ class Coursesleftnav extends Component{
>
{(provided, snapshot) => (
<Tooltip placement="bottom" title={"拖拽二级菜单调整顺序"}
key={index}
// visible={toopvisible===true&&toopvisibleindex===iem.category_id?true:false}
visible={false}
>
{/*"/courses/"+this.props.match.params.coursesId+"/"+item.type+"/"+iem.category_type+"/"+iem.category_id*/}
<a className={"Draggablelichild"}>
<li className="clearfix width93 Draggableli" key={index} onClick={(e)=>this.selectnavids(e,key,iem.category_id,item.type+"child",iem.second_category_url,key)} onMouseLeave={(e)=>this.twosandianhide(e,index,item.type)} onMouseEnter={(e)=>this.twosandianshow(e,index,item.type)}
<a className={"Draggablelichild"} key={index}>
<li className="clearfix width93 Draggableli" key={index} onClick={(e)=>this.selectnavids(e,key,iem.category_id,item.type+"child",iem.second_category_url,key)} onMouseLeave={(e)=>this.twosandianhide(e,index,item.type)} onMouseEnter={(e)=>this.twosandianshow(e,index,item.type)}
key={index}
ref={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
title={iem.category_name.length<10?"":iem.category_name}
// title={iem.category_name.length<10?"":iem.category_name}
>
<a className="fl pl46 pd0 Draggablelichild">
<span className={this.props.location.pathname===iem.second_category_url?"color-blue fl ml38 maxwidth155 task-hide Draggablelichild":"fl ml38 maxwidth155 task-hide Draggablelichild"}>{iem.category_name}</span>
<span className={this.props.location.pathname===iem.second_category_url?"color-blue fl ml38 maxwidth170 task-hide Draggablelichild":"fl ml38 maxwidth170 task-hide Draggablelichild"} onMouseEnter={(e)=>this.twosandianshowys(e,index,item.type)}>{iem.category_name}</span>
<span className={twosandiantype===undefined?this.props.location.pathname===iem.second_category_url?"fr mr20 color-blue Draggablelichild font-14":"fr mr20 color999 Draggablelichild font-14":item.type===twosandiantypes&&twosandiantype===index&&iem.category_id!=0?"none":this.props.location.pathname===iem.second_category_url?"fr mr20 color-blue Draggablelichild font-14":"fr mr20 color999 Draggablelichild font-14"} >{iem.category_count===0?"":iem.category_count}</span>
{item.type===twosandiantypes&&twosandiantype===index?
iem.category_id===0?"":
iem.category_type==="graduation_topics"||iem.category_type==="graduation_tasks"?
<span className={"fr mr20 color999 Draggablelichild font-14"} >{iem.category_count===0?"":iem.category_count}</span>
:<Popover placement="right" content={this.content(item,iem,index)} trigger="hover" key={index}>
(
iem.category_name.length<13?
<span className={"fr mr20 color999 Draggablelichild font-14"} >{iem.category_count===0?"":iem.category_count}</span>
:
<Tooltip placement="right" key={index} title={iem.category_name} visible={toopvisibleindexs===undefined?false:toopvisibleindexs===index?true:false}>
<span className={"fr mr20 color999 Draggablelichild font-14"} >{iem.category_count===0?"":iem.category_count}</span>
</Tooltip>
)
:
(
iem.category_name.length<13?
<Popover placement="right" content={this.content(item,iem,index)} trigger="hover" key={index} onMouseEnter={(e)=>this.twosandianshowyss(e)}>
<i className={"iconfont icon-sandian fr color999 mr15 Draggablelichild"}></i>
</Popover>
:
<Tooltip placement="right" key={index} title={iem.category_name} visible={toopvisibleindexs===undefined?false:toopvisibleindexs===index?true:false}>
<Popover placement="right" content={this.content(item,iem,index)} trigger="hover" key={index} onMouseEnter={(e)=>this.twosandianshowyss(e)}>
<i className={"iconfont icon-sandian fr color999 mr15 Draggablelichild"}></i>
</Popover>:""}
</Popover>
</Tooltip>
)
:""}
</a>
{provided.placeholder}
</li>
</a>
</Tooltip>
)}
@ -1087,17 +1140,24 @@ class Coursesleftnav extends Component{
}
}
}
// console.log(iem.category_name);
// console.log(iem.category_name.length);一开始是10 显示是13
return(
<a >
<li className="clearfix Draggableli" key={index} style={{ width: '244px'}} title={iem.category_name.length<10?"":iem.category_name}>
<a className="fl pl46 pd0 Draggablelichild" onClick={(e)=>this.selectnavids(e,key,iem.category_id,item.type+"child",iem.second_category_url,key)} >
{/*<span className="fl ml38 maxwidth155 task-hide">{iem.category_name}</span>*/}
<span className={this.props.location.pathname===iem.second_category_url?"color-blue fl ml38 maxwidth155 task-hide Draggablelichild":"fl ml38 maxwidth155 task-hide Draggablelichild"}>{iem.category_name}</span>
{/*title={iem.category_name.length<10?"":iem.category_name}*/}
<li className="clearfix Draggableli" key={index} style={{ width: '244px'}} >
<Tooltip placement="right" key={index} title={iem.category_name}>
<a className="fl pl46 pd0 Draggablelichild" onClick={(e)=>this.selectnavids(e,key,iem.category_id,item.type+"child",iem.second_category_url,key)} >
{/*<span className="fl ml38 maxwidth170 task-hide">{iem.category_name}</span>*/}
{/*{iem.category_name.length<10?"":*/}
{/* iem.category_name}*/}
<span className={this.props.location.pathname===iem.second_category_url?"color-blue fl ml38 maxwidth170 task-hide Draggablelichild":"fl ml38 maxwidth170 task-hide Draggablelichild"}>{iem.category_name}</span>
<span className={twosandiantype===undefined?this.props.location.pathname===iem.second_category_url?"fr mr20 color-blue font-14":"fr mr20 color999 font-14":twosandiantype===index&&item.type!="graduation"?"none":this.props.location.pathname===iem.second_category_url?"fr mr20 color-blue font-14":"fr mr20 color999 font-14"}>{iem.category_count===0?"":iem.category_count}</span>
</a>
</Tooltip>
</li>
</a>
)
})

@ -427,6 +427,7 @@ a.white-btn.use_scope-btn:hover{
.ebebeb{border-bottom: 1px solid #EBEBEB;}
.CheckboxGroup{background:rgba(249,249,249,1);}
.maxwidth155{max-width: 155px; color:#666666;font-size: 14px;}
.maxwidth170{max-width: 170px; color:#666666;font-size: 14px;}
.pl46{ margin-left: 46px !important; border-bottom: 1px solid #eeee; width: 90% !important;}
.hidden{overflow: hidden;}
.pd0{padding: 0px !important;}

Loading…
Cancel
Save