diff --git a/apps/documenteditor/mobile/src/controller/Toolbar.jsx b/apps/documenteditor/mobile/src/controller/Toolbar.jsx index a35349716..633b318bf 100644 --- a/apps/documenteditor/mobile/src/controller/Toolbar.jsx +++ b/apps/documenteditor/mobile/src/controller/Toolbar.jsx @@ -129,14 +129,6 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto Common.Gateway.requestEditRights(); }; - const turnOffViewerMode = () => { - 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(); @@ -176,7 +168,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto onEditDocument={onEditDocument} isDisconnected={isDisconnected} isViewer={isViewer} - turnOffViewerMode={turnOffViewerMode} + // turnOffViewerMode={turnOffViewerMode} turnOnViewerMode={turnOnViewerMode} isMobileView={isMobileView} changeMobileView={changeMobileView} diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index 4158cf180..29da1b3da 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -344,3 +344,12 @@ transition: opacity 300ms; } +// FAB +.fab a { + background-color: @background-primary; + &:focus, &:focus-within, &:active, &.active-state { + background-color: @background-primary; + } +} + + diff --git a/apps/documenteditor/mobile/src/less/icons-ios.less b/apps/documenteditor/mobile/src/less/icons-ios.less index b587c8994..81641a237 100644 --- a/apps/documenteditor/mobile/src/less/icons-ios.less +++ b/apps/documenteditor/mobile/src/less/icons-ios.less @@ -454,12 +454,12 @@ &.icon-mobile-view { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } &.icon-standard-view { width: 24px; height: 24px; - .encoded-svg-mask(''); + .encoded-svg-mask(''); } // Comments diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less index 7768d66ea..2110bff3c 100644 --- a/apps/documenteditor/mobile/src/less/icons-material.less +++ b/apps/documenteditor/mobile/src/less/icons-material.less @@ -69,20 +69,15 @@ } // 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); + .encoded-svg-mask('', @toolbar-icons); } &.icon-standard-view { width: 24px; height: 24px; - .encoded-svg-mask('', @toolbar-icons); + .encoded-svg-mask('', @toolbar-icons); } &.icon-back-reader-mode { width: 24px; @@ -180,6 +175,11 @@ height: 24px; .encoded-svg-mask('', @brandColor); } + &.icon-edit-mode { + width: 24px; + height: 24px; + .encoded-svg-mask('', @brandColor); + } // Edit &.icon-text-align-left { diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index fb1ab6285..75c6e4ee4 100644 --- a/apps/documenteditor/mobile/src/page/main.jsx +++ b/apps/documenteditor/mobile/src/page/main.jsx @@ -1,8 +1,7 @@ import React, { Component } from 'react'; import { CSSTransition } from 'react-transition-group'; -import { f7, Link } from 'framework7-react'; -import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react'; +import { f7, Link, Fab, Icon, FabButtons, FabButton, Page, View, Navbar, Subnavbar } from 'framework7-react'; import { observer, inject } from "mobx-react"; import { withTranslation } from 'react-i18next'; import EditOptions from '../view/edit/Edit'; @@ -98,93 +97,110 @@ class MainPage extends Component { }; - render() { - const { t } = this.props; - const appOptions = this.props.storeAppOptions; - const isMobileView = appOptions.isMobileView; - const config = appOptions.config; + turnOffViewerMode() { + const api = Common.EditorApi.get(); + const appOptions = this.props.storeAppOptions; - let showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo))); - if ( !Object.keys(config).length ) { - showLogo = !/&(?:logo)=/.test(window.location.search); - } + appOptions.changeViewerMode(); + api.asc_removeRestriction(Asc.c_oAscRestrictionType.View) + api.asc_addRestriction(Asc.c_oAscRestrictionType.None); + }; - const showPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo)); - if ( $$('.skl-container').length ) { - $$('.skl-container').remove(); - } + render() { + const { t } = this.props; + const appOptions = this.props.storeAppOptions; + const storeToolbarSettings = this.props.storeToolbarSettings; + const isDisconnected = this.props.users.isDisconnected; + const isViewer = appOptions.isViewer; + const isMobileView = appOptions.isMobileView; + const disabledControls = storeToolbarSettings.disabledControls; + const disabledSettings = storeToolbarSettings.disabledSettings; + const config = appOptions.config; - return ( - - {/* Top Navbar */} - - {showLogo && appOptions.canBranding !== undefined &&
{ - window.open(`${__PUBLISHER_URL__}`, "_blank"); - }}>
} - - - - - + let showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo))); + if (!Object.keys(config).length) { + showLogo = !/&(?:logo)=/.test(window.location.search); + } + + const showPlaceholder = !appOptions.isDocReady && (!config.customization || !(config.customization.loaderName || config.customization.loaderLogo)); + if ($$('.skl-container').length) { + $$('.skl-container').remove(); + } + + return ( + + {/* Top Navbar */} + + {showLogo && appOptions.canBranding !== undefined &&
{ + window.open(`${__PUBLISHER_URL__}`, "_blank"); + }}>
} + + + + + - {/* Page content */} + {/* Page content */} - - + + - {showPlaceholder ? -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
: null - } + {showPlaceholder ? +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
: null + } - {/* { + {/* { Device.phone ? null : } */} - + { !this.state.editOptionsVisible ? null : - + } { !this.state.addOptionsVisible ? null : - + } {/*onclosed={this.handleOptionsViewClosed.bind(this, 'settings')}*/} { !this.state.settingsVisible ? null : - + } { !this.state.collaborationVisible ? null : - + } { - !this.state.navigationVisible ? null : - + !this.state.navigationVisible ? null : + } { - + } - {appOptions.isDocReady && } - - ) - } + {isViewer && !disabledSettings && !disabledControls && !isDisconnected && + this.turnOffViewerMode()}> + + + + } + {appOptions.isDocReady && } + + ) + } } -export default withTranslation()(inject("storeAppOptions")(observer(MainPage))); \ No newline at end of file +export default withTranslation()(inject("storeAppOptions", "storeToolbarSettings", "users")(observer(MainPage))); \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/view/Toolbar.jsx b/apps/documenteditor/mobile/src/view/Toolbar.jsx index 902fcb977..208b99cb4 100644 --- a/apps/documenteditor/mobile/src/view/Toolbar.jsx +++ b/apps/documenteditor/mobile/src/view/Toolbar.jsx @@ -61,7 +61,6 @@ const ToolbarView = props => { onEditClick: e => props.openOptions('edit'), onAddClick: e => props.openOptions('add') })} - {isViewer && isAvailableExt && props.isEdit && props.turnOffViewerMode()}>} {Device.phone ? null : } {props.displayCollaboration && window.matchMedia("(min-width: 360px)").matches ? props.openOptions('coauth')}> : null} props.openOptions('settings')}>