From a56601196dfd121b237e33bf1654f578e2077d00 Mon Sep 17 00:00:00 2001
From: "G.Ambatte" <sean@robertson-family.nz>
Date: Tue, 3 May 2022 17:24:58 +1200
Subject: [PATCH] Add divider buttons

---
 shared/naturalcrit/splitPane/splitPane.jsx  | 24 +++++++++++++++------
 shared/naturalcrit/splitPane/splitPane.less | 23 +++++++++++++++++++-
 2 files changed, 40 insertions(+), 7 deletions(-)

diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx
index 4d138e30b..691cf058f 100644
--- a/shared/naturalcrit/splitPane/splitPane.jsx
+++ b/shared/naturalcrit/splitPane/splitPane.jsx
@@ -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(){
diff --git a/shared/naturalcrit/splitPane/splitPane.less b/shared/naturalcrit/splitPane/splitPane.less
index 0e9095193..7e3f819aa 100644
--- a/shared/naturalcrit/splitPane/splitPane.less
+++ b/shared/naturalcrit/splitPane/splitPane.less
@@ -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;
+		}
+	}
 }