pengjunjie/web-apps
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/web-apps.git synced 2026-07-24 14:22:03 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #2345 from ONLYOFFICE/feature/Bug_50450

Browse Source 
Feature/bug 50450
This commit is contained in:
maxkadushkin
2023-04-18 14:12:51 +03:00
committed by GitHub
parent b3186e75da 80b920c813
commit af22af287c
6 changed files with 189 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
apps/spreadsheeteditor/mobile/locale/en.json
View File

@ -581,7 +581,13 @@
"textYen": "Yen",
"txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
"txtSortHigh2Low": "Sort Highest to Lowest",
"txtSortLow2High": "Sort Lowest to Highest"
"txtSortLow2High": "Sort Lowest to Highest",
"textCustomFormat": "Custom Format",
"textCreateFormat": "Create Format",
"textCreateCustomFormat": "Create Custom Format",
"textSave": "Save",
"textEnterFormat": "Enter Format",
"textCustomFormatWarning": "Please enter the custom number format carefully. Spreadsheet Editor does not check custom formats for errors that may affect the xlsx file."
},
"Settings": {
"advCSVOptions": "Choose CSV options",

49
apps/spreadsheeteditor/mobile/src/controller/edit/EditCell.jsx
View File

@ -1,13 +1,18 @@
import React, {Component} from 'react';
import { EditCell } from '../../view/edit/EditCell';
import { f7 } from 'framework7-react';
import {observer, inject} from "mobx-react";
import { Device } from '../../../../../common/mobile/utils/device';
class EditCellController extends Component {
constructor (props) {
super(props);
this.dateFormats = this.initFormats(Asc.c_oAscNumFormatType.Date, 38822);
this.timeFormats = this.initFormats(Asc.c_oAscNumFormatType.Time, 1.534);
this.initCustomFormats = this.initCustomFormats.bind(this);
this.setCustomFormat = this.setCustomFormat.bind(this);
this.onBorderStyle = this.onBorderStyle.bind(this);
this.initCustomFormats();
}
initFormats(type, exampleVal) {
@ -18,16 +23,47 @@ class EditCellController extends Component {
info.asc_setDecimalPlaces(0);
info.asc_setSeparator(false);
let formatsArr = api.asc_getFormatCells(info),
data = [];
formatsArr.forEach(function(item) {
data.push({value: item, displayValue: api.asc_getLocaleExample(item, exampleVal)});
});
const formatsArr = api.asc_getFormatCells(info);
const data = formatsArr.map(item => ({
value: item,
displayValue: api.asc_getLocaleExample(item, exampleVal)
}));
return data;
}
initCustomFormats() {
if(this.props.storeCellSettings.customFormats?.length) return;
const api = Common.EditorApi.get();
const storeCellSettings = this.props.storeCellSettings;
const info = new Asc.asc_CFormatCellsInfo();
const valSymbol = api.asc_getLocale();
info.asc_setType(Asc.c_oAscNumFormatType.Custom);
info.asc_setSymbol(valSymbol);
const formatsArr = api.asc_getFormatCells(info);
const data = formatsArr.map(item => ({
value: api.asc_convertNumFormat2NumFormatLocal(item),
format: item
}));
storeCellSettings.initCustomFormats(data);
}
setCustomFormat(value) {
const api = Common.EditorApi.get();
const format = api.asc_convertNumFormatLocal2NumFormat(value);
const storeCellSettings = this.props.storeCellSettings;
storeCellSettings.addCustomFormat({
value: api.asc_convertNumFormat2NumFormatLocal(format),
format
});
api.asc_setCellFormat(format);
}
toggleBold(value) {
const api = Common.EditorApi.get();
api.asc_setCellBold(value);
@ -217,6 +253,7 @@ class EditCellController extends Component {
dateFormats={this.dateFormats}
timeFormats={this.timeFormats}
onTextColorAuto={this.onTextColorAuto}
setCustomFormat={this.setCustomFormat}
/>
)
}

10
apps/spreadsheeteditor/mobile/src/less/icons-material.less
View File

@ -334,6 +334,16 @@
height: 22px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{fill-white}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>', @fill-white);
}
&.icon-add-custom-format {
width: 22px;
height: 22px;
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 22 22" fill="@{brandColor}"><g><path d="M21,12h-9v9h-2v-9H1v-2h9V1h2v9h9V12z"/></g></svg>', @brandColor);
}
&.icon-check {
width: 24px;
height: 24px;
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.1719L19.5938 5.57812L21 6.98438L9 18.9844L3.42188 13.4062L4.82812 12L9 16.1719Z" fill="@{fill-white}" /></svg>', @fill-white);
}
}
.tabbar {

13
apps/spreadsheeteditor/mobile/src/store/cellSettings.js
View File

@ -33,6 +33,9 @@ export class storeCellSettings {
changeBorderSize: action,
changeBorderStyle: action,
setAutoColor: action,
customFormats: observable,
initCustomFormats: action,
addCustomFormat: action
});
}
@ -68,6 +71,16 @@ export class storeCellSettings {
colorAuto = 'auto';
customFormats;
initCustomFormats(formatsArr) {
this.customFormats = formatsArr;
}
addCustomFormat(format) {
this.customFormats.push(format);
}
setAutoColor(value) {
this.colorAuto = value;
}

17
apps/spreadsheeteditor/mobile/src/view/edit/Edit.jsx
View File

@ -10,11 +10,11 @@ import EditShapeController from "../../controller/edit/EditShape";
import EditImageController from "../../controller/edit/EditImage";
import EditTextController from "../../controller/edit/EditText";
import EditChartController from "../../controller/edit/EditChart";
import { EditLinkController } from "../../controller/edit/EditLink";
// import { EditLinkController } from "../../controller/edit/EditLink";
import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape';
import { PageImageReplace, PageImageReorder, PageLinkSettings } from './EditImage';
import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell, CellStyle } from './EditCell';
import { TextColorCell, FillColorCell, CustomTextColorCell, CustomFillColorCell, FontsCell, TextFormatCell, TextOrientationCell, BorderStyleCell, BorderColorCell, CustomBorderColorCell, BorderSizeCell, PageFormatCell, PageAccountingFormatCell, PageCurrencyFormatCell, PageDateFormatCell, PageTimeFormatCell, CellStyle, PageCreationCustomFormat, CustomFormats } from './EditCell';
import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor } from './EditText';
import { PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartReorder, PageChartLayout, PageLegend, PageChartTitle, PageHorizontalAxisTitle, PageVerticalAxisTitle, PageHorizontalGridlines, PageVerticalGridlines, PageDataLabels, PageChartVerticalAxis, PageVertAxisCrosses, PageDisplayUnits, PageVertMajorType, PageVertMinorType, PageVertLabelPosition, PageChartHorizontalAxis, PageHorAxisCrosses, PageHorAxisPosition, PageHorMajorType, PageHorMinorType, PageHorLabelPosition } from './EditChart';
import { PageEditTypeLink, PageEditSheet } from './EditLink';
@ -279,7 +279,6 @@ const routes = [
},
// Link
{
path: '/edit-link-type/',
component: PageEditTypeLink
@ -287,9 +286,17 @@ const routes = [
{
path: '/edit-link-sheet',
component: PageEditSheet
},
// Add custom format
{
path: '/custom-format/',
component: CustomFormats
},
{
path: '/create-custom-format/',
component: PageCreationCustomFormat
}
];
const EmptyEditLayout = () => {

109
apps/spreadsheeteditor/mobile/src/view/edit/EditCell.jsx
View File

@ -1,6 +1,6 @@
import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle, Swiper, SwiperSlide} from 'framework7-react';
import {f7, f7router, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link, Toggle, Swiper, SwiperSlide, ListInput, Block} from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
import { ThemeColorPalette, CustomColorPicker } from '../../../../../common/mobile/lib/component/ThemeColorPalette.jsx';
@ -101,7 +101,9 @@ const EditCell = props => {
onCurrencyCellFormat: props.onCurrencyCellFormat,
onAccountingCellFormat: props.onAccountingCellFormat,
dateFormats: props.dateFormats,
timeFormats: props.timeFormats
timeFormats: props.timeFormats,
setCustomFormat: props.setCustomFormat,
onCellFormat: props.onCellFormat
}}>
{!isAndroid ?
<Icon slot="media" icon="icon-format-general"></Icon> : null
@ -865,6 +867,7 @@ const PageBorderSizeCell = props => {
const PageFormatCell = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const isIos = Device.ios;
return (
<Page>
@ -876,6 +879,12 @@ const PageFormatCell = props => {
}
</Navbar>
<List>
<ListItem link='/custom-format/' className='no-indicator' title={t('View.Edit.textCustomFormat')} routeProps={{
setCustomFormat: props.setCustomFormat,
onCellFormat: props.onCellFormat
}}>
<Icon slot="media" icon={isIos ? 'icon-plus' : 'icon-add-custom-format'}></Icon>
</ListItem>
<ListItem link='#' className='no-indicator' title={_t.textGeneral} onClick={() => props.onCellFormat('General')}>
<Icon slot="media" icon="icon-format-general"></Icon>
</ListItem>
@ -921,7 +930,94 @@ const PageFormatCell = props => {
)
}
const PageAccountingFormatCell = props => {
const PageCustomFormats = props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const storeCellSettings = props.storeCellSettings;
const customFormats = storeCellSettings.customFormats;
const [renderList, setRenderList] = useState(false);
useEffect(() => {
if (customFormats?.length) {
setRenderList(true);
}
}, [customFormats]);
const handleCellFormatClick = (format) => {
props.onCellFormat(format);
props.f7router.back();
};
return (
<Page>
<Navbar title={t('View.Edit.textCustomFormat')} backLink={_t.textBack}>
{Device.phone &&
<NavRight>
<Link icon='icon-expand-down' sheetClose></Link>
</NavRight>
}
</Navbar>
<List>
<ListItem title={t('View.Edit.textCreateCustomFormat')} link="/create-custom-format/" className='no-indicator' routeProps={{
setCustomFormat: props.setCustomFormat,
customFormats: props.customFormats
}}></ListItem>
</List>
{renderList && (
<List>
{customFormats.map((item, idx) => (
<ListItem
link='#'
className='no-indicator'
key={idx}
title={item.format}
value={item.value}
onClick={() => handleCellFormatClick(item.value)}
/>
))}
</List>
)}
</Page>
)
}
const PageCreationCustomFormat = observer(props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
const [formatValue, setFormatValue] = useState('');
const isIos = Device.ios;
const handleSetCustomFormat = (value) => {
props.setCustomFormat(value);
props.f7router.back();
}
return (
<Page>
<Navbar title={t('View.Edit.textCreateFormat')} backLink={_t.textBack}>
<NavRight>
<Link text={isIos ? t('View.Edit.textSave') : ''} icon={!isIos ? 'icon-check' : null} className={!formatValue && 'disabled'} onClick={() => handleSetCustomFormat(formatValue)}></Link>
</NavRight>
</Navbar>
<>
<List className="inputs-list">
<ListInput
label={!isIos ? t('View.Edit.textFormat') : null}
type="text"
placeholder={t('View.Edit.textEnterFormat')}
value={formatValue}
onInput={e => setFormatValue(e.target.value)}
/>
</List>
<Block>
<p>{t('View.Edit.textCustomFormatWarning')}</p>
</Block>
</>
</Page>
)
});
const PageAccountingFormatCell = observer(props => {
const { t } = useTranslation();
const _t = t('View.Edit', {returnObjects: true});
@ -953,7 +1049,7 @@ const PageAccountingFormatCell = props => {
</List>
</Page>
)
}
});
const PageCurrencyFormatCell = props => {
const { t } = useTranslation();
@ -1055,6 +1151,7 @@ const BorderColorCell = inject("storeCellSettings", "storePalette")(observer(Pag
const CustomBorderColorCell = inject("storeCellSettings", "storePalette")(observer(PageCustomBorderColorCell));
const BorderSizeCell = inject("storeCellSettings")(observer(PageBorderSizeCell));
const CellStyle = inject("storeCellSettings")(observer(PageCellStyle));
const CustomFormats = inject("storeCellSettings")(observer(PageCustomFormats));
export {
PageEditCell as EditCell,
@ -1074,5 +1171,7 @@ export {
PageCurrencyFormatCell,
PageDateFormatCell,
PageTimeFormatCell,
CellStyle
CellStyle,
CustomFormats,
PageCreationCustomFormat
};