From a2a6a3d3f65710404851957bb19a9939ffa3907d Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 19 Oct 2021 14:39:51 +1300 Subject: [PATCH 1/3] Add limits to central divider position --- shared/naturalcrit/splitPane/splitPane.jsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index e29c7f358..82fbbcdd9 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -4,6 +4,9 @@ const createClass = require('create-react-class'); const _ = require('lodash'); const cx = require('classnames'); +const MIN_DRAG_WIDTH_PCT = 10; // How close the divider can get to the left of the screen (as a percentage of total screen width) before stopping +const MAX_DRAG_WIDTH_PCT = 90; // How close the divider can get to the right of the screen (as a percentage of total screen width) before stopping + const SplitPane = createClass({ getDefaultProps : function() { return { @@ -40,8 +43,11 @@ const SplitPane = createClass({ }, handleMove : function(e){ if(!this.state.isDragging) return; + const minWidth = window.innerWidth * (MIN_DRAG_WIDTH_PCT / 100); + const maxWidth = window.innerWidth * (MAX_DRAG_WIDTH_PCT / 100); + const newSize = Math.min(maxWidth, Math.max(minWidth, e.pageX)); this.setState({ - size : e.pageX + size : newSize }); }, /* From 3b37cacea228d8effb44a723a18a663717f4ca26 Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 19 Oct 2021 15:04:53 +1300 Subject: [PATCH 2/3] Limit position to min/max window limits --- shared/naturalcrit/splitPane/splitPane.jsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/shared/naturalcrit/splitPane/splitPane.jsx b/shared/naturalcrit/splitPane/splitPane.jsx index 82fbbcdd9..3207623f7 100644 --- a/shared/naturalcrit/splitPane/splitPane.jsx +++ b/shared/naturalcrit/splitPane/splitPane.jsx @@ -4,9 +4,6 @@ const createClass = require('create-react-class'); const _ = require('lodash'); const cx = require('classnames'); -const MIN_DRAG_WIDTH_PCT = 10; // How close the divider can get to the left of the screen (as a percentage of total screen width) before stopping -const MAX_DRAG_WIDTH_PCT = 90; // How close the divider can get to the right of the screen (as a percentage of total screen width) before stopping - const SplitPane = createClass({ getDefaultProps : function() { return { @@ -43,8 +40,9 @@ const SplitPane = createClass({ }, handleMove : function(e){ if(!this.state.isDragging) return; - const minWidth = window.innerWidth * (MIN_DRAG_WIDTH_PCT / 100); - const maxWidth = window.innerWidth * (MAX_DRAG_WIDTH_PCT / 100); + + const minWidth = 1; + const maxWidth = window.innerWidth - 13; const newSize = Math.min(maxWidth, Math.max(minWidth, e.pageX)); this.setState({ size : newSize From dbf60201948f6dd584b53efc5b90ad87d01fca2d Mon Sep 17 00:00:00 2001 From: "G.Ambatte" Date: Tue, 19 Oct 2021 23:19:26 +1300 Subject: [PATCH 3/3] Darken divider on hover --- shared/naturalcrit/splitPane/splitPane.less | 3 +++ 1 file changed, 3 insertions(+) diff --git a/shared/naturalcrit/splitPane/splitPane.less b/shared/naturalcrit/splitPane/splitPane.less index 0eae60f0d..0e9095193 100644 --- a/shared/naturalcrit/splitPane/splitPane.less +++ b/shared/naturalcrit/splitPane/splitPane.less @@ -28,5 +28,8 @@ color : #666; } } + &:hover{ + background-color: #999; + } } }