0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-07 09:52:41 +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(){ renderDivider : function(){
return <div className='divider' onMouseDown={this.handleDown} > return <>
<div className='dots'> <div className='arrow left'
<i className='fas fa-circle' /> style={{ left: this.state.currentDividerPos-4 }}
<i className='fas fa-circle' /> onClick={()=>console.log('left')} >
<i className='fas fa-circle' /> <i className='fas fa-arrow-left' />
</div> </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(){ render : function(){

View File

@@ -13,7 +13,7 @@
.divider{ .divider{
display : table; display : table;
height : 100%; height : 100%;
width : 12px; width : 15px;
cursor : ew-resize; cursor : ew-resize;
background-color : #bbb; background-color : #bbb;
text-align : center; text-align : center;
@@ -32,4 +32,25 @@
background-color: #999; 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;
}
}
} }