[SSE mobile] Corrected Spreadsheet Settings, added Download, Print
This commit is contained in:
SergeyEzhin
parent
aeb2daacab
commit
df81b70d06
|
|
@ -242,7 +242,21 @@
|
|||
"textTop": "Top",
|
||||
"textRight": "Right",
|
||||
"textCustomSize": "Custom Size",
|
||||
"textSpreadsheetFormats": "Spreadsheet Formats"
|
||||
"textSpreadsheetFormats": "Spreadsheet Formats",
|
||||
"textDownloadAs": "Download As",
|
||||
"warnDownloadAs": "If you continue saving in this format all features except the text will be lost.<br>Are you sure you want to continue?",
|
||||
"notcriticalErrorTitle": "Warning",
|
||||
"txtEncoding": "Encoding",
|
||||
"txtDelimiter": "Delimiter",
|
||||
"txtSpace": "Space",
|
||||
"txtTab": "Tab",
|
||||
"advCSVOptions": "Choose CSV Options",
|
||||
"advDRMOptions": "Protected File",
|
||||
"advDRMEnterPassword": "You password please:",
|
||||
"advDRMPassword": "Password",
|
||||
"closeButtonText": "Close File",
|
||||
"txtProtected": "Once you enter the password and open the file, the current password to the file will be reset",
|
||||
"textCancel": "Cancel"
|
||||
}
|
||||
},
|
||||
"Common": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,168 @@
|
|||
import React, { Component } from "react";
|
||||
import Download from "../../view/settings/Download";
|
||||
import { Device } from '../../../../../common/mobile/utils/device';
|
||||
import { withTranslation, useTranslation } from 'react-i18next';
|
||||
import { f7 } from 'framework7-react';
|
||||
|
||||
class DownloadController extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.onSaveFormat = this.onSaveFormat.bind(this);
|
||||
}
|
||||
|
||||
closeModal() {
|
||||
if (Device.phone) {
|
||||
f7.sheet.close('.settings-popup', true);
|
||||
} else {
|
||||
f7.popover.close('#settings-popover');
|
||||
}
|
||||
}
|
||||
|
||||
onSaveFormat(format) {
|
||||
const api = Common.EditorApi.get();
|
||||
const { t } = this.props;
|
||||
const _t = t("View.Settings", {returnObjects: true});
|
||||
|
||||
this.closeModal();
|
||||
|
||||
if (format) {
|
||||
if (format == Asc.c_oAscFileType.CSV) {
|
||||
f7.dialog.confirm(
|
||||
_t.warnDownloadAs,
|
||||
_t.notcriticalErrorTitle,
|
||||
function () {
|
||||
onAdvancedOptions(Asc.c_oAscAdvancedOptionsID.CSV, api.asc_getAdvancedOptions(), 2, new Asc.asc_CDownloadOptions(format), _t)
|
||||
}
|
||||
)
|
||||
} else {
|
||||
api.asc_DownloadAs(new Asc.asc_CDownloadOptions(format));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Download onSaveFormat={this.onSaveFormat} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const DownloadWithTranslation = withTranslation()(DownloadController);
|
||||
|
||||
const onAdvancedOptions = (type, advOptions, mode, formatOptions, _t, canRequestClose) => {
|
||||
const api = Common.EditorApi.get();
|
||||
|
||||
if (type == Asc.c_oAscAdvancedOptionsID.CSV) {
|
||||
let picker;
|
||||
const pages = [];
|
||||
const pagesName = [];
|
||||
|
||||
for (let page of advOptions.asc_getCodePages()) {
|
||||
pages.push(page.asc_getCodePage());
|
||||
pagesName.push(page.asc_getCodePageName());
|
||||
}
|
||||
|
||||
// me.onLongActionEnd(Asc.c_oAscAsyncActionType.BlockInteraction, LoadingDocument);
|
||||
|
||||
const buttons = [];
|
||||
|
||||
if (mode === 2) {
|
||||
buttons.push({
|
||||
text: _t.textCancel
|
||||
});
|
||||
}
|
||||
|
||||
buttons.push({
|
||||
text: 'OK',
|
||||
bold: true,
|
||||
onClick: function() {
|
||||
let encoding = picker.cols[0].value,
|
||||
delimiter = picker.cols[1].value;
|
||||
|
||||
if (mode == 2) {
|
||||
formatOptions && formatOptions.asc_setAdvancedOptions(new Asc.asc_CTextOptions(encoding, delimiter));
|
||||
api.asc_DownloadAs(formatOptions);
|
||||
} else {
|
||||
api.asc_setAdvancedOptions(type, new Asc.asc_CTextOptions(encoding, delimiter));
|
||||
}
|
||||
|
||||
//if (!me._isDocReady) {
|
||||
//me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
|
||||
//}
|
||||
}
|
||||
});
|
||||
|
||||
const dialog = f7.dialog.create({
|
||||
title: _t.advCSVOptions,
|
||||
text: '',
|
||||
content:
|
||||
'<div class="content-block small-picker" style="padding: 0; margin: 20px 0 0;">' +
|
||||
'<div class="row">' +
|
||||
'<div class="col-50" style="text-align: left;">' + _t.txtEncoding + '</div>' +
|
||||
'<div class="col-50" style="text-align: right;">' + _t.txtDelimiter + '</div>' +
|
||||
'</div>' +
|
||||
'<div id="txt-encoding" class="small"></div>' +
|
||||
'</div>',
|
||||
buttons: buttons
|
||||
}).open();
|
||||
|
||||
const recommendedSettings = advOptions.asc_getRecommendedSettings();
|
||||
|
||||
dialog.on('opened', () => {
|
||||
picker = f7.picker.create({
|
||||
containerEl: document.getElementById('txt-encoding'),
|
||||
cols: [{
|
||||
textAlign: 'left',
|
||||
values: pages,
|
||||
displayValues: pagesName
|
||||
},{
|
||||
textAlign: 'right',
|
||||
width: 120,
|
||||
values: [4, 2, 3, 1, 5],
|
||||
displayValues: [',', ';', ':', _t.txtTab, _t.txtSpace]
|
||||
}],
|
||||
toolbar: false,
|
||||
rotateEffect: true,
|
||||
value: [
|
||||
recommendedSettings && recommendedSettings.asc_getCodePage(),
|
||||
(recommendedSettings && recommendedSettings.asc_getDelimiter()) ? recommendedSettings.asc_getDelimiter() : 4
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
} else if (type == Asc.c_oAscAdvancedOptionsID.DRM) {
|
||||
//me.onLongActionEnd(Asc.c_oAscAsyncActionType.BlockInteraction, LoadingDocument);
|
||||
const buttons = [{
|
||||
text: 'OK',
|
||||
bold: true,
|
||||
onClick: function () {
|
||||
const password = document.getElementById('modal-password').value;
|
||||
api.asc_setAdvancedOptions(type, new Asc.asc_CDRMAdvancedOptions(password));
|
||||
//if (!me._isDocReady) {
|
||||
//me.onLongActionBegin(Asc.c_oAscAsyncActionType['BlockInteraction'], LoadingDocument);
|
||||
//}
|
||||
}
|
||||
}];
|
||||
|
||||
if (canRequestClose)
|
||||
buttons.push({
|
||||
text: _t.closeButtonText,
|
||||
onClick: function () {
|
||||
Common.Gateway.requestClose();
|
||||
}
|
||||
});
|
||||
|
||||
f7.dialog.create({
|
||||
title: _t.advDRMOptions,
|
||||
text: _t.txtProtected,
|
||||
content:
|
||||
'<div class="input-field"><input type="password" name="modal-password" placeholder="' + _t.advDRMPassword + '" id="modal-password"></div>',
|
||||
buttons: buttons
|
||||
}).open();
|
||||
}
|
||||
};
|
||||
|
||||
export {
|
||||
DownloadWithTranslation,
|
||||
onAdvancedOptions
|
||||
}
|
||||
|
|
@ -35,10 +35,10 @@ class SpreadsheetSettingsController extends Component {
|
|||
|
||||
this.localMarginProps = props.asc_getPageMargins();
|
||||
|
||||
let left = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getLeft()).toFixed(2)),
|
||||
top = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getTop()).toFixed(2)),
|
||||
right = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getRight()).toFixed(2)),
|
||||
bottom = parseFloat(Common.Utils.Metric.fnRecalcFromMM(this.localMarginProps.asc_getBottom()).toFixed(2));
|
||||
let left = this.localMarginProps.asc_getLeft(),
|
||||
top = this.localMarginProps.asc_getTop(),
|
||||
right = this.localMarginProps.asc_getRight(),
|
||||
bottom = this.localMarginProps.asc_getBottom();
|
||||
|
||||
return {left, top, right, bottom};
|
||||
}
|
||||
|
|
@ -60,7 +60,6 @@ class SpreadsheetSettingsController extends Component {
|
|||
}
|
||||
|
||||
api.asc_changePageMargins(changeProps.asc_getLeft(), changeProps.asc_getRight(), changeProps.asc_getTop(), changeProps.asc_getBottom(), api.asc_getActiveWorksheetIndex());
|
||||
// this.initSpreadsheetMargins();
|
||||
}
|
||||
|
||||
onOrientationChange(value) {
|
||||
|
|
|
|||
40
apps/spreadsheeteditor/mobile/src/view/settings/Download.jsx
Normal file
40
apps/spreadsheeteditor/mobile/src/view/settings/Download.jsx
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
import React from 'react';
|
||||
import { Page, Navbar, List, ListItem, BlockTitle, Icon } from "framework7-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const Download = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t("View.Settings", { returnObjects: true });
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textDownload} backLink={_t.textBack} />
|
||||
<BlockTitle>{_t.textDownloadAs}</BlockTitle>
|
||||
<List>
|
||||
<ListItem title="XLSX" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.XLSX)}>
|
||||
<Icon slot="media" icon="icon-format-xlsx"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title="PDF" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.PDF)}>
|
||||
<Icon slot="media" icon="icon-format-pdf"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title="PDF/A" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.PDFA)}>
|
||||
<Icon slot="media" icon="icon-format-pdfa"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title="ODS" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.ODS)}>
|
||||
<Icon slot="media" icon="icon-format-ods"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title="CSV" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.CSV)}>
|
||||
<Icon slot="media" icon="icon-format-csv"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title="XLTX" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.XLTX)}>
|
||||
<Icon slot="media" icon="icon-format-xltx"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title="OTS" onClick={() => props.onSaveFormat(Asc.c_oAscFileType.OTS)}>
|
||||
<Icon slot="media" icon="icon-format-ots"></Icon>
|
||||
</ListItem>
|
||||
</List>
|
||||
</Page>
|
||||
)
|
||||
}
|
||||
|
||||
export default Download;
|
||||
|
|
@ -4,6 +4,7 @@ import { withTranslation } from 'react-i18next';
|
|||
import {f7} from 'framework7-react';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
import SpreadsheetSettingsController from '../../controller/settings/SpreadsheetSettings.jsx';
|
||||
import {DownloadWithTranslation} from '../../controller/settings/Download.jsx';
|
||||
import {SpreadsheetColorSchemes, SpreadsheetFormats, SpreadsheetMargins} from './SpreadsheetSettings.jsx';
|
||||
|
||||
const routes = [
|
||||
|
|
@ -26,6 +27,10 @@ const routes = [
|
|||
{
|
||||
path: '/margins/',
|
||||
component: SpreadsheetMargins
|
||||
},
|
||||
{
|
||||
path: '/download/',
|
||||
component: DownloadWithTranslation
|
||||
}
|
||||
];
|
||||
|
||||
|
|
@ -42,6 +47,40 @@ const SettingsList = withTranslation()(props => {
|
|||
props.onOptionClick(page)
|
||||
};
|
||||
|
||||
const closeModal = () => {
|
||||
if (Device.phone) {
|
||||
f7.sheet.close('.settings-popup', true);
|
||||
} else {
|
||||
f7.popover.close('#settings-popover');
|
||||
}
|
||||
};
|
||||
|
||||
const onPrint = () => {
|
||||
closeModal();
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_Print();
|
||||
};
|
||||
|
||||
const showHelp = () => {
|
||||
// let url = '{{HELP_URL}}';
|
||||
let url = 'https://helpcenter.onlyoffice.com';
|
||||
|
||||
if (url.charAt(url.length-1) !== '/') {
|
||||
url += '/';
|
||||
}
|
||||
|
||||
if (Device.sailfish || Device.android) {
|
||||
url+='mobile-applications/documents/mobile-web-editors/android/index.aspx';
|
||||
}
|
||||
else {
|
||||
url+='mobile-applications/documents/mobile-web-editors/ios/index.aspx';
|
||||
}
|
||||
|
||||
closeModal();
|
||||
window.open(url, "_blank");
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<View style={props.style} stackPages={true} routes={routes}>
|
||||
<Page>
|
||||
|
|
@ -58,16 +97,16 @@ const SettingsList = withTranslation()(props => {
|
|||
<ListItem title={_t.textApplicationSettings} link="#">
|
||||
<Icon slot="media" icon="icon-app-settings"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textDownload} link="#">
|
||||
<ListItem title={_t.textDownload} link="#" onClick={onoptionclick.bind(this, "/download/")}>
|
||||
<Icon slot="media" icon="icon-download"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textPrint}>
|
||||
<ListItem title={_t.textPrint} onClick={onPrint}>
|
||||
<Icon slot="media" icon="icon-print"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textSpreadsheetInfo} link="#" onClick={onoptionclick.bind(this, "/spreadsheet-info/")}>
|
||||
<Icon slot="media" icon="icon-info"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textHelp} link="#">
|
||||
<ListItem title={_t.textHelp} link="#" onClick={showHelp}>
|
||||
<Icon slot="media" icon="icon-help"></Icon>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textAbout} link="#">
|
||||
|
|
|
|||
|
|
@ -85,7 +85,6 @@ const PageSpreadsheetMargins = props => {
|
|||
const _t = t('View.Settings', {returnObjects: true});
|
||||
const metricText = Common.Utils.Metric.getMetricName(Common.Utils.Metric.getCurrentMetric());
|
||||
const margins = props.initSpreadsheetMargins();
|
||||
console.log(margins);
|
||||
|
||||
const [stateTop, setTop] = useState(margins.top);
|
||||
const [stateBottom, setBottom] = useState(margins.bottom);
|
||||
|
|
@ -128,13 +127,13 @@ const PageSpreadsheetMargins = props => {
|
|||
<Navbar title={_t.textMargins} backLink={_t.textBack} />
|
||||
<List>
|
||||
<ListItem title={_t.textTop}>
|
||||
{!isAndroid && <div slot='after-start'>{parseFloat(stateTop.toFixed(2)) + ' ' + metricText}</div>}
|
||||
{!isAndroid && <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}</div>}
|
||||
<div slot='after'>
|
||||
<Segmented>
|
||||
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('top', true)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
||||
</Button>
|
||||
{isAndroid && <label>{parseFloat(stateTop.toFixed(2)) + ' ' + metricText}</label>}
|
||||
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateTop).toFixed(2)) + ' ' + metricText}</label>}
|
||||
<Button outline className='increment item-link' onClick={() => {onChangeMargins('top', false)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
||||
</Button>
|
||||
|
|
@ -142,13 +141,13 @@ const PageSpreadsheetMargins = props => {
|
|||
</div>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textBottom}>
|
||||
{!isAndroid && <div slot='after-start'>{parseFloat(stateBottom.toFixed(2)) + ' ' + metricText}</div>}
|
||||
{!isAndroid && <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2)) + ' ' + metricText}</div>}
|
||||
<div slot='after'>
|
||||
<Segmented>
|
||||
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('bottom', true)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
||||
</Button>
|
||||
{isAndroid && <label>{parseFloat(stateBottom.toFixed(2)) + ' ' + metricText}</label>}
|
||||
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateBottom).toFixed(2)) + ' ' + metricText}</label>}
|
||||
<Button outline className='increment item-link' onClick={() => {onChangeMargins('bottom', false)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
||||
</Button>
|
||||
|
|
@ -156,13 +155,13 @@ const PageSpreadsheetMargins = props => {
|
|||
</div>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textLeft}>
|
||||
{!isAndroid && <div slot='after-start'>{parseFloat(stateLeft.toFixed(2)) + ' ' + metricText}</div>}
|
||||
{!isAndroid && <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2)) + ' ' + metricText}</div>}
|
||||
<div slot='after'>
|
||||
<Segmented>
|
||||
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('left', true)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
||||
</Button>
|
||||
{isAndroid && <label>{parseFloat(stateLeft.toFixed(2)) + ' ' + metricText}</label>}
|
||||
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateLeft).toFixed(2)) + ' ' + metricText}</label>}
|
||||
<Button outline className='increment item-link' onClick={() => {onChangeMargins('left', false)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
||||
</Button>
|
||||
|
|
@ -170,13 +169,13 @@ const PageSpreadsheetMargins = props => {
|
|||
</div>
|
||||
</ListItem>
|
||||
<ListItem title={_t.textRight}>
|
||||
{!isAndroid && <div slot='after-start'>{parseFloat(stateRight.toFixed(2)) + ' ' + metricText}</div>}
|
||||
{!isAndroid && <div slot='after-start'>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2)) + ' ' + metricText}</div>}
|
||||
<div slot='after'>
|
||||
<Segmented>
|
||||
<Button outline className='decrement item-link' onClick={() => {onChangeMargins('right', true)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-down"></Icon> : ' - '}
|
||||
</Button>
|
||||
{isAndroid && <label>{parseFloat(stateRight.toFixed(2)) + ' ' + metricText}</label>}
|
||||
{isAndroid && <label>{parseFloat(Common.Utils.Metric.fnRecalcFromMM(stateRight).toFixed(2)) + ' ' + metricText}</label>}
|
||||
<Button outline className='increment item-link' onClick={() => {onChangeMargins('right', false)}}>
|
||||
{isAndroid ? <Icon icon="icon-expand-up"></Icon> : ' + '}
|
||||
</Button>
|
||||
|
|
|
|||
Loading…
Reference in a new issue