[DE mobile] Make adding table of contents
This commit is contained in:
SergeyEzhin
parent
b43a9055b3
commit
7c56ea77a1
|
|
@ -57,7 +57,10 @@
|
|||
"textStartAt": "Start At",
|
||||
"textTable": "Table",
|
||||
"textTableSize": "Table Size",
|
||||
"txtNotUrl": "This field should be a URL in the format \"http://www.example.com\""
|
||||
"txtNotUrl": "This field should be a URL in the format \"http://www.example.com\"",
|
||||
"textTableContents": "Table of Contents",
|
||||
"textWithPageNumbers": "With Page Numbers",
|
||||
"textWithBlueLinks": "With Blue Links"
|
||||
},
|
||||
"Common": {
|
||||
"Collaboration": {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
import React, {Component} from 'react';
|
||||
import { f7 } from 'framework7-react';
|
||||
import {Device} from '../../../../../common/mobile/utils/device';
|
||||
import {AddTableContents} from '../../view/add/AddTableContents';
|
||||
|
||||
class AddTableContentsController extends Component {
|
||||
constructor (props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
closeModal () {
|
||||
if ( Device.phone ) {
|
||||
f7.sheet.close('.add-popup', true);
|
||||
} else {
|
||||
f7.popover.close('#add-popover');
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount () {
|
||||
const api = Common.EditorApi.get();
|
||||
api.asc_getButtonsTOC('toc1', 'toc2');
|
||||
}
|
||||
|
||||
onTableContents(type, currentTOC) {
|
||||
const api = Common.EditorApi.get();
|
||||
let props = api.asc_GetTableOfContentsPr(currentTOC);
|
||||
|
||||
switch (type) {
|
||||
case 0:
|
||||
if (!props) {
|
||||
props = new Asc.CTableOfContentsPr();
|
||||
props.put_OutlineRange(1, 9);
|
||||
}
|
||||
props.put_Hyperlink(true);
|
||||
props.put_ShowPageNumbers(true);
|
||||
props.put_RightAlignTab(true);
|
||||
props.put_TabLeader(Asc.c_oAscTabLeader.Dot);
|
||||
api.asc_AddTableOfContents(null, props);
|
||||
break;
|
||||
case 1:
|
||||
if (!props) {
|
||||
props = new Asc.CTableOfContentsPr();
|
||||
props.put_OutlineRange(1, 9);
|
||||
}
|
||||
props.put_Hyperlink(true);
|
||||
props.put_ShowPageNumbers(false);
|
||||
props.put_TabLeader(Asc.c_oAscTabLeader.None);
|
||||
props.put_StylesType(Asc.c_oAscTOCStylesType.Web);
|
||||
api.asc_AddTableOfContents(null, props);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
return (
|
||||
<AddTableContents onTableContents={this.onTableContents} />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
export default AddTableContentsController;
|
||||
|
|
@ -157,4 +157,10 @@
|
|||
height: 50px;
|
||||
}
|
||||
|
||||
// Table of Contents
|
||||
|
||||
.item-contents {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -398,6 +398,11 @@
|
|||
height: 24px;
|
||||
.encoded-svg-mask('<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.00049 18C7.00049 18.8284 6.32892 19.5 5.50049 19.5C4.67206 19.5 4.00049 18.8284 4.00049 18C4.00049 17.1716 4.67206 16.5 5.50049 16.5C6.32892 16.5 7.00049 17.1716 7.00049 18ZM13.5005 18C13.5005 18.8284 12.8289 19.5 12.0005 19.5C11.1721 19.5 10.5005 18.8284 10.5005 18C10.5005 17.1716 11.1721 16.5 12.0005 16.5C12.8289 16.5 13.5005 17.1716 13.5005 18ZM18.5005 19.5C19.3289 19.5 20.0005 18.8284 20.0005 18C20.0005 17.1716 19.3289 16.5 18.5005 16.5C17.6721 16.5 17.0005 17.1716 17.0005 18C17.0005 18.8284 17.6721 19.5 18.5005 19.5Z"/></svg>', @toolbar-segment);
|
||||
}
|
||||
&.icon-table-contents {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 13" fill="@{brandColor}"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 0H0V1H17V0ZM11.9 4H0V5H11.9V4ZM0 8H17V9H0V8ZM15 12H0V13H15V12Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20 0H19V1H20V0ZM20 4H19V5H20V4ZM19 8H20V9H19V8ZM20 12H19V13H20V12Z"/></svg>');
|
||||
}
|
||||
|
||||
&.icon-insert-comment {
|
||||
width: 24px;
|
||||
|
|
|
|||
|
|
@ -136,6 +136,11 @@
|
|||
height: 22px;
|
||||
.encoded-svg-mask('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="-1 7 22 22" fill="@{brandColor}"><g><path d="M21,18.5c0-0.3-0.1-0.6-0.7-0.9l-2.6-1.2l2.6-1.2c0.6-0.3,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-8.9-4.1c-0.7-0.4-1.9-0.4-2.8,0l-8.9,4.1C-0.9,13.8-1,14.1-1,14.3s0.1,0.6,0.7,0.9l2.6,1.2l-2.6,1.2C-0.9,18-1,18.4-1,18.5c0,0.2,0.1,0.6,0.7,0.9l2.5,1.2l-2.5,1.2C-0.9,22.1-1,22.5-1,22.7c0,0.3,0.1,0.6,0.7,0.9l8.9,4.1c0.5,0.2,0.8,0.3,1.4,0.3s1-0.1,1.4-0.3l8.9-4.1c0.6-0.4,0.7-0.6,0.7-0.9c0-0.3-0.1-0.6-0.7-0.9l-2.5-1.2l2.5-1.2C20.9,19.2,21,18.8,21,18.5z M-0.2,14.3L-0.2,14.3c0,0,0.1-0.1,0.3-0.2L9,10c0.6-0.3,1.5-0.3,2,0l8.9,4.1c0.2,0.1,0.3,0.2,0.3,0.2l0,0c0,0-0.1,0.1-0.3,0.2L11,18.6c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1C-0.1,14.4-0.2,14.3-0.2,14.3z M20.2,22.7L20.2,22.7c0,0-0.1,0.1-0.3,0.2L11,27.1c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5C20.1,22.7,20.2,22.7,20.2,22.7z M19.9,18.7L11,22.8c-0.6,0.3-1.5,0.3-2,0l-8.9-4.1c-0.2-0.1-0.3-0.2-0.3-0.2l0,0c0,0,0.1-0.1,0.3-0.2l3-1.5l5.5,2.6c0.7,0.4,1.9,0.4,2.8,0l5.5-2.6l3,1.5c0.2,0.1,0.3,0.2,0.3,0.2l0,0C20.2,18.5,20.1,18.6,19.9,18.7z"/></g></svg>');
|
||||
}
|
||||
&.icon-table-contents {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
.encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 13" fill="@{brandColor}"><path fill-rule="evenodd" clip-rule="evenodd" d="M17 0H0V1H17V0ZM11.9 4H0V5H11.9V4ZM0 8H17V9H0V8ZM15 12H0V13H15V12Z"/><path fill-rule="evenodd" clip-rule="evenodd" d="M20 0H19V1H20V0ZM20 4H19V5H20V4ZM19 8H20V9H19V8ZM20 12H19V13H20V12Z"/></svg>');
|
||||
}
|
||||
|
||||
// Download
|
||||
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@ import {AddOtherController} from "../../controller/add/AddOther";
|
|||
|
||||
import {PageImageLinkSettings} from "../add/AddImage";
|
||||
import {PageAddNumber, PageAddBreak, PageAddSectionBreak, PageAddFootnote} from "../add/AddOther";
|
||||
import AddTableContentsController from '../../controller/add/AddTableContents';
|
||||
|
||||
const routes = [
|
||||
// Image
|
||||
|
|
@ -41,6 +42,10 @@ const routes = [
|
|||
path: '/add-footnote/',
|
||||
component: PageAddFootnote,
|
||||
},
|
||||
{
|
||||
path: '/add-table-contents/',
|
||||
component: AddTableContentsController
|
||||
}
|
||||
];
|
||||
|
||||
const AddLayoutNavbar = ({ tabs, inPopover }) => {
|
||||
|
|
|
|||
|
|
@ -209,6 +209,9 @@ const AddOther = props => {
|
|||
<Icon slot="media" icon="icon-sectionbreak"></Icon>
|
||||
</ListItem>
|
||||
}
|
||||
<ListItem title={_t.textTableContents} link="/add-table-contents/">
|
||||
<Icon slot="media" icon="icon-table-contents"></Icon>
|
||||
</ListItem>
|
||||
{(isShape || isChart) || (isText && disabledAddFootnote) ? null :
|
||||
<ListItem key='footnote' title={_t.textFootnote} link={'/add-footnote/'} routeProps={{
|
||||
getFootnoteProps: props.getFootnoteProps,
|
||||
|
|
|
|||
21
apps/documenteditor/mobile/src/view/add/AddTableContents.jsx
Normal file
21
apps/documenteditor/mobile/src/view/add/AddTableContents.jsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import React, { PureComponent } from 'react';
|
||||
import {observer, inject} from "mobx-react";
|
||||
import {List, ListItem, Page, Navbar, Icon, ListButton, ListInput, BlockTitle} from 'framework7-react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
|
||||
const AddTableContents = props => {
|
||||
const { t } = useTranslation();
|
||||
const _t = t('Add', {returnObjects: true});
|
||||
|
||||
return (
|
||||
<Page>
|
||||
<Navbar title={_t.textTableContents} backLink={_t.textBack}></Navbar>
|
||||
<BlockTitle>{_t.textWithPageNumbers}</BlockTitle>
|
||||
<div className="item-contents" id="toc1" onClick={() => props.onTableContents(0)}></div>
|
||||
<BlockTitle>{_t.textWithBlueLinks}</BlockTitle>
|
||||
<div className="item-contents" id="toc2" onClick={() => props.onTableContents(1)}></div>
|
||||
</Page>
|
||||
)
|
||||
};
|
||||
|
||||
export {AddTableContents}
|
||||
Loading…
Reference in a new issue