Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE mobile] Add reader mode and print handlers in settings

Browse source
This commit is contained in:
JuliaSvinareva 2021-04-13 17:41:24 +03:00
parent cd1aa44b5c
commit 437fed37c0
6 changed files with 82 additions and 38 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
apps/documenteditor/mobile/src/controller/Toolbar.jsx
View file

@ -13,6 +13,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(prop
const displayMode = props.storeReview.displayMode;
const stateDisplayMode = displayMode == "final" || displayMode == "original" ? true : false;
const displayCollaboration = props.users.hasEditUsers || appOptions.canViewComments || appOptions.canReview || appOptions.canViewReview;
const readerMode = appOptions.readerMode;
useEffect(() => {
const onDocumentReady = () => {
@ -188,6 +189,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview')(prop
disabledEditControls={disabledEditControls}
disabledSettings={disabledSettings}
displayCollaboration={displayCollaboration}
readerMode={readerMode}
/>
)
});

58
apps/documenteditor/mobile/src/controller/settings/Settings.jsx Normal file
View file

@ -0,0 +1,58 @@
import React, {useEffect} from '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 SettingsView from "../../view/settings/Settings";
const Settings = props => {
useEffect(() => {
if ( Device.phone ) {
f7.popup.open('.settings-popup');
} else {
f7.popover.open('#settings-popover', '#btn-settings');
}
return () => {
// component will unmount
}
});
const onviewclosed = () => {
if ( props.onclosed )
props.onclosed();
};
const closeModal = () => {
if (Device.phone) {
f7.sheet.close('.settings-popup');
} else {
f7.popover.close('#settings-popover');
}
};
const onReaderMode = () => {
const appOptions = props.storeAppOptions;
appOptions.changeReaderMode();
Common.EditorApi.get().ChangeReaderMode();
if (Device.phone) {
setTimeout(() => {
closeModal();
}, 1);
}
}
const onPrint = () => {
setTimeout(() => {
Common.EditorApi.get().asc_Print();
}, 1);
closeModal();
}
return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} onReaderMode={onReaderMode} onPrint={onPrint}/>
};
export default inject("storeAppOptions")(observer(Settings));

2
apps/documenteditor/mobile/src/page/main.jsx
View file

@ -6,7 +6,7 @@ import { inject } from "mobx-react";
import EditOptions from '../view/edit/Edit';
import AddOptions from '../view/add/Add';
import Settings from '../view/settings/Settings';
import Settings from '../controller/settings/Settings';
import Collaboration from '../../../../common/mobile/lib/view/collaboration/Collaboration.jsx'
import { Device } from '../../../../common/mobile/utils/device'
import { Search, SearchSettings } from '../controller/Search';

10
apps/documenteditor/mobile/src/store/appOptions.js
View file

@ -11,7 +11,10 @@ export class storeAppOptions {
setCanViewReview: action,
lostEditingRights: observable,
changeEditingRights: action
changeEditingRights: action,
readerMode: observable,
changeReaderMode: action
});
}
@ -24,6 +27,11 @@ export class storeAppOptions {
this.lostEditingRights = value;
}
readerMode = false;
changeReaderMode () {
this.readerMode = !this.readerMode;
}
config = {};
setConfigOptions (config) {
this.config = config;

2
apps/documenteditor/mobile/src/view/Toolbar.jsx
View file

@ -23,7 +23,7 @@ const ToolbarView = props => {
onEditClick: e => props.openOptions('edit'),
onAddClick: e => props.openOptions('add')
})}
{ Device.phone ? null : <Link className={props.disabledControls && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
{ Device.phone ? null : <Link className={(props.disabledControls || props.readerMode) && 'disabled'} icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
{props.displayCollaboration && <Link className={props.disabledControls && 'disabled'} id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => props.openOptions('coauth')}></Link>}
<Link className={(props.disabledSettings || props.disabledControls) && 'disabled'} id='btn-settings' icon='icon-settings' href={false} onClick={e => props.openOptions('settings')}></Link>
</NavRight>

46
apps/documenteditor/mobile/src/view/settings/Settings.jsx
View file

@ -1,6 +1,6 @@
import React, {Component, useEffect} from 'react';
import {View,Page,Navbar,NavRight,Link,Popup,Popover,Icon,ListItem,List} from 'framework7-react';
import { withTranslation } from 'react-i18next';
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';
@ -57,8 +57,8 @@ const routes = [
];
const SettingsList = inject("storeAppOptions")( observer( withTranslation()( props => {
const {t} = props;
const SettingsList = inject("storeAppOptions")(observer(props => {
const { t } = useTranslation();
const _t = t('Settings', {returnObjects: true});
const navbar = <Navbar title={_t.textSettings}>
{!props.inPopover && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
@ -113,14 +113,14 @@ const SettingsList = inject("storeAppOptions")( observer( withTranslation()( pro
{navbar}
<List>
{!props.inPopover &&
<ListItem title={!_isEdit ? _t.textFind : _t.textFindAndReplace} link="#" searchbarEnable='.searchbar' onClick={closeModal}>
<ListItem title={!_isEdit ? _t.textFind : _t.textFindAndReplace} link='#' searchbarEnable='.searchbar' onClick={closeModal} className='no-indicator'>
<Icon slot="media" icon="icon-search"></Icon>
</ListItem>
}
{_canReader &&
<ListItem title={_t.textReaderMode}> {/*ToDo*/}
<Icon slot="media" icon="icon-reader"></Icon>
<Toggle checked={false} onToggleChange={() => {}}/>
<Toggle checked={appOptions.readerMode} onChange={() => {props.onReaderMode()}}/>
</ListItem>
}
{/*ToDo: settings-orthography*/}
@ -143,7 +143,7 @@ const SettingsList = inject("storeAppOptions")( observer( withTranslation()( pro
</ListItem>
}
{_canPrint &&
<ListItem title={_t.textPrint}>
<ListItem title={_t.textPrint} onClick={props.onPrint} link='#' className='no-indicator'>
<Icon slot="media" icon="icon-print"></Icon>
</ListItem>
}
@ -164,7 +164,7 @@ const SettingsList = inject("storeAppOptions")( observer( withTranslation()( pro
</Page>
</View>
)
})));
}));
class SettingsView extends Component {
constructor(props) {
@ -182,37 +182,13 @@ class SettingsView extends Component {
return (
show_popover ?
<Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
<SettingsList inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
<SettingsList inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint}/>
</Popover> :
<Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
<SettingsList onOptionClick={this.onoptionclick} />
<SettingsList onOptionClick={this.onoptionclick} onReaderMode={this.props.onReaderMode} onPrint={this.props.onPrint}/>
</Popup>
)
}
}
const Settings = props => {
useEffect(() => {
if ( Device.phone )
f7.popup.open('.settings-popup');
else f7.popover.open('#settings-popover', '#btn-settings');
return () => {
// component will unmount
}
});
const onviewclosed = () => {
if ( props.onclosed )
props.onclosed();
};
// if ( Device.phone ) {
// return <SettingsPopup onclosed={onviewclosed} />
// }
return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} />
};
export default Settings;
export default SettingsView;