0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-24 20:42:43 +00:00

Add divider buttons

This commit is contained in:
G.Ambatte
2022-05-03 17:24:58 +12:00
parent 451f06ca74
commit a56601196d
2 changed files with 40 additions and 7 deletions

View File

@@ -85,13 +85,25 @@ const SplitPane = createClass({
},
*/
renderDivider : function(){
return <div className='divider' onMouseDown={this.handleDown} >
<div className='dots'>
<i className='fas fa-circle' />
<i className='fas fa-circle' />
<i className='fas fa-circle' />
return <>
<div className='arrow left'
style={{ left: this.state.currentDividerPos-4 }}
onClick={()=>console.log('left')} >
<i className='fas fa-arrow-left' />
</div>
</div>;
<div className='arrow right'
style={{ left: this.state.currentDividerPos-4 }}
onClick={()=>console.log('right')} >
<i className='fas fa-arrow-right' />
</div>
<div className='divider' onMouseDown={this.handleDown} >
<div className='dots'>
<i className='fas fa-circle' />
<i className='fas fa-circle' />
<i className='fas fa-circle' />
</div>
</div>
</>;
},
render : function(){

View File

@@ -13,7 +13,7 @@
.divider{
display : table;
height : 100%;
width : 12px;
width : 15px;
cursor : ew-resize;
background-color : #bbb;
text-align : center;
@@ -32,4 +32,25 @@
background-color: #999;
}
}
.arrow{
position : absolute;
width : 25px;
height : 25px;
border : 2px solid black;
border-radius : 15px;
text-align : center;
font-size : 1.2em;
cursor : pointer;
background-color : #bbb;
z-index : 999;
&.left{
top : 30px;
}
&.right{
top : 60px;
}
&:hover{
background-color: #666;
}
}
}