f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-09 13:42:38 +00:00
Code Wiki Activity

remove flickering in divider

Browse Source
This commit is contained in:
Víctor Losada Hernández
2024-10-27 10:20:49 +01:00
parent 782ee7a4ad
commit 391d0a0bfe
2 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
shared/naturalcrit/splitPane/splitPane.jsx
View File

@@ -17,7 +17,6 @@ const SplitPane = (props)=>{
const [showMoveArrows, setShowMoveArrows] = useState(true); const [showMoveArrows, setShowMoveArrows] = useState(true);
const [liveScroll, setLiveScroll] = useState(false); const [liveScroll, setLiveScroll] = useState(false);
// Set initial divider position and liveScroll only after mounting
useEffect(()=>{ useEffect(()=>{
const savedPos = window.localStorage.getItem(storageKey); const savedPos = window.localStorage.getItem(storageKey);
setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2); setDividerPos(savedPos ? limitPosition(savedPos, 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)) : window.innerWidth / 2);
@@ -29,6 +28,7 @@ const SplitPane = (props)=>{
const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x))); const limitPosition = (x, min = 1, max = window.innerWidth - 13)=>Math.round(Math.min(max, Math.max(min, x)));
//when resizing, the divider should grow smaller if less space is given, then grow back if the space is restored, to the original position
const handleResize = () =>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13))); const handleResize = () =>setDividerPos(limitPosition(window.localStorage.getItem(storageKey), 0.1 * (window.innerWidth - 13), 0.9 * (window.innerWidth - 13)));
const handleUp =(e)=>{ const handleUp =(e)=>{
@@ -48,8 +48,7 @@ const SplitPane = (props)=>{
const handleMove = (e)=>{ const handleMove = (e)=>{
if(!isDragging) return; if(!isDragging) return;
e.preventDefault(); e.preventDefault();
const newSize = limitPosition(e.pageX); setDividerPos(limitPosition(e.pageX));
setDividerPos(newSize);
}; };
const liveScrollToggle = ()=>{ const liveScrollToggle = ()=>{
@@ -75,7 +74,7 @@ const SplitPane = (props)=>{
); );
const renderDivider = ( const renderDivider = (
<div className='divider' onPointerDown={handleDown}> <div className={`divider ${isDragging && 'dragging'}`} onPointerDown={handleDown}>
{showDividerButtons && renderMoveArrows} {showDividerButtons && renderMoveArrows}
<div className='dots'> <div className='dots'>
<i className='fas fa-circle' /> <i className='fas fa-circle' />

2
shared/naturalcrit/splitPane/splitPane.less
View File

@@ -30,7 +30,7 @@
color : #666666; color : #666666;
} }
} }
&:hover { background-color : #999999; } &:hover,&.dragging { background-color : #999999; }
} }
.arrow { .arrow {
position : absolute; position : absolute;