Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

[DE mobile] Added the ability to insert break

Browse source
This commit is contained in:
JuliaSvinareva 2021-01-22 14:33:00 +03:00
parent 68854f47dd
commit 6cc5bae310
6 changed files with 130 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
apps/documenteditor/mobile/locale/en.json
View file

@ -254,6 +254,13 @@
"textLeftBottom": "Left Bottom",
"textCenterBottom": "Center Bottom",
"textRightBottom": "Right Bottom",
"textCurrentPosition": "Current Position"
"textCurrentPosition": "Current Position",
"textPageBreak": "Page Break",
"textColumnBreak": "Column Break",
"textSectionBreak": "Section Break",
"textNextPage": "Next Page",
"textContinuousPage": "Continuous Page",
"textEvenPage": "Even Page",
"textOddPage": "Odd Page"
}
}

34
apps/documenteditor/mobile/src/controller/add/AddOther.jsx
View file

@ -10,6 +10,9 @@ class AddOtherController extends Component {
super(props);
this.onInsertLink = this.onInsertLink.bind(this);
this.onInsertPageNumber = this.onInsertPageNumber.bind(this);
this.onPageBreak = this.onPageBreak.bind(this);
this.onColumnBreak = this.onColumnBreak.bind(this);
this.onInsertSectionBreak = this.onInsertSectionBreak.bind(this);
}
closeModal () {
@ -93,11 +96,42 @@ class AddOtherController extends Component {
this.closeModal();
}
onPageBreak () {
const api = Common.EditorApi.get();
api.put_AddPageBreak();
this.closeModal();
}
onColumnBreak () {
const api = Common.EditorApi.get();
api.put_AddColumnBreak();
this.closeModal();
}
onInsertSectionBreak (type) {
const api = Common.EditorApi.get();
let value;
if ('next' == type) {
value = Asc.c_oAscSectionBreakType.NextPage;
} else if ('continuous' == type) {
value = Asc.c_oAscSectionBreakType.Continuous;
} else if ('even' == type) {
value = Asc.c_oAscSectionBreakType.EvenPage;
} else if ('odd' == type) {
value = Asc.c_oAscSectionBreakType.OddPage;
}
api.add_SectionBreak(value);
this.closeModal();
}
render () {
return (
<AddOther onInsertLink={this.onInsertLink}
getDisplayLinkText={this.getDisplayLinkText}
onInsertPageNumber={this.onInsertPageNumber}
onPageBreak={this.onPageBreak}
onColumnBreak={this.onColumnBreak}
onInsertSectionBreak={this.onInsertSectionBreak}
/>
)
}

10
apps/documenteditor/mobile/src/css/icons-ios.less
View file

@ -419,6 +419,16 @@
height: 24px;
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M22 8.11133H20.9177V5.15361L20.9282 4.66765L20.9457 4.13624C20.7659 4.31571 20.641 4.43341 20.5709 4.48935L19.9825 4.96132L19.4606 4.31105L21.1103 3H22V8.11133Z" fill="@{themeColor}"/><path d="M10.3363 18.8514L8.98161 15.3968H4.61996L3.28021 18.8514H2L6.3021 7.94526H7.36646L11.6462 18.8514H10.3363ZM8.58713 14.2601L7.3218 10.8947C7.15806 10.4687 6.98935 9.94621 6.81567 9.32711C6.70651 9.80258 6.5502 10.3251 6.34676 10.8947L5.06655 14.2601H8.58713Z" fill="@{themeColor}"/><path d="M16.1425 10.5752C17.2143 10.5752 18.0454 10.9417 18.6359 11.6748C19.2313 12.4028 19.5291 13.4355 19.5291 14.7728C19.5291 16.11 19.2288 17.1501 18.6284 17.893C18.033 18.631 17.2043 19 16.1425 19C15.6115 19 15.1252 18.9034 14.6836 18.7103C14.2469 18.5121 13.8798 18.21 13.582 17.8039H13.4927L13.2322 18.8514H12.3465V7.29149H13.582V10.0997C13.582 10.7288 13.5622 11.2934 13.5225 11.7936H13.582C14.1576 10.9814 15.0111 10.5752 16.1425 10.5752ZM15.9638 11.6079C15.1203 11.6079 14.5124 11.8506 14.1403 12.336C13.7681 12.8164 13.582 13.6286 13.582 14.7728C13.582 15.9169 13.7731 16.7366 14.1551 17.2318C14.5372 17.7222 15.15 17.9673 15.9936 17.9673C16.7528 17.9673 17.3185 17.6925 17.6906 17.1427C18.0628 16.588 18.2488 15.793 18.2488 14.7579C18.2488 13.698 18.0628 12.908 17.6906 12.388C17.3185 11.8679 16.7429 11.6079 15.9638 11.6079Z" fill="@{themeColor}"/></svg>');
}
&.icon-pagebreak {
width: 22px;
height: 22px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M8,14v1h1v-1H8z M6,14v1h1v-1H6z M18,21H3v-6H2v7h17v-7h-1V21z M4,14v1h1v-1H4z M14,14v1h1v-1H14z M10,14v1h1v-1H10z M8.2,1L2,7.6V14h1V9h6V2l0,0h9v12h1V1H8.2z M8,8H3.1L8,2.8V8z M12,14v1h1v-1H12z M16,14v1h1v-1H16z"/></g></svg>');
}
&.icon-stringbreak {
width: 22px;
height: 22px;
.encoded-svg-background('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 22 22" fill="@{themeColor}"><g><path d="M18,12H5.1L9,15.9l-0.7,0.7l-4.5-4.5l-0.6-0.6l0.6-0.6l4.5-4.5L9,7.1L5.1,11H18V5h1v6v1H18z"/></g></svg>');
}
}
.tab-link-active {
i.icon {

10
apps/documenteditor/mobile/src/css/icons-material.less
View file

@ -362,5 +362,15 @@
height: 24px;
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.1173 18.7983H10.109L9.36904 16.6471H4.74829L4.00837 18.7983H2L5.95633 7.58823H8.161L12.1173 18.7983ZM8.87072 14.916L7.05867 9.57143L5.24661 14.916H8.87072Z" fill="@{themeColor}"/><path d="M14.7577 16.3613C14.9288 16.6639 15.1906 16.9216 15.5429 17.1345C15.9053 17.3361 16.2677 17.437 16.6301 17.437C17.2543 17.437 17.7526 17.1905 18.1251 16.6975C18.5076 16.1933 18.6989 15.5434 18.6989 14.7479C18.6989 13.9524 18.5076 13.3025 18.1251 12.7983C17.7526 12.2941 17.2543 12.042 16.6301 12.042C16.2677 12.042 15.9103 12.1485 15.558 12.3613C15.2057 12.5742 14.9389 12.8375 14.7577 13.1513V16.3613ZM14.7577 18.7983H13.1721V7.58823H14.7577V11.8067C15.3516 10.9216 16.1318 10.479 17.0982 10.479C18.0445 10.479 18.8197 10.8711 19.4237 11.6555C20.0277 12.4286 20.3298 13.4594 20.3298 14.7479C20.3298 16.0588 20.0277 17.0952 19.4237 17.8571C18.8197 18.619 18.0445 19 17.0982 19C16.1419 19 15.3617 18.563 14.7577 17.6891V18.7983Z" fill="@{themeColor}"/><path d="M24 11.7227H22.7769V6.7479L21.7651 7.90756L21.0705 7.08403L22.943 5H24V11.7227Z" fill="@{themeColor}"/></svg>');
}
&.icon-pagebreak {
width: 22px;
height: 22px;
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#clip0)"><path fill-rule="evenodd" clip-rule="evenodd" d="M6 8L10 7.99531V4L6 8ZM10 10H6V11H4V7L9 2H18C18.5302 2 18.9864 2.20344 19.3918 2.61033C19.7661 2.98592 20 3.46792 20 4V11H18V4H12V8C12 9.10457 11.1046 10 10 10ZM6 17V20.0282L18 20V17H20V20C20 20.5321 19.7973 21.0297 19.3918 21.4366C18.9864 21.8122 18.5302 22 18 22H6C5.46979 22 5.01364 21.8122 4.60819 21.4366C4.20273 21.0297 4 20.5266 4 19.9945V17H6Z" fill="@{themeColor}"/><path d="M3 13H7V15H3V13Z" fill="@{themeColor}"/><path d="M9 13H15V15H9V13Z" fill="@{themeColor}"/><path d="M17 13H21V15H17V13Z" fill="@{themeColor}"/></g><defs><clipPath id="clip0"><path d="M0.000488281 0H24.0005V24H0.000488281V0Z" fill="transparent"/></clipPath></defs></svg>');
}
&.icon-stringbreak {
width: 22px;
height: 22px;
.encoded-svg-background('<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 9.01309L11.4062 10.4181L7.79688 14.0241H17.9844V4.00208H20V15.9911H7.79688L11.4062 19.5971L10 21.0021L4 15.0076L10 9.01309Z" fill="@{themeColor}"/></svg>');
}
}
}

