diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 1b6ae0f97..63ec49455 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -93,6 +93,10 @@ } .list { + max-width: 100%; + ul { + width: 100%; + } li.no-indicator { .item-link { .item-inner{ @@ -123,6 +127,9 @@ background-color: @autoColor; } } + .item-link .item-inner { + width: 100%; + } } // Bullets, numbers and multilevels diff --git a/apps/common/mobile/resources/less/icons.less b/apps/common/mobile/resources/less/icons.less index 076f36865..26b236ec4 100644 --- a/apps/common/mobile/resources/less/icons.less +++ b/apps/common/mobile/resources/less/icons.less @@ -30,6 +30,11 @@ i.icon { height: 24px; .encoded-svg-background(''); } + &.icon-remove-style { + width: 24px; + height: 24px; + .encoded-svg-background('') + } // Formats diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index c61bb5220..b2dc4c174 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -292,7 +292,14 @@ "textPageBreakBefore": "Page Break Before", "textPageNumbering": "Page Numbering", "textParagraph": "Paragraph", - "textParagraphStyles": "Paragraph Styles", + "textCreateTextStyle": "Create new text style", + "textDone": "Done", + "textTitle": "Title", + "textEnterTitleNewStyle": "Enter title of a new style", + "textNextParagraphStyle": "Next paragraph style", + "textSameCreatedNewStyle": "Same as created new style", + "del_textParagraphStyles": "Paragraph Styles", + "textParagraphStyle": "Paragraph Style", "textPictureFromLibrary": "Picture from Library", "textPictureFromURL": "Picture from URL", "textPt": "pt", diff --git a/apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx b/apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx index 20aabc0a4..a772d7fc9 100644 --- a/apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx +++ b/apps/documenteditor/mobile/src/controller/edit/EditParagraph.jsx @@ -6,7 +6,10 @@ class EditParagraphController extends Component { constructor (props) { super(props); props.storeParagraphSettings.setBackColor(undefined); + this.onStyleClick = this.onStyleClick.bind(this); + this.onSaveStyle = this.onSaveStyle.bind(this); + this.onStyleMenuDelete = this.onStyleMenuDelete.bind(this); } onStyleClick (name) { @@ -17,6 +20,22 @@ class EditParagraphController extends Component { } } + onSaveStyle(title, nextParagraphStyle) { + const api = Common.EditorApi.get(); + const style = api.asc_GetStyleFromFormatting(); + + style.put_Name(title); + style.put_Next(nextParagraphStyle ? nextParagraphStyle : null); + + api.asc_AddNewStyle(style); + this.props.storeParagraphSettings.changeParaStyleName(title); + } + + onStyleMenuDelete(styleName) { + const api = Common.EditorApi.get(); + api.asc_RemoveStyle(styleName); + } + onDistanceBefore (distance, isDecrement) { const api = Common.EditorApi.get(); if (api) { @@ -156,6 +175,8 @@ class EditParagraphController extends Component { onKeepTogether={this.onKeepTogether} onKeepNext={this.onKeepNext} onBackgroundColor={this.onBackgroundColor} + onSaveStyle={this.onSaveStyle} + onStyleMenuDelete={this.onStyleMenuDelete} /> ) } diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less index e11f9102e..38489b157 100644 --- a/apps/documenteditor/mobile/src/less/app.less +++ b/apps/documenteditor/mobile/src/less/app.less @@ -314,3 +314,12 @@ border-top: 1px solid var(--background-menu-divider); } } + +.create-style-link { + .item-link .item-inner:before { + display: none; + } + .item-title { + color: @brandColor; + } +} diff --git a/apps/documenteditor/mobile/src/less/icons-material.less b/apps/documenteditor/mobile/src/less/icons-material.less index d1dbc3656..88b85795d 100644 --- a/apps/documenteditor/mobile/src/less/icons-material.less +++ b/apps/documenteditor/mobile/src/less/icons-material.less @@ -215,6 +215,11 @@ height: 22px; .encoded-svg-mask(''); } + &.icon-create-style { + width: 24px; + height: 24px; + .encoded-svg-mask('') + } // Presets of table borders &.icon-table-borders-all { width: 28px; diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx index 8cce09c6d..c568acec3 100644 --- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx @@ -16,7 +16,7 @@ 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"; +import {ParagraphAdvSettings, PageParagraphBackColor, PageParagraphCustomColor, PageParagraphStyle, PageCreateTextStyle, PageChangeNextParagraphStyle} from "./EditParagraph"; import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape"; import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings} from "./EditImage"; import {PageTableOptions, PageTableWrap, PageTableStyle, PageTableStyleOptions, PageTableCustomFillColor, PageTableBorderColor, PageTableCustomBorderColor} from "./EditTable"; @@ -66,6 +66,18 @@ const routes = [ path: '/edit-paragraph-custom-color/', component: PageParagraphCustomColor, }, + { + path: '/edit-paragraph-style/', + component: PageParagraphStyle + }, + { + path: '/create-text-style/', + component: PageCreateTextStyle + }, + { + path: '/change-next-paragraph-style/', + component: PageChangeNextParagraphStyle + }, //Edit shape { path: '/edit-shape-style/', diff --git a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx index e3662f2bd..dd6b5764e 100644 --- a/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx +++ b/apps/documenteditor/mobile/src/view/edit/EditParagraph.jsx @@ -1,6 +1,6 @@ import React, {Fragment, useState} from 'react'; import {observer, inject} from "mobx-react"; -import {f7, List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Toggle, Link} from 'framework7-react'; +import {f7, List, ListItem, Icon, Button, Page, Navbar, NavRight, Segmented, BlockTitle, Toggle, Link, NavLeft, NavTitle, ListInput} 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'; @@ -191,6 +191,7 @@ const EditParagraph = props => { const storeParagraphSettings = props.storeParagraphSettings; const paragraphStyles = storeParagraphSettings.paragraphStyles; const curStyleName = storeParagraphSettings.styleName; + const curStyle = paragraphStyles.find(style => style.name === curStyleName); const thumbSize = storeParagraphSettings.styleThumbSize; const paragraph = props.storeFocusObjects.paragraphObject; @@ -200,6 +201,18 @@ const EditParagraph = props => { return ( + {t('Edit.textParagraphStyle')} + + +
+ + { onKeepNext: props.onKeepNext }}> - {_t.textParagraphStyles} + + ) +}; + +const EditParagraphStyle = props => { + const { t } = useTranslation(); + const api = Common.EditorApi.get(); + const _t = t('Edit', {returnObjects: true}); + const storeParagraphSettings = props.storeParagraphSettings; + const paragraphStyles = storeParagraphSettings.paragraphStyles; + const curStyleName = storeParagraphSettings.styleName; + const thumbSize = storeParagraphSettings.styleThumbSize; + const activeStyle = Device.android ? 'link no-active-state' : 'no-active-state'; + + return ( + + + {Device.phone && + + + + + + } + + + + {Device.android && } + + {paragraphStyles.map((style, index) => ( { if(curStyleName !== style.name) { @@ -236,21 +281,122 @@ const EditParagraph = props => { }} >
+ {!api.asc_IsStyleDefault(style.name) && ( +
+ { + await storeParagraphSettings.changeParaStyleName('Normal'); + await props.onStyleMenuDelete(style.name); + }}> + + +
+ )} + + ))} + + + ) +} + +const CreateTextStyle = props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + const [titleNewStyle, setTitle] = useState(''); + const [nextParagraphStyle, setParagraph] = useState(''); + + return ( + + + { + let title = titleNewStyle.trim(); + if(title) { + props.onSaveStyle(title, nextParagraphStyle); + props.f7router.back(); + } + }}>{t('Edit.textDone')} + + + { + setTitle(event.target.value) + }} + > + + {t('Edit.textNextParagraphStyle')} + + + + + ) +} + +const ChangeNextParagraphStyle = props => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + const nextParagraphStyle = props.nextParagraphStyle; + const storeParagraphSettings = props.storeParagraphSettings; + const paragraphStyles = storeParagraphSettings.paragraphStyles; + const thumbSize = storeParagraphSettings.styleThumbSize; + const activeStyle = Device.android ? 'link no-active-state' : 'no-active-state'; + const [newParagraph, setParagraph] = useState(nextParagraphStyle); + + return ( + + + + { + if(newParagraph) { + setParagraph(''); + props.setParagraph(''); + } + }} title={t('Edit.textSameCreatedNewStyle')}> + {paragraphStyles.map((style, index) => ( + { + if(newParagraph !== style.name) { + setParagraph(style.name); + props.setParagraph(style.name); + } + }} + > +
))} - + ) -}; + +} const EditParagraphContainer = inject("storeParagraphSettings", "storeFocusObjects")(observer(EditParagraph)); const ParagraphAdvSettings = inject("storeParagraphSettings", "storeFocusObjects")(observer(PageAdvancedSettings)); const PageParagraphBackColor = inject("storeParagraphSettings", "storePalette")(observer(PageBackgroundColor)); const PageParagraphCustomColor = inject("storeParagraphSettings", "storePalette")(observer(PageCustomBackColor)); +const PageParagraphStyle = inject("storeParagraphSettings")(observer(EditParagraphStyle)); +const PageCreateTextStyle = inject("storeParagraphSettings")(observer(CreateTextStyle)); +const PageChangeNextParagraphStyle = inject("storeParagraphSettings")(observer(ChangeNextParagraphStyle)); -export {EditParagraphContainer as EditParagraph, +export { + EditParagraphContainer as EditParagraph, ParagraphAdvSettings, PageParagraphBackColor, - PageParagraphCustomColor}; \ No newline at end of file + PageParagraphCustomColor, + PageParagraphStyle, + PageCreateTextStyle, + PageChangeNextParagraphStyle +}; \ No newline at end of file