diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less index 396a2051a..ecaaf9dd3 100644 --- a/apps/common/mobile/resources/less/common-ios.less +++ b/apps/common/mobile/resources/less/common-ios.less @@ -123,25 +123,44 @@ } } - // Bullets and numbers + // Bullets, numbers and multilevels .bullets, - .numbers { - .page-content { - background: @white; + .numbers, + .multilevels { + .list{ + margin: 5px; + ul { + &:before, &:after { + display: none; + } + display: flex; + justify-content: space-around; + width: 100%; + margin-top: 10px; + padding: 0 5px; + } + &:first-child li:first-child, &:last-child li:last-child { + border-radius: 0; + } + &:last-child li:last-child:after { + display: none; + } } - .row { - justify-content: space-around; - } - - ul { - margin-top: 10px; + .list .item-content { + padding-left: 0; + min-height: 68px; + .item-inner{ + padding: 0; + &:after { + display: none; + } + } } li { width: 70px; height: 70px; - margin-right: 1px; border: 1px solid #c4c4c4; html.pixel-ratio-2 & { border: 0.5px solid #c4c4c4; diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index c3cf6f0d3..f10da7a7f 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -272,25 +272,41 @@ } } } - // Bullets and numbers + // Bullets, numbers and multilevels .bullets, - .numbers { - .page-content { - background: @white; + .numbers, + .multilevels { + .list{ + margin: 5px; + ul { + &:before, &:after { + display: none; + } + display: flex; + justify-content: space-around; + width: 100%; + margin-top: 10px; + padding: 0 5px; + } + &:first-child li:first-child, &:last-child li:last-child { + border-radius: 0; + } } - .row { - justify-content: space-around; - } - - ul { - margin-top: 10px; + .list .item-content { + padding-left: 0; + min-height: 68px; + .item-inner{ + padding: 0; + &:after { + display: none; + } + } } li { width: 70px; height: 70px; - margin-right: 1px; border: 1px solid @gray; html.pixel-ratio-2 & { border: 0.5px solid @gray; diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index eb22ff811..a76f25460 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -360,8 +360,7 @@ "textHighlightColor": "Highlight Color", "textAdditionalFormatting": "Additional Formatting", "textAdditional": "Additional", - "textBullets": "Bullets", - "textNumbers": "Numbers", + "textBulletsAndNumbers": "Bullets & Numbers", "textLineSpacing": "Line Spacing", "textFonts": "Fonts", "textAuto": "Auto", diff --git a/apps/documenteditor/mobile/resources/img/multilevels/multi-bracket.png b/apps/documenteditor/mobile/resources/img/multilevels/multi-bracket.png new file mode 100644 index 000000000..c7bb0a249 Binary files /dev/null and b/apps/documenteditor/mobile/resources/img/multilevels/multi-bracket.png differ diff --git a/apps/documenteditor/mobile/resources/img/multilevels/multi-bullets.png b/apps/documenteditor/mobile/resources/img/multilevels/multi-bullets.png new file mode 100644 index 000000000..0069e0c7d Binary files /dev/null and b/apps/documenteditor/mobile/resources/img/multilevels/multi-bullets.png differ diff --git a/apps/documenteditor/mobile/resources/img/multilevels/multi-dot.png b/apps/documenteditor/mobile/resources/img/multilevels/multi-dot.png new file mode 100644 index 000000000..c7bde8c01 Binary files /dev/null and b/apps/documenteditor/mobile/resources/img/multilevels/multi-dot.png differ diff --git a/apps/documenteditor/mobile/src/controller/edit/EditText.jsx b/apps/documenteditor/mobile/src/controller/edit/EditText.jsx index 922458b4b..af59de04a 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditText.jsx +++ b/apps/documenteditor/mobile/src/controller/edit/EditText.jsx @@ -183,6 +183,11 @@ class EditTextController extends Component { } } + onMultiLevelList(type) { + const api = Common.EditorApi.get(); + if (api) api.put_ListType(2, parseInt(type)); + } + onLineSpacing(value) { const api = Common.EditorApi.get(); if (api) { @@ -210,6 +215,7 @@ class EditTextController extends Component { onParagraphMove={this.onParagraphMove} onBullet={this.onBullet} onNumber={this.onNumber} + onMultiLevelList={this.onMultiLevelList} onLineSpacing={this.onLineSpacing} /> ) diff --git a/apps/documenteditor/mobile/src/less/app-ios.less b/apps/documenteditor/mobile/src/less/app-ios.less index fefaee26d..c565dd189 100644 --- a/apps/documenteditor/mobile/src/less/app-ios.less +++ b/apps/documenteditor/mobile/src/less/app-ios.less @@ -1,7 +1,9 @@ - -.device-ios { - - +.ios { + .view { + .page-content{ + background: #fff; + } + } } // Color Schemes diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index 959e96f05..30e7e21e1 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -96,3 +96,21 @@ } } +.item-content { + .preview{ + color: @gray; + } +} + +.phone, .tablet { + .swiper-container{ + position: static; + } +} + +.swiper-pagination-bullet-active{ + background: @black; +} + + + diff --git a/apps/documenteditor/mobile/src/store/textSettings.js b/apps/documenteditor/mobile/src/store/textSettings.js index 9f3efa926..7ebb9c62f 100644 --- a/apps/documenteditor/mobile/src/store/textSettings.js +++ b/apps/documenteditor/mobile/src/store/textSettings.js @@ -14,6 +14,7 @@ export class storeTextSettings { listType: observable, typeBullets: observable, typeNumbers: observable, + typeMultiLevel: observable, paragraphAlign: observable, textColor: observable, customTextColors: observable, @@ -32,6 +33,7 @@ export class storeTextSettings { resetListType: action, resetBullets: action, resetNumbers: action, + resetMultiLevel: action, resetParagraphAlign: action, resetTextColor: action, changeCustomTextColors: action, @@ -52,6 +54,7 @@ export class storeTextSettings { listType = undefined; typeBullets = undefined; typeNumbers = undefined; + typeMultiLevel = undefined; paragraphAlign = undefined; textColor = undefined; customTextColors = []; @@ -115,6 +118,10 @@ export class storeTextSettings { this.typeNumbers = type; } + resetMultiLevel(type) { + this.typeMultiLevel = type; + } + resetParagraphAlign (align) { let value; switch (align) { diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx index bd9bb4c7a..69f550188 100644 --- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx @@ -14,7 +14,7 @@ import EditChartController from "../../controller/edit/EditChart"; import EditHyperlinkController from "../../controller/edit/EditHyperlink"; import EditHeaderController from "../../controller/edit/EditHeader"; -import {PageTextFonts, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextBackgroundColor, PageTextCustomBackColor} from "./EditText"; +import {PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextBackgroundColor, PageTextCustomBackColor} from "./EditText"; import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor} from "./EditParagraph"; import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape"; import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage"; @@ -32,12 +32,8 @@ const routes = [ component: PageTextAddFormatting, }, { - path: '/edit-text-bullets/', - component: PageTextBullets, - }, - { - path: '/edit-text-numbers/', - component: PageTextNumbers, + path: '/edit-bullets-and-numbers/', + component: PageTextBulletsAndNumbers, }, { path: '/edit-text-line-spacing/', diff --git a/apps/documenteditor/mobile/src/view/edit/EditText.jsx b/apps/documenteditor/mobile/src/view/edit/EditText.jsx index e14cf43ed..ec5acafa6 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditText.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditText.jsx @@ -1,6 +1,6 @@ import React, {Fragment, useState } from 'react'; import {observer, inject} from "mobx-react"; -import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react'; +import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Link} from 'framework7-react'; import { useTranslation } from 'react-i18next'; import {Device} from '../../../../../common/mobile/utils/device'; @@ -157,37 +157,30 @@ const PageBullets = props => { const typeBullets = storeTextSettings.typeBullets; return( - - - {Device.phone && - - - - - - } - + {bulletArrays.map((bullets, index) => ( - + ))} - + ) }; @@ -207,11 +200,82 @@ const PageNumbers = props => { {type: 7, thumb: 'number-07.png'} ] ]; + const storeTextSettings = props.storeTextSettings; const typeNumbers = storeTextSettings.typeNumbers; + return( - - + + {numberArrays.map((numbers, index) => ( + + {numbers.map((number) => ( + { + if (number.type === -1) { + storeTextSettings.resetNumbers(-1); + } + props.onNumber(number.type) + props.f7router.back(); + }}> + {number.thumb.length < 1 ? + + + : + + } + + ))} + + ))} + + ) +}; + +const PageMultiLevel = props => { + const { t } = useTranslation(); + + const arrayMultiLevel = [ + {type: -1, thumb: ''}, + {type: 1, thumb: 'multi-bracket.png'}, + {type: 2, thumb: 'multi-dot.png'}, + {type: 3, thumb: 'multi-bullets.png'}, + ]; + + const storeTextSettings = props.storeTextSettings; + const typeMultiLevel = storeTextSettings.typeMultiLevel; + + return( + + + {arrayMultiLevel.map((item) => ( + { + item.type === -1 ? storeTextSettings.resetMultiLevel(-1) : storeTextSettings.resetMultiLevel(null); + props.onMultiLevelList(item.type); + props.f7router.back(); + }}> + {item.thumb.length < 1 ? + + + : + + } + + ))} + + + ) + +} + +const PageBulletsAndNumbers = props => { + const { t } = useTranslation(); + const storeTextSettings = props.storeTextSettings; + + return ( + + {Device.phone && @@ -220,29 +284,14 @@ const PageNumbers = props => { } - {numberArrays.map((numbers, index) => ( -
    - {numbers.map((number) => ( -
  • { - if (number.type === -1) { - storeTextSettings.resetNumbers(-1); - } - props.onNumber(number.type) - }}> - {number.thumb.length < 1 ? -
    - -
    : -
    - } -
    • - ))} -