10
apps/documenteditor/mobile/src/view/add/Add.jsx
View file

@ -11,7 +11,7 @@ import {AddImageController} from "../../controller/add/AddImage";
import {AddOtherController} from "../../controller/add/AddOther";
import {PageImageLinkSettings} from "../add/AddImage";
import {PageAddLink, PageAddNumber} from "../add/AddOther";
import {PageAddLink, PageAddNumber, PageAddBreak, PageAddSectionBreak} from "../add/AddOther";
const routes = [
// Image
@ -28,6 +28,14 @@ const routes = [
path: '/add-page-number/',
component: PageAddNumber,
},
{
path: '/add-break/',
component: PageAddBreak,
},
{
path: '/add-section-break/',
component: PageAddSectionBreak,
},
];
const AddLayoutNavbar = ({ tabs, inPopover }) => {

61
apps/documenteditor/mobile/src/view/add/AddOther.jsx
View file

@ -67,6 +67,57 @@ const PageNumber = props => {
)
};
const PageBreak = props => {
const { t } = useTranslation();
const _t = t('Add', {returnObjects: true});
return (
<Page>
<Navbar title={_t.textBreak} backLink={_t.textBack}/>
<List>
<ListItem title={_t.textPageBreak} link='#' className='no-indicator' onClick={() => {
props.onPageBreak()
}}>
<Icon slot="media" icon="icon-pagebreak"></Icon>
</ListItem>
<ListItem title={_t.textColumnBreak} link='#' className='no-indicator' onClick={() => {
props.onColumnBreak();
}}>
<Icon slot="media" icon="icon-stringbreak"></Icon>
</ListItem>
<ListItem title={_t.textSectionBreak} link={'/add-section-break/'} routeProps={{
onInsertSectionBreak: props.onInsertSectionBreak
}}>
<Icon slot="media" icon="icon-sectionbreak"></Icon>
</ListItem>
</List>
</Page>
)
};
const PageSectionBreak = props => {
const { t } = useTranslation();
const _t = t('Add', {returnObjects: true});
return (
<Page>
<Navbar title={_t.textSectionBreak} backLink={_t.textBack}/>
<List>
<ListItem title={_t.textNextPage} link='#' className='no-indicator' onClick={() => {
props.onInsertSectionBreak('next')
}}></ListItem>
<ListItem title={_t.textContinuousPage} link='#' className='no-indicator' onClick={() => {
props.onInsertSectionBreak('continuous')
}}></ListItem>
<ListItem title={_t.textEvenPage} link='#' className='no-indicator' onClick={() => {
props.onInsertSectionBreak('even')
}}></ListItem>
<ListItem title={_t.textOddPage} link='#' className='no-indicator' onClick={() => {
props.onInsertSectionBreak('odd')
}}></ListItem>
</List>
</Page>
)
};
const AddOther = props => {
const { t } = useTranslation();
const _t = t('Add', {returnObjects: true});
@ -86,7 +137,11 @@ const AddOther = props => {
}}>
<Icon slot="media" icon="icon-pagenumber"></Icon>
</ListItem>
<ListItem title={_t.textBreak}>
<ListItem title={_t.textBreak} link={'/add-break/'} routeProps={{
onPageBreak: props.onPageBreak,
onColumnBreak: props.onColumnBreak,
onInsertSectionBreak: props.onInsertSectionBreak
}}>
<Icon slot="media" icon="icon-sectionbreak"></Icon>
</ListItem>
<ListItem title={_t.textFootnote}>
@ -98,4 +153,6 @@ const AddOther = props => {
export {AddOther,
PageLink as PageAddLink,
PageNumber as PageAddNumber};
PageNumber as PageAddNumber,
PageBreak as PageAddBreak,
PageSectionBreak as PageAddSectionBreak};