diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index f0991d942..05a34c263 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -333,7 +333,24 @@ "textTu": "Tu", "textType": "Type", "textWe": "We", - "textWrap": "Wrap" + "textWrap": "Wrap", + "textTableOfCont": "Table Of Cont.", + "textPageNumbers": "Page Numbers", + "textSimple": "Simple", + "textRightAlign": "Right Align", + "textLeader": "Leader", + "textStructure": "Structure", + "textRefresh": "Refresh", + "textLevels": "Levels", + "textRemoveTableContent": "Remove table of content", + "textCurrent": "Current", + "textOnline": "Online", + "textClassic": "Classic", + "textDistinctive": "Distinctive", + "textCentered": "Centered", + "textFormal": "Formal", + "textStandard": "Standard", + "textModern": "Modern" }, "Error": { "convertationTimeoutText": "Conversion timeout exceeded.", diff --git a/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx b/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx new file mode 100644 index 000000000..4c49d171c --- /dev/null +++ b/apps/documenteditor/mobile/src/controller/edit/EditTableContents.jsx @@ -0,0 +1,56 @@ +import React, {Component} from 'react'; +import { f7 } from 'framework7-react'; +import {Device} from '../../../../../common/mobile/utils/device'; +import {observer, inject} from "mobx-react"; + +import { EditTableContents } from '../../view/edit/EditTableContents'; + +class EditTableContentsController extends Component { + constructor (props) { + super(props); + } + + onStyle(value, type) { + const api = Common.EditorApi.get(); + const propsTableContents = api.asc_GetTableOfContentsPr(); + propsTableContents.put_StylesType(value); + + if (type === 1) { + let checked = (value !== Asc.c_oAscTOFStylesType.Centered); + propsTableContents.put_RightAlignTab(checked); + // checked && properties.put_TabLeader(this.cmbLeader.getValue()); + } + console.log(propsTableContents); + api.asc_SetTableOfContentsPr(propsTableContents); + } + + onTableContentsUpdate(type, currentTOC) { + const api = Common.EditorApi.get(); + let props = api.asc_GetTableOfContentsPr(currentTOC); + + if (props) { + if (currentTOC && props) + currentTOC = props.get_InternalClass(); + api.asc_UpdateTableOfContents(type == 'pages', currentTOC); + } + }; + + onRemoveTableContents(currentTOC) { + const api = Common.EditorApi.get(); + currentTOC = !!currentTOC; + let props = api.asc_GetTableOfContentsPr(currentTOC); + + currentTOC = (currentTOC && props) ? props.get_InternalClass() : undefined; + api.asc_RemoveTableOfContents(currentTOC); + } + + render () { + return ( + + ) + } +} + +export default EditTableContentsController; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/store/mainStore.js b/apps/documenteditor/mobile/src/store/mainStore.js index 1c1d2cc29..a090a4cc7 100644 --- a/apps/documenteditor/mobile/src/store/mainStore.js +++ b/apps/documenteditor/mobile/src/store/mainStore.js @@ -16,6 +16,7 @@ import {storePalette} from "./palette"; import {storeReview} from '../../../../common/mobile/lib/store/review'; import {storeComments} from "../../../../common/mobile/lib/store/comments"; import {storeToolbarSettings} from "./toolbar"; +import {storeTableContent} from "./tableContent"; export const stores = { storeAppOptions: new storeAppOptions(), @@ -34,6 +35,7 @@ export const stores = { storePalette: new storePalette(), storeReview: new storeReview(), storeComments: new storeComments(), - storeToolbarSettings: new storeToolbarSettings() + storeToolbarSettings: new storeToolbarSettings(), + storeTableContent: new storeTableContent() }; diff --git a/apps/documenteditor/mobile/src/store/tableContent.js b/apps/documenteditor/mobile/src/store/tableContent.js new file mode 100644 index 000000000..0f0d14b3a --- /dev/null +++ b/apps/documenteditor/mobile/src/store/tableContent.js @@ -0,0 +1,67 @@ +import {action, observable, computed, makeObservable} from 'mobx'; + +export class storeTableContent { + constructor() { + makeObservable(this, { + type: observable, + changeType: action, + options: observable, + initSettings: action + }); + } + + type = 0; + + changeType(value) { + this.type = value; + } + + options = { + contentWidth: 500, + height: 455 + }; + + initSettings(props) { + // if (props) { + // // var value = props.get_Hyperlink(); + // // this.chLinks.setValue((value !== null && value !== undefined) ? value : 'indeterminate', true); + // let value = props.get_StylesType(); + + // this.cmbStyles.setValue((value!==null) ? value : Asc.c_oAscTOCStylesType.Current); + // value = props.get_ShowPageNumbers(); + // this.chPages.setValue((value !== null && value !== undefined) ? value : 'indeterminate'); + // if (this.chPages.getValue() == 'checked') { + // value = props.get_RightAlignTab(); + // this.chAlign.setValue((value !== null && value !== undefined) ? value : 'indeterminate'); + // if (this.chAlign.getValue() == 'checked') { + // value = props.get_TabLeader(); + // (value!==undefined) && this.cmbLeader.setValue(value); + // } + // } else { + // (this.type==1) && (this.cmbStyles.getValue()==Asc.c_oAscTOFStylesType.Centered) && this.chAlign.setValue(false); + // } + // } + + // (this.type==1) ? this.fillTOFProps(props) : this.fillTOCProps(props); + + // // Show Pages is always true when window is opened + // this._originalProps = (props) ? props : new Asc.CTableOfContentsPr(); + // if (!props) { + // if (this.type==1) { + // this._originalProps.put_Caption(this.textFigure); + // this._originalProps.put_IncludeLabelAndNumber(this.chFullCaption.getValue() == 'checked'); + // } else { + // this._originalProps.put_OutlineRange(this.startLevel, this.endLevel); + // } + // this._originalProps.put_Hyperlink(this.chLinks.getValue() == 'checked'); + // this._originalProps.put_ShowPageNumbers(this.chPages.getValue() == 'checked'); + // if (this.chPages.getValue() == 'checked') { + // this._originalProps.put_RightAlignTab(this.chAlign.getValue() == 'checked'); + // this._originalProps.put_TabLeader(this.cmbLeader.getValue()); + // } + // } + + // (this.type==1) ? this.api.SetDrawImagePlaceTableOfFigures('tableofcontents-img', this._originalProps) : this.api.SetDrawImagePlaceContents('tableofcontents-img', this._originalProps); + // this.scrollerY.update(); + } +} \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx index 7deceedb2..1a442ef03 100644 --- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx @@ -13,6 +13,7 @@ import EditTableController from "../../controller/edit/EditTable"; import EditChartController from "../../controller/edit/EditChart"; import EditHyperlinkController from "../../controller/edit/EditHyperlink"; import EditHeaderController from "../../controller/edit/EditHeader"; +import EditTableContentsController from "../../controller/edit/EditTableContents"; import {PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextHighlightColor} from "./EditText"; import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph"; @@ -20,6 +21,7 @@ import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShap import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage"; import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable"; import {PageChartDesign, PageChartDesignType, PageChartDesignStyle, PageChartDesignFill, PageChartDesignBorder, PageChartCustomFillColor, PageChartBorderColor, PageChartCustomBorderColor, PageChartWrap, PageChartReorder} from "./EditChart"; +import { EditStylesTableContents } from './EditTableContents'; const routes = [ //Edit text @@ -183,6 +185,13 @@ const routes = [ { path: '/edit-chart-custom-border-color/', component: PageChartCustomBorderColor, + }, + + // Table Contents + + { + path: '/edit-style-table-contents/', + component: EditStylesTableContents } ]; @@ -242,10 +251,13 @@ const EditLayoutContent = ({ editors }) => { const EditTabs = props => { const { t } = useTranslation(); const _t = t('Edit', {returnObjects: true}); + const api = Common.EditorApi.get(); + const inToc = api.asc_GetTableOfContentsPr(true); const settings = props.storeFocusObjects.settings; const headerType = props.storeFocusObjects.headerType; let editors = []; + if (settings.length < 1) { editors.push({ caption: _t.textSettings, @@ -310,6 +322,14 @@ const EditTabs = props => { } } + if(inToc) { + editors.push({ + caption: _t.textTableOfCont, + id: 'edit-table-contents', + component: + }) + } + return ( diff --git a/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx b/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx new file mode 100644 index 000000000..c66898002 --- /dev/null +++ b/apps/documenteditor/mobile/src/view/edit/EditTableContents.jsx @@ -0,0 +1,98 @@ +import React, {Fragment, useEffect, useState } from 'react'; +import {observer, inject} from "mobx-react"; +import {f7, View, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link, ListButton, Toggle} from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import {Device} from '../../../../../common/mobile/utils/device'; + +const EditTableContents = props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + const api = Common.EditorApi.get(); + const propsTableContents = api.asc_GetTableOfContentsPr(); + console.log(propsTableContents); + const storeTableContent = props.storeTableContent; + const type = storeTableContent.type; + const arrStyles = (type === 1) ? [ + { displayValue: t('Edit.textCurrent'), value: Asc.c_oAscTOFStylesType.Current }, + { displayValue: t('Edit.textSimple'), value: Asc.c_oAscTOFStylesType.Simple }, + { displayValue: t('Edit.textOnline'), value: Asc.c_oAscTOFStylesType.Web }, + { displayValue: t('Edit.textClassic'), value: Asc.c_oAscTOFStylesType.Classic }, + { displayValue: t('Edit.textDistinctive'), value: Asc.c_oAscTOFStylesType.Distinctive }, + { displayValue: t('Edit.textCentered'), value: Asc.c_oAscTOFStylesType.Centered }, + { displayValue: t('Edit.textFormal'), value: Asc.c_oAscTOFStylesType.Formal } + ] : [ + { displayValue: t('Edit.textCurrent'), value: Asc.c_oAscTOCStylesType.Current }, + { displayValue: t('Edit.textSimple'), value: Asc.c_oAscTOCStylesType.Simple }, + { displayValue: t('Edit.textOnline'), value: Asc.c_oAscTOCStylesType.Web }, + { displayValue: t('Edit.textStandard'), value: Asc.c_oAscTOCStylesType.Standard }, + { displayValue: t('Edit.textModern'), value: Asc.c_oAscTOCStylesType.Modern }, + { displayValue: t('Edit.textClassic'), value: Asc.c_oAscTOCStylesType.Classic } + ]; + + const activeStyle = arrStyles.find(style => style.value === propsTableContents.get_StylesType()); + + return ( + + + + + + + {t('Edit.textPageNumbers')} + + + + {t('Edit.textRightAlign')} + + + + + + + + + + + ) +}; + +const PageEditStylesTableContents = props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + const api = Common.EditorApi.get(); + const propsTableContents = api.asc_GetTableOfContentsPr(); + const storeTableContent = props.storeTableContent; + const type = storeTableContent.type; + const [styleValue, setStyleValue] = useState(propsTableContents.get_StylesType()); + // const styleValue = propsTableContents.get_StylesType(); + console.log(styleValue); + + return ( + + + {Device.phone && + + + + + + } + + + {props.arrStyles.map((style, index) => { + return ( + {setStyleValue(style.value); props.onStyle(style.value, type)}}> + ) + })} + + + ) +} + +const EditTableContentsContainer = inject("storeTableContent")(observer(EditTableContents)); +const EditStylesTableContents = inject("storeTableContent")(observer(PageEditStylesTableContents)); + +export { + EditTableContentsContainer as EditTableContents, + EditStylesTableContents +}; \ No newline at end of file