[DE mobile] Add reader mode and change toolbar
This commit is contained in:
SergeyEzhin
parent
e9c2445afe
commit
e61d9657c0
|
|
@ -124,7 +124,7 @@ class MainController extends Component {
|
|||
docInfo = new Asc.asc_CDocInfo();
|
||||
docInfo.put_Id(data.doc.key);
|
||||
docInfo.put_Url(data.doc.url);
|
||||
docInfo.put_DirectUrl(data.doc.directUrl);
|
||||
// docInfo.put_DirectUrl(data.doc.directUrl);
|
||||
docInfo.put_Title(data.doc.title);
|
||||
docInfo.put_Format(data.doc.fileType);
|
||||
docInfo.put_VKey(data.doc.vkey);
|
||||
|
|
@ -214,6 +214,7 @@ class MainController extends Component {
|
|||
|
||||
this.applyMode(storeAppOptions);
|
||||
|
||||
this.api.asc_addRestriction(Asc.c_oAscRestrictionType.View);
|
||||
this.api.asc_LoadDocument();
|
||||
this.api.Resize();
|
||||
};
|
||||
|
|
|
|||
|
|
@ -3,11 +3,13 @@ import { inject, observer } from 'mobx-react';
|
|||
import { f7 } from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import ToolbarView from "../view/Toolbar";
|
||||
import {storeAppOptions} from "../store/appOptions";
|
||||
|
||||
const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'storeFocusObjects', 'storeToolbarSettings','storeDocumentInfo')(observer(props => {
|
||||
const {t} = useTranslation();
|
||||
const _t = t("Toolbar", { returnObjects: true });
|
||||
const appOptions = props.storeAppOptions;
|
||||
const isViewer = appOptions.isViewer;
|
||||
const isDisconnected = props.users.isDisconnected;
|
||||
const displayMode = props.storeReview.displayMode;
|
||||
const stateDisplayMode = displayMode == "final" || displayMode == "original" ? true : false;
|
||||
|
|
@ -124,6 +126,18 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto
|
|||
Common.Gateway.requestEditRights();
|
||||
};
|
||||
|
||||
const turnOffViewerMode = () => {
|
||||
const api = Common.EditorApi.get();
|
||||
appOptions.changeViewerMode();
|
||||
api.asc_addRestriction(Asc.c_oAscRestrictionType.None);
|
||||
}
|
||||
|
||||
const turnOnViewerMode = () => {
|
||||
const api = Common.EditorApi.get();
|
||||
appOptions.changeViewerMode();
|
||||
api.asc_addRestriction(Asc.c_oAscRestrictionType.View);
|
||||
}
|
||||
|
||||
return (
|
||||
<ToolbarView openOptions={props.openOptions}
|
||||
isEdit={appOptions.isEdit}
|
||||
|
|
@ -144,6 +158,9 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto
|
|||
showEditDocument={showEditDocument}
|
||||
onEditDocument={onEditDocument}
|
||||
isDisconnected={isDisconnected}
|
||||
isViewer={isViewer}
|
||||
turnOffViewerMode={turnOffViewerMode}
|
||||
turnOnViewerMode={turnOnViewerMode}
|
||||
/>
|
||||
)
|
||||
}));
|
||||
|
|
|
|||
|
|
@ -445,6 +445,13 @@
|
|||
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21 3H3V21H21V3ZM3 2H2V3V21V22H3H21H22V21V3V2H21H3ZM15.2929 8H9V7H16.5H17V7.5V15H16V8.70711L7.35355 17.3536L6.64645 16.6464L15.2929 8Z" fill="@{brandColor}"/></svg>');
|
||||
}
|
||||
|
||||
// Icon edit 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="@{brandColor}"/></svg>');
|
||||
}
|
||||
|
||||
// Comments
|
||||
&.icon-menu-comment {
|
||||
width: 30px;
|
||||
|
|
|
|||
|
|
@ -63,10 +63,15 @@
|
|||
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12C7 13.6569 5.65685 15 4 15C2.34315 15 1 13.6569 1 12C1 10.3431 2.34315 9 4 9C5.65685 9 7 10.3431 7 12ZM15 12C15 13.6569 13.6569 15 12 15C10.3431 15 9 13.6569 9 12C9 10.3431 10.3431 9 12 9C13.6569 9 15 10.3431 15 12ZM20 15C21.6569 15 23 13.6569 23 12C23 10.3431 21.6569 9 20 9C18.3431 9 17 10.3431 17 12C17 13.6569 18.3431 15 20 15Z" fill="@{toolbar-tab-normal}"/></svg>', @toolbar-tab-normal);
|
||||
}
|
||||
&.icon-search {
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{white}"><g><path d="M19.5,16.8L16,13.3c0.7-1.1,1.1-2.4,1.1-3.8C17,5.4,13.6,2,9.5,2S2,5.4,2,9.5S5.4,17,9.5,17c1.4,0,2.7-0.4,3.8-1.1l3.5,3.5c0.7,0.7,1.9,0.7,2.6,0C20.2,18.7,20.2,17.6,19.5,16.8z M9.5,15.3c-3.2,0-5.8-2.6-5.8-5.8s2.6-5.8,5.8-5.8s5.8,2.6,5.8,5.8S12.7,15.3,9.5,15.3z"/></g></svg>');
|
||||
}
|
||||
&.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
i.icon {
|
||||
|
|
|
|||
|
|
@ -92,6 +92,8 @@ class MainPage extends Component {
|
|||
|
||||
render() {
|
||||
const appOptions = this.props.storeAppOptions;
|
||||
// const isViewer = appOptions.isViewer;
|
||||
// console.log(isViewer);
|
||||
const config = appOptions.config;
|
||||
|
||||
let showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
|
||||
|
|
@ -112,10 +114,13 @@ class MainPage extends Component {
|
|||
window.open(`${__PUBLISHER_URL__}`, "_blank");
|
||||
}}><Icon icon="icon-logo"></Icon></div>}
|
||||
<Subnavbar>
|
||||
<Toolbar openOptions={this.handleClickToOpenOptions} closeOptions={this.handleOptionsViewClosed}/>
|
||||
<Toolbar openOptions={this.handleClickToOpenOptions}
|
||||
closeOptions={this.handleOptionsViewClosed}/>
|
||||
<Search useSuspense={false}/>
|
||||
</Subnavbar>
|
||||
</Navbar>
|
||||
|
||||
|
||||
{/* Page content */}
|
||||
|
||||
<View id="editor_sdk">
|
||||
|
|
|
|||
|
|
@ -23,11 +23,19 @@ export class storeAppOptions {
|
|||
canBranding: observable,
|
||||
|
||||
isDocReady: observable,
|
||||
changeDocReady: action
|
||||
changeDocReady: action,
|
||||
|
||||
isViewer: observable,
|
||||
changeViewerMode: action
|
||||
});
|
||||
}
|
||||
|
||||
isEdit = false;
|
||||
isViewer = true;
|
||||
|
||||
changeViewerMode() {
|
||||
this.isViewer = !this.isViewer;
|
||||
}
|
||||
|
||||
canViewComments = false;
|
||||
changeCanViewComments(value) {
|
||||
|
|
|
|||
|
|
@ -6,34 +6,38 @@ import EditorUIController from '../lib/patch'
|
|||
const ToolbarView = props => {
|
||||
const isDisconnected = props.isDisconnected;
|
||||
const disableEditBtn = props.isObjectLocked || props.stateDisplayMode || props.disabledEditControls || isDisconnected;
|
||||
const isViewer = props.isViewer;
|
||||
|
||||
return (
|
||||
<Fragment>
|
||||
<NavLeft>
|
||||
{props.isShowBack && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={props.onBack}></Link>}
|
||||
{Device.ios && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
|
||||
{!isViewer && <Link text="Ok" onClick={() => props.turnOnViewerMode()}></Link>}
|
||||
{(props.isShowBack && isViewer) && <Link className={`btn-doc-back${props.disabledControls && ' disabled'}`} icon='icon-back' onClick={props.onBack}></Link>}
|
||||
{(Device.ios && props.isEdit && !isViewer) && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
|
||||
disabledUndo: !props.isCanUndo || isDisconnected,
|
||||
disabledRedo: !props.isCanRedo || isDisconnected,
|
||||
onUndoClick: props.onUndo,
|
||||
onRedoClick: props.onRedo
|
||||
})}
|
||||
</NavLeft>
|
||||
{!Device.phone && <NavTitle>{props.docTitle}</NavTitle>}
|
||||
{(!Device.phone || isViewer) && <NavTitle>{props.docTitle}</NavTitle>}
|
||||
<NavRight>
|
||||
{Device.android && props.isEdit && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
|
||||
{(Device.android && props.isEdit && !isViewer) && EditorUIController.getUndoRedo && EditorUIController.getUndoRedo({
|
||||
disabledUndo: !props.isCanUndo,
|
||||
disabledRedo: !props.isCanRedo,
|
||||
onUndoClick: props.onUndo,
|
||||
onRedoClick: props.onRedo
|
||||
})}
|
||||
{props.showEditDocument &&
|
||||
{(props.showEditDocument && !isViewer) &&
|
||||
<Link className={props.disabledControls ? 'disabled' : ''} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link>
|
||||
}
|
||||
{props.isEdit && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({
|
||||
{props.isEdit && !isViewer && EditorUIController.getToolbarOptions && EditorUIController.getToolbarOptions({
|
||||
disabled: disableEditBtn || props.disabledControls,
|
||||
onEditClick: e => props.openOptions('edit'),
|
||||
onAddClick: e => props.openOptions('add')
|
||||
})}
|
||||
{ Device.phone ? null : <Link className={(props.disabledControls || props.readerMode) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
|
||||
{isViewer && <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>
|
||||
</NavRight>
|
||||
|
|
|
|||
Loading…
Reference in a new issue