- ))} + + + + + ) -}; +} const PageLineSpacing = props => { const { t } = useTranslation(); @@ -429,6 +478,19 @@ const EditText = props => { const isStrikethrough = storeTextSettings.isStrikethrough; const paragraphAlign = storeTextSettings.paragraphAlign; + let previewList; + switch(storeTextSettings.listType) { + case -1: + previewList = ''; + break; + case 0: + previewList = 'Bullets'; + break; + case 1: + previewList = 'Numbers'; + break; + } + const fontColorPreview = fontColor !== 'auto' ? : ; @@ -501,16 +563,14 @@ const EditText = props => { - +
{previewList}
{!isAndroid && } - - {!isAndroid && } - @@ -524,8 +584,7 @@ const EditText = props => { const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText)); const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts)); const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting)); -const PageTextBullets = inject("storeTextSettings")(observer(PageBullets)); -const PageTextNumbers = inject("storeTextSettings")(observer(PageNumbers)); +const PageTextBulletsAndNumbers = inject("storeTextSettings")(observer(PageBulletsAndNumbers)); const PageTextLineSpacing = inject("storeTextSettings")(observer(PageLineSpacing)); const PageTextFontColor = inject("storeTextSettings", "storePalette")(observer(PageFontColor)); const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor)); @@ -537,8 +596,7 @@ export { EditTextContainer as EditText, PageTextFonts, PageTextAddFormatting, - PageTextBullets, - PageTextNumbers, + PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, diff --git a/apps/presentationeditor/mobile/locale/en.json b/apps/presentationeditor/mobile/locale/en.json index c83fb611a..380a7f1f2 100644 --- a/apps/presentationeditor/mobile/locale/en.json +++ b/apps/presentationeditor/mobile/locale/en.json @@ -1,6 +1,6 @@ { - "Controller" : { - "Main" : { + "Controller": { + "Main": { "SDK": { "Series": "Series", "Diagram Title": "Chart Title", @@ -27,7 +27,6 @@ "closeButtonText": "Close File", "advDRMOptions": "Protected File", "advDRMPassword": "Password", - "leavePageText": "You have unsaved changes in this document. Click 'Stay on this Page' to await the autosave of the document. Click 'Leave this Page' to discard all the unsaved changes.", "titleLicenseExp": "License expired", "warnLicenseExp": "Your license has expired. Please update your license and refresh the page.", @@ -47,12 +46,10 @@ "textPaidFeature": "Paid feature", "textCustomLoader": "Please note that according to the terms of the license you are not entitled to change the loader. Please contact our Sales Department to get a quote.", "textClose": "Close", - "errorProcessSaveResult": "Saving is failed.", "criticalErrorTitle": "Error", "warnProcessRightsChange": "You have been denied the right to edit the file.", "errorAccessDeny": "You are trying to perform an action you do not have rights for.
Please contact your Document Server administrator.", - "errorUpdateVersion": "The file version has been changed. The page will be reloaded.", "titleUpdateVersion": "Version changed", "textHasMacros": "The file contains automatic macros.
Do you want to run macros?", @@ -303,8 +300,7 @@ "textHighlightColor": "Highlight Color", "textAdditionalFormatting": "Additional Formatting", "textAdditional": "Additional", - "textBullets": "Bullets", - "textNumbers": "Numbers", + "textBulletsAndNumbers": "Bullets & Numbers", "textLineSpacing": "Line Spacing", "textFonts": "Fonts", "textAuto": "Auto", diff --git a/apps/presentationeditor/mobile/src/less/app-ios.less b/apps/presentationeditor/mobile/src/less/app-ios.less index dda949856..71f59edee 100644 --- a/apps/presentationeditor/mobile/src/less/app-ios.less +++ b/apps/presentationeditor/mobile/src/less/app-ios.less @@ -1,6 +1,8 @@ - .device-ios { - - + .view { + .page-content{ + background: #fff; + } + } } diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less index cc4000288..289e67d0e 100644 --- a/apps/presentationeditor/mobile/src/less/app.less +++ b/apps/presentationeditor/mobile/src/less/app.less @@ -83,3 +83,19 @@ } } } + +.item-content { + .preview{ + color: @gray; + } +} + +.phone, .tablet { + .swiper-container{ + position: static; + } +} + +.swiper-pagination-bullet-active{ + background: @black; +} diff --git a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx index 3f9537494..8d00aeb60 100644 --- a/apps/presentationeditor/mobile/src/view/edit/Edit.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/Edit.jsx @@ -14,7 +14,7 @@ import EditChartController from "../../controller/edit/EditChart"; import { EditLinkController } from "../../controller/edit/EditLink"; import { Theme, Layout, Transition, Type, Effect, StyleFillColor, CustomFillColor } from './EditSlide'; -import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBullets, PageTextNumbers, PageTextLineSpacing } from './EditText'; +import { PageTextFonts, PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing } from './EditText'; import { PageShapeStyle, PageShapeStyleNoFill, PageReplaceContainer, PageReorderContainer, PageAlignContainer, PageShapeBorderColor, PageShapeCustomBorderColor, PageShapeCustomFillColor } from './EditShape'; import { PageImageReplace, PageImageReorder, PageImageAlign, PageLinkSettings } from './EditImage'; import { PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor, PageTableReorder, PageTableAlign } from './EditTable'; @@ -73,12 +73,8 @@ const routes = [ component: PageTextAddFormatting }, { - path: '/edit-text-bullets/', - component: PageTextBullets - }, - { - path: '/edit-text-numbers/', - component: PageTextNumbers + path: '/edit-bullets-and-numbers/', + component: PageTextBulletsAndNumbers }, { path: '/edit-text-line-spacing/', diff --git a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx index d7bd881f5..987108023 100644 --- a/apps/presentationeditor/mobile/src/view/edit/EditText.jsx +++ b/apps/presentationeditor/mobile/src/view/edit/EditText.jsx @@ -1,6 +1,6 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; -import {f7, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} from 'framework7-react'; +import {f7, Swiper, View, SwiperSlide, List, ListItem, Icon, Row, Button, Page, Navbar, Segmented, BlockTitle, NavRight, Link} 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'; @@ -27,6 +27,18 @@ const EditText = props => { const paragraphObj = storeFocusObjects.paragraphObject; let spaceBefore; let spaceAfter; + let previewList; + switch(storeTextSettings.listType) { + case -1: + previewList = ''; + break; + case 0: + previewList = 'Bullets'; + break; + case 1: + previewList = 'Numbers'; + break; + } if(paragraphObj) { spaceBefore = paragraphObj.get_Spacing().get_Before() < 0 ? paragraphObj.get_Spacing().get_Before() : Common.Utils.Metric.fnRecalcFromMM(paragraphObj.get_Spacing().get_Before()); @@ -114,16 +126,13 @@ const EditText = props => { - +
{previewList}
{!isAndroid && } - - {!isAndroid && } - @@ -421,32 +430,31 @@ const PageBullets = props => { return null; } - return ( - - - {Device.phone && - - - - - - } - + return( + {bulletArrays.map((bullets, index) => ( -
    + {bullets.map((bullet) => ( -
  • {props.onBullet(bullet.type)}}> + { + if (bullet.type === -1) { + storeTextSettings.resetBullets(-1); + } + props.onBullet(bullet.type) + props.f7router.back(); + }}> {bullet.thumb.length < 1 ? -
    + -
    : -
    + : + } -
    • + ))} -
+ ))} - + ) }; @@ -477,9 +485,43 @@ const PageNumbers = props => { return null; } + return( + + {numberArrays.map((numbers, index) => ( + + {numbers.map((number) => ( + { + if (number.type === -1) { + storeTextSettings.resetNumbers(-1); + } + props.onNumber(number.type) + props.f7router.back(); + }}> + {number.thumb.length < 1 ? + + + : + + } + + ))} + + ))} + + ) +}; + +const PageBulletsAndNumbers = props => { + const { t } = useTranslation(); + const _t = t('View.Edit', {returnObjects: true}); + const storeTextSettings = props.storeTextSettings; + const storeFocusObjects = props.storeFocusObjects; + return ( - - + + {Device.phone && @@ -488,23 +530,13 @@ const PageNumbers = props => { } - {numberArrays.map((numbers, index) => ( -
    - {numbers.map((number) => ( -
  • {props.onNumber(number.type)}}> - {number.thumb.length < 1 ? -
    - -
    : -
    - } -
    • - ))} -
- ))} + + + + ) -}; +} const PageLineSpacing = props => { const { t } = useTranslation(); @@ -546,8 +578,7 @@ const PageTextFonts = inject("storeTextSettings", "storeFocusObjects")(observer( const PageTextFontColor = inject("storeTextSettings", "storePalette", "storeFocusObjects")(observer(PageFontColor)); const PageTextCustomFontColor = inject("storeTextSettings", "storePalette")(observer(PageCustomFontColor)); const PageTextAddFormatting = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting)); -const PageTextBullets = inject("storeTextSettings", "storeFocusObjects")(observer(PageBullets)); -const PageTextNumbers = inject("storeTextSettings", "storeFocusObjects")(observer(PageNumbers)); +const PageTextBulletsAndNumbers = inject("storeTextSettings", "storeFocusObjects")(observer(PageBulletsAndNumbers)); const PageTextLineSpacing = inject("storeTextSettings", "storeFocusObjects")(observer(PageLineSpacing)); export { @@ -556,7 +587,6 @@ export { PageTextFontColor, PageTextCustomFontColor, PageTextAddFormatting, - PageTextBullets, - PageTextNumbers, + PageTextBulletsAndNumbers, PageTextLineSpacing }; \ No newline at end of file