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

Added column, row resize

Browse Source
This commit is contained in:
Danis
2025-08-14 18:26:09 +04:00
parent 2a41227199
commit b27b7ea0ea
4 changed files with 99 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/documenteditor/mobile/locale/en.json
View File

@ -325,6 +325,9 @@
"textLastColumn": "Last Column",
"textLeader": "Leader",
"textLetterSpacing": "Letter spacing",
"txtWidth": "Width",
"txtHeight": "Height",
"textCellSize": "Rows & columns size",
"textLevels": "Levels",
"textLineSpacing": "Line spacing",
"textLink": "Link",

40
apps/documenteditor/mobile/src/controller/edit/EditTable.jsx
View File

@ -214,6 +214,44 @@ class EditTableController extends Component {
api.tblApply(properties);
}
onChangeRowHeight (height, isDecrement) {
const api = Common.EditorApi.get();
const properties = new Asc.CTableProp();
let step, newHeight;
const maxValue = Common.Utils.Metric.fnRecalcFromMM(55.88);
if (Common.Utils.Metric.getCurrentMetric() === Common.Utils.Metric.c_MetricUnits.pt) {
step = 1;
} else {
step = 0.1;
}
if (isDecrement) {
newHeight = Math.max(-1, height - step)
} else {
newHeight = Math.min(maxValue, height + step);
}
properties.put_RowHeight(Common.Utils.Metric.fnRecalcToMM(newHeight));
api.tblApply(properties);
}
onChangeColumnWidth (width, isDecrement) {
const api = Common.EditorApi.get();
const properties = new Asc.CTableProp();
let step, newWidth;
const maxValue = Common.Utils.Metric.fnRecalcFromMM(55.88);
if (Common.Utils.Metric.getCurrentMetric() === Common.Utils.Metric.c_MetricUnits.pt) {
step = 1;
} else {
step = 0.1;
}
if (isDecrement) {
newWidth = Math.max(-1, width - step)
} else {
newWidth = Math.min(maxValue, width + step);
}
properties.put_ColumnWidth(Common.Utils.Metric.fnRecalcToMM(newWidth));
api.tblApply(properties);
}
render () {
return (
<EditTable onRemoveTable={this.onRemoveTable}
@ -235,6 +273,8 @@ class EditTableController extends Component {
onFillColor={this.onFillColor}
onBorderTypeClick={this.onBorderTypeClick}
onGetTableStylesPreviews = {this.onGetTableStylesPreviews}
onChangeRowHeight = {this.onChangeRowHeight}
onChangeColumnWidth = {this.onChangeColumnWidth}
/>
)
}

6
apps/documenteditor/mobile/src/store/tableSettings.js
View File

@ -73,6 +73,12 @@ export class storeTableSettings {
getWrapDistance (tableObject) {
return tableObject.get_TablePaddings().get_Top();
}
getRowHeight (tableObject) {
return tableObject.get_RowHeight()
}
getColumnWidth (tableObject) {
return tableObject.get_ColumnWidth()
}
// Fill color
getFillColor (tableObject) {

54
apps/documenteditor/mobile/src/view/edit/EditTable.jsx
View File

@ -1,6 +1,6 @@
import React, {Fragment, useState, useEffect} from 'react';
import {observer, inject} from "mobx-react";
import {Page, Navbar, NavRight, List, ListItem, ListButton, BlockTitle, SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab} from 'framework7-react';
import {Page, Navbar, NavRight, List, ListItem, ListButton, BlockTitle, SkeletonBlock, Range, Toggle, Icon, Link, Tabs, Tab, Segmented, Button} from 'framework7-react';
import { f7 } from 'framework7-react';
import { useTranslation } from 'react-i18next';
import {Device} from '../../../../../common/mobile/utils/device';
@ -37,13 +37,17 @@ const PageTableOptions = props => {
const metricText = Common.Utils.Metric.getCurrentMetricName();
const storeFocusObjects = props.storeFocusObjects;
const tableObject = storeFocusObjects.tableObject;
const storeTableSettings = props.storeTableSettings;
const storeTableSettings = props.storeTableSettings;
let distance, isRepeat, isResize;
let distance, isRepeat, isResize, columnWidth, rowHeight, displayRowHeight, displayColumnWidth;
if (tableObject) {
distance = Common.Utils.Metric.fnRecalcFromMM(storeTableSettings.getCellMargins(tableObject));
isRepeat = storeTableSettings.getRepeatOption(tableObject);
isResize = storeTableSettings.getResizeOption(tableObject);
rowHeight = Common.Utils.Metric.fnRecalcFromMM(storeTableSettings.getRowHeight(tableObject));
columnWidth = Common.Utils.Metric.fnRecalcFromMM(storeTableSettings.getColumnWidth(tableObject));
displayRowHeight = Number(Common.Utils.Metric.fnRecalcFromMM(storeTableSettings.getRowHeight(tableObject)).toFixed(2));
displayColumnWidth = Number(Common.Utils.Metric.fnRecalcFromMM(storeTableSettings.getColumnWidth(tableObject)).toFixed(2));
}
const [stateDistance, setDistance] = useState(distance);
@ -74,6 +78,46 @@ const PageTableOptions = props => {
<Toggle checked={isResize} onToggleChange={() => {props.onOptionResize(!isResize)}}/>
</ListItem>
</List>
<BlockTitle>{_t.textCellSize}</BlockTitle>
<List>
<ListItem title={_t.txtHeight}>
{!isAndroid && <div slot='after-start'>{displayRowHeight + ' ' + metricText}</div>}
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {props.onChangeRowHeight(rowHeight, true)}}>
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
: ' - '}
</Button>
{isAndroid && <label>{displayRowHeight + ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {props.onChangeRowHeight(rowHeight, false)}}>
{isAndroid ?
<SvgIcon symbolId={IconExpandUp.id} className={'icon icon-svg'} />
: ' + '}
</Button>
</Segmented>
</div>
</ListItem>
<ListItem title={_t.txtWidth}>
{!isAndroid && <div slot='after-start'>{displayColumnWidth + ' ' + metricText}</div>}
<div slot='after'>
<Segmented>
<Button outline className='decrement item-link' onClick={() => {props.onChangeColumnWidth(columnWidth, true)}}>
{isAndroid ?
<SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
: ' - '}
</Button>
{isAndroid && <label>{displayColumnWidth + ' ' + metricText}</label>}
<Button outline className='increment item-link' onClick={() => {props.onChangeColumnWidth(columnWidth, false)}}>
{isAndroid ?
<SvgIcon symbolId={IconExpandUp.id} className={'icon icon-svg'} />
: ' + '}
</Button>
</Segmented>
</div>
</ListItem>
</List>
<BlockTitle>{_t.textCellMargins}</BlockTitle>
<List>
<ListItem>
@ -632,7 +676,9 @@ const EditTable = props => {
<ListItem title={_t.textTableOptions} link='/edit-table-options/' routeProps={{
onCellMargins: props.onCellMargins,
onOptionResize: props.onOptionResize,
onOptionRepeat: props.onOptionRepeat
onOptionRepeat: props.onOptionRepeat,
onChangeRowHeight: props.onChangeRowHeight,
onChangeColumnWidth: props.onChangeColumnWidth
}}></ListItem>
<ListItem title={_t.textStyle} link='/edit-table-style/' routeProps={{
onStyleClick: props.onStyleClick,