[DE mobile] Added fab for turning off reader mode
This commit is contained in:
SergeyEzhin
parent
099d789ed0
commit
ec48177e38
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -344,3 +344,12 @@
|
|||
transition: opacity 300ms;
|
||||
}
|
||||
|
||||
// FAB
|
||||
.fab a {
|
||||
background-color: @background-primary;
|
||||
&:focus, &:focus-within, &:active, &.active-state {
|
||||
background-color: @background-primary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -69,11 +69,6 @@
|
|||
}
|
||||
|
||||
// Reader mode
|
||||
&.icon-edit-mode {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.5002 6.3L23.0002 4.8C23.0002 4.8 22.8002 3.6 22.1002 2.9C21.4002 2.1 20.2002 2 20.2002 2L18.7002 3.5L21.5002 6.3ZM20.3 6.30001L7.1 19.4L5.6 17.9L18.8 4.80001L18.1 4.10001L4.5 17.7L4 21L1 21V22H23V21L4 21L7.3 20.5L20.9 6.90001L20.3 6.30001Z" fill="@{toolbar-icons}"/></svg>', @toolbar-icons);
|
||||
}
|
||||
&.icon-mobile-view {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
|
|
@ -180,6 +175,11 @@
|
|||
height: 24px;
|
||||
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 3H17C17.5523 3 18 3.44772 18 4V20C18 20.5523 17.5523 21 17 21H7C6.44772 21 6 20.5523 6 20V4C6 3.44772 6.44772 3 7 3ZM5 4C5 2.89543 5.89543 2 7 2H17C18.1046 2 19 2.89543 19 4V20C19 21.1046 18.1046 22 17 22H7C5.89543 22 5 21.1046 5 20V4ZM9.5 19C9.22386 19 9 19.2239 9 19.5C9 19.7761 9.22386 20 9.5 20H14.5C14.7761 20 15 19.7761 15 19.5C15 19.2239 14.7761 19 14.5 19H9.5Z" fill="@{brandColor}"/></svg>', @brandColor);
|
||||
}
|
||||
&.icon-edit-mode {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill-rule="evenodd" clip-rule="evenodd" d="M21.5002 6.3L23.0002 4.8C23.0002 4.8 22.8002 3.6 22.1002 2.9C21.4002 2.1 20.2002 2 20.2002 2L18.7002 3.5L21.5002 6.3ZM20.3 6.30001L7.1 19.4L5.6 17.9L18.8 4.80001L18.1 4.10001L4.5 17.7L4 21L1 21V22H23V21L4 21L7.3 20.5L20.9 6.90001L20.3 6.30001Z" fill="@{brandColor}"/></svg>', @brandColor);
|
||||
}
|
||||
|
||||
// Edit
|
||||
&.icon-text-align-left {
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<Page name="home" className={`editor${ showLogo ? ' page-with-logo' : ''}`}>
|
||||
{/* Top Navbar */}
|
||||
<Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
|
||||
{showLogo && appOptions.canBranding !== undefined && <div className="main-logo" onClick={() => {
|
||||
window.open(`${__PUBLISHER_URL__}`, "_blank");
|
||||
}}><Icon icon="icon-logo"></Icon></div>}
|
||||
<Subnavbar>
|
||||
<Toolbar openOptions={this.handleClickToOpenOptions}
|
||||
closeOptions={this.handleOptionsViewClosed}/>
|
||||
<Search useSuspense={false}/>
|
||||
</Subnavbar>
|
||||
</Navbar>
|
||||
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 (
|
||||
<Page name="home" className={`editor${showLogo ? ' page-with-logo' : ''}`}>
|
||||
{/* Top Navbar */}
|
||||
<Navbar id='editor-navbar' className={`main-navbar${showLogo ? ' navbar-with-logo' : ''}`}>
|
||||
{showLogo && appOptions.canBranding !== undefined && <div className="main-logo" onClick={() => {
|
||||
window.open(`${__PUBLISHER_URL__}`, "_blank");
|
||||
}}><Icon icon="icon-logo"></Icon></div>}
|
||||
<Subnavbar>
|
||||
<Toolbar openOptions={this.handleClickToOpenOptions}
|
||||
closeOptions={this.handleOptionsViewClosed}/>
|
||||
<Search useSuspense={false}/>
|
||||
</Subnavbar>
|
||||
</Navbar>
|
||||
|
||||
|
||||
{/* Page content */}
|
||||
{/* Page content */}
|
||||
|
||||
<View id="editor_sdk">
|
||||
</View>
|
||||
<View id="editor_sdk">
|
||||
</View>
|
||||
|
||||
{showPlaceholder ?
|
||||
<div className="doc-placeholder-container">
|
||||
<div className="doc-placeholder">
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
</div>
|
||||
</div> : null
|
||||
}
|
||||
{showPlaceholder ?
|
||||
<div className="doc-placeholder-container">
|
||||
<div className="doc-placeholder">
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
<div className="line"></div>
|
||||
</div>
|
||||
</div> : null
|
||||
}
|
||||
|
||||
{/* {
|
||||
{/* {
|
||||
Device.phone ? null : <SearchSettings />
|
||||
} */}
|
||||
<SearchSettings useSuspense={false} />
|
||||
<SearchSettings useSuspense={false}/>
|
||||
{
|
||||
!this.state.editOptionsVisible ? null :
|
||||
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />
|
||||
<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')}/>
|
||||
}
|
||||
{
|
||||
!this.state.addOptionsVisible ? null :
|
||||
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')} showOptions={this.state.addShowOptions} />
|
||||
<AddOptions onclosed={this.handleOptionsViewClosed.bind(this, 'add')}
|
||||
showOptions={this.state.addShowOptions}/>
|
||||
}
|
||||
{/*onclosed={this.handleOptionsViewClosed.bind(this, 'settings')}*/}
|
||||
{
|
||||
!this.state.settingsVisible ? null :
|
||||
<Settings openOptions={this.handleClickToOpenOptions.bind(this)} closeOptions={this.handleOptionsViewClosed.bind(this)} />
|
||||
<Settings openOptions={this.handleClickToOpenOptions.bind(this)}
|
||||
closeOptions={this.handleOptionsViewClosed.bind(this)}/>
|
||||
}
|
||||
{
|
||||
!this.state.collaborationVisible ? null :
|
||||
<Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} page={this.state.collaborationPage} />
|
||||
<Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')}
|
||||
page={this.state.collaborationPage}/>
|
||||
}
|
||||
{
|
||||
!this.state.navigationVisible ? null :
|
||||
<NavigationController onclosed={this.handleOptionsViewClosed.bind(this, 'navigation')} />
|
||||
!this.state.navigationVisible ? null :
|
||||
<NavigationController onclosed={this.handleOptionsViewClosed.bind(this, 'navigation')}/>
|
||||
}
|
||||
{
|
||||
<CSSTransition
|
||||
|
|
@ -194,13 +210,20 @@ class MainPage extends Component {
|
|||
mountOnEnter
|
||||
unmountOnExit
|
||||
>
|
||||
<Snackbar text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")} />
|
||||
<Snackbar
|
||||
text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")}/>
|
||||
</CSSTransition>
|
||||
}
|
||||
{appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />}
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
{isViewer && !disabledSettings && !disabledControls && !isDisconnected &&
|
||||
<Fab position="right-bottom" slot="fixed" onClick={() => this.turnOffViewerMode()}>
|
||||
<Icon icon="icon-edit-mode"/>
|
||||
</Fab>
|
||||
|
||||
}
|
||||
{appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)}/>}
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default withTranslation()(inject("storeAppOptions")(observer(MainPage)));
|
||||
export default withTranslation()(inject("storeAppOptions", "storeToolbarSettings", "users")(observer(MainPage)));
|
||||
|
|
@ -61,7 +61,6 @@ const ToolbarView = props => {
|
|||
onEditClick: e => props.openOptions('edit'),
|
||||
onAddClick: e => props.openOptions('add')
|
||||
})}
|
||||
{isViewer && isAvailableExt && props.isEdit && <Link icon='icon-edit-mode' className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} href={false} onClick={() => props.turnOffViewerMode()}></Link>}
|
||||
{Device.phone ? null : <Link className={(props.disabledControls || props.readerMode) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link>}
|
||||
{props.displayCollaboration && window.matchMedia("(min-width: 360px)").matches ? <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => props.openOptions('coauth')}></Link> : null}
|
||||
<Link className={(props.disabledSettings || props.disabledControls || isDisconnected) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={e => props.openOptions('settings')}></Link>
|
||||
|
|
|
|||
Loading…
Reference in a new issue