diff --git a/apps/common/mobile/lib/controller/VersionHistory.jsx b/apps/common/mobile/lib/controller/VersionHistory.jsx index ed2b5b1bbc..48acdca21f 100644 --- a/apps/common/mobile/lib/controller/VersionHistory.jsx +++ b/apps/common/mobile/lib/controller/VersionHistory.jsx @@ -429,7 +429,7 @@ const VersionHistoryController = inject('storeAppOptions', 'storeVersionHistory' : - props.onclosed()}> + props.onclosed()}> { + const { t } = useTranslation(); + const _t = t('Common.Collaboration', {returnObjects: true}); + const appOptions = props.storeAppOptions; + const documentInfo = props.storeDocumentInfo; + const dataDoc = documentInfo && documentInfo.dataDoc; + const fileType = dataDoc && dataDoc.fileType; + const sharingSettingsUrl = appOptions.sharingSettingsUrl; + const isViewer = appOptions.isViewer; + + return ( + + + {Device.phone && + + + + + + } + + + {(sharingSettingsUrl && fileType !== 'oform') && + + + + } + {props.users.editUsers.length > 0 && + + + + } + {appOptions.canViewComments && + + + + } + {(window.editorType === 'de' && (appOptions.canReview || appOptions.canViewReview) && !isViewer) && + + + + } + + + ) +}; + +let storeInfo; + +switch (window.asceditor) { + case 'word': + storeInfo = 'storeDocumentInfo'; + break; + case 'slide': + storeInfo = 'storePresentationInfo'; + break; + case 'cell': + storeInfo = 'storeSpreadsheetInfo'; + break; +} + +const Collaboration = inject('storeAppOptions', 'users', storeInfo)(observer(CollaborationPage)); + +export { Collaboration as CollaborationPage }; \ No newline at end of file diff --git a/apps/common/mobile/lib/pages/UsersPage.jsx b/apps/common/mobile/lib/pages/UsersPage.jsx new file mode 100644 index 0000000000..87e9fd9192 --- /dev/null +++ b/apps/common/mobile/lib/pages/UsersPage.jsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { observer, inject } from "mobx-react"; +import { List, ListItem, Navbar, NavRight, Page, Icon, Link } from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import { Device } from "../../utils/device"; + +const UsersPage = inject("users")(observer(props => { + const { t } = useTranslation(); + const _t = t('Common.Collaboration', {returnObjects: true}); + const storeUsers = props.users; + + return ( + + + {Device.phone && + + + + + + } + + + {storeUsers.editUsers.map((user, i) => ( + 1 ? ` (${user.count})` : '')} key={i}> +
+ {user.initials} +
+ + ))} + + + ) +})); + +export default UsersPage; \ No newline at end of file diff --git a/apps/common/mobile/lib/view/collaboration/Collaboration.jsx b/apps/common/mobile/lib/view/collaboration/Collaboration.jsx index 71a42e9671..34b0b5ca10 100644 --- a/apps/common/mobile/lib/view/collaboration/Collaboration.jsx +++ b/apps/common/mobile/lib/view/collaboration/Collaboration.jsx @@ -1,46 +1,22 @@ -import React, { Component, useEffect } from 'react'; -import { observer, inject } from "mobx-react"; -import { Popover, List, ListItem, Navbar, NavRight, Sheet, BlockTitle, Page, View, Icon, Link, f7 } from 'framework7-react'; -import { useTranslation } from 'react-i18next'; -import {Device} from "../../../utils/device"; -import {ReviewController, ReviewChangeController} from "../../controller/collaboration/Review"; -import {PageDisplayMode} from "./Review"; -import {ViewCommentsController, ViewCommentsSheetsController} from "../../controller/collaboration/Comments"; +import React, { useEffect } from 'react'; +import { Popover, Sheet, f7, View } from 'framework7-react'; +import { Device } from "../../../utils/device"; +import { ReviewController, ReviewChangeController } from "../../controller/collaboration/Review"; +import { PageDisplayMode } from "./Review"; +import { ViewCommentsController, ViewCommentsSheetsController } from "../../controller/collaboration/Comments"; import SharingSettingsController from "../../controller/SharingSettings"; - -const PageUsers = inject("users")(observer(props => { - const { t } = useTranslation(); - const _t = t('Common.Collaboration', {returnObjects: true}); - const storeUsers = props.users; - - return ( - - - {Device.phone && - - - - - - } - - - {storeUsers.editUsers.map((user, i) => ( - 1 ? ` (${user.count})` : '')} key={i}> -
- {user.initials} -
- - ))} - - - ) -})); +import { CollaborationPage } from '../../pages/CollaborationPage'; +import UsersPage from '../../pages/UsersPage'; const routes = [ + { + path: '/collaboration-page/', + component: CollaborationPage, + keepAlive: true + }, { path: '/users/', - component: PageUsers + component: UsersPage }, { path: '/review/', @@ -87,102 +63,35 @@ const routes = [ } ]; -const PageCollaboration = inject('storeAppOptions', 'users')(observer(props => { - const { t } = useTranslation(); - const _t = t('Common.Collaboration', {returnObjects: true}); - const appOptions = props.storeAppOptions; - const documentInfo = props.documentInfo; - const dataDoc = documentInfo && documentInfo.dataDoc; - const fileType = dataDoc && dataDoc.fileType; - const sharingSettingsUrl = appOptions.sharingSettingsUrl; - const isViewer = appOptions.isViewer; +routes.forEach(route => { + route.options = { + ...route.options, + transition: 'f7-push' + }; +}); - return ( - - - - {Device.phone && - - - - - - } - - - {(sharingSettingsUrl && fileType !== 'oform') && - - - - } - {props.users.editUsers.length > 0 && - - - - } - {appOptions.canViewComments && - - - - } - {(window.editorType === 'de' && (appOptions.canReview || appOptions.canViewReview) && !isViewer) && - - - - } - - - - ) -})); - -class CollaborationView extends Component { - constructor(props) { - super(props); - - this.onoptionclick = this.onoptionclick.bind(this); - } - onoptionclick(page){ - f7.views.current.router.navigate(page); - } - - render() { - const show_popover = this.props.usePopover; - return ( - show_popover ? - this.props.onclosed()} closeByOutsideClick={false}> - - : - this.props.onclosed()}> - - - ) - } -} - -const Collaboration = props => { +const CollaborationView = props => { useEffect(() => { - if ( Device.phone ) { + if(Device.phone) { f7.sheet.open('.coauth__sheet'); } else { f7.popover.open('#coauth-popover', '#btn-coauth'); } - - return () => { - // component will unmount - } - }); - - const onviewclosed = () => { - if ( props.onclosed ) { - props.onclosed(); - } - }; + }, []); return ( - + !Device.phone ? + props.closeOptions('coauth')} closeByOutsideClick={false}> + + + + : + props.closeOptions('coauth')}> + + + + ) -}; +} -const CollaborationDocument = inject('storeDocumentInfo')(observer(Collaboration)); -export {Collaboration, CollaborationDocument}; +export default CollaborationView; diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 3f2fb7f55c..44ec85fa84 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -39,8 +39,9 @@ --f7-searchbar-search-icon-color: @text-tertiary; --f7-searchbar-input-clear-button-color: @text-tertiary; - --f7-toggle-inactive-color: @background-menu-divider; - --f7-toggle-border-color: @background-menu-divider; + --f7-toggle-inactive-border-color: @background-menu-divider; + --f7-toggle-inactive-bg-color: @background-menu-divider; + --f7-actions-button-border-color: @background-menu-divider; --f7-popover-bg-color: @background-primary; --f7-dialog-bg-color-rgb: @background-secondary; @@ -57,6 +58,9 @@ --f7-block-text-color: @text-secondary; + --f7-theme-color-shade: @background-primary; + --f7-fab-pressed-bg-color: @background-primary; + // Main Toolbar #editor-navbar.navbar .right a + a, #editor-navbar.navbar .left a + a { @@ -234,6 +238,22 @@ } } + .links-list a:after, .list .item-inner:after, .simple-list li:after { + background-color: var(--f7-list-item-border-color); + bottom: 0; + content: ""; + display: block; + height: 1px; + left: 0; + position: absolute; + right: auto; + top: auto; + transform: scaleY(calc(1/var(--f7-device-pixel-ratio))); + transform-origin: 50% 100%; + width: 100%; + z-index: 15; + } + .tab-buttons { width: 100%; display: flex; @@ -545,9 +565,9 @@ // Toggle Icon - .toggle-icon { - background: transparent; - } + // .toggle-icon { + // background: transparent; + // } // Edit Comment Popup diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index d174e0ac60..285f8013bb 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -25,7 +25,6 @@ --f7-subnavbar-height: 56px; --f7-radio-active-color: @brandColor; - --f7-toggle-active-color: @brandColor; --f7-range-bar-active-bg-color: @brandColor; --f7-range-knob-color: @brandColor; --f7-range-knob-size: 16px; @@ -52,6 +51,18 @@ --f7-input-text-color: @text-normal; --f7-block-text-color: @text-secondary; + --f7-dialog-border-radius: 0; + --f7-sheet-border-radius: 0; + --f7-popover-border-radius: 4px; + --f7-actions-border-radius: 0; + --f7-box-shadow: 0px 5px 5px -3px rgba(0,0,0,.2),0px 8px 10px 1px rgba(0,0,0,.14),0px 3px 14px 2px rgba(0,0,0,.12); + --f7-popover-box-shadow: var(--f7-box-shadow); + + --f7-toggle-active-bg-color: @brandColor; + --f7-toggle-active-border-color: @brandColor; + + --f7-navbar-title-margin-left: 20px; + --f7-navbar-title-margin-right: 20px; .button { --f7-touch-ripple-color: transparent; @@ -68,6 +79,7 @@ .navbar { --f7-touch-ripple-color: @touchColor; + .sheet-close { width: 56px; height: 56px; @@ -97,8 +109,6 @@ --f7-page-bg-color: @background-tertiary; --f7-list-item-border-color: @background-menu-divider; --f7-list-chevron-icon-color: @text-tertiary; - --f7-toggle-inactive-color: @background-menu-divider; - --f7-toggle-border-color: @background-menu-divider; --f7-actions-button-text-color: @text-normal; --f7-subnavbar-border-color: @background-menu-divider; --f7-list-border-color: @background-menu-divider; @@ -106,10 +116,6 @@ .add-popup { .view { - .block-title { - // margin-bottom: 0; - // margin-top: 8px; - } .add-image, .inputs-list { ul:after { display: none; @@ -263,22 +269,36 @@ height: 3px; } } + // List .list { &.inputs-list { + margin: 0; + + .item-input.item-content { + padding-left: 0; + } + .item-input, .item-link { .item-inner { display: block; + .item-title, .item-label { width: 100%; font-size: 12px; } + .item-input-wrap { margin-left: 0; } } } + + .item-input:not(.item-input-outline) .item-content::before, .item-input:not(.item-input-outline).item-content::before { + background: transparent; + } } + .buttons { box-sizing: border-box; min-height: 48px; @@ -286,13 +306,22 @@ justify-content: space-between; align-items: center; width: 100%; + .item-content { width: 100%; + .item-inner { padding-bottom: 0; padding-top: 0; + .row { width: 100%; + --f7-cols-per-row: 1; + align-items: flex-start; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + .button { flex: 1; font-size: 17px; @@ -308,6 +337,7 @@ } } } + .item-content { .color-preview { width: 30px; @@ -323,6 +353,26 @@ } } + .links-list a:after, .list .item-inner:after, .simple-list li:after { + background-color: var(--f7-list-item-border-color); + bottom: 0; + content: ""; + display: block; + height: 1px; + left: 0; + position: absolute; + right: auto; + top: auto; + transform: scaleY(calc(1/var(--f7-device-pixel-ratio))); + transform-origin: 50% 100%; + width: 100%; + z-index: 15; + } + + .media-list:not(.inset):not(.inset-md):not(.menu-list) .item-content, .media-list:not(.inset):not(.inset-md):not(.menu-list) li > .item-link, .list:not(.inset):not(.inset-md):not(.menu-list) .media-item .item-content, .list:not(.inset):not(.inset-md):not(.menu-list) .media-item > .item-link { + border-radius: 0; + } + // Color palette #color-picker { @@ -370,9 +420,19 @@ margin-right: 10px; margin: 4px 0; } - &-inner { + + .navbar-inner { overflow: initial; } + + .left { + margin: 0; + } + + .title { + margin-left: var(--f7-navbar-title-margin-left); + margin-right: var(--f7-navbar-title-margin-left); + } } .searchbar .input-clear-button { @@ -426,13 +486,17 @@ // height: 100%; .searchbar-inner { height: 100%; + padding: 0; + &__center { flex-direction: column; } + &__right { flex-direction: column-reverse; } } + &.replace { height: 96px; } @@ -517,6 +581,7 @@ } .item-input, .item-inner { padding: 0; + margin: 0; } } } @@ -544,6 +609,22 @@ } } + // Popover styles + .popover { + box-shadow: var(--f7-box-shadow); + + &.popover__titled { + .popover-arrow:after { + background: @brandColor; + } + } + + &.document-menu, &.popover__functions { + .popover-arrow:after { + background: @background-secondary; + } + } + } // Version History .page-version-history { --f7-page-bg-color: @background-primary; diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index c8277582f1..7b4403cf9b 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -8,6 +8,18 @@ @red: #f00; @autoColor: @black; +.row { + --f7-cols-per-row: 1; + align-items: flex-start; + display: flex; + flex-wrap: wrap; + justify-content: space-between; +} + +.row + .row { + margin-top: var(--f7-grid-row-gap); +} + .navbar.main-navbar { height: 0; &.navbar-with-logo { @@ -25,13 +37,6 @@ } } -//.navbar { -// .title { -// text-overflow: initial; -// white-space: normal; -// } -//} - .navbar-hidden { transform: translate3d(0, calc(-1 * (var(--f7-navbar-height) + var(--f7-subnavbar-height))), 0); } @@ -107,11 +112,15 @@ padding: 14px 10px 0 10px; } -.list { +.view .list { max-width: 100%; + --menu-list-offset: 0px; + ul { width: 100%; + background: var(--f7-list-bg-color); } + li.no-indicator { .item-link { .item-inner{ @@ -212,8 +221,9 @@ } .popover { - .page .list { + .page .list:first-child:last-child { ul { + border-radius: 0; background-color: var(--f7-list-bg-color); li:first-child, li:last-child { .item-link { diff --git a/apps/documenteditor/mobile/src/controller/add/AddLink.jsx b/apps/documenteditor/mobile/src/controller/add/AddLink.jsx index 24991e0867..960897fbeb 100644 --- a/apps/documenteditor/mobile/src/controller/add/AddLink.jsx +++ b/apps/documenteditor/mobile/src/controller/add/AddLink.jsx @@ -81,11 +81,11 @@ class AddLinkController extends Component { return ( !this.props.isNavigate ? Device.phone ? - this.props.onClosed('add-link')}> + this.props.closeOptions('add-link')}> : - this.props.onClosed('add-link')}> + this.props.closeOptions('add-link')}> diff --git a/apps/documenteditor/mobile/src/controller/add/AddOther.jsx b/apps/documenteditor/mobile/src/controller/add/AddOther.jsx index 84a2640958..6e4b2436fc 100644 --- a/apps/documenteditor/mobile/src/controller/add/AddOther.jsx +++ b/apps/documenteditor/mobile/src/controller/add/AddOther.jsx @@ -2,7 +2,6 @@ import React, {Component} from 'react'; import { f7 } from 'framework7-react'; import {Device} from '../../../../../common/mobile/utils/device'; import { withTranslation} from 'react-i18next'; - import {AddOther} from '../../view/add/AddOther'; // footnote converting metods @@ -260,8 +259,7 @@ class AddOtherController extends Component { richDelLock={this.props.richDelLock} richEditLock={this.props.richEditLock} plainDelLock={this.props.plainDelLock} - plainEditLock={this.props.plainEditLock} - onCloseLinkSettings={this.props.onCloseLinkSettings} + plainEditLock={this.props.plainEditLock} isNavigate={this.props.isNavigate} /> ) diff --git a/apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx b/apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx index 63f9b84b1c..c2a80e58c9 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx +++ b/apps/documenteditor/mobile/src/controller/edit/EditHyperlink.jsx @@ -90,7 +90,7 @@ class EditHyperlinkController extends Component { return ( !this.props.isNavigate ? Device.phone ? - this.props.onClosed('edit-link')}> + this.props.closeOptions('edit-link')}> : - this.props.onClosed('edit-link')}> + this.props.closeOptions('edit-link')}> 0 && api.asc_IsCurrentNumberingPreset(arrayElements[i].numberingInfo, type!==2)) { subtype = arrayElements[i].subtype; break; } } + switch (type) { case 0: storeTextSettings.resetBullets(subtype); diff --git a/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx b/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx index 811f6ae8f7..956809985b 100644 --- a/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx +++ b/apps/documenteditor/mobile/src/controller/settings/Navigation.jsx @@ -123,7 +123,6 @@ class NavigationController extends Component { onSelectItem={this.onSelectItem} updateNavigation={this.updateNavigation} updateViewerNavigation={this.updateViewerNavigation} - onclosed={this.props.onclosed} /> ); } diff --git a/apps/documenteditor/mobile/src/controller/settings/Settings.jsx b/apps/documenteditor/mobile/src/controller/settings/Settings.jsx index f7f595c3ce..d946b3f0a9 100644 --- a/apps/documenteditor/mobile/src/controller/settings/Settings.jsx +++ b/apps/documenteditor/mobile/src/controller/settings/Settings.jsx @@ -1,32 +1,22 @@ -import React, {useEffect} from 'react'; +import React, { createContext } from 'react'; import { useTranslation } from 'react-i18next'; -import {f7} from 'framework7-react'; +import { f7 } from 'framework7-react'; import { observer, inject } from "mobx-react"; -import {Device} from '../../../../../common/mobile/utils/device'; +import { Device } from '../../../../../common/mobile/utils/device'; import SettingsView from "../../view/settings/Settings"; -import {LocalStorage} from "../../../../../common/mobile/utils/LocalStorage.mjs"; +import { LocalStorage } from "../../../../../common/mobile/utils/LocalStorage.mjs"; -const Settings = props => { +export const SettingsContext = createContext(); + +const SettingsController = props => { const storeDocumentInfo = props.storeDocumentInfo; const { t } = useTranslation(); - useEffect(() => { - if ( Device.phone ) { - f7.popup.open('.settings-popup'); - } else { - f7.popover.open('#settings-popover', '#btn-settings'); - } - - return () => { - // component will unmount - } - }); - const closeModal = () => { - if (Device.phone) { - f7.sheet.close('.settings-popup'); + if(Device.phone) { + f7.sheet.close('.settings-popup', false); } else { - f7.popover.close('#settings-popover'); + f7.popover.close('#settings-popover', false); } }; @@ -156,20 +146,19 @@ const Settings = props => { }; return ( - + + + ); }; -export default inject("storeAppOptions", "storeDocumentInfo")(observer(Settings)); \ No newline at end of file +export default inject("storeAppOptions", "storeDocumentInfo")(observer(SettingsController)); \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/less/app-material.less b/apps/documenteditor/mobile/src/less/app-material.less index fd27f8efd2..e829942a22 100644 --- a/apps/documenteditor/mobile/src/less/app-material.less +++ b/apps/documenteditor/mobile/src/less/app-material.less @@ -18,9 +18,9 @@ width: auto; } - .toggle input[type="checkbox"]:checked + .toggle-icon { - background-color: rgba(68,105,149,.5); - } + // .toggle input[type="checkbox"]:checked + .toggle-icon { + // background-color: rgba(68,105,149,.5); + // } // Review .page-review { diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index d4776ed112..e3ba3c2370 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -357,6 +357,7 @@ z-index: 10000; a { background-color: @background-primary; + border-radius: 50%; &:focus, &:focus-within, &:active, &.active-state { background-color: @background-primary; diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index 5fbd12a2eb..035b9fa501 100644 --- a/apps/documenteditor/mobile/src/page/main.jsx +++ b/apps/documenteditor/mobile/src/page/main.jsx @@ -1,13 +1,11 @@ - -import React, { Component } from 'react'; +import React, { Component, createContext } from 'react'; import { CSSTransition } from 'react-transition-group'; -import { f7, Icon, FabButtons, FabButton, Page, View, Navbar, Subnavbar } from 'framework7-react'; +import { f7, Icon, Page, View, Navbar, Subnavbar, Fab } from 'framework7-react'; import { observer, inject } from "mobx-react"; import { withTranslation } from 'react-i18next'; -import EditOptions from '../view/edit/Edit'; import AddOptions from '../view/add/Add'; -import Settings from '../controller/settings/Settings'; -import { CollaborationDocument } from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx' +import SettingsController from '../controller/settings/Settings'; +import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx' import { Device } from '../../../../common/mobile/utils/device' import { Search, SearchSettings } from '../controller/Search'; import ContextMenu from '../controller/ContextMenu'; @@ -16,8 +14,11 @@ import NavigationController from '../controller/settings/Navigation'; import { AddLinkController } from '../controller/add/AddLink'; import EditHyperlink from '../controller/edit/EditHyperlink'; import Snackbar from '../components/Snackbar/Snackbar'; +import EditView from '../view/edit/Edit'; import VersionHistoryController from '../../../../common/mobile/lib/controller/VersionHistory'; +export const MainContext = createContext(); + class MainPage extends Component { constructor(props) { super(props); @@ -163,110 +164,112 @@ class MainPage extends Component { } return ( - - {/* Top Navbar */} - - {!isHideLogo && -
{ - window.open(`${__PUBLISHER_URL__}`, "_blank"); - }}>
} - - - - - + + + {/* Top Navbar */} + + {!isHideLogo && +
{ + window.open(`${__PUBLISHER_URL__}`, "_blank"); + }}> + +
+ } + + + + + - {/* Page content */} + {/* Page content */} - - + + - {isShowPlaceholder ? -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
: null - } + {isShowPlaceholder ? +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
: null + } - {/* { - Device.phone ? null : - } */} - this.handleOptionsViewClosed('snackbar')} - message={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")} - /> - - { - !this.state.editOptionsVisible ? null : - - } - { - !this.state.addOptionsVisible ? null : - - } - { - !this.state.addLinkSettingsVisible ? null : - - } - { - !this.state.editLinkSettingsVisible ? null : - - } - { - !this.state.settingsVisible ? null : - - } - { - !this.state.collaborationVisible ? null : - - } - { - !this.state.navigationVisible ? null : - - } - { - !this.state.historyVisible ? null : + {/* { + Device.phone ? null : + } */} + + this.handleOptionsViewClosed('snackbar')} + message={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")} + /> + + {!this.state.editOptionsVisible ? null : } + {!this.state.addOptionsVisible ? null : } + {!this.state.addLinkSettingsVisible ? null : + + } + {!this.state.editLinkSettingsVisible ? null : + + } + {!this.state.settingsVisible ? null : } + {!this.state.collaborationVisible ? null : + + } + {!this.state.navigationVisible ? null : } + {!this.state.historyVisible ? null : - } - {(isFabShow && !isVersionHistoryMode) && - -
this.turnOffViewerMode()}> - -
- - } - {appOptions.isDocReady && } - + } + {(isFabShow && !isVersionHistoryMode) && + +
this.turnOffViewerMode()}> + +
+ + } + {appOptions.isDocReady && + + } + + ) } } diff --git a/apps/documenteditor/mobile/src/view/Toolbar.jsx b/apps/documenteditor/mobile/src/view/Toolbar.jsx index bc3c69046e..2d7a82ac3e 100644 --- a/apps/documenteditor/mobile/src/view/Toolbar.jsx +++ b/apps/documenteditor/mobile/src/view/Toolbar.jsx @@ -88,7 +88,7 @@ const ToolbarView = props => { elemTitle.innerText = correctOverflowedText(elemTitle); } }, [docTitle, isViewer]); - + return ( diff --git a/apps/documenteditor/mobile/src/view/add/Add.jsx b/apps/documenteditor/mobile/src/view/add/Add.jsx index 05a2bcf35e..5bfdd48011 100644 --- a/apps/documenteditor/mobile/src/view/add/Add.jsx +++ b/apps/documenteditor/mobile/src/view/add/Add.jsx @@ -1,22 +1,22 @@ -import React, {Component, useEffect, Fragment} from 'react'; -import {View,Page,Navbar,NavRight, NavTitle, Link,Popup,Popover,Icon,Tabs,Tab} from 'framework7-react'; -import { useTranslation } from 'react-i18next'; -import {f7} from 'framework7-react'; -import { observer, inject } from "mobx-react"; -import {Device} from '../../../../../common/mobile/utils/device'; - -import {AddTableController} from "../../controller/add/AddTable"; -import AddShapeController from "../../controller/add/AddShape"; -import {AddImageController} from "../../controller/add/AddImage"; -import {AddLinkController} from "../../controller/add/AddLink"; -import {AddOtherController} from "../../controller/add/AddOther"; - -import {PageImageLinkSettings} from "../add/AddImage"; -import {PageAddNumber, PageAddBreak, PageAddSectionBreak, PageAddFootnote} from "../add/AddOther"; +import React, { useContext, useEffect } from 'react'; +import { View, Popup, Popover } from 'framework7-react'; +import { f7 } from 'framework7-react'; +import { Device } from '../../../../../common/mobile/utils/device'; +import { AddImageController } from "../../controller/add/AddImage"; +import { AddLinkController } from "../../controller/add/AddLink"; +import { PageImageLinkSettings } from "../add/AddImage"; +import { PageAddNumber, PageAddBreak, PageAddSectionBreak, PageAddFootnote } from "../add/AddOther"; import AddTableContentsController from '../../controller/add/AddTableContents'; import EditHyperlink from '../../controller/edit/EditHyperlink'; +import AddingPage from './AddingPage'; +import { MainContext } from '../../page/main'; const routes = [ + { + path: '/adding-page/', + component: AddingPage, + keepAlive: true + }, // Image { path: '/add-image-from-url/', @@ -57,205 +57,37 @@ const routes = [ } ]; -const AddLayoutNavbar = ({ tabs, inPopover, storeTableSettings }) => { - const isAndroid = Device.android; - const { t } = useTranslation(); - const _t = t('Add', {returnObjects: true}); - - const getTableStylesPreviews = () => { - if(!storeTableSettings.arrayStylesDefault.length) { - const api = Common.EditorApi.get(); - setTimeout(() => storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true), 'default'), 1); - } +routes.forEach(route => { + route.options = { + ...route.options, + transition: 'f7-push' }; +}); - return ( - - {tabs.length > 1 ? -
- {tabs.map((item, index) => - getTableStylesPreviews()} tabLink={"#" + item.id} tabLinkActive={index === 0}> - - )} - {isAndroid && } -
: - { tabs[0].caption } - } - {!inPopover && } - - ) -}; +const AddView = () => { + const mainContext = useContext(MainContext); -const AddLayoutContent = ({ tabs }) => { - return ( - - {tabs.map((item, index) => - - {item.component} - - )} - - ) -}; - -const AddTabs = inject("storeFocusObjects", "storeTableSettings")(observer(({storeFocusObjects, showPanels, storeTableSettings, style, inPopover, onCloseLinkSettings}) => { - const { t } = useTranslation(); - const _t = t('Add', {returnObjects: true}); - const api = Common.EditorApi.get(); - const tabs = []; - const options = storeFocusObjects.settings; - const paragraphObj = storeFocusObjects.paragraphObject; - - let needDisable = false, - canAddTable = true, - canAddImage = true, - paragraphLocked = false, - inFootnote = false, - inControl = false, - controlProps = false, - lockType = false, - controlPlain = false, - contentLocked = false, - richDelLock = false, - richEditLock = false, - plainDelLock = false, - plainEditLock = false; - - if(paragraphObj) { - canAddTable = paragraphObj.get_CanAddTable(); - canAddImage = paragraphObj.get_CanAddImage(); - paragraphLocked = paragraphObj.get_Locked(); - - inFootnote = api.asc_IsCursorInFootnote() || api.asc_IsCursorInEndnote(); - inControl = api.asc_IsContentControl(); - - controlProps = inControl ? api.asc_GetContentControlProperties() : null; - lockType = (inControl && controlProps) ? controlProps.get_Lock() : Asc.c_oAscSdtLockType.Unlocked; - controlPlain = (inControl && controlProps) ? (controlProps.get_ContentControlType() == Asc.c_oAscSdtLevelType.Inline) : false; - contentLocked = lockType == Asc.c_oAscSdtLockType.SdtContentLocked || lockType == Asc.c_oAscSdtLockType.ContentLocked; - - richDelLock = paragraphObj ? !paragraphObj.can_DeleteBlockContentControl() : false; - richEditLock = paragraphObj ? !paragraphObj.can_EditBlockContentControl() : false; - plainDelLock = paragraphObj ? !paragraphObj.can_DeleteInlineContentControl() : false; - plainEditLock = paragraphObj ? !paragraphObj.can_EditInlineContentControl() : false; - } - - if (!showPanels && options.indexOf('text') > -1) { - needDisable = !canAddTable || controlPlain || richEditLock || plainEditLock || richDelLock || plainDelLock; - - if(!needDisable) { - tabs.push({ - caption: _t.textTable, - id: 'add-table', - icon: 'icon-add-table', - component: - }); + useEffect(() => { + if(Device.phone) { + f7.popup.open('.add-popup'); + } else { + f7.popover.open('#add-popover', '#btn-add'); } - } - if(!showPanels) { - needDisable = paragraphLocked || controlPlain || contentLocked || inFootnote; - - if(!needDisable) { - tabs.push({ - caption: _t.textShape, - id: 'add-shape', - icon: 'icon-add-shape', - component: - }); - } - } - // if(!showPanels) { - // needDisable = paragraphLocked || paragraphObj && !canAddImage || controlPlain || richDelLock || plainDelLock || contentLocked; - - // if(!needDisable) { - // tabs.push({ - // caption: _t.textImage, - // id: 'add-image', - // icon: 'icon-add-image', - // component: - // }); - // } - // } - - if(!showPanels) { - tabs.push({ - caption: _t.textOther, - id: 'add-other', - icon: 'icon-add-other', - component: - - }); - } - - // if (showPanels && showPanels === 'link') { - // tabs.push({ - // caption: t('Add.textLinkSettings'), - // id: 'add-link', - // component: - // }); - // } + }, []); return ( - - - - - - + !Device.phone ? + mainContext.closeOptions('add')}> + + + + : + mainContext.closeOptions('add')}> + + + + ) -})); - -class AddView extends Component { - constructor(props) { - super(props); - - this.onoptionclick = this.onoptionclick.bind(this); - } - onoptionclick(page){ - f7.views.current.router.navigate(page); - } - render() { - const show_popover = this.props.usePopover; - return ( - show_popover ? - this.props.onclosed()}> - - : - this.props.onclosed()}> - - - ) - } } -const Add = props => { - useEffect(() => { - if ( Device.phone ) - f7.popup.open('.add-popup'); - else f7.popover.open('#add-popover', '#btn-add'); - - f7.tab.show('#add-other', false); - - return () => { - // component will unmount - } - }); - const onviewclosed = () => { - if ( props.onclosed ) { - props.onclosed(); - } - }; - return -}; - -export default Add; \ No newline at end of file +export default AddView; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/view/add/AddOther.jsx b/apps/documenteditor/mobile/src/view/add/AddOther.jsx index f005a0202d..37a2b393bf 100644 --- a/apps/documenteditor/mobile/src/view/add/AddOther.jsx +++ b/apps/documenteditor/mobile/src/view/add/AddOther.jsx @@ -193,7 +193,6 @@ const AddOther = props => { {(isText && !disabledAddLink) && diff --git a/apps/documenteditor/mobile/src/view/add/AddingPage.jsx b/apps/documenteditor/mobile/src/view/add/AddingPage.jsx new file mode 100644 index 0000000000..09151c44ef --- /dev/null +++ b/apps/documenteditor/mobile/src/view/add/AddingPage.jsx @@ -0,0 +1,157 @@ +import React, { useContext, useEffect } from 'react'; +import { f7, Page, Navbar, NavRight, NavTitle, Link, Icon, Tabs, Tab } from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import { observer, inject } from "mobx-react"; +import { Device } from '../../../../../common/mobile/utils/device'; +import { AddTableController } from "../../controller/add/AddTable"; +import AddShapeController from "../../controller/add/AddShape"; +import { AddOtherController } from "../../controller/add/AddOther"; +import { MainContext } from '../../page/main'; + +const AddLayoutNavbar = ({ tabs, storeTableSettings }) => { + const isAndroid = Device.android; + const { t } = useTranslation(); + const _t = t('Add', {returnObjects: true}); + + const getTableStylesPreviews = () => { + if(!storeTableSettings.arrayStylesDefault.length) { + const api = Common.EditorApi.get(); + setTimeout(() => storeTableSettings.setStyles(api.asc_getTableStylesPreviews(true), 'default'), 1); + } + }; + + return ( + + {tabs.length > 1 ? +
+ {tabs.map((item, index) => + getTableStylesPreviews()} tabLink={"#" + item.id} tabLinkActive={index === 0}> + + )} + {isAndroid && } +
: + { tabs[0].caption } + } + {Device.phone && } + + ) +}; + +const AddLayoutContent = ({ tabs }) => { + return ( + + {tabs.map((item, index) => + + {item.component} + + )} + + ) +}; + +const AddingPage = inject("storeFocusObjects", "storeTableSettings")(observer(props => { + const mainContext = useContext(MainContext); + const showPanels = mainContext.showPanels; + const storeFocusObjects = props.storeFocusObjects; + const storeTableSettings = props.storeTableSettings; + const { t } = useTranslation(); + const _t = t('Add', {returnObjects: true}); + const api = Common.EditorApi.get(); + const tabs = []; + const options = storeFocusObjects.settings; + const paragraphObj = storeFocusObjects.paragraphObject; + + useEffect(() => { + f7.tab.show('#add-other', false); + }, []); + + let needDisable = false, + canAddTable = true, + canAddImage = true, + paragraphLocked = false, + inFootnote = false, + inControl = false, + controlProps = false, + lockType = false, + controlPlain = false, + contentLocked = false, + richDelLock = false, + richEditLock = false, + plainDelLock = false, + plainEditLock = false; + + if(paragraphObj) { + canAddTable = paragraphObj.get_CanAddTable(); + canAddImage = paragraphObj.get_CanAddImage(); + paragraphLocked = paragraphObj.get_Locked(); + + inFootnote = api.asc_IsCursorInFootnote() || api.asc_IsCursorInEndnote(); + inControl = api.asc_IsContentControl(); + + controlProps = inControl ? api.asc_GetContentControlProperties() : null; + lockType = (inControl && controlProps) ? controlProps.get_Lock() : Asc.c_oAscSdtLockType.Unlocked; + controlPlain = (inControl && controlProps) ? (controlProps.get_ContentControlType() == Asc.c_oAscSdtLevelType.Inline) : false; + contentLocked = lockType == Asc.c_oAscSdtLockType.SdtContentLocked || lockType == Asc.c_oAscSdtLockType.ContentLocked; + + richDelLock = paragraphObj ? !paragraphObj.can_DeleteBlockContentControl() : false; + richEditLock = paragraphObj ? !paragraphObj.can_EditBlockContentControl() : false; + plainDelLock = paragraphObj ? !paragraphObj.can_DeleteInlineContentControl() : false; + plainEditLock = paragraphObj ? !paragraphObj.can_EditInlineContentControl() : false; + } + + if (!showPanels && options.indexOf('text') > -1) { + needDisable = !canAddTable || controlPlain || richEditLock || plainEditLock || richDelLock || plainDelLock; + + if(!needDisable) { + tabs.push({ + caption: _t.textTable, + id: 'add-table', + icon: 'icon-add-table', + component: + }); + } + } + if(!showPanels) { + needDisable = paragraphLocked || controlPlain || contentLocked || inFootnote; + + if(!needDisable) { + tabs.push({ + caption: _t.textShape, + id: 'add-shape', + icon: 'icon-add-shape', + component: + }); + } + } + + if(!showPanels) { + tabs.push({ + caption: _t.textOther, + id: 'add-other', + icon: 'icon-add-other', + component: + + }); + } + + return ( + + + + + ) +})); + + +export default AddingPage; + + diff --git a/apps/documenteditor/mobile/src/view/app.jsx b/apps/documenteditor/mobile/src/view/app.jsx index 57805e0cb0..bdb78386bf 100644 --- a/apps/documenteditor/mobile/src/view/app.jsx +++ b/apps/documenteditor/mobile/src/view/app.jsx @@ -1,7 +1,7 @@ import React from 'react'; -import {App,Panel,Views,View,Popup,Page,Navbar,Toolbar,NavRight,Link,Block,BlockTitle,List,ListItem,ListInput,ListButton,BlockFooter} from 'framework7-react'; -import { f7, f7ready } from 'framework7-react'; +import { App, View } from 'framework7-react'; +import { f7ready } from 'framework7-react'; import '../../../../common/Analytics.js'; @@ -18,7 +18,6 @@ import {Themes} from '../../../../common/mobile/lib/controller/Themes' const f7params = { name: 'Desktop Editor', // App name theme: 'auto', // Automatic theme detection - routes: routes, // App routes }; diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx index d28625b468..206e268f48 100644 --- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx @@ -1,29 +1,22 @@ -import React, {useState, useEffect} from 'react'; -import {observer, inject} from "mobx-react"; -import { Popover, Sheet, View, Page, Navbar, NavRight, NavLeft, NavTitle, Tabs, Tab, Link } from 'framework7-react'; -import { f7 } from 'framework7-react'; -import { useTranslation } from 'react-i18next'; -import {Device} from '../../../../../common/mobile/utils/device'; - -import EditTextController from "../../controller/edit/EditText"; -import EditParagraphController from "../../controller/edit/EditParagraph"; -import EditShapeController from "../../controller/edit/EditShape"; -import EditImageController from "../../controller/edit/EditImage"; -import EditTableController from "../../controller/edit/EditTable"; -import EditChartController from "../../controller/edit/EditChart"; -import EditHyperlinkController from "../../controller/edit/EditHyperlink"; -import EditHeaderController from "../../controller/edit/EditHeader"; -import EditTableContentsController from "../../controller/edit/EditTableContents"; - -import {PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextHighlightColor} from "./EditText"; -import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor, PageParagraphStyle, PageCreateTextStyle, PageChangeNextParagraphStyle} from "./EditParagraph"; -import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape"; -import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings, PageWrappingStyle} from "./EditImage"; -import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable"; -import {PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart"; +import React, { useContext, useEffect } from 'react'; +import { Popover, Sheet, View, f7 } from 'framework7-react'; +import { Device } from '../../../../../common/mobile/utils/device'; +import { PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextHighlightColor } from "./EditText"; +import { ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor, PageParagraphStyle, PageCreateTextStyle, PageChangeNextParagraphStyle } from "./EditParagraph"; +import { PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace } from "./EditShape"; +import { PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings, PageWrappingStyle } from "./EditImage"; +import { PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor } from "./EditTable"; +import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder } from "./EditChart"; import { PageEditLeaderTableContents, PageEditStylesTableContents, PageEditStructureTableContents } from './EditTableContents'; +import EditingPage from './EditingPage'; +import { MainContext } from '../../page/main'; const routes = [ + { + path: '/editing-page/', + component: EditingPage, + keepAlive: true + }, //Edit text { path: '/edit-text-fonts/', @@ -225,185 +218,40 @@ const routes = [ { path: '/edit-structure-table-contents/', component: PageEditStructureTableContents - } + }, ]; -const EmptyEditLayout = () => { - const { t } = useTranslation(); - const _t = t('Edit', {returnObjects: true}); - return ( - -
-
-

{_t.textSelectObjectToEdit}

-
-
- - ) -}; - -const EditLayoutNavbar = ({ editors, inPopover }) => { - const isAndroid = Device.android; - const { t } = useTranslation(); - const _t = t('Edit', {returnObjects: true}); - return ( - - { - editors.length > 1 ? -
- {editors.map((item, index) => {item.caption})} - {isAndroid && } -
: - { editors[0].caption } - } - { !inPopover && } - - ) -}; - -const EditLayoutContent = ({ editors }) => { - if (editors.length > 1) { - return ( - - {editors.map((item, index) => - - {item.component} - - )} - - ) - } else { - return ( - - {editors[0].component} - - ) - } -}; - -const EditTabs = props => { - const { t } = useTranslation(); - const _t = t('Edit', {returnObjects: true}); - const api = Common.EditorApi.get(); - const inToc = api.asc_GetTableOfContentsPr(true); - - const settings = props.storeFocusObjects.settings; - const headerType = props.storeFocusObjects.headerType; - let editors = []; - - if (settings.length < 1) { - editors.push({ - caption: _t.textSettings, - component: - }); - } else { - if(inToc) { - editors.push({ - caption: _t.textTableOfCont, - id: 'edit-table-contents', - component: - }) - } - if (settings.indexOf('image') > -1) { - editors.push({ - caption: _t.textImage, - id: 'edit-image', - component: - }) - } - if (settings.indexOf('shape') > -1) { - editors.push({ - caption: _t.textShape, - id: 'edit-shape', - component: - }) - } - if (settings.indexOf('chart') > -1) { - editors.push({ - caption: _t.textChart, - id: 'edit-chart', - component: - }) - } - if (settings.indexOf('table') > -1) { - editors.push({ - caption: _t.textTable, - id: 'edit-table', - component: - }) - } - if (settings.indexOf('header') > -1) { - editors.push({ - caption: headerType === 2 ? _t.textFooter : _t.textHeader, - id: 'edit-header', - component: - }) - } - if (settings.indexOf('text') > -1) { - editors.push({ - caption: _t.textText, - id: 'edit-text', - component: - }) - } - if (settings.indexOf('paragraph') > -1) { - editors.push({ - caption: _t.textParagraph, - id: 'edit-paragraph', - component: - }) - } - } - - return ( - - - - - - - - ) -}; - -const EditTabsContainer = inject("storeFocusObjects")(observer(EditTabs)); - -const EditView = props => { - const onOptionClick = (page) => { - $f7.views.current.router.navigate(page); +routes.forEach(route => { + route.options = { + ...route.options, + transition: 'f7-push' }; - const show_popover = props.usePopover; +}); + +const EditView = () => { + const mainContext = useContext(MainContext); + + useEffect(() => { + if(Device.phone) { + f7.sheet.open('#edit-sheet'); + } else { + f7.popover.open('#edit-popover', '#btn-edit'); + } + }, []); + return ( - show_popover ? - props.onClosed()}> - + !Device.phone ? + mainContext.closeOptions('edit')}> + + + : - props.onClosed()}> - + mainContext.closeOptions('edit')}> + + + ) }; -const EditOptions = props => { - useEffect(() => { - if ( Device.phone ) - f7.sheet.open('#edit-sheet'); - else f7.popover.open('#edit-popover', '#btn-edit'); - - return () => { - // component will unmount - } - }); - - const onviewclosed = () => { - if ( props.onclosed ) { - props.onclosed(); - } - }; - - return ( - - ) -}; - -export default EditOptions; +export default EditView; diff --git a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx index 67f0b73509..20c31d37b6 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditChart.jsx @@ -1,6 +1,7 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; -import {List, ListItem, ListButton, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link, Tabs, Tab, Swiper, SwiperSlide} from 'framework7-react'; +import { List, ListItem, ListButton, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link } from 'framework7-react'; +import { Swiper, SwiperSlide } from 'swiper/react'; import {f7} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; @@ -390,8 +391,8 @@ const PageWrap = props => { {_t.textAlign} - - + + diff --git a/apps/documenteditor/mobile/src/view/edit/EditImage.jsx b/apps/documenteditor/mobile/src/view/edit/EditImage.jsx index 019156676b..189baea818 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditImage.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditImage.jsx @@ -1,6 +1,6 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; -import {List, ListItem, ListInput, ListButton, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link} from 'framework7-react'; +import {List, ListItem, ListInput, ListButton, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, Link} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {f7} from 'framework7-react'; import {Device} from '../../../../../common/mobile/utils/device'; @@ -81,7 +81,7 @@ const PageWrap = props => { {_t.textAlign} - + diff --git a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx index 077dd71437..896262720c 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx @@ -1,6 +1,6 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; -import {List, ListItem, Icon, Row, Page, Navbar, NavRight, BlockTitle, Toggle, Range, ListButton, Link, Tabs, Tab} from 'framework7-react'; +import {List, ListItem, Icon, Page, Navbar, NavRight, BlockTitle, Toggle, Range, ListButton, Link, Tabs, Tab} from 'framework7-react'; import { f7 } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; @@ -386,7 +386,7 @@ const PageWrap = props => { {_t.textAlign} - + diff --git a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx index 56b058e627..0436b7f072 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditTable.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditTable.jsx @@ -1,6 +1,6 @@ import React, {Fragment, useState, useEffect} from 'react'; import {observer, inject} from "mobx-react"; -import {Page, Navbar, NavRight, List, ListItem, ListButton, Row, BlockTitle, SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react'; +import {Page, Navbar, NavRight, List, ListItem, ListButton, BlockTitle, SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react'; import { f7 } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; @@ -124,7 +124,7 @@ const PageWrap = props => { {_t.textAlign} - + @@ -445,7 +445,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro > - +
{onBorderType("lrtbcm")}}> @@ -461,10 +461,10 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro {onBorderType("l")}}> - +
- +
{onBorderType("c")}}> @@ -480,7 +480,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro {onBorderType("b")}}> - +
) @@ -548,7 +548,7 @@ const EditTable = props => { - +
{props.onAddColumnLeft()}}> @@ -561,17 +561,17 @@ const EditTable = props => { {props.onAddRowBelow()}}> - +
- + {props.onRemoveTable()}} className='button-red button-fill button-raised'> diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx index 8150939b35..28fae85d1b 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx @@ -1,6 +1,6 @@ import React, {Fragment, useEffect, useState } from 'react'; import {observer, inject} from "mobx-react"; -import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react'; +import { f7, View, List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link } from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; @@ -224,14 +224,14 @@ const PageNumbers = observer( props => { return ( - {numberArrays.map( number => ( - { - props.onNumber(number.numberingInfo); - }}> -
- - ))} + {numberArrays.map( number => ( + { + props.onNumber(number.numberingInfo); + }}> +
+ + ))} ); @@ -249,19 +249,19 @@ const PageMultiLevel = observer( props => { return( - - {arrayMultiLevel.map((item) => ( - props.onMultiLevelList(item.numberingInfo)}> -
+ + {arrayMultiLevel.map((item) => ( + props.onMultiLevelList(item.numberingInfo)}> +
-
- - ))} - +
+ + ))} + ) @@ -531,12 +531,12 @@ const EditText = props => { changeFontFamily: props.changeFontFamily }}/> - + { - +
{props.onParagraphAlign('left')}}> @@ -578,11 +578,11 @@ const EditText = props => { {props.onParagraphAlign('just')}}> - +
{!inSmartArtInternal && - + } {!inSmartArt && !inSmartArtInternal && diff --git a/apps/documenteditor/mobile/src/view/edit/EditingPage.jsx b/apps/documenteditor/mobile/src/view/edit/EditingPage.jsx new file mode 100644 index 0000000000..3ea6566ac9 --- /dev/null +++ b/apps/documenteditor/mobile/src/view/edit/EditingPage.jsx @@ -0,0 +1,150 @@ +import React, { useState, useEffect } from 'react'; +import { observer, inject } from "mobx-react"; +import { Page, Navbar, NavRight, NavTitle, Tabs, Tab, Link } from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import { Device } from '../../../../../common/mobile/utils/device'; +import EditTextController from "../../controller/edit/EditText"; +import EditParagraphController from "../../controller/edit/EditParagraph"; +import EditShapeController from "../../controller/edit/EditShape"; +import EditImageController from "../../controller/edit/EditImage"; +import EditTableController from "../../controller/edit/EditTable"; +import EditChartController from "../../controller/edit/EditChart"; +import EditHeaderController from "../../controller/edit/EditHeader"; +import EditTableContentsController from "../../controller/edit/EditTableContents"; + +const EmptyEditLayout = () => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + + return ( + +
+
+

{_t.textSelectObjectToEdit}

+
+
+ + ) +}; + +const EditLayoutNavbar = ({ editors }) => { + const isAndroid = Device.android; + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + + return ( + + {editors.length > 1 ? +
+ {editors.map((item, index) => {item.caption})} + {isAndroid && } +
: + {editors[0].caption} + } + {Device.phone && } + + ) +}; + +const EditLayoutContent = ({ editors }) => { + if (editors.length > 1) { + return ( + + {editors.map((item, index) => + + {item.component} + + )} + + ) + } else { + return ( + + {editors[0].component} + + ) + } +}; + +const EditingPage = inject('storeFocusObjects')(observer(props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + const api = Common.EditorApi.get(); + const inToc = api.asc_GetTableOfContentsPr(true); + const settings = props.storeFocusObjects.settings; + const headerType = props.storeFocusObjects.headerType; + let editors = []; + + if (settings.length < 1) { + editors.push({ + caption: _t.textSettings, + component: + }); + } else { + if(inToc) { + editors.push({ + caption: _t.textTableOfCont, + id: 'edit-table-contents', + component: + }) + } + if (settings.indexOf('image') > -1) { + editors.push({ + caption: _t.textImage, + id: 'edit-image', + component: + }) + } + if (settings.indexOf('shape') > -1) { + editors.push({ + caption: _t.textShape, + id: 'edit-shape', + component: + }) + } + if (settings.indexOf('chart') > -1) { + editors.push({ + caption: _t.textChart, + id: 'edit-chart', + component: + }) + } + if (settings.indexOf('table') > -1) { + editors.push({ + caption: _t.textTable, + id: 'edit-table', + component: + }) + } + if (settings.indexOf('header') > -1) { + editors.push({ + caption: headerType === 2 ? _t.textFooter : _t.textHeader, + id: 'edit-header', + component: + }) + } + if (settings.indexOf('text') > -1) { + editors.push({ + caption: _t.textText, + id: 'edit-text', + component: + }) + } + if (settings.indexOf('paragraph') > -1) { + editors.push({ + caption: _t.textParagraph, + id: 'edit-paragraph', + component: + }) + } + } + + return ( + + + + + ) +})); + +export default EditingPage; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/view/settings/Navigation.jsx b/apps/documenteditor/mobile/src/view/settings/Navigation.jsx index ab0eebcea4..9d71bcba6c 100644 --- a/apps/documenteditor/mobile/src/view/settings/Navigation.jsx +++ b/apps/documenteditor/mobile/src/view/settings/Navigation.jsx @@ -1,8 +1,9 @@ -import React, { useState, useEffect } from "react"; +import React, { useState, useEffect, useContext } from "react"; import { Device } from '../../../../../common/mobile/utils/device'; -import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle, Actions, ActionsButton, ActionsGroup, Sheet} from 'framework7-react'; +import {f7, List, ListItem, Icon, Page, Navbar, Sheet} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import { inject, observer } from "mobx-react"; +import { MainContext } from "../../page/main"; const NavigationPopover = inject('storeNavigation')(observer(props => { const { t } = useTranslation(); @@ -46,6 +47,7 @@ const NavigationPopover = inject('storeNavigation')(observer(props => { const NavigationSheet = inject('storeNavigation')(observer(props => { const { t } = useTranslation(); + const mainContext = useContext(MainContext); const api = Common.EditorApi.get(); const storeNavigation = props.storeNavigation; const bookmarks = storeNavigation.bookmarks; @@ -105,7 +107,7 @@ const NavigationSheet = inject('storeNavigation')(observer(props => { }, []); return ( - props.onclosed()} style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}> + mainContext.closeOptions('navigation')} style={{height: `${stateHeight}`, opacity: `${stateOpacity}`}}>
diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx index 6d6fb390d5..d98e0cdc56 100644 --- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx @@ -1,9 +1,6 @@ -import React, {Component, useEffect} from 'react'; -import {View, Page, Navbar, NavRight, Link, Popup, Popover, Icon,ListItem, List, Toggle} from 'framework7-react'; -import { useTranslation } from 'react-i18next'; -import {f7} from 'framework7-react'; -import { observer, inject } from "mobx-react"; -import {Device} from '../../../../../common/mobile/utils/device'; +import React, { useContext, useEffect } from 'react'; +import { f7, View, Popup, Popover } from 'framework7-react'; +import { Device } from '../../../../../common/mobile/utils/device'; import DocumentSettingsController from "../../controller/settings/DocumentSettings"; import DocumentInfoController from "../../controller/settings/DocumentInfo"; import { DownloadController } from "../../controller/settings/Download"; @@ -16,12 +13,15 @@ import SharingSettings from "../../../../../common/mobile/lib/view/SharingSettin import ProtectionDocumentController from '../../controller/settings/DocumentProtection'; import ProtectionController from '../../controller/settings/Protection'; import FileEncryptionController from '../../controller/settings/FileEncryption'; +import SettingsPage from './SettingsPage'; +import { MainContext } from '../../page/main'; import VersionHistoryController from '../../../../../common/mobile/lib/controller/VersionHistory'; const routes = [ { - path: '/', - component: 'TSettingsView' + path: '/settings/', + component: SettingsPage, + keepAlive: true, }, { path: '/document-settings/', @@ -63,7 +63,7 @@ const routes = [ // Navigation { - path: '/navigation/', + path: '/navigation', component: NavigationController }, @@ -107,207 +107,37 @@ const routes = [ }, ]; - -const SettingsList = inject("storeAppOptions", "storeReview", "storeDocumentInfo", "storeVersionHistory")(observer(props => { - const { t } = useTranslation(); - const _t = t('Settings', {returnObjects: true}); - const appOptions = props.storeAppOptions; - const storeVersionHistory = props.storeVersionHistory; - const isVersionHistoryMode = storeVersionHistory.isVersionHistoryMode; - const canProtect = appOptions.canProtect; - const storeReview = props.storeReview; - const displayMode = storeReview.displayMode; - const docInfo = props.storeDocumentInfo; - const docTitle = docInfo.dataDoc.title; - const docExt = docInfo.dataDoc ? docInfo.dataDoc.fileType : ''; - const isNotForm = docExt && docExt !== 'oform'; - const navbar = - -
{docTitle}
- {!props.inPopover && {_t.textDone}} - ; - - const onoptionclick = page => { - if(props.onOptionClick) - props.onOptionClick(page) +routes.forEach(route => { + route.options = { + ...route.options, + transition: 'f7-push' }; +}); - const closeModal = () => { - if (Device.phone) { - f7.sheet.close('.settings-popup', false); +const SettingsView = () => { + const mainContext = useContext(MainContext); + + useEffect(() => { + if(Device.phone) { + f7.popup.open('.settings-popup'); } else { - f7.popover.close('#settings-popover', false); + f7.popover.open('#settings-popover', '#btn-settings'); } - }; - - const onOpenOptions = keyword => { - closeModal(); - props.openOptions(keyword); - } - - // set mode - const isViewer = appOptions.isViewer; - const isMobileView = appOptions.isMobileView; - - let _isEdit = false, - _canDownload = false, - _canDownloadOrigin = false, - _canAbout = true, - _canHelp = true, - _canPrint = false, - _canFeedback = true; - - if (appOptions.isDisconnected) { - _isEdit = false; - if (!appOptions.enableDownload) - _canPrint = _canDownload = _canDownloadOrigin = false; - } else { - _isEdit = appOptions.isEdit; - _canDownload = appOptions.canDownload; - _canDownloadOrigin = appOptions.canDownloadOrigin; - _canPrint = appOptions.canPrint; - - if (appOptions.customization && appOptions.canBrandingExt) { - _canAbout = appOptions.customization.about !== false; - } - - if (appOptions.customization) { - _canHelp = appOptions.customization.help !== false; - _canFeedback = appOptions.customization.feedback !== false; - } - } + }, []); return ( - - - {navbar} - - {!props.inPopover && - - - - } - {(_isEdit && canProtect && !isVersionHistoryMode) && - - - - } - {_isEdit && - { - if(Device.phone) { - onOpenOptions('history'); - } else { - onoptionclick.bind(this, "/version-history")(); - } - }}> - - - } - {!isVersionHistoryMode ? - { - if(Device.phone) { - onOpenOptions('navigation'); - } else { - onoptionclick.bind(this, "/navigation/")(); - }}}> - - - : null} - {window.matchMedia("(max-width: 359px)").matches && !isVersionHistoryMode ? - onOpenOptions('coauth')} className='no-indicator'> - - - : null} - {Device.sailfish && _isEdit && - {props.onOrthographyCheck()}} className='no-indicator' link="#"> - - - } - {(!isViewer && Device.phone && !isVersionHistoryMode) && - - - { - closeModal(); - props.onChangeMobileView(); - props.openOptions('snackbar'); - }} /> - - } - {(_isEdit && !isViewer) && - - - - } - {isNotForm && - - - - } - {_canDownload && - - - - } - {_canDownloadOrigin && - - - - } - {_canPrint && - - - - } - - - - {_canHelp && - - - - } - {(_canAbout && isNotForm) && - - - - } - {_canFeedback && - - - - } - - - + !Device.phone ? + mainContext.closeOptions('settings')}> + + + + : + mainContext.closeOptions('settings')}> + + + + ) -})); - -class SettingsView extends Component { - constructor(props) { - super(props) - - this.onoptionclick = this.onoptionclick.bind(this); - } - - onoptionclick(page){ - f7.views.current.router.navigate(page); - } - - render() { - const show_popover = this.props.usePopover; - - return ( - show_popover ? - this.props.closeOptions('settings')}> - - : - this.props.closeOptions('settings')}> - - - ) - } -} +}; export default SettingsView; diff --git a/apps/documenteditor/mobile/src/view/settings/SettingsPage.jsx b/apps/documenteditor/mobile/src/view/settings/SettingsPage.jsx new file mode 100644 index 0000000000..342efba34f --- /dev/null +++ b/apps/documenteditor/mobile/src/view/settings/SettingsPage.jsx @@ -0,0 +1,164 @@ +import React, { useContext } from 'react'; +import { Page, Navbar, NavRight, Link, Icon, ListItem, List, Toggle } from 'framework7-react'; +import { Device } from "../../../../../common/mobile/utils/device"; +import { observer, inject } from "mobx-react"; +import { useTranslation } from 'react-i18next'; +import { SettingsContext } from '../../controller/settings/Settings'; +import { MainContext } from '../../page/main'; + +const SettingsPage = inject("storeAppOptions", "storeReview", "storeDocumentInfo")(observer(props => { + const { t } = useTranslation(); + const _t = t('Settings', {returnObjects: true}); + const settingsContext = useContext(SettingsContext); + const mainContext = useContext(MainContext); + const appOptions = props.storeAppOptions; + const canProtect = appOptions.canProtect; + const storeReview = props.storeReview; + const displayMode = storeReview.displayMode; + const docInfo = props.storeDocumentInfo; + const docTitle = docInfo.dataDoc.title; + const docExt = docInfo.dataDoc ? docInfo.dataDoc.fileType : ''; + const isNotForm = docExt && docExt !== 'oform'; + const navbar = + +
{docTitle}
+ {Device.phone && {_t.textDone}} + ; + + const onOpenOptions = name => { + settingsContext.closeModal(); + mainContext.openOptions(name); + } + + // set mode + const isViewer = appOptions.isViewer; + const isMobileView = appOptions.isMobileView; + + let _isEdit = false, + _canDownload = false, + _canDownloadOrigin = false, + _canAbout = true, + _canHelp = true, + _canPrint = false, + _canFeedback = true; + + if (appOptions.isDisconnected) { + _isEdit = false; + if (!appOptions.enableDownload) + _canPrint = _canDownload = _canDownloadOrigin = false; + } else { + _isEdit = appOptions.isEdit; + _canDownload = appOptions.canDownload; + _canDownloadOrigin = appOptions.canDownloadOrigin; + _canPrint = appOptions.canPrint; + + if (appOptions.customization && appOptions.canBrandingExt) { + _canAbout = appOptions.customization.about !== false; + } + + if (appOptions.customization) { + _canHelp = appOptions.customization.help !== false; + _canFeedback = appOptions.customization.feedback !== false; + } + } + + return ( + + {navbar} + + {Device.phone && + + + + } + {(_isEdit && canProtect) && + + + + } + {_isEdit && + { + if(Device.phone) { + onOpenOptions('history'); + } + }}> + + + } + { + if(Device.phone) { + onOpenOptions('navigation'); + } + }}> + + + {window.matchMedia("(max-width: 359px)").matches ? + { + onOpenOptions('coauth'); + }} className='no-indicator'> + + + : null} + {Device.sailfish && _isEdit && + {settingsContext.onOrthographyCheck()}} className='no-indicator' link="#"> + + + } + {!isViewer && Device.phone && + + + { + settingsContext.onChangeMobileView(); + onOpenOptions('snackbar'); + }} /> + + } + {(_isEdit && !isViewer) && + + + + } + {isNotForm && + + + + } + {_canDownload && + + + + } + {_canDownloadOrigin && + + + + } + {_canPrint && + + + + } + + + + {_canHelp && + + + + } + {(_canAbout && isNotForm) && + + + + } + {_canFeedback && + + + + } + + + ) +})); + +export default SettingsPage; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/controller/Preview.jsx b/apps/presentationeditor/mobile/src/controller/Preview.jsx index bd9e4fe6fa..f7b2ec0db9 100644 --- a/apps/presentationeditor/mobile/src/controller/Preview.jsx +++ b/apps/presentationeditor/mobile/src/controller/Preview.jsx @@ -86,7 +86,7 @@ const PreviewController = props => { // API Handlers const onEndDemonstration = () => { - props.onclosed(); + props.closeOptions('preview'); }; return ( diff --git a/apps/presentationeditor/mobile/src/controller/add/AddLink.jsx b/apps/presentationeditor/mobile/src/controller/add/AddLink.jsx index 599130ed10..102956adf1 100644 --- a/apps/presentationeditor/mobile/src/controller/add/AddLink.jsx +++ b/apps/presentationeditor/mobile/src/controller/add/AddLink.jsx @@ -138,13 +138,13 @@ class AddLinkController extends Component { return ( !this.props.isNavigate ? Device.phone ? - this.props.onClosed('add-link')}> + this.props.closeOptions('add-link')}> : - this.props.onClosed('add-link')}> + this.props.closeOptions('add-link')}> diff --git a/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx b/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx index 32f2aafa0d..124b787b4d 100644 --- a/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx +++ b/apps/presentationeditor/mobile/src/controller/edit/EditLink.jsx @@ -188,7 +188,7 @@ class EditLinkController extends Component { return ( !this.props.isNavigate ? Device.phone ? - this.props.onClosed('edit-link')}> + this.props.closeOptions('edit-link')}> : - this.props.onClosed('edit-link')}> + this.props.closeOptions('edit-link')}> { + const closeModal = () => { + if (Device.phone) { + f7.sheet.close('.settings-popup', false); + } else { + f7.popover.close('#settings-popover', false); + } + }; + + const onPrint = () => { + const api = Common.EditorApi.get(); + + closeModal(); + setTimeout(() => { + api.asc_Print(); + }, 400); + }; + + const showHelp = () => { + // let url = '{{HELP_URL}}'; + let url = __HELP_URL__; + // let url = 'https://helpcenter.onlyoffice.com'; + + if (url.charAt(url.length-1) !== '/') { + url += '/'; + } + + if (Device.sailfish || Device.android) { + url+='mobile-applications/documents/mobile-web-editors/android/index.aspx'; + } + else { + url+='mobile-applications/documents/mobile-web-editors/ios/index.aspx'; + } + + closeModal(); + window.open(url, "_blank"); + }; + + const showFeedback = () => { + let config = props.storeAppOptions.config; + + closeModal(); + if(config && !!config.feedback && !!config.feedback.url) { + window.open(config.feedback.url, "_blank"); + } else window.open(__SUPPORT_URL__, "_blank"); + }; + + const onDownloadOrigin = () => { + closeModal(); + setTimeout(() => { + Common.EditorApi.get().asc_DownloadOrigin(); + }, 0); + }; + + return ( + + + + ); +}; + +export default SettingsController; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/page/main.jsx b/apps/presentationeditor/mobile/src/page/main.jsx index b45115c47c..16311db194 100644 --- a/apps/presentationeditor/mobile/src/page/main.jsx +++ b/apps/presentationeditor/mobile/src/page/main.jsx @@ -1,20 +1,21 @@ -import React, { Component, Fragment } from 'react'; -import { f7, Page, View, Navbar, Subnavbar, Icon, Link} from 'framework7-react'; +import React, { Component, createContext } from 'react'; +import { f7, Page, View, Navbar, Subnavbar, Icon } from 'framework7-react'; import { observer, inject } from "mobx-react"; import { Device } from '../../../../common/mobile/utils/device'; - -import EditOptions from '../view/edit/Edit'; -import AddOptions from '../view/add/Add'; -import Settings from '../view/settings/Settings'; -import { Collaboration } from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'; +import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'; import { Preview } from "../controller/Preview"; import { Search, SearchSettings } from '../controller/Search'; import ContextMenu from '../controller/ContextMenu'; import { Toolbar } from "../controller/Toolbar"; import { AddLinkController } from '../controller/add/AddLink'; import { EditLinkController } from '../controller/edit/EditLink'; +import SettingsController from '../controller/settings/Settings'; +import AddView from '../view/add/Add'; +import EditView from '../view/edit/Edit'; import VersionHistoryController from '../../../../common/mobile/lib/controller/VersionHistory'; +export const MainContext = createContext(); + class MainPage extends Component { constructor(props) { super(props); @@ -135,18 +136,29 @@ class MainPage extends Component { } return ( - - {!this.state.previewVisible ? null : } + + {!this.state.previewVisible ? null : + + } {/* Top Navbar */} - - {!isHideLogo &&
{ - window.open(`${__PUBLISHER_URL__}`, "_blank"); - }}>
} + + {!isHideLogo && +
{ + window.open(`${__PUBLISHER_URL__}`, "_blank"); + }}> + +
+ } - + @@ -170,37 +182,34 @@ class MainPage extends Component { - { - !this.state.editOptionsVisible ? null : - + {!this.state.editOptionsVisible ? null : } + {!this.state.addOptionsVisible ? null : } + {!this.state.addLinkSettingsVisible ? null : + } - { - !this.state.addOptionsVisible ? null : - + {!this.state.editLinkSettingsVisible ? null : + } - { - !this.state.addLinkSettingsVisible ? null : - + {!this.state.settingsVisible ? null : } + {!this.state.collaborationVisible ? null : + } - { - !this.state.editLinkSettingsVisible ? null : - + {!this.state.historyVisible ? null : + } - { - !this.state.settingsVisible ? null : - - } - { - !this.state.collaborationVisible ? null : - - } - { - !this.state.historyVisible ? null : - - } - {appOptions.isDocReady && } + {appOptions.isDocReady && + + } - + ) } } diff --git a/apps/presentationeditor/mobile/src/view/add/Add.jsx b/apps/presentationeditor/mobile/src/view/add/Add.jsx index 0f0f3810cc..83ae10ac50 100644 --- a/apps/presentationeditor/mobile/src/view/add/Add.jsx +++ b/apps/presentationeditor/mobile/src/view/add/Add.jsx @@ -1,22 +1,22 @@ -import React, {Component, useEffect} from 'react'; -import {View,Page,Navbar,NavRight, NavTitle, Link,Popup,Popover,Icon,Tabs,Tab} from 'framework7-react'; -import { useTranslation } from 'react-i18next'; -import {f7} from 'framework7-react'; -import { observer, inject } from "mobx-react"; -import {Device} from '../../../../../common/mobile/utils/device'; - -import AddSlideController from "../../controller/add/AddSlide"; -import AddShapeController from "../../controller/add/AddShape"; -import {AddImageController} from "../../controller/add/AddImage"; -import {PageImageLinkSettings} from "./AddImage"; -import {AddOtherController} from "../../controller/add/AddOther"; -import {PageAddTable} from "./AddOther"; -import {AddLinkController} from "../../controller/add/AddLink"; +import React, { useContext, useEffect } from 'react'; +import { View, Popup, Popover, f7 } from 'framework7-react'; +import { Device } from '../../../../../common/mobile/utils/device'; +import { AddImageController } from "../../controller/add/AddImage"; +import { PageImageLinkSettings } from "./AddImage"; +import { PageAddTable } from "./AddOther"; +import { AddLinkController } from "../../controller/add/AddLink"; import { PageTypeLink, PageLinkTo } from "./AddLink"; import { EditLinkController } from '../../controller/edit/EditLink'; import { PageEditTypeLink, PageEditLinkTo } from '../../view/edit/EditLink'; +import AddingPage from './AddingPage'; +import { MainContext } from '../../page/main'; const routes = [ + { + path: '/adding-page/', + component: AddingPage, + keepAlive: true + }, // Image { path: '/add-image-from-url/', @@ -61,138 +61,37 @@ const routes = [ } ]; -const AddLayoutNavbar = ({ tabs, inPopover }) => { - const isAndroid = Device.android; - return ( - - {tabs.length > 1 ? -
- {tabs.map((item, index) => - - - )} - {isAndroid && } -
: - {tabs[0].caption} - } - { !inPopover && } - - ) -}; +routes.forEach(route => { + route.options = { + ...route.options, + transition: 'f7-push' + }; +}); -const AddLayoutContent = ({ tabs }) => { - return ( - - {tabs.map((item, index) => - - {item.component} - - )} - - ) -}; +const AddView = () => { + const mainContext = useContext(MainContext); -const AddTabs = props => { - const { t } = useTranslation(); - const _t = t('View.Add', {returnObjects: true}); - const api = Common.EditorApi.get(); - const countPages = api.getCountPages(); - const showPanels = props.showPanels; - const tabs = []; - if (!showPanels && countPages) { - tabs.push({ - caption: _t.textSlide, - id: 'add-slide', - icon: 'icon-add-slide', - component: - }); - tabs.push({ - caption: _t.textShape, - id: 'add-shape', - icon: 'icon-add-shape', - component: - }); - - // tabs.push({ - // caption: _t.textImage, - // id: 'add-image', - // icon: 'icon-add-image', - // component: - // }); - - tabs.push({ - caption: _t.textOther, - id: 'add-other', - icon: 'icon-add-other', - component: - }); - } - if(!showPanels && !countPages) { - tabs.push({ - caption: _t.textSlide, - id: 'add-slide', - icon: 'icon-add-slide', - component: - }); - } - - // if (showPanels && showPanels === 'link') { - // tabs.push({ - // caption: _t.textAddLink, - // id: 'add-link', - // component: - // }); - // } + useEffect(() => { + if(Device.phone) { + f7.popup.open('.add-popup'); + } else { + f7.popover.open('#add-popover', '#btn-add'); + } + }, []); return ( - - - - - - + !Device.phone ? + mainContext.closeOptions('add')}> + + + + : + mainContext.closeOptions('add')}> + + + + ) -}; - -class AddView extends Component { - constructor(props) { - super(props); - - this.onoptionclick = this.onoptionclick.bind(this); - } - onoptionclick(page){ - f7.views.current.router.navigate(page); - } - render() { - const show_popover = this.props.usePopover; - return ( - show_popover ? - this.props.onclosed()}> - - : - this.props.onclosed()}> - - - ) - } } -const Add = props => { - useEffect(() => { - if ( Device.phone ) - f7.popup.open('.add-popup'); - else f7.popover.open('#add-popover', '#btn-add'); - - return () => { - // component will unmount - } - }); - const onviewclosed = () => { - if ( props.onclosed ) { - props.onclosed(); - } - }; - return -}; - -export default Add; \ No newline at end of file +export default AddView; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/add/AddingPage.jsx b/apps/presentationeditor/mobile/src/view/add/AddingPage.jsx new file mode 100644 index 0000000000..27215a97db --- /dev/null +++ b/apps/presentationeditor/mobile/src/view/add/AddingPage.jsx @@ -0,0 +1,110 @@ +import React, { useContext, useEffect } from 'react'; +import { Page, Navbar, NavRight, NavTitle, Link, Icon, Tabs, Tab, f7 } from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import { Device } from '../../../../../common/mobile/utils/device'; +import AddSlideController from "../../controller/add/AddSlide"; +import AddShapeController from "../../controller/add/AddShape"; +import { AddOtherController } from "../../controller/add/AddOther"; +import { MainContext } from '../../page/main'; + +const AddLayoutNavbar = ({ tabs }) => { + const isAndroid = Device.android; + + return ( + + {tabs.length > 1 ? +
+ {tabs.map((item, index) => + + + )} + {isAndroid && } +
: + {tabs[0].caption} + } + {Device.phone && } + + ) +}; + +const AddLayoutContent = ({ tabs }) => { + return ( + + {tabs.map((item, index) => + + {item.component} + + )} + + ) +}; + +const AddingPage = () => { + const { t } = useTranslation(); + const _t = t('View.Add', {returnObjects: true}); + const api = Common.EditorApi.get(); + const countPages = api.getCountPages(); + const mainContext = useContext(MainContext); + const showPanels = mainContext.showPanels; + const tabs = []; + + useEffect(() => { + f7.tab.show('#add-other', false); + }, []); + + if (!showPanels && countPages) { + tabs.push({ + caption: _t.textSlide, + id: 'add-slide', + icon: 'icon-add-slide', + component: + }); + + tabs.push({ + caption: _t.textShape, + id: 'add-shape', + icon: 'icon-add-shape', + component: + }); + + // tabs.push({ + // caption: _t.textImage, + // id: 'add-image', + // icon: 'icon-add-image', + // component: + // }); + + tabs.push({ + caption: _t.textOther, + id: 'add-other', + icon: 'icon-add-other', + component: + }); + } + + if(!showPanels && !countPages) { + tabs.push({ + caption: _t.textSlide, + id: 'add-slide', + icon: 'icon-add-slide', + component: + }); + } + + // if (showPanels && showPanels === 'link') { + // tabs.push({ + // caption: _t.textAddLink, + // id: 'add-link', + // component: + // }); + // } + + return ( + + + + + ) +}; + +export default AddingPage; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx index b47928a1dc..ae3b8acc83 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx @@ -1,29 +1,24 @@ -import React, {useState, useEffect} from 'react'; -import {observer, inject} from "mobx-react"; -import { Popover, Sheet, View, Page, Navbar, NavRight, NavLeft, NavTitle, Tabs, Tab, Link } from 'framework7-react'; -import { f7 } from 'framework7-react'; -import { useTranslation } from 'react-i18next'; -import {Device} from '../../../../../common/mobile/utils/device'; - -import EditSlideController from "../../controller/edit/EditSlide"; -import EditTextController from "../../controller/edit/EditText"; -import EditShapeController from "../../controller/edit/EditShape"; -import EditImageController from "../../controller/edit/EditImage"; -import EditTableController from "../../controller/edit/EditTable"; -import EditChartController from "../../controller/edit/EditChart"; +import React, { useContext, useEffect } from 'react'; +import { Popover, Sheet, View, f7 } from 'framework7-react'; +import { Device } from '../../../../../common/mobile/utils/device'; import { EditLinkController } from "../../controller/edit/EditLink"; - import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide'; import { PageTextFonts, PageTextFontColor, PageTextHighlightColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextBulletsLinkSettings } from './EditText'; import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape'; import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage'; import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable'; import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartAlign } from './EditChart' +import EditingPage from './EditingPage'; +import { MainContext } from '../../page/main'; const routes = [ + { + path: '/editing-page/', + component: EditingPage, + keepAlive: true + }, // Slides - { path: '/layout/', component: Layout @@ -225,162 +220,37 @@ const routes = [ } ]; -const EmptyEditLayout = () => { - const { t } = useTranslation(); - const _t = t('View.Edit', {returnObjects: true}); - return ( - -
-
-

{_t.textSelectObjectToEdit}

-
-
- - ) -}; - -const EditLayoutNavbar = ({ editors, inPopover }) => { - const isAndroid = Device.android; - return ( - - { - editors.length > 1 ? -
- {editors.map((item, index) => {item.caption})} - {isAndroid && } -
: - { editors[0].caption } - } - { !inPopover && } - - ) -}; - -const EditLayoutContent = ({ editors }) => { - if (editors.length > 1) { - return ( - - {editors.map((item, index) => - - {item.component} - - )} - - ) - } else { - return ( - - {editors[0].component} - - ) - } -}; - -const EditTabs = props => { - const { t } = useTranslation(); - const _t = t('View.Edit', {returnObjects: true}); - - const settings = props.storeFocusObjects.settings; - - let editors = []; - if (settings.length < 1) { - editors.push({ - caption: _t.textSettings, - component: - }); - } else { - if (settings.indexOf('image') > -1) { - editors.push({ - caption: _t.textImage, - id: 'edit-image', - component: - }) - } - if (settings.indexOf('shape') > -1) { - editors.push({ - caption: _t.textShape, - id: 'edit-shape', - component: - }) - } - if (settings.indexOf('table') > -1) { - editors.push({ - caption: _t.textTable, - id: 'edit-table', - component: - }) - } - if (settings.indexOf('chart') > -1) { - editors.push({ - caption: _t.textChart, - id: 'edit-chart', - component: - }) - } - if (settings.indexOf('text') > -1) { - editors.push({ - caption: _t.textText, - id: 'edit-text', - component: - }) - } - if (settings.indexOf('slide') > -1) { - editors.push({ - caption: _t.textSlide, - id: 'edit-slide', - component: - }) - } - } - - return ( - - - - - - - ) -}; - -const EditTabsContainer = inject("storeFocusObjects")(observer(EditTabs)); - -const EditView = props => { - const onOptionClick = (page) => { - $f7.views.current.router.navigate(page); +routes.forEach(route => { + route.options = { + ...route.options, + transition: 'f7-push' }; - const show_popover = props.usePopover; +}); + +const EditView = () => { + const mainContext = useContext(MainContext); + + useEffect(() => { + if(Device.phone) { + f7.sheet.open('#edit-sheet'); + } else { + f7.popover.open('#edit-popover', '#btn-edit'); + } + }, []); + return ( - show_popover ? - props.onClosed()}> - + !Device.phone ? + mainContext.closeOptions('edit')}> + + + : - props.onClosed()}> - + mainContext.closeOptions('edit')}> + + + ) }; -const EditOptions = props => { - useEffect(() => { - if ( Device.phone ) - f7.sheet.open('#edit-sheet'); - else f7.popover.open('#edit-popover', '#btn-edit'); - - return () => { - // component will unmount - } - }); - - const onviewclosed = () => { - if ( props.onclosed ) { - props.onclosed(); - } - }; - - return ( - - ) -}; - -export default EditOptions; \ No newline at end of file +export default EditView; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx index a3b620335c..71fd049253 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditChart.jsx @@ -1,10 +1,11 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; -import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavRight, Swiper, SwiperSlide} from 'framework7-react'; +import {List, ListItem, ListButton, Icon, Row, Page, Navbar, BlockTitle, Toggle, Range, Link, Tabs, Tab, NavRight} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx"; import { f7 } from 'framework7-react'; +import { Swiper, SwiperSlide } from 'swiper/react'; const PageCustomFillColor = props => { const { t } = useTranslation(); diff --git a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx index f2e6bd4516..bc70667302 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditTable.jsx @@ -1,6 +1,6 @@ import React, {Fragment, useState, useEffect} from 'react'; import {observer, inject} from "mobx-react"; -import {f7, Page, Navbar, List, ListItem, ListButton, Row, BlockTitle,SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab, NavRight} from 'framework7-react'; +import {f7, Page, Navbar, List, ListItem, ListButton, BlockTitle,SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab, NavRight} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; import {CustomColorPicker, ThemeColorPalette} from "../../../../../common/mobile/lib/component/ThemeColorPalette.jsx"; @@ -25,7 +25,7 @@ const StyleTemplates = inject("storeFocusObjects","storeTableSettings")(observer return (
    - { !styles.length ? + {!styles.length ? Array.from({ length: 34 }).map((item,index) => (
  • @@ -56,6 +56,7 @@ const PageStyleOptions = props => { const tableObject = props.storeFocusObjects.tableObject; let tableLook, isFirstRow, isLastRow, isBandHor, isFirstCol, isLastCol, isBandVer; + if (tableObject) { tableLook = tableObject.get_TableLook(); isFirstRow = tableLook.get_FirstRow(); @@ -291,7 +292,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro > - +
    {onBorderType("lrtbcm")}}> @@ -307,10 +308,10 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro {onBorderType("l")}}> - +
    - +
    {onBorderType("c")}}> @@ -326,7 +327,7 @@ const TabBorder = inject("storeFocusObjects", "storeTableSettings")(observer(pro {onBorderType("b")}}> - +
    ) @@ -487,7 +488,7 @@ const EditTable = props => { - +
    {props.onAddColumnLeft()}}> @@ -500,17 +501,17 @@ const EditTable = props => { {props.onAddRowBelow()}}> - +
    - + {props.onRemoveTable()}} className='button-red button-fill button-raised'> diff --git a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx index 33688c4e1a..823934180f 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx @@ -1,9 +1,10 @@ import React, {Fragment, useState, useEffect} from 'react'; import {observer, inject} from "mobx-react"; -import {f7, Swiper, View, SwiperSlide, List, ListItem, ListButton, ListInput, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} from 'framework7-react'; +import {f7, View, List, ListItem, ListButton, ListInput, Icon, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; +import { Swiper, SwiperSlide } from 'swiper/react'; import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage.mjs'; import HighlightColorPalette from '../../../../../common/mobile/lib/component/HighlightColorPalette.jsx'; @@ -67,12 +68,12 @@ const EditText = props => { changeFontFamily: props.changeFontFamily }}/> - + { - +
    {props.onParagraphAlign('left')}}> @@ -115,10 +116,10 @@ const EditText = props => { {props.onParagraphAlign('just')}}> - +
    - +
    {props.onParagraphValign('top')}}> @@ -128,17 +129,17 @@ const EditText = props => { {props.onParagraphValign('bottom')}}> - +
    - + { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + +
    +
    +

    {_t.textSelectObjectToEdit}

    +
    +
    +     + ) +}; + +const EditLayoutNavbar = ({ editors }) => { + const isAndroid = Device.android; + + return ( + + {editors.length > 1 ? +
    + {editors.map((item, index) => {item.caption})} + {isAndroid && } +
    : + { editors[0].caption } + } + {Device.phone && } +     + ) +}; + +const EditLayoutContent = ({ editors }) => { + if (editors.length > 1) { + return ( + + {editors.map((item, index) => + + {item.component} + + )} + + ) + } else { + return ( + + {editors[0].component} + + ) + } +}; + +const EditingPage = inject('storeFocusObjects')(observer(props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const settings = props.storeFocusObjects.settings; + let editors = []; + + if (settings.length < 1) { + editors.push({ + caption: _t.textSettings, + component: + }); + } else { + if (settings.indexOf('image') > -1) { + editors.push({ + caption: _t.textImage, + id: 'edit-image', + component: + }) + } + + if (settings.indexOf('shape') > -1) { + editors.push({ + caption: _t.textShape, + id: 'edit-shape', + component: + }) + } + + if (settings.indexOf('table') > -1) { + editors.push({ + caption: _t.textTable, + id: 'edit-table', + component: + }) + } + + if (settings.indexOf('chart') > -1) { + editors.push({ + caption: _t.textChart, + id: 'edit-chart', + component: + }) + } + + if (settings.indexOf('text') > -1) { + editors.push({ + caption: _t.textText, + id: 'edit-text', + component: + }) + } + + if (settings.indexOf('slide') > -1) { + editors.push({ + caption: _t.textSlide, + id: 'edit-slide', + component: + }) + } + } + + return ( + + + + + ) +})); + +export default EditingPage; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/settings/Settings.jsx b/apps/presentationeditor/mobile/src/view/settings/Settings.jsx index 52556ac12d..79c6617579 100644 --- a/apps/presentationeditor/mobile/src/view/settings/Settings.jsx +++ b/apps/presentationeditor/mobile/src/view/settings/Settings.jsx @@ -1,24 +1,23 @@ -import React, {Component, useEffect} from 'react'; -import {View,Page,Navbar,NavRight,Link,Popup,Popover,Icon,ListItem,List} from 'framework7-react'; -import { useTranslation } from 'react-i18next'; -import {f7} from 'framework7-react'; -import {Device} from '../../../../../common/mobile/utils/device'; -import { observer, inject } from "mobx-react"; +import React, { useContext, useEffect } from 'react'; +import { View, Popup, Popover, f7 } from 'framework7-react'; +import { Device } from '../../../../../common/mobile/utils/device'; import ApplicationSettingsController from "../../controller/settings/ApplicationSettings"; import { MacrosSettings } from "./ApplicationSettings"; import DownloadController from "../../controller/settings/Download"; import PresentationInfoController from "../../controller/settings/PresentationInfo"; import PresentationSettingsController from "../../controller/settings/PresentationSettings"; import { PresentationColorSchemes } from "./PresentationSettings"; -// import PresentationAboutController from '../../controller/settings/PresentationAbout'; import About from '../../../../../common/mobile/lib/view/About'; +import SettingsPage from './SettingsPage'; +import { MainContext } from '../../page/main'; import SharingSettings from "../../../../../common/mobile/lib/view/SharingSettings"; import VersionHistoryController from '../../../../../common/mobile/lib/controller/VersionHistory'; const routes = [ { - path: '/', - component: 'TSettingsView' + path: '/settings-page/', + component: SettingsPage, + keepAlive: true }, { path: '/application-settings/', @@ -58,237 +57,39 @@ const routes = [ } } }, - /*{ - path: '/presentation-settings/', - component: PresentationSettingsController, - }, - { - path: "/presentation-info/", - component: PresentationInfoController, - }*/ ]; - -const SettingsList = inject("storeAppOptions", "storeToolbarSettings", "storeVersionHistory")(observer(props => { - const { t } = useTranslation(); - const _t = t('View.Settings', {returnObjects: true}); - const storeToolbarSettings = props.storeToolbarSettings; - const disabledPreview = storeToolbarSettings.countPages <= 0; - const storeVersionHistory = props.storeVersionHistory; - const isVersionHistoryMode = storeVersionHistory.isVersionHistoryMode; - - const navbar = - {!props.inPopover && {_t.textDone}} - ; - - const onoptionclick = page => { - if ( props.onOptionClick ) - props.onOptionClick(page) +routes.forEach(route => { + route.options = { + ...route.options, + transition: 'f7-push' }; +}); - const closeModal = () => { - if (Device.phone) { - f7.sheet.close('.settings-popup', false); - } else { - f7.popover.close('#settings-popover', false); - } - }; +const SettingsView = () => { + const mainContext = useContext(MainContext); - const onOpenOptions = keyword => { - closeModal(); - props.openOptions(keyword); - } - - const onPrint = () => { - const api = Common.EditorApi.get(); - - closeModal(); - setTimeout(() => { - api.asc_Print(); - }, 400); - }; - - const showHelp = () => { - // let url = '{{HELP_URL}}'; - let url = __HELP_URL__; - // let url = 'https://helpcenter.onlyoffice.com'; - - if (url.charAt(url.length-1) !== '/') { - url += '/'; - } - - if (Device.sailfish || Device.android) { - url+='mobile-applications/documents/mobile-web-editors/android/index.aspx'; - } - else { - url+='mobile-applications/documents/mobile-web-editors/ios/index.aspx'; - } - - closeModal(); - window.open(url, "_blank"); - }; - - const showFeedback = () => { - let config = props.storeAppOptions.config; - - closeModal(); - if(config && !!config.feedback && !!config.feedback.url) { - window.open(config.feedback.url, "_blank"); - } else window.open(__SUPPORT_URL__, "_blank"); - }; - - const appOptions = props.storeAppOptions; - let _isEdit = false, - _canDownload = false, - _canDownloadOrigin = false, - _canAbout = true, - _canHelp = true, - _canPrint = false, - _canFeedback = true; - - if (appOptions.isDisconnected) { - _isEdit = false; - if (!appOptions.enableDownload) - _canPrint = _canDownload = _canDownloadOrigin = false; - } else { - _isEdit = appOptions.isEdit; - _canDownload = appOptions.canDownload; - _canDownloadOrigin = appOptions.canDownloadOrigin; - _canPrint = appOptions.canPrint; - - if (appOptions.customization && appOptions.canBrandingExt) { - _canAbout = appOptions.customization.about !== false; - } - - if (appOptions.customization) { - _canHelp = appOptions.customization.help !== false; - _canFeedback = appOptions.customization.feedback !== false; - } - } - - const onDownloadOrigin = () => { - closeModal(); - setTimeout(() => { - Common.EditorApi.get().asc_DownloadOrigin(); - }, 0); - }; - - return ( - - - {navbar} - - {!props.inPopover && - - - - } - {window.matchMedia("(max-width: 374px)").matches && !isVersionHistoryMode ? - onOpenOptions('coauth')} className='no-indicator'> - - - : null} - {_isEdit && - { - if(Device.phone) { - onOpenOptions('history'); - } else { - onoptionclick.bind(this, "/version-history")(); - } - }}> - - - } - {(_isEdit && !isVersionHistoryMode) && - - - - } - - - - {_canDownload && - - - - } - {_canDownloadOrigin && - - - - } - {_canPrint && - - - - } - - - - {_canHelp && - - - - } - {_canAbout && - - - - } - {_canFeedback && - - - - } - - - - ) -})); - -class SettingsView extends Component { - constructor(props) { - super(props); - - this.onoptionclick = this.onoptionclick.bind(this); - } - - onoptionclick(page){ - f7.views.current.router.navigate(page); - } - - render() { - const show_popover = this.props.usePopover; - - return ( - show_popover ? - this.props.onclosed()}> - - : - this.props.onclosed()}> - - - ) - } -} - -const Settings = props => { useEffect(() => { - if ( Device.phone ) + if(Device.phone) { f7.popup.open('.settings-popup'); - else f7.popover.open('#settings-popover', '#btn-settings'); - - return () => { + } else { + f7.popover.open('#settings-popover', '#btn-settings'); } - }); + }, []); - const onviewclosed = () => { - if (props.onclosed) { - props.onclosed(); - } - }; - - return + return ( + !Device.phone ? + mainContext.closeOptions('settings')}> + + + + : + mainContext.closeOptions('settings')}> + + + + + ) }; -export default Settings; \ No newline at end of file +export default SettingsView; \ No newline at end of file diff --git a/apps/presentationeditor/mobile/src/view/settings/SettingsPage.jsx b/apps/presentationeditor/mobile/src/view/settings/SettingsPage.jsx new file mode 100644 index 0000000000..09b35f2cca --- /dev/null +++ b/apps/presentationeditor/mobile/src/view/settings/SettingsPage.jsx @@ -0,0 +1,123 @@ +import React, { useContext } from 'react'; +import { Page, Navbar, NavRight, Link, Icon, ListItem, List, f7 } from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import { Device } from '../../../../../common/mobile/utils/device'; +import { observer, inject } from "mobx-react"; +import { MainContext } from '../../page/main'; +import { SettingsContext } from '../../controller/settings/Settings'; + +const SettingsPage = inject('storeAppOptions', 'storeToolbarSettings')(observer(props => { + const { t } = useTranslation(); + const _t = t('View.Settings', {returnObjects: true}); + const mainContext = useContext(MainContext); + const settingsContext = useContext(SettingsContext); + const appOptions = props.storeAppOptions; + const storeToolbarSettings = props.storeToolbarSettings; + const disabledPreview = storeToolbarSettings.countPages <= 0; + const navbar = + {Device.phone && {_t.textDone}} + ; + + const onOpenOptions = name => { + settingsContext.closeModal(); + mainContext.openOptions(name); + } + + let _isEdit = false, + _canDownload = false, + _canDownloadOrigin = false, + _canAbout = true, + _canHelp = true, + _canPrint = false, + _canFeedback = true; + + if (appOptions.isDisconnected) { + _isEdit = false; + if (!appOptions.enableDownload) + _canPrint = _canDownload = _canDownloadOrigin = false; + } else { + _isEdit = appOptions.isEdit; + _canDownload = appOptions.canDownload; + _canDownloadOrigin = appOptions.canDownloadOrigin; + _canPrint = appOptions.canPrint; + + if (appOptions.customization && appOptions.canBrandingExt) { + _canAbout = appOptions.customization.about !== false; + } + + if (appOptions.customization) { + _canHelp = appOptions.customization.help !== false; + _canFeedback = appOptions.customization.feedback !== false; + } + } + + return ( + + {navbar} + + {!props.inPopover && + + + + } + {window.matchMedia("(max-width: 374px)").matches ? + onOpenOptions('coauth')} className='no-indicator'> + + + : null} + {_isEdit && + + + + } + + + + {_isEdit && + { + if(Device.phone) { + onOpenOptions('history'); + } + }}> + + + } + {_canDownload && + + + + } + {_canDownloadOrigin && + + + + } + {_canPrint && + + + + } + + + + {_canHelp && + + + + } + {_canAbout && + + + + } + {_canFeedback && + + + + } + + + ) +})); + +export default SettingsPage; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/Add.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/Add.jsx new file mode 100644 index 0000000000..16be3f3661 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/controller/add/Add.jsx @@ -0,0 +1,45 @@ +import React, { createContext } from "react"; +import AddView from "../../view/add/Add"; + +export const AddingContext = createContext(); + +const AddingController = props => { + const api = Common.EditorApi.get(); + const cellinfo = api.asc_getCellInfo(); + const seltype = cellinfo.asc_getSelectionType(); + const iscelllocked = cellinfo.asc_getLocked(); + const isAddShapeHyperlink = api.asc_canAddShapeHyperlink(); + let options; + + if(!iscelllocked) { + options = props.showOptions; + + if(!options) { + switch(seltype) { + case Asc.c_oAscSelectionType.RangeCells: + case Asc.c_oAscSelectionType.RangeRow: + case Asc.c_oAscSelectionType.RangeCol: + case Asc.c_oAscSelectionType.RangeMax: break; + case Asc.c_oAscSelectionType.RangeImage: + case Asc.c_oAscSelectionType.RangeShape: + case Asc.c_oAscSelectionType.RangeChart: + case Asc.c_oAscSelectionType.RangeChartText: + case Asc.c_oAscSelectionType.RangeShapeText: + options = {panels: ['image','shape']}; + break; + } + } + } + + return ( + + + + + ) +} + +export default AddingController; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx index b560d95199..42b9f4f2d0 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddChart.jsx @@ -43,8 +43,7 @@ class AddChartController extends Component { render () { return ( - + ) } } diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddFunction.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddFunction.jsx index a6adeb1dad..7725cf180b 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/add/AddFunction.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddFunction.jsx @@ -87,9 +87,7 @@ class AddFunctionController extends Component { render () { return ( - + ) } } diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx index 075f113631..08fc94bd05 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddLink.jsx @@ -141,7 +141,7 @@ class AddLinkController extends Component { return ( !this.props.isNavigate ? Device.phone ? - this.props.onClosed('add-link')}> + this.props.closeOptions('add-link')}> : - this.props.onClosed('add-link')}> + this.props.closeOptions('add-link')}> ) } diff --git a/apps/spreadsheeteditor/mobile/src/controller/add/AddShape.jsx b/apps/spreadsheeteditor/mobile/src/controller/add/AddShape.jsx index 0c7209c530..b36e4dcd3b 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/add/AddShape.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/add/AddShape.jsx @@ -26,8 +26,7 @@ class AddShapeController extends Component { render () { return ( - + ) } } diff --git a/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx b/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx index 927a779534..c5642dd207 100644 --- a/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx +++ b/apps/spreadsheeteditor/mobile/src/controller/edit/EditLink.jsx @@ -1,7 +1,6 @@ import React, { Component } from 'react'; import { f7, Popup, Popover, View } from 'framework7-react'; import { Device } from '../../../../../common/mobile/utils/device'; -import {observer, inject} from "mobx-react"; import { withTranslation } from 'react-i18next'; import { EditLink, PageEditTypeLink, PageEditSheet} from '../../view/edit/EditLink'; @@ -149,7 +148,7 @@ class EditLinkController extends Component { return ( !this.props.isNavigate ? Device.phone ? - this.props.onClosed('edit-link')}> + this.props.closeOptions('edit-link')}> : - this.props.onClosed('edit-link')}> + this.props.closeOptions('edit-link')}> { + const closeModal = () => { + if(Device.phone) { + f7.sheet.close('.settings-popup', false); + } else { + f7.popover.close('#settings-popover', false); + } + }; + + const onPrint = () => { + const api = Common.EditorApi.get(); + + closeModal(); + setTimeout(() => { + api.asc_Print(); + }, 400); + }; + + const showHelp = () => { + // let url = '{{HELP_URL}}'; + // let url = 'https://helpcenter.onlyoffice.com'; + let url = __HELP_URL__; + + if (url.charAt(url.length-1) !== '/') { + url += '/'; + } + + if (Device.sailfish || Device.android) { + url+='mobile-applications/documents/mobile-web-editors/android/index.aspx'; + } + else { + url+='mobile-applications/documents/mobile-web-editors/ios/index.aspx'; + } + + closeModal(); + window.open(url, "_blank"); + }; + + const showFeedback = () => { + let config = props.storeAppOptions.config; + + closeModal(); + if(config && !!config.feedback && !!config.feedback.url) { + window.open(config.feedback.url, "_blank"); + } else window.open(__SUPPORT_URL__, "_blank"); + }; + + const onDownloadOrigin = () => { + closeModal(); + setTimeout(() => { + Common.EditorApi.get().asc_DownloadOrigin(); + }, 0); + }; + + return ( + + + + ); +})); + +export default SettingsController; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/page/main.jsx b/apps/spreadsheeteditor/mobile/src/page/main.jsx index 45021a5ea8..2809ebdb44 100644 --- a/apps/spreadsheeteditor/mobile/src/page/main.jsx +++ b/apps/spreadsheeteditor/mobile/src/page/main.jsx @@ -1,25 +1,24 @@ -import React, { Component, Fragment } from 'react'; -import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react'; +import React, { Component, Fragment, createContext } from 'react'; +import { Page, View, Navbar, Subnavbar, Icon, f7 } from 'framework7-react'; import { observer, inject } from "mobx-react"; import { Device } from '../../../../common/mobile/utils/device'; - -import Settings from '../view/settings/Settings'; -import { Collaboration } from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx' +import CollaborationView from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx' import CellEditor from '../controller/CellEditor'; import { Statusbar } from '../controller/Statusbar'; import FilterOptionsController from '../controller/FilterOptions.jsx' -import AddOptions from "../view/add/Add"; -import EditOptions from "../view/edit/Edit"; import { Search, SearchSettings } from '../controller/Search'; -import { f7, Link } from 'framework7-react'; - -import {FunctionGroups} from "../controller/add/AddFunction"; +import { FunctionGroups } from "../controller/add/AddFunction"; import ContextMenu from '../controller/ContextMenu'; import { Toolbar } from "../controller/Toolbar"; import { AddLinkController } from '../controller/add/AddLink'; import { EditLinkController } from '../controller/edit/EditLink'; +import SettingsController from '../controller/settings/Settings'; +import AddingController from '../controller/add/Add'; +import EditView from '../view/edit/Edit'; import VersionHistoryController from '../../../../common/mobile/lib/controller/VersionHistory'; +export const MainContext = createContext(); + class MainPage extends Component { constructor(props) { super(props); @@ -133,71 +132,80 @@ class MainPage extends Component { } return ( - - {/* Top Navbar */} - - {!isHideLogo &&
    { - window.open(`${__PUBLISHER_URL__}`, "_blank"); - }}>
    } - - - - -     - - this.handleClickToOpenOptions('add', {panels: panels, button: button})}/> - {/* Page content */} - - {isShowPlaceholder ? -
    -
    -
    -
    : - null - } - - { - !this.state.editOptionsVisible ? null : - - } - { - !this.state.addOptionsVisible ? null : - - } - { - !this.state.addLinkSettingsVisible ? null : - - } - { - !this.state.editLinkSettingsVisible ? null : - - } - { - !this.state.settingsVisible ? null : - - } - { - !this.state.historyVisible ? null : - - } - { - !this.state.collaborationVisible ? null : - - } - - {appOptions.isDocReady && - - - - - } + + + {/* Top Navbar */} + + {!isHideLogo && +
    { + window.open(`${__PUBLISHER_URL__}`, "_blank"); + }}> + +
    + } + + + + +     - - - {/* hidden component*/} -     + this.handleClickToOpenOptions('add', {panels: panels, button: button})} /> + {/* Page content */} + + {isShowPlaceholder ? +
    +
    +
    +
    : + null + } + + {!this.state.editOptionsVisible ? null : } + {!this.state.addOptionsVisible ? null : + + } + {!this.state.addLinkSettingsVisible ? null : + + } + {!this.state.editLinkSettingsVisible ? null : + + } + {!this.state.settingsVisible ? null : } + {!this.state.collaborationVisible ? null : + + } + {!this.state.historyVisible ? null : + + } + {appOptions.isDocReady && + + + + + } + + {/* hidden component*/} +     + ) } } diff --git a/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx b/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx index 885570b960..8c33db7e10 100644 --- a/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/FilterOptions.jsx @@ -1,5 +1,5 @@ -import React, {useEffect, useState} from 'react'; -import {f7, List, Popover, Sheet, ListItem, Icon, Row, Button, ListButton, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle,View} from 'framework7-react'; +import React from 'react'; +import {f7, List, Popover, Sheet, ListItem, Icon, ListButton, Page, Navbar, NavRight, Link, View} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import { Device } from '../../../../common/mobile/utils/device'; import {observer, inject} from "mobx-react"; @@ -45,7 +45,7 @@ const FilterOptions = inject('storeAppOptions')(observer(props => { - + diff --git a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx index 7807ada673..3d506e7578 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/add/Add.jsx @@ -1,24 +1,23 @@ -import React, {Component, useEffect} from 'react'; -import {View,Page,Navbar,NavTitle,NavRight,Link,Popup,Popover,Icon,Tabs,Tab} from 'framework7-react'; -import { useTranslation } from 'react-i18next'; -import {f7} from 'framework7-react'; -import { observer, inject } from "mobx-react"; -import {Device} from '../../../../../common/mobile/utils/device'; - -import {AddChartController} from "../../controller/add/AddChart"; -import {AddFunctionController} from "../../controller/add/AddFunction"; -import {PageFunctionGroup, PageFunctionInfo} from "./AddFunction"; -import AddShapeController from "../../controller/add/AddShape"; -import {AddOtherController} from "../../controller/add/AddOther"; -import {AddImageController} from "../../controller/add/AddImage"; -import {PageImageLinkSettings} from "./AddImage"; -import {AddLinkController} from "../../controller/add/AddLink"; -import {EditLinkController} from "../../controller/edit/EditLink"; -import {PageTypeLink, PageSheet} from "./AddLink"; -import {PageEditTypeLink, PageEditSheet} from "../../view/edit/EditLink"; +import React, { useContext, useEffect } from 'react'; +import { View, Popup, Popover, f7 } from 'framework7-react'; +import { Device } from '../../../../../common/mobile/utils/device'; +import { PageFunctionGroup, PageFunctionInfo } from "./AddFunction"; +import { AddImageController } from "../../controller/add/AddImage"; +import { PageImageLinkSettings } from "./AddImage"; +import { AddLinkController } from "../../controller/add/AddLink"; +import { EditLinkController } from "../../controller/edit/EditLink"; +import { PageTypeLink, PageSheet } from "./AddLink"; +import { PageEditTypeLink, PageEditSheet } from "../../view/edit/EditLink"; import AddFilterController from "../../controller/add/AddFilter"; +import AddingPage from './AddingPage'; +import { MainContext } from '../../page/main'; const routes = [ + { + path: '/adding-page/', + component: AddingPage, + keepAlive: true + }, // Functions { path: '/add-function-group/', @@ -69,201 +68,38 @@ const routes = [ } ]; -const AddLayoutNavbar = ({ tabs, inPopover }) => { - const isAndroid = Device.android; +routes.forEach(route => { + route.options = { + ...route.options, + transition: 'f7-push' + }; +}); - if(!tabs.length) return null; +const AddView = props => { + const mainContext = useContext(MainContext); - return ( - - {tabs.length > 1 ? -
    - {tabs.map((item, index) => - - - )} - {isAndroid && } -
    : {tabs[0].caption} - } - { !inPopover && } -     - ) -}; - -const AddLayoutContent = ({ tabs }) => { - if(!tabs.length) return null; - - return ( - - {tabs.map((item, index) => - - {item.component} - - )} - - ) -}; - -const AddTabs = props => { - const { t } = useTranslation(); - const _t = t('View.Add', {returnObjects: true}); - const wsLock = props.wsLock; - const wsProps = props.wsProps; - const showPanels = props.showPanels; - const tabs = []; - - if(!wsProps.Objects) { - if (!showPanels) { - tabs.push({ - caption: _t.textChart, - id: 'add-chart', - icon: 'icon-add-chart', - component: - }); - } - if (!showPanels || showPanels === 'function') { - tabs.push({ - caption: _t.textFunction, - id: 'add-function', - icon: 'icon-add-formula', - component: - }); - } - if (!showPanels || showPanels.indexOf('shape') > 0) { - tabs.push({ - caption: _t.textShape, - id: 'add-shape', - icon: 'icon-add-shape', - component: - }); - } - - // if (showPanels && showPanels.indexOf('image') !== -1) { - // tabs.push({ - // caption: _t.textImage, - // id: 'add-image', - // icon: 'icon-add-image', - // component: - // }); - // } - } - - if (!showPanels && (!wsProps.InsertHyperlinks || !wsProps.Objects || !wsProps.Sort)) { - tabs.push({ - caption: _t.textOther, - id: 'add-other', - icon: 'icon-add-other', - component: - }); - } - - // if (((showPanels && showPanels === 'hyperlink') || props.isAddShapeHyperlink) && !wsProps.InsertHyperlinks) { - // tabs.push({ - // caption: _t.textAddLink, - // id: 'add-link', - // icon: 'icon-link', - // component: - // }); - // } - - if(!tabs.length) { - if (Device.phone) { - f7.popup.close('.add-popup', false); - } else { - f7.popover.close('#add-popover', false); - } - - return null; - } - - return ( - - - - - - - ) -}; - -class AddView extends Component { - constructor(props) { - super(props); - - this.onoptionclick = this.onoptionclick.bind(this); - } - onoptionclick(page, props){ - f7.views.current.router.navigate(page, props); - } - render() { - const show_popover = this.props.usePopover; - return ( - show_popover ? - this.props.onclosed()}> - - : - this.props.onclosed()}> - - - ) - } -} - -const Add = props => { - const api = Common.EditorApi.get(); - const cellinfo = api.asc_getCellInfo(); - const seltype = cellinfo.asc_getSelectionType(); - const iscelllocked = cellinfo.asc_getLocked(); - const isAddShapeHyperlink = api.asc_canAddShapeHyperlink(); - - let options; - useEffect(() => { - if ( Device.phone ) { + if(Device.phone) { f7.popup.open('.add-popup'); } else { const targetElem = !props.showOptions || !props.showOptions.button ? '#btn-add' : props.showOptions.button; f7.popover.open('#add-popover', targetElem); } + }, []); - return () => { - // component will unmount - } - }); + return ( + !Device.phone ? + mainContext.closeOptions('add')}> + + + + : + mainContext.closeOptions('add')}> + + + + + ) +} - const onviewclosed = () => { - if ( props.onclosed ) { - props.onclosed(); - } - }; - - if ( !iscelllocked ) { - options = props.showOptions; - if ( !options ) { - switch (seltype) { - case Asc.c_oAscSelectionType.RangeCells: - case Asc.c_oAscSelectionType.RangeRow: - case Asc.c_oAscSelectionType.RangeCol: - case Asc.c_oAscSelectionType.RangeMax: break; - case Asc.c_oAscSelectionType.RangeImage: - case Asc.c_oAscSelectionType.RangeShape: - case Asc.c_oAscSelectionType.RangeChart: - case Asc.c_oAscSelectionType.RangeChartText: - case Asc.c_oAscSelectionType.RangeShapeText: - options = {panels: ['image','shape']}; - break; - } - } - } - - return -}; - -export default Add; \ No newline at end of file +export default AddView; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx index 41ca9fba1d..89a703556c 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/add/AddChart.jsx @@ -1,7 +1,7 @@ -import React, {Fragment, useState} from 'react'; +import React from 'react'; import {observer, inject} from "mobx-react"; -import {Swiper, SwiperSlide} from 'framework7-react'; import {Device} from "../../../../../common/mobile/utils/device"; +import { Swiper, SwiperSlide } from 'swiper/react'; const AddChart = props => { const types = props.storeChartSettings.types; diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddFilter.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddFilter.jsx index 19d45a651d..8a4503c084 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/AddFilter.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/add/AddFilter.jsx @@ -1,5 +1,5 @@ import React, {useState} from 'react'; -import {Page, Navbar, List, ListItem, Icon, Row, Toggle} from 'framework7-react'; +import {Page, Navbar, List, ListItem, Icon, Toggle} from 'framework7-react'; import { useTranslation } from 'react-i18next'; const AddSortAndFilter = props => { @@ -13,14 +13,14 @@ const AddSortAndFilter = props => { - + {!wsLock && diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddFunction.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddFunction.jsx index 82cc52a230..fcb8e6c76a 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/AddFunction.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/add/AddFunction.jsx @@ -1,7 +1,7 @@ -import React, {Fragment, useState} from 'react'; -import {observer, inject} from "mobx-react"; +import React, { Fragment } from 'react'; +import { observer, inject } from "mobx-react"; import { useTranslation } from 'react-i18next'; -import {List, ListItem, Page, Navbar, Icon, BlockTitle} from 'framework7-react'; +import { List, ListItem, Page, Navbar, Icon, BlockTitle, f7 } from 'framework7-react'; const PageInfo = props => { const { t } = useTranslation(); @@ -94,6 +94,10 @@ const AddFunction = props => { }) } + const onOptionClick = (page, props) => { + f7.views.current.router.navigate(page, props); + } + return ( @@ -105,15 +109,14 @@ const AddFunction = props => { link='#' onClick={() => {props.onInsertFunction(f.type);}} > -
    { - props.onOptionClick('/add-function-info/', { - props: { - functionInfo: f - } - }); - event.stopPropagation(); - }}> +
    { + onOptionClick('/add-function-info/', { + props: { + functionInfo: f + } + }); + e.stopPropagation(); + }}>
    diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx index faa20a4646..5cc91d1406 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/add/AddLink.jsx @@ -119,15 +119,15 @@ const AddLink = props => { }}/> } {typeLink === 'ext' && - { - setLink(event.target.value); + { + setLink(event.target.value); if(stateAutoUpdate && !displayDisabled) setDisplayText(event.target.value); - }} - className={isIos ? 'list-input-right' : ''} + }} /> } {typeLink === 'int' && @@ -144,7 +144,6 @@ const AddLink = props => { placeholder={_t.textRequired} value={range} onChange={(event) => {setRange(event.target.value)}} - className={isIos ? 'list-input-right' : ''} /> } { setDisplayText(event.target.value); setAutoUpdate(event.target.value == ''); }} - className={isIos ? 'list-input-right' : ''} /> {setScreenTip(event.target.value)}} - className={isIos ? 'list-input-right' : ''} /> diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx index 23ad2f5533..972dcd2b47 100644 --- a/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/add/AddOther.jsx @@ -1,7 +1,8 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { inject, observer } from 'mobx-react'; import {List, ListItem, Icon} from 'framework7-react'; import { useTranslation } from 'react-i18next'; +import { MainContext } from '../../page/main'; const AddOther = inject("storeFocusObjects", "storeAppOptions")(observer(props => { const { t } = useTranslation(); @@ -11,7 +12,8 @@ const AddOther = inject("storeFocusObjects", "storeAppOptions")(observer(props = const canModifyFilter = storeAppOptions.canModifyFilter; const isHyperLink = storeFocusObjects.selections.indexOf('hyperlink') > -1; const hideAddComment = props.hideAddComment(); - const wsProps = props.wsProps; + const mainContext = useContext(MainContext); + const wsProps = mainContext.wsProps; return ( @@ -28,7 +30,6 @@ const AddOther = inject("storeFocusObjects", "storeAppOptions")(observer(props = diff --git a/apps/spreadsheeteditor/mobile/src/view/add/AddingPage.jsx b/apps/spreadsheeteditor/mobile/src/view/add/AddingPage.jsx new file mode 100644 index 0000000000..f31e2f8811 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/add/AddingPage.jsx @@ -0,0 +1,130 @@ +import React, { useContext } from 'react'; +import { Page, Navbar, NavTitle, NavRight, Link, Icon, Tabs, Tab, f7 } from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import { AddChartController } from "../../controller/add/AddChart"; +import { AddFunctionController } from "../../controller/add/AddFunction"; +import AddShapeController from "../../controller/add/AddShape"; +import { AddOtherController } from "../../controller/add/AddOther"; +import { Device } from "../../../../../common/mobile/utils/device"; +import { MainContext } from '../../page/main'; +import { AddingContext } from '../../controller/add/Add'; + +const AddLayoutNavbar = ({ tabs }) => { + const isAndroid = Device.android; + if(!tabs.length) return null; + + return ( + + {tabs.length > 1 ? +
    + {tabs.map((item, index) => + + + )} + {isAndroid && } +
    : {tabs[0].caption} + } + {Device.phone && } +     + ) +}; + +const AddLayoutContent = ({ tabs }) => { + if(!tabs.length) return null; + + return ( + + {tabs.map((item, index) => + + {item.component} + + )} + + ) +}; + +const AddingPage = () => { + const { t } = useTranslation(); + const _t = t('View.Add', {returnObjects: true}); + const mainContext = useContext(MainContext); + const addingContext = useContext(AddingContext); + // const wsLock = mainContext.wsLock; + const wsProps = mainContext.wsProps; + const showPanels = addingContext.showPanels; + const tabs = []; + + if(!wsProps.Objects) { + if(!showPanels) { + tabs.push({ + caption: _t.textChart, + id: 'add-chart', + icon: 'icon-add-chart', + component: + }); + } + + if(!showPanels || showPanels === 'function') { + tabs.push({ + caption: _t.textFunction, + id: 'add-function', + icon: 'icon-add-formula', + component: + }); + } + + if(!showPanels || showPanels.indexOf('shape') > 0) { + tabs.push({ + caption: _t.textShape, + id: 'add-shape', + icon: 'icon-add-shape', + component: + }); + } + + // if (showPanels && showPanels.indexOf('image') !== -1) { + // tabs.push({ + // caption: _t.textImage, + // id: 'add-image', + // icon: 'icon-add-image', + // component: + // }); + // } + } + + if (!showPanels && (!wsProps.InsertHyperlinks || !wsProps.Objects || !wsProps.Sort)) { + tabs.push({ + caption: _t.textOther, + id: 'add-other', + icon: 'icon-add-other', + component: + }); + } + + // if (((showPanels && showPanels === 'hyperlink') || props.isAddShapeHyperlink) && !wsProps.InsertHyperlinks) { + // tabs.push({ + // caption: _t.textAddLink, + // id: 'add-link', + // icon: 'icon-link', + // component: + // }); + // } + + if(!tabs.length) { + if (Device.phone) { + f7.popup.close('.add-popup', false); + } else { + f7.popover.close('#add-popover', false); + } + + return null; + } + + return ( + + + + + ) +}; + +export default AddingPage; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx index f777cfd476..b4f4da120c 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx @@ -1,28 +1,24 @@ -import React, {useState, useEffect} from 'react'; -import {observer, inject} from "mobx-react"; -import { Popover, Sheet, View, Page, Navbar, NavRight, NavLeft, NavTitle, Tabs, Tab, Link } from 'framework7-react'; +import React, { useContext, useEffect } from 'react'; +import { Popover, Sheet, View } from 'framework7-react'; import { f7 } from 'framework7-react'; -import { useTranslation } from 'react-i18next'; -import {Device} from '../../../../../common/mobile/utils/device'; - -import EditCellController from "../../controller/edit/EditCell"; -import EditShapeController from "../../controller/edit/EditShape"; -import EditImageController from "../../controller/edit/EditImage"; -import EditTextController from "../../controller/edit/EditText"; -import EditChartController from "../../controller/edit/EditChart"; +import { Device } from '../../../../../common/mobile/utils/device'; // import { EditLinkController } from "../../controller/edit/EditLink"; - import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape'; import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage'; import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell, CellStyle, PageCreationCustomFormat, CustomFormats } from './EditCell'; import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText'; import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageLegend, PageChartTitle, PageHorizontalAxisTitle, PageVerticalAxisTitle, PageHorizontalGridlines, PageVerticalGridlines, PageDataLabels, PageChartVerticalAxis, PageVertAxisCrosses, PageDisplayUnits, PageVertMajorType, PageVertMinorType, PageVertLabelPosition, PageChartHorizontalAxis, PageHorAxisCrosses, PageHorAxisPosition, PageHorMajorType, PageHorMinorType, PageHorLabelPosition } from './EditChart'; import { PageEditTypeLink, PageEditSheet } from './EditLink'; +import EditingPage from './EditingPage'; +import { MainContext } from '../../page/main'; const routes = [ - + { + path: '/editing-page/', + component: EditingPage, + keepAlive: true + }, // Shape - { path: '/edit-style-shape/', component: PageShapeStyle @@ -299,188 +295,41 @@ const routes = [ } ]; -const EmptyEditLayout = () => { - const { t } = useTranslation(); - const _t = t('View.Edit', {returnObjects: true}); - return ( - -
    -
    -

    {_t.textSelectObjectToEdit}

    -
    -
    -     - ) -}; - -const EditLayoutNavbar = ({ editors, inPopover }) => { - const isAndroid = Device.android; - const { t } = useTranslation(); - const _t = t('View.Edit', {returnObjects: true}); - - if(!editors.length) return null; - - return ( - - { - editors.length > 1 ? -
    - {editors.map((item, index) => {item.caption})} - {isAndroid && } -
    : { editors[0].caption } - } - { !inPopover && } -     - ) -}; - -const EditLayoutContent = ({ editors }) => { - if(!editors.length) return null; - - if (editors.length > 1) { - return ( - - {editors.map((item, index) => - - {item.component} - - )} - - ) - } else { - return ( - - {editors[0].component} - - ) - } -}; - -const EditTabs = props => { - const { t } = useTranslation(); - const _t = t('View.Edit', {returnObjects: true}); - const store = props.storeFocusObjects; - const wsProps = props.wsProps; - const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.objects : store.selections); - let editors = []; - - if (settings.length < 1) { - editors.push({ - caption: _t.textSettings, - component: - }); - } else { - if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('image') > -1) { - editors.push({ - caption: _t.textImage, - id: 'edit-image', - component: - }) - } - if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('shape') > -1) { - editors.push({ - caption: _t.textShape, - id: 'edit-shape', - component: - }) - } - if (settings.indexOf('cell') > -1) { - editors.push({ - caption: _t.textCell, - id: 'edit-text', - component: - }) - } - if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('chart') > -1) { - editors.push({ - caption: _t.textChart, - id: 'edit-chart', - component: - }) - } - if (!(wsProps.Objects && store.isLockedText) && settings.indexOf('text') > -1) { - editors.push({ - caption: _t.textText, - id: 'edit-text', - component: - }) - } - - // if(!wsProps.Objects) { - // if (settings.indexOf('hyperlink') > -1 || (props.hyperinfo && props.isAddShapeHyperlink)) { - // editors.push({ - // caption: _t.textHyperlink, - // id: 'edit-link', - // component: - // }) - // } - // } - } - - if(!editors.length) { - if (Device.phone) { - f7.sheet.close('#edit-sheet', false); - } else { - f7.popover.close('#edit-popover', false); - } - - return null; - } - - return ( - - - - - - - - ) -}; - -const EditTabsContainer = inject("storeFocusObjects")(observer(EditTabs)); - -const EditView = props => { - const onOptionClick = (page) => { - $f7.views.current.router.navigate(page); +routes.forEach(route => { + route.options = { + ...route.options, + transition: 'f7-push' }; - const show_popover = props.usePopover; +}); + +const EditView = () => { + const mainContext = useContext(MainContext); + // const api = Common.EditorApi.get(); + // const cellinfo = api.asc_getCellInfo(); + // const hyperinfo = cellinfo.asc_getHyperlink(); + // const isAddShapeHyperlink = api.asc_canAddShapeHyperlink(); + + useEffect(() => { + if(Device.phone) { + f7.sheet.open('#edit-sheet'); + } else { + f7.popover.open('#edit-popover', '#btn-edit'); + } + }, []); + return ( - show_popover ? - props.onClosed()}> - + !Device.phone ? + mainContext.closeOptions('edit')}> + + + : - props.onClosed()}> - + mainContext.closeOptions('edit')}> + + + ) }; -const EditOptions = props => { - const api = Common.EditorApi.get(); - const cellinfo = api.asc_getCellInfo(); - const hyperinfo = cellinfo.asc_getHyperlink(); - const isAddShapeHyperlink = api.asc_canAddShapeHyperlink(); - - useEffect(() => { - if ( Device.phone ) - f7.sheet.open('#edit-sheet'); - else f7.popover.open('#edit-popover', '#btn-edit'); - - return () => { - // component will unmount - } - }); - - const onviewclosed = () => { - if ( props.onclosed ) { - props.onclosed(); - } - }; - - return ( - - ) -}; - -export default EditOptions; \ No newline at end of file +export default EditView; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx index 9b7bbd2abb..ee7fb8228a 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx @@ -1,6 +1,6 @@ import React, {Fragment, useState, useEffect} from 'react'; import {observer, inject} from "mobx-react"; -import {f7, f7router, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle, Swiper, SwiperSlide, ListInput, Block} from 'framework7-react'; +import {f7, List, ListItem, Icon, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle, ListInput, Block} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; @@ -48,11 +48,11 @@ const EditCell = props => { <> - + { const { t } = useTranslation(); diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx index 6d4ada5363..21badbea58 100644 --- a/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditText.jsx @@ -1,8 +1,8 @@ -import React, {Fragment, useState, useEffect} from 'react'; +import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; -import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react'; +import {List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react'; import { useTranslation } from 'react-i18next'; -import {Device} from '../../../../../common/mobile/utils/device'; +import { Device } from '../../../../../common/mobile/utils/device'; import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx'; import { LocalStorage } from '../../../../../common/mobile/utils/LocalStorage.mjs'; @@ -36,11 +36,11 @@ const EditText = props => { changeFontFamily: props.changeFontFamily }}/> - + { - +
    {props.onParagraphAlign('left')}}> @@ -68,10 +68,10 @@ const EditText = props => { {props.onParagraphAlign('justify')}}> - +
    - +     diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditingPage.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditingPage.jsx new file mode 100644 index 0000000000..f4a7c373e9 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditingPage.jsx @@ -0,0 +1,155 @@ +import React, { useContext } from 'react'; +import { observer, inject } from "mobx-react"; +import { Page, Navbar, NavRight, NavTitle, Tabs, Tab, Link, f7 } from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import EditCellController from "../../controller/edit/EditCell"; +import EditShapeController from "../../controller/edit/EditShape"; +import EditImageController from "../../controller/edit/EditImage"; +import EditTextController from "../../controller/edit/EditText"; +import EditChartController from "../../controller/edit/EditChart"; +import { Device } from "../../../../../common/mobile/utils/device"; +import { MainContext } from '../../page/main'; + +const EmptyEditLayout = () => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + return ( + +
    +
    +

    {_t.textSelectObjectToEdit}

    +
    +
    +     + ) +}; + +const EditLayoutNavbar = ({ editors }) => { + const isAndroid = Device.android; + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + + if(!editors.length) return null; + + return ( + + {editors.length > 1 ? +
    + {editors.map((item, index) => {item.caption})} + {isAndroid && } +
    : + {editors[0].caption} + } + {Device.phone && + + + + } +     + ) +}; + +const EditLayoutContent = ({ editors }) => { + if(!editors.length) return null; + + if (editors.length > 1) { + return ( + + {editors.map((item, index) => + + {item.component} + + )} + + ) + } else { + return ( + + {editors[0].component} + + ) + } +}; + +const EditingPage = inject('storeFocusObjects')(observer(props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const mainContext = useContext(MainContext); + const store = props.storeFocusObjects; + const wsProps = mainContext.wsProps; + const settings = !store.focusOn ? [] : (store.focusOn === 'obj' ? store.objects : store.selections); + let editors = []; + + if (settings.length < 1) { + editors.push({ + caption: _t.textSettings, + component: + }); + } else { + if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('image') > -1) { + editors.push({ + caption: _t.textImage, + id: 'edit-image', + component: + }) + } + if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('shape') > -1) { + editors.push({ + caption: _t.textShape, + id: 'edit-shape', + component: + }) + } + if (settings.indexOf('cell') > -1) { + editors.push({ + caption: _t.textCell, + id: 'edit-text', + component: + }) + } + if (!(wsProps.Objects && store.isLockedShape) && settings.indexOf('chart') > -1) { + editors.push({ + caption: _t.textChart, + id: 'edit-chart', + component: + }) + } + if (!(wsProps.Objects && store.isLockedText) && settings.indexOf('text') > -1) { + editors.push({ + caption: _t.textText, + id: 'edit-text', + component: + }) + } + + // if(!wsProps.Objects) { + // if (settings.indexOf('hyperlink') > -1 || (props.hyperinfo && props.isAddShapeHyperlink)) { + // editors.push({ + // caption: _t.textHyperlink, + // id: 'edit-link', + // component: + // }) + // } + // } + } + + if(!editors.length) { + if (Device.phone) { + f7.sheet.close('#edit-sheet', false); + } else { + f7.popover.close('#edit-popover', false); + } + + return null; + } + + return ( + + + + + ) +})); + +export default EditingPage; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx index 03fd852337..348a823b81 100644 --- a/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/spreadsheeteditor/mobile/src/view/settings/Settings.jsx @@ -1,25 +1,25 @@ -import React, {Component, useEffect} from 'react'; -import {View,Page,Navbar,NavRight,Link,Popup,Popover,Icon,ListItem,List} from 'framework7-react'; -import { useTranslation } from 'react-i18next'; -import {f7} from 'framework7-react'; -import {Device} from '../../../../../common/mobile/utils/device'; -import { observer, inject } from "mobx-react"; +import React, { useContext, useEffect } from 'react'; +import { View, Popup, Popover, f7 } from 'framework7-react'; +import { Device } from '../../../../../common/mobile/utils/device'; import SpreadsheetSettingsController from '../../controller/settings/SpreadsheetSettings.jsx'; import ApplicationSettingsController from '../../controller/settings/ApplicationSettings.jsx'; import SpreadsheetInfoController from '../../controller/settings/SpreadsheetInfo.jsx'; -import {DownloadWithTranslation} from '../../controller/settings/Download.jsx'; -import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from './SpreadsheetSettings.jsx'; -import {MacrosSettings, RegionalSettings, FormulaLanguage} from './ApplicationSettings.jsx'; +import { DownloadWithTranslation } from '../../controller/settings/Download.jsx'; +import { SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins } from './SpreadsheetSettings.jsx'; +import { MacrosSettings, RegionalSettings, FormulaLanguage } from './ApplicationSettings.jsx'; // import SpreadsheetAbout from './SpreadsheetAbout.jsx'; import About from '../../../../../common/mobile/lib/view/About'; import { Direction } from '../../../../../spreadsheeteditor/mobile/src/view/settings/ApplicationSettings'; -import SharingSettings from "../../../../../common/mobile/lib/view/SharingSettings"; +// import SharingSettings from "../../../../../common/mobile/lib/view/SharingSettings"; +import SettingsPage from './SettingsPage'; +import { MainContext } from '../../page/main'; import VersionHistoryController from '../../../../../common/mobile/lib/controller/VersionHistory'; const routes = [ { - path: '/', - component: 'TSettingsView' + path: '/settings-page/', + component: SettingsPage, + keepAlive: true }, { path: '/spreadsheet-settings/', @@ -81,224 +81,37 @@ const routes = [ }, ]; - -const SettingsList = inject("storeAppOptions", "storeVersionHistory")(observer(props => { - const { t } = useTranslation(); - const _t = t('View.Settings', {returnObjects: true}); - const storeVersionHistory = props.storeVersionHistory; - const isVersionHistoryMode = storeVersionHistory.isVersionHistoryMode; - const navbar = - {!props.inPopover && {_t.textDone}} - ; - - const onoptionclick = page => { - if ( props.onOptionClick ) - props.onOptionClick(page) +routes.forEach(route => { + route.options = { + ...route.options, + transition: 'f7-push' }; +}); - const closeModal = () => { - if (Device.phone) { - f7.sheet.close('.settings-popup', false); +const SettingsView = () => { + const mainContext = useContext(MainContext); + + useEffect(() => { + if(Device.phone) { + f7.popup.open('.settings-popup'); } else { - f7.popover.close('#settings-popover', false); + f7.popover.open('#settings-popover', '#btn-settings'); } - }; + }, []); - const onOpenOptions = keyword => { - closeModal(); - props.openOptions(keyword); - } - - const onPrint = () => { - const api = Common.EditorApi.get(); - - closeModal(); - setTimeout(() => { - api.asc_Print(); - }, 400); - }; - - const showHelp = () => { - // let url = '{{HELP_URL}}'; - // let url = 'https://helpcenter.onlyoffice.com'; - let url = __HELP_URL__; - - if (url.charAt(url.length-1) !== '/') { - url += '/'; - } - - if (Device.sailfish || Device.android) { - url+='mobile-applications/documents/mobile-web-editors/android/index.aspx'; - } - else { - url+='mobile-applications/documents/mobile-web-editors/ios/index.aspx'; - } - - closeModal(); - window.open(url, "_blank"); - }; - - const showFeedback = () => { - let config = props.storeAppOptions.config; - - closeModal(); - if(config && !!config.feedback && !!config.feedback.url) { - window.open(config.feedback.url, "_blank"); - } else window.open(__SUPPORT_URL__, "_blank"); - }; - - const appOptions = props.storeAppOptions; - let _isEdit = false, - _canDownload = false, - _canDownloadOrigin = false, - _canAbout = true, - _canHelp = true, - _canPrint = false, - _canFeedback = true; - - if (appOptions.isDisconnected) { - _isEdit = false; - if (!appOptions.enableDownload) - _canPrint = _canDownload = _canDownloadOrigin = false; - } else { - _isEdit = appOptions.isEdit; - _canDownload = appOptions.canDownload; - _canDownloadOrigin = appOptions.canDownloadOrigin; - _canPrint = appOptions.canPrint; - - if (appOptions.customization && appOptions.canBrandingExt) { - _canAbout = appOptions.customization.about !== false; - } - - if (appOptions.customization) { - _canHelp = appOptions.customization.help !== false; - _canFeedback = appOptions.customization.feedback !== false; - } - } - - const onDownloadOrigin = () => { - closeModal(); - setTimeout(() => { - Common.EditorApi.get().asc_DownloadOrigin(); - }, 0); - }; - return ( - - - {navbar} - - {!props.inPopover && - - - - } - {window.matchMedia("(max-width: 359px)").matches && !isVersionHistoryMode ? - onOpenOptions('coauth')} className='no-indicator'> - - - : null} - {_isEdit && - { - if(Device.phone) { - onOpenOptions('history'); - } else { - onoptionclick.bind(this, "/version-history")(); - } - }}> - - - } - {(_isEdit && !isVersionHistoryMode) && - - - - } - - - - {_canDownload && - - - - } - {_canDownloadOrigin && - - - - } - {_canPrint && - - - - } - - - - {_canHelp && - - - - } - {_canAbout && - - - - } - {_canFeedback && - - - - } - - - + !Device.phone ? + mainContext.closeOptions('settings')}> + + + + : + mainContext.closeOptions('settings')}> + + + + ) -})); - -class SettingsView extends Component { - constructor(props) { - super(props); - - this.onoptionclick = this.onoptionclick.bind(this); - } - - onoptionclick(page){ - f7.views.current.router.navigate(page); - } - - render() { - const show_popover = this.props.usePopover; - return ( - show_popover ? - this.props.onclosed()}> - - : - this.props.onclosed()}> - - - ) - } } -const Settings = props => { - useEffect(() => { - if ( Device.phone ) - f7.popup.open('.settings-popup'); - else f7.popover.open('#settings-popover', '#btn-settings'); - - return () => { - } - }); - - - const onviewclosed = () => { - if ( props.onclosed ) { - props.onclosed(); - } - }; - - return -}; - -export default Settings; \ No newline at end of file +export default SettingsView; \ No newline at end of file diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/SettingsPage.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/SettingsPage.jsx new file mode 100644 index 0000000000..ad0348b468 --- /dev/null +++ b/apps/spreadsheeteditor/mobile/src/view/settings/SettingsPage.jsx @@ -0,0 +1,121 @@ +import React, { useContext } from 'react'; +import { Page, Navbar, NavRight, Link, Icon, ListItem, List, f7 } from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import { Device } from '../../../../../common/mobile/utils/device'; +import { observer, inject } from "mobx-react"; +import { MainContext } from '../../page/main'; +import { SettingsContext } from '../../controller/settings/Settings'; + +const SettingsPage = inject('storeAppOptions')(observer(props => { + const { t } = useTranslation(); + const appOptions = props.storeAppOptions; + const mainContext = useContext(MainContext); + const settingsContext = useContext(SettingsContext); + const _t = t('View.Settings', {returnObjects: true}); + const navbar = + {Device.phone && {_t.textDone}} + ; + + const onOpenOptions = name => { + settingsContext.closeModal(); + mainContext.openOptions(name); + } + + let _isEdit = false, + _canDownload = false, + _canDownloadOrigin = false, + _canAbout = true, + _canHelp = true, + _canPrint = false, + _canFeedback = true; + + if (appOptions.isDisconnected) { + _isEdit = false; + if (!appOptions.enableDownload) + _canPrint = _canDownload = _canDownloadOrigin = false; + } else { + _isEdit = appOptions.isEdit; + _canDownload = appOptions.canDownload; + _canDownloadOrigin = appOptions.canDownloadOrigin; + _canPrint = appOptions.canPrint; + + if (appOptions.customization && appOptions.canBrandingExt) { + _canAbout = appOptions.customization.about !== false; + } + + if (appOptions.customization) { + _canHelp = appOptions.customization.help !== false; + _canFeedback = appOptions.customization.feedback !== false; + } + } + + return ( + + {navbar} + + {!props.inPopover && + + + + } + {window.matchMedia("(max-width: 359px)").matches ? + onOpenOptions('coauth')} className='no-indicator'> + + + : null} + {_isEdit && + + + + } + + + + {_isEdit && + { + if(Device.phone) { + onOpenOptions('history'); + } + }}> + + + } + {_canDownload && + + + + } + {_canDownloadOrigin && + + + + } + {_canPrint && + + + + } + + + + {_canHelp && + + + + } + {_canAbout && + + + + } + {_canFeedback && + + + + } + + + ) +})); + +export default SettingsPage; \ No newline at end of file diff --git a/build/package-lock.json b/build/package-lock.json index 2a78efdbc1..7252763709 100644 --- a/build/package-lock.json +++ b/build/package-lock.json @@ -3009,6 +3009,17 @@ "url": "https://github.com/fb55/domhandler?sponsor=1" } }, + "node_modules/domhandler/node_modules/domelementtype": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-2.3.0.tgz", + "integrity": "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==", + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/fb55" + } + ] + }, "node_modules/domutils": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.1.0.tgz", @@ -7489,6 +7500,11 @@ "triple-beam": "^1.3.0" } }, + "node_modules/logform/node_modules/ms": { + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz", + "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==" + }, "node_modules/longest": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz", @@ -7804,31 +7820,33 @@ "ansi-colors": "4.1.1", "browser-stdout": "1.3.1", "chokidar": "3.5.3", - "debug": "4.3.4", + "debug": "4.3.3", "diff": "5.0.0", "escape-string-regexp": "4.0.0", "find-up": "5.0.0", "glob": "7.2.0", + "growl": "1.10.5", "he": "1.2.0", "js-yaml": "4.1.0", "log-symbols": "4.1.0", - "minimatch": "5.0.1", + "minimatch": "4.2.1", "ms": "2.1.3", - "nanoid": "3.3.3", + "nanoid": "3.3.1", "serialize-javascript": "6.0.0", "strip-json-comments": "3.1.1", "supports-color": "8.1.1", - "workerpool": "6.2.1", + "which": "2.0.2", + "workerpool": "6.2.0", "yargs": "16.2.0", "yargs-parser": "20.2.4", "yargs-unparser": "2.0.0" }, "bin": { "_mocha": "bin/_mocha", - "mocha": "bin/mocha.js" + "mocha": "bin/mocha" }, "engines": { - "node": ">= 14.0.0" + "node": ">= 12.0.0" }, "funding": { "type": "opencollective", @@ -7898,12 +7916,12 @@ } }, "node_modules/mocha/node_modules/minimatch": { - "version": "5.0.1", - "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-5.0.1.tgz", - "integrity": "sha512-nLDxIFRyhDblz3qMuq+SoRZED4+miJ/G+tdDrjkkkRnjAsBexeGpgjLEQ0blJy7rHhR2b93rhQY4SvyWu9v03g==", + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-4.2.1.tgz", + "integrity": "sha512-9Uq1ChtSZO+Mxa/CL1eGizn2vRn3MlLgzhT0Iz8zaY8NdvxvB0d5QdPFmCKf7JKA9Lerx5vRrnwO03jsSfGG9g==", "dev": true, "dependencies": { - "brace-expansion": "^2.0.1" + "brace-expansion": "^1.1.7" }, "engines": { "node": ">=10" @@ -7947,9 +7965,9 @@ } }, "node_modules/nanoid": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.3.tgz", - "integrity": "sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==", + "version": "3.3.1", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz", + "integrity": "sha512-n6Vs/3KGyxPQd6uO0eH4Bv0ojGSUvuLlIHtC3Y0kEO23YRge8H9x1GCzLn28YX0H66pMkxuaeESFq4tKISKwdw==", "dev": true, "bin": { "nanoid": "bin/nanoid.cjs" @@ -14179,9 +14197,9 @@ "integrity": "sha512-gvVzJFlPycKc5dZN4yPkP8w7Dc37BtP1yczEneOb4uq34pXZcvrtRTmWV8W+Ume+XCxKgbjM+nevkyFPMybd4Q==" }, "node_modules/workerpool": { - "version": "6.2.1", - "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-6.2.1.tgz", - "integrity": "sha512-ILEIE97kDZvF9Wb9f6h5aXK4swSlKGUcOEGiIYb2OOu/IrDU9iwj0fD//SsA6E5ibwJxpEvhullJY4Sl4GcpAw==", + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/workerpool/-/workerpool-6.2.0.tgz", + "integrity": "sha512-Rsk5qQHJ9eowMH28Jwhe8HEbmdYDX4lwoMWshiCXugjtHqMD9ZbiqSDLxcsfdqsETPzVUtX5s1Z5kStiIM6l4A==", "dev": true }, "node_modules/wrap-ansi": { diff --git a/vendor/framework7-react/package.json b/vendor/framework7-react/package.json index e5be61907b..452b681d33 100644 --- a/vendor/framework7-react/package.json +++ b/vendor/framework7-react/package.json @@ -29,9 +29,9 @@ ], "dependencies": { "dom7": "^3.0.0", - "framework7": "^7.0.8", - "framework7-icons": "^3.0.1", - "framework7-react": "^7.0.8", + "framework7": "^8.0.5", + "framework7-icons": "^5.0.5", + "framework7-react": "^8.0.5", "i18next": "^23.4.1", "i18next-fetch-backend": "^5.0.2", "mobx": "^6.7.0", @@ -42,7 +42,7 @@ "react-dom": "^18.1.0", "react-i18next": "^13.0.3", "react-transition-group": "^4.4.5", - "swiper": "^8.2.4", + "swiper": "^9.3.1", "template7": "^1.4.2", "url": "^0.11.0" },