From c90c0ac259eef4dee3a8bc238cc5568ab4071775 Mon Sep 17 00:00:00 2001 From: SergeyEzhin Date: Sat, 29 Jan 2022 17:57:41 +0400 Subject: [PATCH] [DE mobile] Add navigation and correct a table of contents --- apps/documenteditor/mobile/locale/en.json | 5 +- .../src/controller/edit/EditTableContents.jsx | 37 +---- .../src/controller/settings/Navigation.jsx | 35 +++++ apps/documenteditor/mobile/src/less/app.less | 17 +++ .../mobile/src/less/icons-ios.less | 10 ++ .../mobile/src/less/icons-material.less | 5 + .../src/view/edit/EditTableContents.jsx | 4 +- .../mobile/src/view/settings/Navigation.jsx | 140 ++++++++++++++++++ .../mobile/src/view/settings/Settings.jsx | 11 ++ 9 files changed, 232 insertions(+), 32 deletions(-) create mode 100644 apps/documenteditor/mobile/src/controller/settings/Navigation.jsx create mode 100644 apps/documenteditor/mobile/src/view/settings/Navigation.jsx diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 1d47d8024..0fd136680 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -640,7 +640,10 @@ "txtScheme6": "Concourse", "txtScheme7": "Equity", "txtScheme8": "Flow", - "txtScheme9": "Foundry" + "txtScheme9": "Foundry", + "textNavigation": "Navigation", + "textEmptyScreens": "There are no headings in the document. Apply a headings style to the text so that it appeas in the table of cotents.", + "textBeginningDocument": "Beginning of document" }, "Toolbar": { "dlgLeaveMsgText": "You have unsaved changes. Click 'Stay on this Page' to wait for autosave. Click 'Leave this Page' to discard all the unsaved changes.", diff --git a/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx b/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx index cccfd1b8e..73fd5ff56 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx +++ b/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx @@ -27,7 +27,6 @@ class EditTableContentsController extends Component { const propsTableContents = api.asc_GetTableOfContentsPr(); propsTableContents.put_ShowPageNumbers(value); - propsTableContents.put_RightAlignTab(value); api.asc_SetTableOfContentsPr(propsTableContents); } @@ -80,6 +79,8 @@ class EditTableContentsController extends Component { } }); + console.log(styles); + if(props) { let start = props.get_OutlineStart(), end = props.get_OutlineEnd(), @@ -190,42 +191,21 @@ class EditTableContentsController extends Component { disableOutlines, checkStyles } - - // this.stylesLevels.reset(styles); - // if (checkStyles) { - // this._forceUpdateOutlineLevels = true; - // this.radioStyles.setValue(true); - // this.stylesList.scroller.update({alwaysVisibleY: true}); - // var rec = this.stylesLevels.findWhere({checked: true}); - // if (rec) - // this.stylesList.scrollToRecord(rec); - // } } addStyles(styleName, value) { const api = Common.EditorApi.get(); const propsTableContents = api.asc_GetTableOfContentsPr(); + // propsTableContents.clear_Styles(); propsTableContents.add_Style(styleName, value); - if (propsTableContents.get_StylesCount() > 0) { - propsTableContents.put_OutlineRange(-1, -1); - } else { - propsTableContents.put_OutlineRange(1, 9); - } + // if (propsTableContents.get_StylesCount() > 0) + // propsTableContents.put_OutlineRange(-1, -1); + // else + // propsTableContents.put_OutlineRange(1, 9); - // api.asc_SetTableOfContentsPr(propsTableContents); - } - - changeCaption(value) { - const api = Common.EditorApi.get(); - const propsTableContents = api.asc_GetTableOfContentsPr(); - - if(record) { - propsTableContents.put_Caption(value); - properties.clear_Styles(); - api.asc_SetTableOfContentsPr(propsTableContents); - } + api.asc_SetTableOfContentsPr(propsTableContents); } onTableContentsUpdate(type, currentTOC) { @@ -259,7 +239,6 @@ class EditTableContentsController extends Component { onLeader={this.onLeader} onLevelsChange={this.onLevelsChange} fillTOCProps={this.fillTOCProps} - changeCaption={this.changeCaption} addStyles={this.addStyles} /> ) diff --git a/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx b/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx new file mode 100644 index 000000000..1986c83e5 --- /dev/null +++ b/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx @@ -0,0 +1,35 @@ +import React, { Component } from "react"; +import Navigation from "../../view/settings/Navigation"; +import { Device } from '../../../../../common/mobile/utils/device'; +import { f7, Sheet } from 'framework7-react'; + +class NavigationController extends Component { + constructor(props) { + super(props); + } + + closeModal() { + if (Device.phone) { + f7.sheet.close('.settings-popup', false); + } else { + f7.popover.close('#settings-popover'); + } + } + + onSelectItem(index) { + const api = Common.EditorApi.get(); + const navigationObject = api.asc_ShowDocumentOutline(); + + if (navigationObject) { + navigationObject.goto(index); + } + }; + + render() { + return ( + + ); + } +} + +export default NavigationController \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index e73ec6778..54914cc14 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -163,4 +163,21 @@ padding: 0 16px; } +// Navigation + +.empty-screens { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + height: 100%; + &__icon { + margin-bottom: 48px; + } + &__text { + margin: 0 32px; + text-align: center; + } +} + diff --git a/apps/documenteditor/mobile/src/less/icons-ios.less b/apps/documenteditor/mobile/src/less/icons-ios.less index cb91ca965..26570fda6 100644 --- a/apps/documenteditor/mobile/src/less/icons-ios.less +++ b/apps/documenteditor/mobile/src/less/icons-ios.less @@ -81,6 +81,16 @@ height: 22px; .encoded-svg-mask(''); } + &.icon-navigation { + width: 22px; + 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 a36c1aa15..0e11fb71f 100644 --- a/apps/documenteditor/mobile/src/less/icons-material.less +++ b/apps/documenteditor/mobile/src/less/icons-material.less @@ -141,6 +141,11 @@ height: 24px; .encoded-svg-mask(''); } + &.icon-navigation { + width: 22px; + height: 22px; + .encoded-svg-mask('') + } // Download diff --git a/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx b/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx index 65da847e4..c18ade6dd 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx @@ -9,7 +9,7 @@ const EditTableContents = props => { const _t = t('Edit', {returnObjects: true}); const api = Common.EditorApi.get(); const propsTableContents = api.asc_GetTableOfContentsPr(); - const count = propsTableContents.get_StylesCount(); + const stylesCount = propsTableContents.get_StylesCount(); console.log(propsTableContents); const [type, setType] = useState(0); const [styleValue, setStyleValue] = useState(propsTableContents.get_StylesType()); @@ -103,7 +103,7 @@ const EditTableContents = props => { setLeaderValue }}> } - { + const { t } = useTranslation(); + const _t = t('Settings', {returnObjects: true}); + const android = Device.android; + const api = Common.EditorApi.get(); + const navigationObject = api.asc_ShowDocumentOutline(); + const count = navigationObject.get_ElementsCount(); + const [currentPosition, setCurrentPosition] = useState(navigationObject.get_CurrentPosition()); + const arrHeaders = []; + + const updateNavigation = () => { + if (!navigationObject) return; + + let prevLevel = -1, + headerLevel = -1, + firstHeader = !navigationObject.isFirstItemNotHeader(); + + for (let i = 0; i < count; i++) { + let level = navigationObject.get_Level(i), + hasParent = true; + if (level > prevLevel && i > 0) + arrHeaders[i - 1]['hasSubItems'] = true; + if (headerLevel < 0 || level <= headerLevel) { + if (i > 0 || firstHeader) + headerLevel = level; + hasParent = false; + } + + arrHeaders.push({ + name: navigationObject.get_Text(i), + level: level, + index: i, + hasParent: hasParent, + isEmptyItem: navigationObject.isEmptyItem(i) + }); + + prevLevel = level; + } + + if (count > 0 && !firstHeader) { + arrHeaders[0]['hasSubItems'] = false; + arrHeaders[0]['isNotHeader'] = true; + arrHeaders[0]['name'] = t('Settings.textBeginningDocument'); + } + } + + updateNavigation(); + // console.log(navigationObject); + + return ( + + + {!arrHeaders.length + ? +
+ {!android && +
+ +
+ } +

{t('Settings.textEmptyScreens')}

+
+ : + + {arrHeaders.map((header, index) => { + return ( + { + setCurrentPosition(header.index); + props.onSelectItem(header.index); + }}> + ) + })} + + } + + ) +} + +const NavigationSheet = () => { + useEffect(() => { + f7.sheet.open('#view-navigation-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 ( + +
+ +
+ + + ) +}; + +export default Navigation; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx index 654004353..958a3192a 100644 --- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx @@ -12,6 +12,7 @@ import ApplicationSettingsController from "../../controller/settings/Application import { DocumentFormats, DocumentMargins, DocumentColorSchemes } from "./DocumentSettings"; import { MacrosSettings } from "./ApplicationSettings"; import About from '../../../../../common/mobile/lib/view/About'; +import NavigationController from '../../controller/settings/Navigation'; const routes = [ { @@ -53,6 +54,13 @@ const routes = [ { path: '/about/', component: About + }, + + // Navigation + + { + path: '/navigation/', + component: NavigationController } ]; @@ -121,6 +129,9 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props => } + + + {window.matchMedia("(max-width: 359px)").matches ?