diff --git a/apps/common/mobile/lib/view/collaboration/Collaboration.jsx b/apps/common/mobile/lib/view/collaboration/Collaboration.jsx index b2cc1b0139..713b19e086 100644 --- a/apps/common/mobile/lib/view/collaboration/Collaboration.jsx +++ b/apps/common/mobile/lib/view/collaboration/Collaboration.jsx @@ -89,6 +89,8 @@ const PageCollaboration = inject('storeAppOptions', 'users')(observer(props => { const { t } = useTranslation(); const _t = t('Common.Collaboration', {returnObjects: true}); const appOptions = props.storeAppOptions; + const isViewer = appOptions.isViewer; + return ( @@ -112,7 +114,7 @@ const PageCollaboration = inject('storeAppOptions', 'users')(observer(props => { } - {window.editorType === 'de' && (appOptions.canReview || appOptions.canViewReview) && + {(window.editorType === 'de' && (appOptions.canReview || appOptions.canViewReview) && !isViewer) && diff --git a/apps/common/mobile/lib/view/collaboration/Comments.jsx b/apps/common/mobile/lib/view/collaboration/Comments.jsx index d8927fca72..b6a51a636b 100644 --- a/apps/common/mobile/lib/view/collaboration/Comments.jsx +++ b/apps/common/mobile/lib/view/collaboration/Comments.jsx @@ -636,7 +636,7 @@ const ViewComments = inject("storeComments", "storeAppOptions", "storeReview")(o const _t = t('Common.Collaboration', {returnObjects: true}); const isAndroid = Device.android; const displayMode = storeReview.displayMode; - + const isViewer = storeAppOptions.isViewer; const viewMode = !storeAppOptions.canComments; const comments = storeComments.groupCollectionFilter || storeComments.collectionComments; const isEdit = storeAppOptions.isEdit || storeAppOptions.isRestrictedEdit; @@ -678,7 +678,7 @@ const ViewComments = inject("storeComments", "storeAppOptions", "storeReview")(o {isEdit && !viewMode &&
{(comment.editable && displayMode === 'markup' && !wsProps?.Objects) &&
{onResolveComment(comment);}}>
} - {(displayMode === 'markup' && !wsProps?.Objects) && + {(displayMode === 'markup' && !wsProps?.Objects && !isViewer) &&
{setComment(comment); openActionComment(true);}}> @@ -708,7 +708,7 @@ const ViewComments = inject("storeComments", "storeAppOptions", "storeReview")(o
{reply.date}
- {isEdit && !viewMode && reply.editable && + {isEdit && !viewMode && reply.editable && !isViewer &&
{setComment(comment); setReply(reply); openActionReply(true);}} diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index d96bf81fb2..c88d8d8980 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -669,12 +669,14 @@ "txtScheme6": "Concourse", "txtScheme7": "Equity", "txtScheme8": "Flow", - "txtScheme9": "Foundry" + "txtScheme9": "Foundry", + "textMobileView": "Mobile View" }, "Toolbar": { "dlgLeaveMsgText": "You have unsaved changes. Click 'Stay on this Page' to wait for autosave. Click 'Leave this Page' to discard all the unsaved changes.", "dlgLeaveTitleText": "You leave the application", "leaveButtonText": "Leave this Page", - "stayButtonText": "Stay on this page" + "stayButtonText": "Stay on this page", + "textOk": "OK" } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/controller/Search.jsx b/apps/documenteditor/mobile/src/controller/Search.jsx index e474674004..a337ac6a4d 100644 --- a/apps/documenteditor/mobile/src/controller/Search.jsx +++ b/apps/documenteditor/mobile/src/controller/Search.jsx @@ -25,6 +25,7 @@ class SearchSettings extends SearchSettingsView { const _t = t("Settings", {returnObjects: true}); const storeAppOptions = this.props.storeAppOptions; const isEdit = storeAppOptions.isEdit; + const isViewer = storeAppOptions.isViewer; const storeReview = this.props.storeReview; const displayMode = storeReview.displayMode; @@ -39,7 +40,7 @@ class SearchSettings extends SearchSettingsView { this.onFindReplaceClick('find')} /> - {isEdit && displayMode === 'markup' ? [ + {isEdit && displayMode === 'markup' && !isViewer ? [ this.onFindReplaceClick('replace')} />, { const api = Common.EditorApi.get(); + appOptions.changeViewerMode(); + api.asc_removeRestriction(Asc.c_oAscRestrictionType.View) api.asc_addRestriction(Asc.c_oAscRestrictionType.None); } const turnOnViewerMode = () => { const api = Common.EditorApi.get(); + appOptions.changeViewerMode(); api.asc_addRestriction(Asc.c_oAscRestrictionType.View); } + const changeMobileView = () => { + const api = Common.EditorApi.get(); + + appOptions.changeMobileView(); + api.ChangeReaderMode(); + } + return ( ) })); diff --git a/apps/documenteditor/mobile/src/controller/settings/Settings.jsx b/apps/documenteditor/mobile/src/controller/settings/Settings.jsx index c55c73d670..6ba5bb7a68 100644 --- a/apps/documenteditor/mobile/src/controller/settings/Settings.jsx +++ b/apps/documenteditor/mobile/src/controller/settings/Settings.jsx @@ -27,18 +27,18 @@ const Settings = props => { } }; - const onReaderMode = () => { - const appOptions = props.storeAppOptions; - appOptions.changeReaderMode(); - - Common.EditorApi.get().ChangeReaderMode(); - - if (Device.phone) { - setTimeout(() => { - closeModal(); - }, 1); - } - }; + // const onReaderMode = () => { + // const appOptions = props.storeAppOptions; + // appOptions.changeReaderMode(); + // + // Common.EditorApi.get().ChangeReaderMode(); + // + // if (Device.phone) { + // setTimeout(() => { + // closeModal(); + // }, 1); + // } + // }; const onPrint = () => { const api = Common.EditorApi.get(); @@ -94,15 +94,28 @@ const Settings = props => { }, 0); }; + const onChangeMobileView = () => { + const api = Common.EditorApi.get() + const appOptions = props.storeAppOptions; + + appOptions.changeMobileView(); + api.ChangeReaderMode(); + + if (Device.phone) { + closeModal(); + } + } + return }; diff --git a/apps/documenteditor/mobile/src/less/app-ios.less b/apps/documenteditor/mobile/src/less/app-ios.less index edff70bc3b..3b394e462e 100644 --- a/apps/documenteditor/mobile/src/less/app-ios.less +++ b/apps/documenteditor/mobile/src/less/app-ios.less @@ -53,5 +53,10 @@ } } } + + // Reader mode + .back-reader-mode { + margin-left: 10px; + } } diff --git a/apps/documenteditor/mobile/src/less/icons-ios.less b/apps/documenteditor/mobile/src/less/icons-ios.less index cbac03fd81..b54e9eba12 100644 --- a/apps/documenteditor/mobile/src/less/icons-ios.less +++ b/apps/documenteditor/mobile/src/less/icons-ios.less @@ -445,12 +445,22 @@ .encoded-svg-mask(''); } - // Icon edit mode + // Reader mode &.icon-edit-mode { width: 24px; height: 24px; .encoded-svg-mask(''); } + &.icon-mobile-view { + width: 24px; + height: 24px; + .encoded-svg-mask('') + } + &.icon-standard-view { + width: 24px; + height: 24px; + .encoded-svg-mask(''); + } // Comments &.icon-menu-comment { diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less index dda869d85b..c06e90443c 100644 --- a/apps/documenteditor/mobile/src/less/icons-material.less +++ b/apps/documenteditor/mobile/src/less/icons-material.less @@ -67,11 +67,28 @@ height: 24px; .encoded-svg-mask(''); } + + // Reader mode &.icon-edit-mode { width: 24px; height: 24px; .encoded-svg-mask('', @toolbar-icons); } + &.icon-mobile-view { + width: 24px; + height: 24px; + .encoded-svg-mask('', @toolbar-icons); + } + &.icon-standard-view { + width: 24px; + height: 24px; + .encoded-svg-mask('', @toolbar-icons); + } + &.icon-back-reader-mode { + width: 24px; + height: 24px; + .encoded-svg-mask('', @toolbar-icons); + } } } i.icon { @@ -157,8 +174,14 @@ .encoded-svg-mask(''); } + // Mobile View + &.icon-mobile-view { + width: 24px; + height: 24px; + .encoded-svg-mask('', @brandColor); + } + // Edit - &.icon-text-align-left { width: 22px; height: 22px; diff --git a/apps/documenteditor/mobile/src/store/appOptions.js b/apps/documenteditor/mobile/src/store/appOptions.js index b31c533bd5..096c608348 100644 --- a/apps/documenteditor/mobile/src/store/appOptions.js +++ b/apps/documenteditor/mobile/src/store/appOptions.js @@ -26,13 +26,22 @@ export class storeAppOptions { changeDocReady: action, isViewer: observable, - changeViewerMode: action + changeViewerMode: action, + + isMobileView: observable, + changeMobileView: action }); } isEdit = false; - isViewer = true; + isMobileView = false; + changeMobileView() { + this.isMobileView = !this.isMobileView; + } + + + isViewer = true; changeViewerMode() { this.isViewer = !this.isViewer; } diff --git a/apps/documenteditor/mobile/src/view/Toolbar.jsx b/apps/documenteditor/mobile/src/view/Toolbar.jsx index 7d32c01078..25026add19 100644 --- a/apps/documenteditor/mobile/src/view/Toolbar.jsx +++ b/apps/documenteditor/mobile/src/view/Toolbar.jsx @@ -1,17 +1,20 @@ import React, {Fragment} from 'react'; +import { useTranslation } from 'react-i18next'; import {NavLeft, NavRight, NavTitle, Link, Icon} from 'framework7-react'; import { Device } from '../../../../common/mobile/utils/device'; import EditorUIController from '../lib/patch' const ToolbarView = props => { + const { t } = useTranslation(); const isDisconnected = props.isDisconnected; const disableEditBtn = props.isObjectLocked || props.stateDisplayMode || props.disabledEditControls || isDisconnected; const isViewer = props.isViewer; + const isMobileView = props.isMobileView; return ( - {!isViewer && props.turnOnViewerMode()}>} + {!isViewer && props.turnOnViewerMode()}>} {(props.isShowBack && isViewer) && } {(Device.ios && props.isEdit && !isViewer) && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({ disabledUndo: !props.isCanUndo || isDisconnected, @@ -28,6 +31,7 @@ const ToolbarView = props => { onUndoClick: props.onUndo, onRedoClick: props.onRedo })} + {isViewer && props.changeMobileView()}>} {(props.showEditDocument && !isViewer) && } diff --git a/apps/documenteditor/mobile/src/view/settings/Settings.jsx b/apps/documenteditor/mobile/src/view/settings/Settings.jsx index 2a6ece70f8..2a0d911fd4 100644 --- a/apps/documenteditor/mobile/src/view/settings/Settings.jsx +++ b/apps/documenteditor/mobile/src/view/settings/Settings.jsx @@ -75,6 +75,7 @@ const routes = [ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props => { const { t } = useTranslation(); const _t = t('Settings', {returnObjects: true}); + const appOptions = props.storeAppOptions; const storeReview = props.storeReview; const displayMode = storeReview.displayMode; const navbar = @@ -105,11 +106,13 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props => } // set mode - const appOptions = props.storeAppOptions; + const isViewer = appOptions.isViewer; + const isMobileView = appOptions.isMobileView; + let _isEdit = false, _canDownload = false, _canDownloadOrigin = false, - _canReader = false, + // _canReader = false, _canAbout = true, _canHelp = true, _canPrint = false; @@ -119,7 +122,7 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props => _canPrint = _canDownload = _canDownloadOrigin = false; } else { _isEdit = appOptions.isEdit; - _canReader = !appOptions.isEdit && !appOptions.isRestrictedEdit && appOptions.canReader; + // _canReader = !appOptions.isEdit && !appOptions.isRestrictedEdit && appOptions.canReader; _canDownload = appOptions.canDownload; _canDownloadOrigin = appOptions.canDownloadOrigin; _canPrint = appOptions.canPrint; @@ -136,8 +139,9 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props => {navbar} + {/*disabled={appOptions.readerMode ? true : false}*/} {!props.inPopover && - + } @@ -154,26 +158,35 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props => : null} - {_canReader && - {/*ToDo*/} - - {props.onReaderMode()}}/> - - } + {/*{_canReader &&*/} + {/* /!*ToDo*!/*/} + {/* */} + {/* {props.onReaderMode()}}/>*/} + {/* */} + {/*}*/} {Device.sailfish && _isEdit && {props.onOrthographyCheck()}} className='no-indicator' link="#"> } - {_isEdit && + {!isViewer && + + + props.onChangeMobileView()} /> + + } + {(_isEdit && !isViewer) && } - - - + {!isViewer && + + + + } {_canDownload && @@ -227,10 +240,10 @@ class SettingsView extends Component { return ( show_popover ? this.props.onclosed()}> - + : this.props.onclosed()}> - + ) }