diff --git a/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx b/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx index 53857db07..2f89078cb 100644 --- a/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx +++ b/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx @@ -1,5 +1,5 @@ import React, { Component } from "react"; -import Navigation from "../../view/settings/Navigation"; +import {Navigation, NavigationSheet} from "../../view/settings/Navigation"; import { Device } from '../../../../../common/mobile/utils/device'; import { f7, Sheet, Page, Popup } from 'framework7-react'; import { withTranslation } from 'react-i18next'; @@ -8,12 +8,11 @@ class NavigationController extends Component { constructor(props) { super(props); this.updateNavigation = this.updateNavigation.bind(this); - this.closeModal = this.closeModal.bind(this); } closeModal() { if (Device.phone) { - f7.popup.close('.settings-popup', true); + f7.popup.close('.settings-popup'); } else { f7.popover.close('#settings-popover'); } @@ -73,30 +72,19 @@ class NavigationController extends Component { } }; - componentDidMount() { - if(Device.phone) { - f7.sheet.open('#view-navigation-sheet', true); - this.closeModal(); - } - } - render() { return ( !Device.phone ? : - - - - + ); } } diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index db821fd98..6a0b9644f 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -166,7 +166,7 @@ .style-toc { &__image { margin: 0 15px; - max-height: 180px; + max-height: 150px; overflow: hidden; &_active { border: 1.5px solid @brandColor; @@ -197,4 +197,18 @@ } } +.swipe-container { + display: flex; + justify-content: center; + height: 40px; + background-color: @background-primary; + .icon-swipe { + margin-top: 8px; + width: 40px; + height: 4px; + background: rgba(0, 0, 0, 0.12); + border-radius: 2px; + } +} + diff --git a/apps/documenteditor/mobile/src/less/icons-ios.less b/apps/documenteditor/mobile/src/less/icons-ios.less index 26570fda6..70c0a1cd9 100644 --- a/apps/documenteditor/mobile/src/less/icons-ios.less +++ b/apps/documenteditor/mobile/src/less/icons-ios.less @@ -86,11 +86,6 @@ height: 22px; .encoded-svg-mask('') } - &.icon-empty-screens { - width: 200px; - height: 200px; - .encoded-svg-background('') - } // Download diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less index 0e11fb71f..5a65b044a 100644 --- a/apps/documenteditor/mobile/src/less/icons-material.less +++ b/apps/documenteditor/mobile/src/less/icons-material.less @@ -139,7 +139,7 @@ &.icon-table-contents { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-navigation { width: 22px; diff --git a/apps/documenteditor/mobile/src/view/settings/Navigation.jsx b/apps/documenteditor/mobile/src/view/settings/Navigation.jsx index c376f316b..15fd4e5b6 100644 --- a/apps/documenteditor/mobile/src/view/settings/Navigation.jsx +++ b/apps/documenteditor/mobile/src/view/settings/Navigation.jsx @@ -6,8 +6,6 @@ import { useTranslation } from 'react-i18next'; const Navigation = props => { const { t } = useTranslation(); const _t = t('Settings', {returnObjects: true}); - const android = Device.android; - const isPhone = Device.phone; const api = Common.EditorApi.get(); const navigationObject = api.asc_ShowDocumentOutline(); const [currentPosition, setCurrentPosition] = useState(navigationObject.get_CurrentPosition()); @@ -15,15 +13,10 @@ const Navigation = props => { return ( - {!isPhone && } + {!arrHeaders.length ?
- {!android && -
- -
- }

{t('Settings.textEmptyScreens')}

: @@ -42,4 +35,86 @@ const Navigation = props => { ) } -export default Navigation; \ No newline at end of file +const NavigationSheet = props => { + const { t } = useTranslation(); + const api = Common.EditorApi.get(); + const navigationObject = api.asc_ShowDocumentOutline(); + const [currentPosition, setCurrentPosition] = useState(navigationObject.get_CurrentPosition()); + const arrHeaders = props.updateNavigation(); + + 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) { + 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) { + f7.sheet.close('#view-navigation-sheet'); + } else if (stateHeight === '90%' && dist > 20) { + setHeight('45%'); + } + }; + + useEffect(() => { + props.closeModal(); + f7.sheet.open('#view-navigation-sheet', true); + }, []); + + return ( + +
+ +
+ {!arrHeaders.length + ? +
+

{t('Settings.textEmptyScreens')}

+
+ : + + {arrHeaders.map((header, index) => { + return ( + { + setCurrentPosition(header.index); + props.onSelectItem(header.index); + }}> + ) + })} + + } + + ) +} + +export { + Navigation, + NavigationSheet +}; \ No newline at end of file