pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-02-10 18:05:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

swiper-by-brakepoint

Browse Source
This commit is contained in:
Polina
2026-01-30 12:02:44 +03:00
parent 71a61d3758
commit 1a48f3822b
2 changed files with 3 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
apps/common/mobile/lib/view/collaboration/Comments.jsx
View File

@ -1009,45 +1009,9 @@ const ViewCommentSheet = ({closeCurComments, onCommentMenuClick, onResolveCommen
f7.sheet.open('#view-comment-sheet');
});
const [stateHeight, setHeight] = useState('45%');
const [stateOpacity, setOpacity] = useState(1);
const [stateStartY, setStartY] = useState();
const [isNeedClose, setNeedClose] = useState(false);
const handleTouchStart = (event) => {
const touchObj = event.changedTouches[0];
setStartY(parseInt(touchObj.clientY));
};
const handleTouchMove = (event) => {
const touchObj = event.changedTouches[0];
const dist = parseInt(touchObj.clientY) - stateStartY;
if (dist < 0) { // to top
setHeight('90%');
setOpacity(1);
setNeedClose(false);
} else if (dist < 80) {
setHeight('45%');
setOpacity(1);
setNeedClose(false);
} else {
setNeedClose(true);
setOpacity(0.6);
}
};
const handleTouchEnd = (event) => {
const touchObj = event.changedTouches[0];
const swipeEnd = parseInt(touchObj.clientY);
const dist = swipeEnd - stateStartY;
if (isNeedClose) {
closeCurComments();
} else if (stateHeight === '90%' && dist > 20) {
setHeight('45%');
}
};
return (
<Sheet id='view-comment-sheet' style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}} backdrop={true} closeByBackdropClick={true}>
<div id='swipe-handler' className='swipe-container' onTouchStart={handleTouchStart} onTouchMove={handleTouchMove} onTouchEnd={handleTouchEnd}>
<Sheet id='view-comment-sheet' backdrop closeByBackdropClick swipeToClose breakpoints={[0.50]} style={{height: '90%'}}>
<div id='swipe-handler' className='swipe-container'>
<Icon icon='icon-swipe'/>
</div>
<CommentList wsProps={wsProps} onCommentMenuClick={onCommentMenuClick} onResolveComment={onResolveComment}/>

2
apps/documenteditor/mobile/src/view/settings/Navigation.jsx
View File

@ -66,7 +66,7 @@ const NavigationSheet = inject('storeNavigation')(observer(props => {
}, []);
return (
<Sheet id="view-navigation-sheet" className="navigation-sheet" onSheetClosed={() => mainContext.closeOptions('navigation')} backdrop swipeToClose breakpoints={[0.50]} style={{height: '90%'}}>
<Sheet id="view-navigation-sheet" className="navigation-sheet" onSheetClosed={() => mainContext.closeOptions('navigation')} backdrop closeByBackdropClick swipeToClose breakpoints={[0.50]} style={{height: '90%'}}>
<div id='swipe-handler' className="swipe-container">
<Icon icon='icon icon-swipe'/>
</div>