diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less index 83862bd762..2570644484 100644 --- a/apps/common/mobile/resources/less/common-material.less +++ b/apps/common/mobile/resources/less/common-material.less @@ -277,8 +277,7 @@ .item-input, .item-link { .item-inner { - // display: block; - padding-right: 0; + display: block; .item-title, .item-label { width: 100%; @@ -294,10 +293,6 @@ .item-input:not(.item-input-outline) .item-content::before, .item-input:not(.item-input-outline).item-content::before { background: transparent; } - - .item-input .item-content, .item-input.item-content { - padding-left: 0; - } } .buttons { diff --git a/apps/documenteditor/mobile/src/controller/add/AddLink.jsx b/apps/documenteditor/mobile/src/controller/add/AddLink.jsx index 24991e0867..960897fbeb 100644 --- a/apps/documenteditor/mobile/src/controller/add/AddLink.jsx +++ b/apps/documenteditor/mobile/src/controller/add/AddLink.jsx @@ -81,11 +81,11 @@ class AddLinkController extends Component { return ( !this.props.isNavigate ? Device.phone ? - this.props.onClosed('add-link')}> + this.props.closeOptions('add-link')}> : - this.props.onClosed('add-link')}> + this.props.closeOptions('add-link')}> diff --git a/apps/documenteditor/mobile/src/page/main.jsx b/apps/documenteditor/mobile/src/page/main.jsx index 76e54e01ef..1076f75c5f 100644 --- a/apps/documenteditor/mobile/src/page/main.jsx +++ b/apps/documenteditor/mobile/src/page/main.jsx @@ -15,6 +15,7 @@ import NavigationController from '../controller/settings/Navigation'; import { AddLinkController } from '../controller/add/AddLink'; import EditHyperlink from '../controller/edit/EditHyperlink'; import Snackbar from '../components/Snackbar/Snackbar'; +import EditView from '../view/edit/Edit'; export const MainContext = createContext(); @@ -224,14 +225,12 @@ class MainPage extends Component { message={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")} /> - { - !this.state.editOptionsVisible ? null : - - } + {!this.state.editOptionsVisible ? null : } {!this.state.addOptionsVisible ? null : } - { - !this.state.addLinkSettingsVisible ? null : - + {!this.state.addLinkSettingsVisible ? null : + } { !this.state.editLinkSettingsVisible ? null : diff --git a/apps/documenteditor/mobile/src/view/edit/Edit.jsx b/apps/documenteditor/mobile/src/view/edit/Edit.jsx index 863aa20a77..b865f3faf4 100644 --- a/apps/documenteditor/mobile/src/view/edit/Edit.jsx +++ b/apps/documenteditor/mobile/src/view/edit/Edit.jsx @@ -1,29 +1,21 @@ -import React, {useState, useEffect} from 'react'; -import {observer, inject} from "mobx-react"; -import { Popover, Sheet, View, Page, Navbar, NavRight, NavLeft, NavTitle, Tabs, Tab, Link } from 'framework7-react'; -import { f7 } from 'framework7-react'; -import { useTranslation } from 'react-i18next'; -import {Device} from '../../../../../common/mobile/utils/device'; - -import EditTextController from "../../controller/edit/EditText"; -import EditParagraphController from "../../controller/edit/EditParagraph"; -import EditShapeController from "../../controller/edit/EditShape"; -import EditImageController from "../../controller/edit/EditImage"; -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, PageParagraphStyle, PageCreateTextStyle, PageChangeNextParagraphStyle} from "./EditParagraph"; -import {PageShapeStyleNoFill, PageShapeStyle, PageShapeCustomFillColor, PageShapeBorderColor, PageShapeCustomBorderColor, PageWrap, PageReorder, PageReplace} from "./EditShape"; -import {PageImageReorder, PageImageReplace, PageImageWrap, PageLinkSettings, PageWrappingStyle} 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 React, { useContext, useEffect } from 'react'; +import { Popover, Sheet, View, f7 } from 'framework7-react'; +import { Device } from '../../../../../common/mobile/utils/device'; +import { PageTextFonts, PageTextAddFormatting, PageTextBulletsAndNumbers, PageTextLineSpacing, PageTextFontColor, PageTextCustomFontColor, PageTextHighlightColor } from "./EditText"; +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, PageWrappingStyle } 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 { PageEditLeaderTableContents, PageEditStylesTableContents, PageEditStructureTableContents } from './EditTableContents'; +import EditingPage from './EditingPage'; +import { MainContext } from '../../page/main'; const routes = [ + { + path: '/editing-page/', + component: EditingPage + }, //Edit text { path: '/edit-text-fonts/', @@ -235,182 +227,30 @@ routes.forEach(route => { }; }); -const EmptyEditLayout = () => { - const { t } = useTranslation(); - const _t = t('Edit', {returnObjects: true}); +const EditView = () => { + const mainContext = useContext(MainContext); + + useEffect(() => { + if(Device.phone) { + f7.sheet.open('#edit-sheet'); + } else { + f7.popover.open('#edit-popover', '#btn-edit'); + } + }, []); + return ( - -
-
-

{_t.textSelectObjectToEdit}

-
-
-
- ) -}; - -const EditLayoutNavbar = ({ editors, inPopover }) => { - const isAndroid = Device.android; - const { t } = useTranslation(); - const _t = t('Edit', {returnObjects: true}); - return ( - - { - editors.length > 1 ? -
- {editors.map((item, index) => {item.caption})} - {isAndroid && } -
: - { editors[0].caption } - } - { !inPopover && } -
- ) -}; - -const EditLayoutContent = ({ editors }) => { - if (editors.length > 1) { - return ( - - {editors.map((item, index) => - - {item.component} - - )} - - ) - } else { - return ( - - {editors[0].component} - - ) - } -}; - -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, - component: - }); - } else { - if(inToc) { - editors.push({ - caption: _t.textTableOfCont, - id: 'edit-table-contents', - component: - }) - } - if (settings.indexOf('image') > -1) { - editors.push({ - caption: _t.textImage, - id: 'edit-image', - component: - }) - } - if (settings.indexOf('shape') > -1) { - editors.push({ - caption: _t.textShape, - id: 'edit-shape', - component: - }) - } - if (settings.indexOf('chart') > -1) { - editors.push({ - caption: _t.textChart, - id: 'edit-chart', - component: - }) - } - if (settings.indexOf('table') > -1) { - editors.push({ - caption: _t.textTable, - id: 'edit-table', - component: - }) - } - if (settings.indexOf('header') > -1) { - editors.push({ - caption: headerType === 2 ? _t.textFooter : _t.textHeader, - id: 'edit-header', - component: - }) - } - if (settings.indexOf('text') > -1) { - editors.push({ - caption: _t.textText, - id: 'edit-text', - component: - }) - } - if (settings.indexOf('paragraph') > -1) { - editors.push({ - caption: _t.textParagraph, - id: 'edit-paragraph', - component: - }) - } - } - - return ( - - - - - - - - ) -}; - -const EditTabsContainer = inject("storeFocusObjects")(observer(EditTabs)); - -const EditView = props => { - const onOptionClick = (page) => { - $f7.views.current.router.navigate(page); - }; - const show_popover = props.usePopover; - return ( - show_popover ? - props.onClosed()}> - + !Device.phone ? + mainContext.closeOptions('edit')}> + + + : - props.onClosed()}> - + mainContext.closeOptions('edit')}> + + + ) }; -const EditOptions = props => { - useEffect(() => { - if ( Device.phone ) - f7.sheet.open('#edit-sheet'); - else f7.popover.open('#edit-popover', '#btn-edit'); - - return () => { - // component will unmount - } - }); - - const onviewclosed = () => { - if ( props.onclosed ) { - props.onclosed(); - } - }; - - return ( - - ) -}; - -export default EditOptions; +export default EditView; diff --git a/apps/documenteditor/mobile/src/view/edit/EditingPage.jsx b/apps/documenteditor/mobile/src/view/edit/EditingPage.jsx new file mode 100644 index 0000000000..14f904f0b6 --- /dev/null +++ b/apps/documenteditor/mobile/src/view/edit/EditingPage.jsx @@ -0,0 +1,156 @@ +import React, { useState, useEffect } from 'react'; +import { observer, inject } from "mobx-react"; +import { Page, Navbar, NavRight, NavTitle, Tabs, Tab, Link } from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import { Device } from '../../../../../common/mobile/utils/device'; +import EditTextController from "../../controller/edit/EditText"; +import EditParagraphController from "../../controller/edit/EditParagraph"; +import EditShapeController from "../../controller/edit/EditShape"; +import EditImageController from "../../controller/edit/EditImage"; +import EditTableController from "../../controller/edit/EditTable"; +import EditChartController from "../../controller/edit/EditChart"; +import EditHeaderController from "../../controller/edit/EditHeader"; +import EditTableContentsController from "../../controller/edit/EditTableContents"; + +const EmptyEditLayout = () => { + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + + return ( + +
+
+

{_t.textSelectObjectToEdit}

+
+
+
+ ) +}; + +const EditLayoutNavbar = ({ editors, idActiveTab, setIdActiveTab }) => { + const isAndroid = Device.android; + const { t } = useTranslation(); + const _t = t('Edit', {returnObjects: true}); + + useEffect(() => { + localStorage.setItem('de-mobile-edit-active-tab', idActiveTab); + }, [idActiveTab]); + + return ( + + {editors.length > 1 ? +
+ {editors.map((item, _) => setIdActiveTab(item.id)} tabLinkActive={item.id === idActiveTab}>{item.caption})} + {isAndroid && } +
: + {editors[0].caption} + } + {Device.phone && } +
+ ) +}; + +const EditLayoutContent = ({ editors, idActiveTab }) => { + if (editors.length > 1) { + return ( + + {editors.map((item, _) => + + {item.component} + + )} + + ) + } else { + return ( + + {editors[0].component} + + ) + } +}; + +const EditingPage = inject('storeFocusObjects')(observer(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; + const savedIdTab = localStorage.getItem('de-mobile-edit-active-tab'); + const [idActiveTab, setIdActiveTab] = useState(savedIdTab || 'edit-text'); + let editors = []; + + if (settings.length < 1) { + editors.push({ + caption: _t.textSettings, + component: + }); + } else { + if(inToc) { + editors.push({ + caption: _t.textTableOfCont, + id: 'edit-table-contents', + component: + }) + } + if (settings.indexOf('image') > -1) { + editors.push({ + caption: _t.textImage, + id: 'edit-image', + component: + }) + } + if (settings.indexOf('shape') > -1) { + editors.push({ + caption: _t.textShape, + id: 'edit-shape', + component: + }) + } + if (settings.indexOf('chart') > -1) { + editors.push({ + caption: _t.textChart, + id: 'edit-chart', + component: + }) + } + if (settings.indexOf('table') > -1) { + editors.push({ + caption: _t.textTable, + id: 'edit-table', + component: + }) + } + if (settings.indexOf('header') > -1) { + editors.push({ + caption: headerType === 2 ? _t.textFooter : _t.textHeader, + id: 'edit-header', + component: + }) + } + if (settings.indexOf('text') > -1) { + editors.push({ + caption: _t.textText, + id: 'edit-text', + component: + }) + } + if (settings.indexOf('paragraph') > -1) { + editors.push({ + caption: _t.textParagraph, + id: 'edit-paragraph', + component: + }) + } + } + + return ( + + + + + ) +})); + +export default EditingPage; \ No newline at end of file