diff --git a/apps/common/mobile/lib/controller/Collaboration.jsx b/apps/common/mobile/lib/controller/Collaboration.jsx index 14ac7c170..a5fd1f57e 100644 --- a/apps/common/mobile/lib/controller/Collaboration.jsx +++ b/apps/common/mobile/lib/controller/Collaboration.jsx @@ -1,30 +1,35 @@ -import React, { useState } from 'react' -import { resetUsers } from '../store/actions/actions.js' +import React, { Component } from 'react' import Notifications from '../../utils/notifications.js' +import {observer, inject} from "mobx-react" -const Collaboration = () => { - const onChangeEditUsers = (users) => { - const store = Common.Store.get(); - store.dispatch(resetUsers(Object.values(users))); + +@inject('users') +class CollaborationController extends Component { + constructor(props){ + super(props) + + Common.Notifications.on('engineCreated', api => { + // this.api = api; + api.asc_registerCallback('asc_onAuthParticipantsChanged', this.onChangeEditUsers.bind(this)); + api.asc_registerCallback('asc_onParticipantsChanged', this.onChangeEditUsers.bind(this)); + // this.api.asc_registerCallback('asc_onAddComment', _.bind(this.onApiAddComment, this)); + // this.api.asc_registerCallback('asc_onAddComments', _.bind(this.onApiAddComments, this)); + // this.api.asc_registerCallback('asc_onChangeCommentData', _.bind(this.onApiChangeCommentData, this)); + // this.api.asc_registerCallback('asc_onRemoveComment', _.bind(this.onApiRemoveComment, this)); + // this.api.asc_registerCallback('asc_onRemoveComments', _.bind(this.onApiRemoveComments, this)); + // this.api.asc_registerCallback('asc_onShowComment', _.bind(this.apiShowComments, this)); + // this.api.asc_registerCallback('asc_onHideComment', _.bind(this.apiHideComments, this)); + }); + } + + onChangeEditUsers(users) { + const storeUsers = this.props.users; + storeUsers.reset(users); }; - Common.Notifications.on('engineCreated', api => { - // this.api = api; - api.asc_registerCallback('asc_onAuthParticipantsChanged', onChangeEditUsers); - api.asc_registerCallback('asc_onParticipantsChanged', onChangeEditUsers); - // this.api.asc_registerCallback('asc_onAddComment', _.bind(this.onApiAddComment, this)); - // this.api.asc_registerCallback('asc_onAddComments', _.bind(this.onApiAddComments, this)); - // this.api.asc_registerCallback('asc_onChangeCommentData', _.bind(this.onApiChangeCommentData, this)); - // this.api.asc_registerCallback('asc_onRemoveComment', _.bind(this.onApiRemoveComment, this)); - // this.api.asc_registerCallback('asc_onRemoveComments', _.bind(this.onApiRemoveComments, this)); - // this.api.asc_registerCallback('asc_onShowComment', _.bind(this.apiShowComments, this)); - // this.api.asc_registerCallback('asc_onHideComment', _.bind(this.apiHideComments, this)); - }); - - return { - setApi(api) { - } + render() { + return null } }; -export {Collaboration as CollaborationController} \ No newline at end of file +export default CollaborationController; \ No newline at end of file diff --git a/apps/common/mobile/lib/store/actions/actions.js b/apps/common/mobile/lib/store/actions/actions.js deleted file mode 100644 index 258592963..000000000 --- a/apps/common/mobile/lib/store/actions/actions.js +++ /dev/null @@ -1,8 +0,0 @@ -export const RESET_USERS = 'RESET_USERS'; - -export const resetUsers = list => { - return { - type: RESET_USERS, - payload: list - } -}; diff --git a/apps/common/mobile/lib/store/users.js b/apps/common/mobile/lib/store/users.js index 3f38e433b..a98f1e502 100644 --- a/apps/common/mobile/lib/store/users.js +++ b/apps/common/mobile/lib/store/users.js @@ -1,11 +1,10 @@ -import * as actionTypes from './actions/actions' -const usersReducer = (state = [], action) => { - if (action.type == actionTypes.RESET_USERS) { - return [...action.payload]; +import {observable, action} from 'mobx'; + +export class storeUsers { + @observable users = [] + + @action reset(users) { + this.users = Object.values(users) } - - return state; -}; - -export default usersReducer \ No newline at end of file +} diff --git a/apps/common/mobile/lib/view/Collaboration.jsx b/apps/common/mobile/lib/view/Collaboration.jsx index 01dda0a47..f51a73f8a 100644 --- a/apps/common/mobile/lib/view/Collaboration.jsx +++ b/apps/common/mobile/lib/view/Collaboration.jsx @@ -1,24 +1,34 @@ -import React, { Component } from 'react'; -import { useSelector } from 'react-redux'; +import React, { Component, useEffect } from 'react'; +import { observer, inject } from "mobx-react"; import { Popover, List, ListItem, Navbar, NavTitle, NavRight } from 'framework7-react'; import { Sheet, Toolbar, BlockTitle, Link, Page, View, Icon } from 'framework7-react'; +import { f7 } from 'framework7-react'; import { withTranslation, useTranslation } from 'react-i18next'; -const PageUsers = () => { - const { t } = useTranslation(); - const userlist = useSelector(state => state.users); - return ( - - - {t("Collaboration.textEditUser")} - - {userlist.map((model, i) => ( - - - - ))} - - ) +@inject('users') +@observer +class PageUsers extends Component { + constructor(props){ + super(props) + } + + render() { + const { t } = this.props; + const userlist = this.props.users; + return ( + + + {t("Collaboration.textEditUser")} + + {userlist.users.map((model, i) => ( + + + + ))} + + ) + } }; const PageCollaboration = () => { @@ -68,7 +78,7 @@ class CollaborationSheet extends Component { } render() { return ( - + this.props.onclosed()}> @@ -77,5 +87,25 @@ class CollaborationSheet extends Component { } } +const CollaborationView = props => { + useEffect(() => { + f7.sheet.open('.coauth__sheet'); + + return () => { + // component will unmount + } + }); + + const onviewclosed = () => { + if ( props.onclosed ) props.onclosed(); + }; + + return ( + + ) +}; + +const pageusers = withTranslation()(PageUsers); // export withTranslation()(CollaborationPopover); -export {CollaborationPopover, CollaborationSheet, PageCollaboration, PageUsers, } \ No newline at end of file +export {CollaborationPopover, CollaborationSheet, PageCollaboration, pageusers as PageUsers} +export default CollaborationView; diff --git a/apps/common/mobile/resources/less/common-ios.less b/apps/common/mobile/resources/less/common-ios.less new file mode 100644 index 000000000..96836464b --- /dev/null +++ b/apps/common/mobile/resources/less/common-ios.less @@ -0,0 +1,52 @@ + +.device-ios { + .popover__titled { + .popover-inner { + //border-radius: var(--f7-popover-border-radius); + + > .view { + border-radius: var(--f7-popover-border-radius); + } + } + + .navbar-bg { + //-webkit-backdrop-filter: none; + backdrop-filter: none; + } + + .list:first-child { + li:first-child { + a { + border-radius: 0; + } + } + } + + .list:last-child { + li:last-child { + a { + border-radius: 0; + } + + &:after { + content: ''; + position: absolute; + background-color: var(--f7-navbar-border-color, var(--f7-bars-border-color)); + display: block; + //z-index: 15; + top: auto; + right: auto; + bottom: 0; + left: 0; + height: 1px; + width: 100%; + transform-origin: 50% 100%; + transform: scaleY(calc(1 / var(--f7-device-pixel-ratio))); + + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + } + } + } + } +} diff --git a/apps/common/mobile/resources/less/common-material.less b/apps/common/mobile/resources/less/common-material.less new file mode 100644 index 000000000..7462e4a1e --- /dev/null +++ b/apps/common/mobile/resources/less/common-material.less @@ -0,0 +1,12 @@ + +.device-android { + .popover__titled { + .list:last-child { + li:last-child { + a { + border-radius: 0; + } + } + } + } +} diff --git a/apps/common/mobile/utils/device.jsx b/apps/common/mobile/utils/device.jsx new file mode 100644 index 000000000..f156961a2 --- /dev/null +++ b/apps/common/mobile/utils/device.jsx @@ -0,0 +1,41 @@ + +import React from 'react'; +import { f7 } from 'framework7-react'; + +class Device { + constructor(){ + const ua = navigator.userAgent, + isMobile = /Mobile(\/|\s|;)/.test(ua); + + this.isPhone = /(iPhone|iPod)/.test(ua) || + (!/(Silk)/.test(ua) && (/(Android)/.test(ua) && (/(Android 2)/.test(ua) || isMobile))) || + (/(BlackBerry|BB)/.test(ua) && isMobile) || + /(Windows Phone)/.test(ua); + + this.isTablet = !this.isPhone && (/iPad/.test(ua) || /Android/.test(ua) || /(RIM Tablet OS)/.test(ua) || + (/MSIE 10/.test(ua) && /; Touch/.test(ua))); + } + + get phone() { + return this.isPhone + } + + get tablet() { + return this.isTablet + } + + get sailfish() { + return /Sailfish/.test(navigator.userAgent) || /Jolla/.test(navigator.userAgent); + } + + get android() { + return f7.device.android; + } + + get ios() { + return f7.device.ios; + } +} + +const device = new Device(); +export {device as Device}; diff --git a/apps/documenteditor/mobile/locale/en.json b/apps/documenteditor/mobile/locale/en.json index 8db7459d5..230df7b56 100644 --- a/apps/documenteditor/mobile/locale/en.json +++ b/apps/documenteditor/mobile/locale/en.json @@ -19,5 +19,40 @@ }, "Collaboration": { "textEditUser": "Users who are editing the file:" + }, + "Edit": { + "textClose": "Close", + "textBack": "Back", + "textText": "Text", + "textParagraph": "Paragraph", + "textTable": "Table", + "textFooter": "Footer", + "textHeader": "Header", + "textShape": "Shape", + "textImage": "Image", + "textChart": "Chart", + "textHyperlink": "Hyperlink", + "textSelectObjectToEdit": "Select object to edit", + "textSettings": "Settings", + "textFontColor": "Font Color", + "textHighlightColor": "Highlight Color", + "textAdditionalFormatting": "Additional Formatting", + "textAdditional": "Additional", + "textBullets": "Bullets", + "textNumbers": "Numbers", + "textLineSpacing": "Line Spacing", + "textFonts": "Fonts", + "textAuto": "Auto", + "textPt": "pt", + "textSize": "Size", + "textAuto": "Auto", + "textStrikethrough": "Strikethrough", + "textDoubleStrikethrough": "Double Strikethrough", + "textSuperscript": "Superscript", + "textSubscript": "Subscript", + "textSmallCaps": "Small Caps", + "textAllCaps": "All Caps", + "textLetterSpacing": "Letter Spacing", + "textNone": "None" } } \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/components/app.jsx b/apps/documenteditor/mobile/src/components/app.jsx index cc5b8540e..c91b4b6e9 100644 --- a/apps/documenteditor/mobile/src/components/app.jsx +++ b/apps/documenteditor/mobile/src/components/app.jsx @@ -1,19 +1,15 @@ import React from 'react'; -import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; -import { App, Panel, View, Popup, Page, Navbar, NavRight, Link, Block, BlockTitle, List, ListItem } from 'framework7-react'; -import i18n from '../js/i18n'; +import {App,Panel,Views,View,Popup,Page,Navbar,Toolbar,NavRight,Link,Block,BlockTitle,List,ListItem,ListInput,ListButton,BlockFooter} from 'framework7-react'; + import routes from '../js/routes'; -import { initApi } from '../store/actions/actions'; - import '../../../../common/Gateway.js'; import '../../../../common/main/lib/util/utils.js'; -import { CollaborationController } from '../../../../common/mobile/lib/controller/Collaboration.jsx'; import Notifications from '../../../../common/mobile/utils/notifications.js' +import MainController from '../controller/Main'; -class ComponentApp extends React.Component { +export default class extends React.Component { constructor() { super(); @@ -23,20 +19,12 @@ class ComponentApp extends React.Component { name: 'Desktop Editor', // App name theme: 'auto', // Automatic theme detection - - // App routes routes: routes, }, - // Login screen demo data - username: '', - password: '', } Common.Notifications = new Notifications(); - - Common.Controllers = {}; - Common.Controllers.Collaboration = new CollaborationController(); } render() { return ( @@ -70,6 +58,7 @@ class ComponentApp extends React.Component { {/* Your main view, should have "view-main" class */} + {/* Popup */} @@ -89,168 +78,12 @@ class ComponentApp extends React.Component { ) } - alertLoginData() { - this.$f7.dialog.alert('Username: ' + this.state.username + '
Password: ' + this.state.password, () => { - this.$f7.loginScreen.close(); - }); - } - componentDidMount() { - this.$f7ready((f7) => { - // Call F7 APIs here - }); - const script = document.createElement("script"); - script.src = "../../../../sdkjs/develop/sdkjs/word/scripts.js"; - script.async = true; - script.onload = () => { - let dep_scripts = ['../../../vendor/xregexp/xregexp-all-min.js', - '../../../vendor/sockjs/sockjs.min.js', - '../../../vendor/jszip/jszip.min.js', - '../../../vendor/jszip-utils/jszip-utils.min.js']; - dep_scripts.push(...sdk_scripts); + componentDidMount() { + this.$f7ready((f7) => { + // Call F7 APIs here + }); - const promise_get_script = (scriptpath) => { - return new Promise((resolve, reject) => { - const script = document.createElement("script"); - script.src = scriptpath; - script.onload = () => { - console.log('loaded ' + scriptpath); - resolve('ok'); - }; - script.onerror = () => { - console.log('error ' + scriptpath); - reject('error'); - }; - - document.body.appendChild(script); - }); - }; - - const loadConfig = data => { - let me = this; - console.log('load config'); - - me.editorConfig = Object.assign({}, this.editorConfig, data.config); - me.appOptions.user = Common.Utils.fillUserInfo(me.editorConfig.user, me.editorConfig.lang, "Local.User"/*me.textAnonymous*/); - }; - - const loadDocument = data => { - this.permissions = {}; - this.document = data.doc; - - let docInfo = {}; - - if (data.doc) { - this.permissions = Object.assign(this.permissions, data.doc.permissions); - - let _permissions = Object.assign({}, data.doc.permissions), - _user = new Asc.asc_CUserInfo(); - _user.put_Id(this.appOptions.user.id); - _user.put_FullName(this.appOptions.user.fullname); - - docInfo = new Asc.asc_CDocInfo(); - docInfo.put_Id(data.doc.key); - docInfo.put_Url(data.doc.url); - docInfo.put_Title(data.doc.title); - docInfo.put_Format(data.doc.fileType); - docInfo.put_VKey(data.doc.vkey); - docInfo.put_Options(data.doc.options); - docInfo.put_UserInfo(_user); - docInfo.put_CallbackUrl(this.editorConfig.callbackUrl); - docInfo.put_Token(data.doc.token); - docInfo.put_Permissions(_permissions); - docInfo.put_EncryptedInfo(this.editorConfig.encryptionKeys); - - // var enable = !this.editorConfig.customization || (this.editorConfig.customization.macros!==false); - // docInfo.asc_putIsEnabledMacroses(!!enable); - // enable = !this.editorConfig.customization || (this.editorConfig.customization.plugins!==false); - // docInfo.asc_putIsEnabledPlugins(!!enable); - - // let type = /^(?:(pdf|djvu|xps))$/.exec(data.doc.fileType); - // if (type && typeof type[1] === 'string') { - // this.permissions.edit = this.permissions.review = false; - // } - } - - this.api.asc_registerCallback('asc_onGetEditorPermissions', onEditorPermissions); - // this.api.asc_registerCallback('asc_onLicenseChanged', _.bind(this.onLicenseChanged, this)); - // this.api.asc_registerCallback('asc_onRunAutostartMacroses', _.bind(this.onRunAutostartMacroses, this)); - this.api.asc_setDocInfo(docInfo); - this.api.asc_getEditorPermissions(this.editorConfig.licenseUrl, this.editorConfig.customerId); - - // Common.SharedSettings.set('document', data.doc); - - // if (data.doc) { - // DE.getController('Toolbar').setDocumentTitle(data.doc.title); - // if (data.doc.info) { - // data.doc.info.author && console.log("Obsolete: The 'author' parameter of the document 'info' section is deprecated. Please use 'owner' instead."); - // data.doc.info.created && console.log("Obsolete: The 'created' parameter of the document 'info' section is deprecated. Please use 'uploaded' instead."); - // } - // } - }; - - const onEditorPermissions = params => { - let me = this; - const licType = params.asc_getLicenseType(); - - me.appOptions.canLicense = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit); - // me.appOptions.canEdit = (me.permissions.edit !== false || me.permissions.review === true) && // can edit or review - // (me.editorConfig.canRequestEditRights || me.editorConfig.mode !== 'view') && // if mode=="view" -> canRequestEditRights must be defined - // (!me.appOptions.isReviewOnly || me.appOptions.canLicense) && // if isReviewOnly==true -> canLicense must be true - // me.isSupportEditFeature(); - // me.appOptions.isEdit = me.appOptions.canLicense && me.appOptions.canEdit && me.editorConfig.mode !== 'view'; - - // me.api.asc_setViewMode(!me.appOptions.isEdit); - me.api.asc_setViewMode(false); - me.api.asc_LoadDocument(); - me.api.Resize(); - }; - - const _process_array = (array, fn) => { - let results = []; - return array.reduce(function(p, item) { - return p.then(function() { - return fn(item).then(function(data) { - results.push(data); - return results; - }); - }); - }, Promise.resolve()); - }; - - _process_array(dep_scripts, promise_get_script) - .then ( result => { - this.api = new Asc.asc_docs_api({ - 'id-view' : 'editor_sdk', - 'mobile' : true, - // 'translate': translate - }); - - this.appOptions = {}; - - Common.Gateway.on('init', loadConfig); - // Common.Gateway.on('showmessage', _.bind(me.onExternalMessage, me)); - Common.Gateway.on('opendocument', loadDocument); - Common.Gateway.appReady(); - - Common.Notifications.trigger('engineCreated', this.api); - const { initApi } = this.props; - initApi(this.api); - }, error => { - console.log('promise failed ' + error); - }); - }; - - script.onerror = () => { - console.log('error'); - }; - - document.body.appendChild(script); - } + this.refs.mainController.initSdk(); + } } - -const mapDispatchToProps = dispatch => bindActionCreators({ - initApi -}, dispatch); - -export default connect(undefined, mapDispatchToProps)(ComponentApp); diff --git a/apps/documenteditor/mobile/src/components/edit/Edit.jsx b/apps/documenteditor/mobile/src/components/edit/Edit.jsx index 2e5afbfe2..2919d5460 100644 --- a/apps/documenteditor/mobile/src/components/edit/Edit.jsx +++ b/apps/documenteditor/mobile/src/components/edit/Edit.jsx @@ -1,57 +1,162 @@ -import React, {Component} from 'react'; -import { - Page, - Navbar, - NavRight, - NavLeft, - Link, - Popup, - Tabs, - Tab -} from 'framework7-react'; -import EditText from "./EditText"; +import React, {useState, useEffect} from 'react'; +import {observer, inject} from "mobx-react"; +import { Page, Navbar, NavRight, NavLeft, NavTitle, Link, Sheet, Tabs, Tab, View } from 'framework7-react'; +import { f7 } from 'framework7-react'; +import { useTranslation } from 'react-i18next'; +import EditTextController from "./controller/EditText"; import EditParagraph from "./EditParagraph"; -export default class EditContainer extends Component { - constructor(props) { - super(props); - this.state = { - popupOpened: false, - }; - } - render() { - const editors = ['text', 'paragraph'];//, 'table', 'header', 'shape', 'image', 'chart', 'hyperlink']; - const tabLinks = editors.map((item, index) => - {item} - ); - const tabs = editors.map((item, index) => - - {item === 'text' && } - {item === 'paragraph' && } - {/*{item === 'table' && } - {item === 'header' && } - {item === 'shape' && } - {item === 'image' && } - {item === 'chart' && } - {item === 'hyperlink' && }*/} - - ); +const EmptyEditLayout = () => { + const { t } = useTranslation(); + return ( + +
+
+

{t("Edit.textSelectObjectToEdit")}

+
+
+
+ ) +}; + +const EditLayoutNavbar = ({ editors }) => { + const { t } = useTranslation(); + return ( + + { + editors.length > 1 ? + + {editors.map((item, index) => {item.caption})} + : + { editors[0].caption } + } + + {t("Edit.textClose")} + + + ) +}; + +const EditLayoutContent = ({ editors }) => { + if (editors.length > 1) { return ( - this.setState({popupOpened : false})}> - - - - {tabLinks} - - - Close - - - - {tabs} - - - + + {editors.map((item, index) => + + {item.component} + + )} + + ) + } else { + return ( + + {editors[0].component} + ) } -}; \ No newline at end of file +}; + +const EditSheet = props => { + const { t } = useTranslation(); + + const settings = props.storeFocusObjects.settings; + const headerType = props.storeFocusObjects.headerType; + let editors = []; + if (settings.length < 1) { + editors.push({ + caption: t("Edit.textSettings"), + component: + }); + } else { + if (settings.indexOf('text') > -1) { + editors.push({ + caption: t("Edit.textText"), + id: 'edit-text', + component: + }) + } + if (settings.indexOf('paragraph') > -1) { + editors.push({ + caption: t("Edit.textParagraph"), + id: 'edit-paragraph', + component: + }) + } + /*if (settings.indexOf('table') > -1) { + editors.push({ + caption: t("Edit.textTable"), + id: 'edit-table', + component: + }) + } + if (settings.indexOf('header') > -1) { + editors.push({ + caption: headerType==2 ? t("Edit.textFooter") : t("Edit.textHeader"), + id: 'edit-header', + component: + }) + } + if (settings.indexOf('shape') > -1) { + editors.push({ + caption: t("Edit.textShape"), + id: 'edit-shape', + component: + }) + } + if (settings.indexOf('image') > -1) { + editors.push({ + caption: t("Edit.textImage"), + id: 'edit-image', + component: + }) + } + if (settings.indexOf('chart') > -1) { + editors.push({ + caption: t("Edit.textChart"), + id: 'edit-chart', + component: + }) + } + if (settings.indexOf('hyperlink') > -1) { + editors.push({ + caption: t("Edit.textHyperlink"), + id: 'edit-link', + component: + }) + }*/ + } + + return ( + props.onclosed()}> + + + + + + + + ) +}; + +const HOC_EditSheet = inject("storeFocusObjects")(observer(EditSheet)); + +const EditOptions = props => { + useEffect(() => { + f7.sheet.open('.edit__sheet'); + + return () => { + // component will unmount + } + }); + + const onsheetclosed = () => { + if ( props.onclosed ) props.onclosed(); + }; + + return ( + + ) +}; + +export default EditOptions; diff --git a/apps/documenteditor/mobile/src/components/edit/EditText.jsx b/apps/documenteditor/mobile/src/components/edit/EditText.jsx index 91691a9d7..425aa3864 100644 --- a/apps/documenteditor/mobile/src/components/edit/EditText.jsx +++ b/apps/documenteditor/mobile/src/components/edit/EditText.jsx @@ -1,96 +1,301 @@ -import React, {Component, Fragment} from 'react'; -import { - List, - ListItem, - Icon, - Row, - Col, - Button -} from 'framework7-react'; +import React, {Fragment, useState} from 'react'; +import {observer, inject} from "mobx-react"; +import {List, ListItem, Icon, Row, Col, Button, Page, Navbar, Segmented, BlockTitle} from 'framework7-react'; +import { useTranslation } from 'react-i18next'; -export default class EditText extends Component { - constructor(props) { - super(props); - } - render() { - const textFontColor = "Font Color"; - const textHighlightColor = "Highlight Color"; - const textAdditionalFormatting = "Additional Formatting"; - const textBullets = "Bullets"; - const textNumbers = "Numbers"; - const textLineSpacing = "Line Spacing"; - - const fontName = 'Arial'; - const fontSize = '11pt'; - return ( - +const PageFonts = props => { + const { t } = useTranslation(); + const storeTextSettings = props.storeTextSettings; + const size = storeTextSettings.fontSize; + const displaySize = typeof size === 'undefined' ? t('Edit.textAuto') : size + ' ' + t('Edit.textPt'); + const curFontName = storeTextSettings.fontName; + const fonts = storeTextSettings.fontsArray; + const [vlFonts, setVlFonts] = useState({ + vlData: { + items: [], + } + }); + const renderExternal = (vl, vlData) => { + setVlFonts((prevState) => { + let fonts = [...prevState.vlData.items]; + fonts.splice(vlData.fromIndex, vlData.toIndex, ...vlData.items); + return {vlData: { + items: fonts, + }} + }); + }; + return ( + + - + +
{displaySize}
+
+ + + + +
+
+
+ {t('Edit.textFonts')} + +
    + {vlFonts.vlData.items.map((item, index) => ( + {props.changeFontFamily(item.name)}} + > + ))} +
+
+
+ ) +}; + +const PageAdditionalFormatting = props => { + const { t } = useTranslation(); + const storeTextSettings = props.storeTextSettings; + const storeFocusObjects = props.storeFocusObjects; + const paragraph = storeFocusObjects.paragraphObject; + const isStrikeout = paragraph.get_Strikeout(); + const isDStrikeout = paragraph.get_DStrikeout(); + const isSuperscript = storeTextSettings.isSuperscript; + const isSubscript = storeTextSettings.isSubscript; + const isSmallCaps = paragraph.get_SmallCaps(); + const isAllCaps = paragraph.get_AllCaps(); + const letterSpacing = Common.Utils.Metric.fnRecalcFromMM(paragraph.get_TextSpacing()); + return( + + + + {props.onAdditionalStrikethrough('strikeout', !isStrikeout)}}/> + {props.onAdditionalStrikethrough('dbStrikeout', !isDStrikeout)}}/> + {props.onAdditionalScript('superscript', !isSuperscript)}}/> + {props.onAdditionalScript('subscript', !isSubscript)}}/> + {props.onAdditionalCaps('small', !isSmallCaps)}}/> + {props.onAdditionalCaps('all', !isAllCaps)}}/> + + + +
{letterSpacing + ' ' + Common.Utils.Metric.getCurrentMetricName()}
+
+ + + + +
+
+
+
+ ) +}; + +import bulletImg1 from '../../../resources/img/bullets/bullet-01.png'; +import bulletImg2 from '../../../resources/img/bullets/bullet-02.png'; +import bulletImg3 from '../../../resources/img/bullets/bullet-03.png'; +import bulletImg4 from '../../../resources/img/bullets/bullet-04.png'; +import bulletImg5 from '../../../resources/img/bullets/bullet-05.png'; +import bulletImg6 from '../../../resources/img/bullets/bullet-06.png'; +import bulletImg7 from '../../../resources/img/bullets/bullet-07.png'; +const PageBullets = props => { + const { t } = useTranslation(); + const bulletArrays = [ + [ + {type: -1, thumb: ''}, + {type: 1, thumb: bulletImg1}, + {type: 2, thumb: bulletImg2}, + {type: 3, thumb: bulletImg3} + ], + [ + {type: 4, thumb: bulletImg4}, + {type: 5, thumb: bulletImg5}, + {type: 6, thumb: bulletImg6}, + {type: 7, thumb: bulletImg7} + ] + ]; + const storeTextSettings = props.storeTextSettings; + const typeBullets = storeTextSettings.typeBullets; + return( + + + {bulletArrays.map((bullets, index) => ( +
    + {bullets.map((bullet) => ( +
  • {props.onBullet(bullet.type)}}> + {bullet.thumb.length < 1 ? +
    + +
    : +
    + } +
  • + ))} +
+ ))} +
+ ) +}; + +import numberImg1 from '../../../resources/img/numbers/number-01.png'; +import numberImg2 from '../../../resources/img/numbers/number-02.png'; +import numberImg3 from '../../../resources/img/numbers/number-03.png'; +import numberImg4 from '../../../resources/img/numbers/number-04.png'; +import numberImg5 from '../../../resources/img/numbers/number-05.png'; +import numberImg6 from '../../../resources/img/numbers/number-06.png'; +import numberImg7 from '../../../resources/img/numbers/number-07.png'; +const PageNumbers = props => { + const { t } = useTranslation(); + const numberArrays = [ + [ + {type: -1, thumb: ''}, + {type: 4, thumb: numberImg1}, + {type: 5, thumb: numberImg2}, + {type: 6, thumb: numberImg3} + ], + [ + {type: 1, thumb: numberImg4}, + {type: 2, thumb: numberImg5}, + {type: 3, thumb: numberImg6}, + {type: 7, thumb: numberImg7} + ] + ]; + const storeTextSettings = props.storeTextSettings; + const typeNumbers = storeTextSettings.typeNumbers; + return( + + + {numberArrays.map((numbers, index) => ( +
    + {numbers.map((number) => ( +
  • {props.onNumber(number.type)}}> + {number.thumb.length < 1 ? +
    + +
    : +
    + } +
  • + ))} +
+ ))} +
+ ) +}; + +const PageLineSpacing = props => { + const { t } = useTranslation(); + const storeTextSettings = props.storeTextSettings; + const lineSpacing = storeTextSettings.lineSpacing; + return( + + + + {props.onLineSpacing(1.0)}}> + {props.onLineSpacing(1.15)}}> + {props.onLineSpacing(1.5)}}> + {props.onLineSpacing(2.0)}}> + {props.onLineSpacing(2.5)}}> + {props.onLineSpacing(3.0)}}> + + + ) +}; + +const EditText = props => { + const { t } = useTranslation(); + const storeTextSettings = props.storeTextSettings; + const fontName = storeTextSettings.fontName || t('Edit.textFonts'); + const fontSize = storeTextSettings.fontSize; + const displaySize = typeof fontSize === 'undefined' ? t('Edit.textAuto') : fontSize + ' ' + t('Edit.textPt'); + const isBold = storeTextSettings.isBold; + const isItalic = storeTextSettings.isItalic; + const isUnderline = storeTextSettings.isUnderline; + const isStrikethrough = storeTextSettings.Strikethrough; + const paragraphAlign = storeTextSettings.paragraphAlign; + return ( + + + - - - - - - - - - - - - + { props.toggleBold(!isBold)}}>B + {props.toggleItalic(!isItalic)}}>I + {props.toggleUnderline(!isUnderline)}} style={{textDecoration: "underline"}}>U + {props.toggleStrikethrough(!isStrikethrough)}} style={{textDecoration: "line-through"}}>S - + - + - + - - - - - - - - - - - - + {props.onParagraphAlign('left')}}>left + {props.onParagraphAlign('center')}}>center + {props.onParagraphAlign('right')}}>right + {props.onParagraphAlign('just')}}>just - - - - - - + {props.onParagraphMove(true)}}>moveleft + {props.onParagraphMove(false)}}>moveright - + - + - + ) - } -}; \ No newline at end of file +}; + +const EditTextContainer = inject("storeTextSettings", "storeFocusObjects")(observer(EditText)); +const PageFontsContainer = inject("storeTextSettings", "storeFocusObjects")(observer(PageFonts)); +const PageAddFormattingContainer = inject("storeTextSettings", "storeFocusObjects")(observer(PageAdditionalFormatting)); +const PageBulletsContainer = inject("storeTextSettings")(observer(PageBullets)); +const PageNumbersContainer = inject("storeTextSettings")(observer(PageNumbers)); +const PageLineSpacingContainer = inject("storeTextSettings")(observer(PageLineSpacing)); + +export {EditTextContainer as EditText, + PageFontsContainer as PageFonts, + PageAddFormattingContainer as PageAdditionalFormatting, + PageBulletsContainer as PageBullets, + PageNumbersContainer as PageNumbers, + PageLineSpacingContainer as PageLineSpacing}; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/components/edit/controller/EditText.jsx b/apps/documenteditor/mobile/src/components/edit/controller/EditText.jsx new file mode 100644 index 000000000..807efcff5 --- /dev/null +++ b/apps/documenteditor/mobile/src/components/edit/controller/EditText.jsx @@ -0,0 +1,195 @@ +import React, {Component} from 'react'; +import { EditText } from '../EditText' + +class EditTextController extends Component { + constructor(props) { + super(props); + } + + componentDidMount() { + const api = Common.EditorApi.get(); + api && api.UpdateInterfaceState(); + } + + changeFontSize(curSize, isDecrement) { + const api = Common.EditorApi.get(); + if (api) { + let size = curSize; + if (isDecrement) { + typeof size === 'undefined' ? api.FontSizeOut() : size = Math.max(1, --size); + } else { + typeof size === 'undefined' ? api.FontSizeIn : size = Math.min(100, ++size); + } + if (typeof size !== 'undefined') { + api.put_TextPrFontSize(size); + } + } + } + + changeFontFamily(name) { + const api = Common.EditorApi.get(); + if (api && name) { + api.put_TextPrFontName(name); + } + } + + toggleBold(value) { + const api = Common.EditorApi.get(); + if (api) { + api.put_TextPrBold(value); + } + } + + toggleItalic(value) { + const api = Common.EditorApi.get(); + if (api) { + api.put_TextPrItalic(value); + } + } + + toggleUnderline(value) { + const api = Common.EditorApi.get(); + if (api) { + api.put_TextPrUnderline(value); + } + } + + toggleStrikethrough(value) { + const api = Common.EditorApi.get(); + if (api) { + api.put_TextPrStrikeout(value); + } + } + + // Additional + + onAdditionalStrikethrough(type, value) { + const api = Common.EditorApi.get(); + if (api) { + if ('strikeout' === type) { + api.put_TextPrStrikeout(value); + } else { + api.put_TextPrDStrikeout(value); + } + } + } + + onAdditionalCaps(type, value) { + const api = Common.EditorApi.get(); + if (api) { + const paragraphProps = new Asc.asc_CParagraphProperty(); + if ('small' === type) { + paragraphProps.put_AllCaps(false); + paragraphProps.put_SmallCaps(value); + } else { + paragraphProps.put_AllCaps(value); + paragraphProps.put_SmallCaps(false); + } + api.paraApply(paragraphProps); + } + } + + onAdditionalScript(type, value) { + const api = Common.EditorApi.get(); + if (api) { + if ('superscript' === type) { + api.put_TextPrBaseline(value ? 1 : 0); + } else { + api.put_TextPrBaseline(value ? 2 : 0); + } + } + } + + changeLetterSpacing(curSpacing, isDecrement) { + const api = Common.EditorApi.get(); + if (api) { + let spacing = curSpacing; + if (isDecrement) { + spacing = Math.max(-100, --spacing); + } else { + spacing = Math.min(100, ++spacing); + } + const properties = new Asc.asc_CParagraphProperty(); + properties.put_TextSpacing(Common.Utils.Metric.fnRecalcToMM(spacing)); + api.paraApply(properties); + } + } + + onParagraphAlign(type) { + const api = Common.EditorApi.get(); + if (api) { + let value; + switch (type) { + case 'just': + value = 3; + break; + case 'right': + value = 0; + break; + case 'center': + value = 2; + break; + default: + value = 1; + break; + } + api.put_PrAlign(value); + } + } + + onParagraphMove(isLeft) { + const api = Common.EditorApi.get(); + if (api) { + if (isLeft) { + api.DecreaseIndent(); + } else { + api.IncreaseIndent(); + } + } + } + + onBullet(type) { + const api = Common.EditorApi.get(); + if (api) { + api.put_ListType(0, parseInt(type)); + } + } + + onNumber(type) { + const api = Common.EditorApi.get(); + if (api) { + api.put_ListType(1, parseInt(type)); + } + } + + onLineSpacing(value) { + const api = Common.EditorApi.get(); + if (api) { + const LINERULE_AUTO = 1; + api.put_PrLineSpacing(LINERULE_AUTO, value); + } + } + + render() { + return ( + + ) + } +} + +export default EditTextController; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/components/settings/Settings.jsx b/apps/documenteditor/mobile/src/components/settings/Settings.jsx index f97746f92..fb406ceae 100644 --- a/apps/documenteditor/mobile/src/components/settings/Settings.jsx +++ b/apps/documenteditor/mobile/src/components/settings/Settings.jsx @@ -1,59 +1,132 @@ -import React, { Component } from 'react'; -import { View, Page, Navbar, NavRight, Link, Popup, Icon, ListItem, List } from 'framework7-react'; +import React, {Component, useEffect} from 'react'; +import {View,Page,Navbar,NavRight,Link,Popup,Popover,Icon,ListItem,List} from 'framework7-react'; import { withTranslation } from 'react-i18next'; -import {changePageOrient} from "../../store/actions/actions"; +import {f7} from 'framework7-react'; +import {Device} from '../../../../../common/mobile/utils/device' -class Settings extends Component { - constructor(props) { - super(props); - this.state = { - popupOpened: false, - }; - } - render() { - const { t } = this.props; - const _trarr = t('ViewSettings', {returnObjects: true}); +import DocumentSettingsController from "../settings/controller/DocumentSettings.jsx"; +import Margins from "../settings/document-settings/Margins.jsx"; +import DocumentFormats from "../settings/document-settings/DocumentFormats.jsx"; - return ( - this.setState({popupOpened : false})}> - - - - - {t('ViewSettings.textDone')} - - - - +const routes = [ + { + path: '/', + component: 'TSettingsView' + }, + { + path: '/document-settings/', + component: DocumentSettingsController, + }, + { + path: '/margins/', + component: Margins, + }, + { + path: '/document-formats/', + component: DocumentFormats, + }, +]; + + +const SettingsList = withTranslation()(props => { + const {t} = props; + const _t = t('ViewSettings', {returnObjects: true}); + const navbar = + {!props.inPopover && {t('ViewSettings.textDone')}} + ; + + const onoptionclick = page => { + if ( props.onOptionClick ) + props.onOptionClick(page) + }; + + useEffect(() => { + }); + + return ( + + + {navbar} + + {!props.inPopover && + - - - - - - - - - - - - - - - - - - - - - - - - - + } + + + + + + + + + + + + + + + + + + + + + + + +
+ ) +}); + +class SettingsView extends Component { + constructor(props) { + super(props) + + this.onoptionclick = this.onoptionclick.bind(this); + } + + onoptionclick(page){ + this.$f7.views.current.router.navigate(page); + } + + render() { + const show_popover = this.props.usePopover; + return ( + show_popover ? + this.props.onclosed()}> + + : + this.props.onclosed()}> + + ) } +} + +const Settings = props => { + useEffect(() => { + if ( Device.phone ) + f7.popup.open('.settings-popup'); + else f7.popover.open('#settings-popover', '#btn-settings'); + + return () => { + // component will unmount + } + }); + + + const onviewclosed = () => { + if ( props.onclosed ) + props.onclosed(); + }; + + // if ( Device.phone ) { + // return + // } + + return }; -export default withTranslation()(Settings); \ No newline at end of file +export default Settings; diff --git a/apps/documenteditor/mobile/src/components/settings/controller/DocumentSettings.jsx b/apps/documenteditor/mobile/src/components/settings/controller/DocumentSettings.jsx new file mode 100644 index 000000000..9908529af --- /dev/null +++ b/apps/documenteditor/mobile/src/components/settings/controller/DocumentSettings.jsx @@ -0,0 +1,23 @@ + +import React, {Component} from 'react'; +import DocumentSettings from '../document-settings/DocumentSettings' + + +class DocumentSettingsController extends Component { + constructor(props) { + super(props); + } + + onPageOrientation(value){ + const api = Common.EditorApi.get(); + api.change_PageOrient(value=='portrait'); + } + + render() { + return ( + + ) + } +} + +export default DocumentSettingsController; \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx b/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx index 3a517be76..935c37b11 100644 --- a/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx +++ b/apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx @@ -1,27 +1,35 @@ -import React from 'react'; -import {Page, Navbar, List, ListItem, BlockTitle} from 'framework7-react'; -import { useTranslation } from 'react-i18next'; +import React, {Component} from 'react'; +import {observer, inject} from "mobx-react"; +import {Page,Navbar,List,ListItem,BlockTitle} from 'framework7-react'; + +const DocumentSettings = props => { + const textDocumentSettings = "Document Settings"; + const textBack = "Back"; + const textOrientation = "Orientation"; + const textPortrait = "Portrait"; + const textLandscape = "Landscape"; + const textFormat = "Format"; + const textMargins = "Margins"; -const PageDocumentSettings = (props) => { - const { t } = useTranslation(); const format = "A4"; const formatSize = "21 cm x 29.7 cm"; + const storeSettings = props.storeDocumentSettings; return ( - - {t('ViewSettings.textOrientation')} + + {textOrientation} - props.changePageOrient(true)}> - props.changePageOrient(false)}> + props.onPageOrientation('portrait')}> + props.onPageOrientation('landscape')}> - {t('ViewSettings.textFormat')} + {textFormat} - + - ) + ) }; -export default PageDocumentSettings; \ No newline at end of file +export default inject("storeDocumentSettings")(observer(DocumentSettings)); diff --git a/apps/documenteditor/mobile/src/controller/Main.jsx b/apps/documenteditor/mobile/src/controller/Main.jsx new file mode 100644 index 000000000..d10435309 --- /dev/null +++ b/apps/documenteditor/mobile/src/controller/Main.jsx @@ -0,0 +1,228 @@ + +import React, {Component} from 'react' +import {inject} from "mobx-react"; +import CollaborationController from '../../../../common/mobile/lib/controller/Collaboration.jsx' + +@inject("storeDocumentSettings", "storeFocusObjects", "storeTextSettings") +class MainController extends Component { + constructor(props) { + super(props) + } + + initSdk() { + const script = document.createElement("script"); + script.src = "../../../../sdkjs/develop/sdkjs/word/scripts.js"; + script.async = true; + script.onload = () => { + let dep_scripts = ['../../../vendor/xregexp/xregexp-all-min.js', + '../../../vendor/sockjs/sockjs.min.js', + '../../../vendor/jszip/jszip.min.js', + '../../../vendor/jszip-utils/jszip-utils.min.js']; + dep_scripts.push(...sdk_scripts); + + const promise_get_script = (scriptpath) => { + return new Promise((resolve, reject) => { + const script = document.createElement("script"); + script.src = scriptpath; + script.onload = () => { + resolve('ok'); + }; + script.onerror = () => { + reject('error'); + }; + + document.body.appendChild(script); + }); + }; + + const loadConfig = data => { + let me = this; + console.log('load config'); + + me.editorConfig = Object.assign({}, this.editorConfig, data.config); + me.appOptions.user = Common.Utils.fillUserInfo(me.editorConfig.user, me.editorConfig.lang, "Local.User"/*me.textAnonymous*/); + }; + + const loadDocument = data => { + this.permissions = {}; + this.document = data.doc; + + let docInfo = {}; + + if (data.doc) { + this.permissions = Object.assign(this.permissions, data.doc.permissions); + + let _permissions = Object.assign({}, data.doc.permissions), + _user = new Asc.asc_CUserInfo(); + _user.put_Id(this.appOptions.user.id); + _user.put_FullName(this.appOptions.user.fullname); + + docInfo = new Asc.asc_CDocInfo(); + docInfo.put_Id(data.doc.key); + docInfo.put_Url(data.doc.url); + docInfo.put_Title(data.doc.title); + docInfo.put_Format(data.doc.fileType); + docInfo.put_VKey(data.doc.vkey); + docInfo.put_Options(data.doc.options); + docInfo.put_UserInfo(_user); + docInfo.put_CallbackUrl(this.editorConfig.callbackUrl); + docInfo.put_Token(data.doc.token); + docInfo.put_Permissions(_permissions); + docInfo.put_EncryptedInfo(this.editorConfig.encryptionKeys); + + // var enable = !this.editorConfig.customization || (this.editorConfig.customization.macros!==false); + // docInfo.asc_putIsEnabledMacroses(!!enable); + // enable = !this.editorConfig.customization || (this.editorConfig.customization.plugins!==false); + // docInfo.asc_putIsEnabledPlugins(!!enable); + + // let type = /^(?:(pdf|djvu|xps))$/.exec(data.doc.fileType); + // if (type && typeof type[1] === 'string') { + // this.permissions.edit = this.permissions.review = false; + // } + } + + this.api.asc_registerCallback('asc_onGetEditorPermissions', onEditorPermissions); + // this.api.asc_registerCallback('asc_onLicenseChanged', _.bind(this.onLicenseChanged, this)); + // this.api.asc_registerCallback('asc_onRunAutostartMacroses', _.bind(this.onRunAutostartMacroses, this)); + this.api.asc_setDocInfo(docInfo); + this.api.asc_getEditorPermissions(this.editorConfig.licenseUrl, this.editorConfig.customerId); + + // Common.SharedSettings.set('document', data.doc); + + // if (data.doc) { + // DE.getController('Toolbar').setDocumentTitle(data.doc.title); + // if (data.doc.info) { + // data.doc.info.author && console.log("Obsolete: The 'author' parameter of the document 'info' section is deprecated. Please use 'owner' instead."); + // data.doc.info.created && console.log("Obsolete: The 'created' parameter of the document 'info' section is deprecated. Please use 'uploaded' instead."); + // } + // } + }; + + const onEditorPermissions = params => { + let me = this; + const licType = params.asc_getLicenseType(); + + me.appOptions.canLicense = (licType === Asc.c_oLicenseResult.Success || licType === Asc.c_oLicenseResult.SuccessLimit); + // me.appOptions.canEdit = (me.permissions.edit !== false || me.permissions.review === true) && // can edit or review + // (me.editorConfig.canRequestEditRights || me.editorConfig.mode !== 'view') && // if mode=="view" -> canRequestEditRights must be defined + // (!me.appOptions.isReviewOnly || me.appOptions.canLicense) && // if isReviewOnly==true -> canLicense must be true + // me.isSupportEditFeature(); + // me.appOptions.isEdit = me.appOptions.canLicense && me.appOptions.canEdit && me.editorConfig.mode !== 'view'; + + // me.api.asc_setViewMode(!me.appOptions.isEdit); + me.api.asc_setViewMode(false); + me.api.asc_LoadDocument(); + me.api.Resize(); + }; + + const _process_array = (array, fn) => { + let results = []; + return array.reduce(function(p, item) { + return p.then(function() { + return fn(item).then(function(data) { + results.push(data); + return results; + }); + }); + }, Promise.resolve()); + }; + + _process_array(dep_scripts, promise_get_script) + .then ( result => { + this.api = new Asc.asc_docs_api({ + 'id-view' : 'editor_sdk', + 'mobile' : true, + // 'translate': translate + }); + + this.appOptions = {}; + this.bindEvents(); + + Common.Gateway.on('init', loadConfig); + // Common.Gateway.on('showmessage', _.bind(me.onExternalMessage, me)); + Common.Gateway.on('opendocument', loadDocument); + Common.Gateway.appReady(); + + Common.Notifications.trigger('engineCreated', this.api); + Common.EditorApi = {get: () => this.api}; + }, error => { + console.log('promise failed ' + error); + }); + }; + + script.onerror = () => { + console.log('error'); + }; + + document.body.appendChild(script); + } + + bindEvents() { + const storeSettings = this.props.storeDocumentSettings; + this.api.asc_registerCallback('asc_onPageOrient', isPortrait => { + storeSettings.isPortrait = isPortrait === true; + }); + const storeFocusObjects = this.props.storeFocusObjects; + this.api.asc_registerCallback('asc_onFocusObject', objects => { + storeFocusObjects.resetFocusObjects(objects); + }); + + const storeTextSettings = this.props.storeTextSettings; + this.api.asc_registerCallback('asc_onInitEditorFonts', (fonts, select) => { + storeTextSettings.initEditorFonts(fonts, select); + }); + this.api.asc_registerCallback('asc_onFontFamily', (font) => { + storeTextSettings.resetFontName(font); + }); + this.api.asc_registerCallback('asc_onFontSize', (size) => { + storeTextSettings.resetFontSize(size); + }); + this.api.asc_registerCallback('asc_onBold', (isBold) => { + storeTextSettings.resetIsBold(isBold); + }); + this.api.asc_registerCallback('asc_onItalic', (isItalic) => { + storeTextSettings.resetIsItalic(isItalic); + }); + this.api.asc_registerCallback('asc_onUnderline', (isUnderline) => { + storeTextSettings.resetIsUnderline(isUnderline); + }); + this.api.asc_registerCallback('asc_onStrikeout', (isStrikeout) => { + storeTextSettings.resetIsStrikeout(isStrikeout); + }); + this.api.asc_registerCallback('asc_onVerticalAlign', (typeBaseline) => { + storeTextSettings.resetTypeBaseline(typeBaseline); + }); + this.api.asc_registerCallback('asc_onListType', (data) => { + let type = data.get_ListType(); + let subtype = data.get_ListSubType(); + storeTextSettings.resetListType(type); + switch (type) { + case 0: + storeTextSettings.resetBullets(subtype); + break; + case 1: + storeTextSettings.resetNumbers(subtype); + break; + } + }); + this.api.asc_registerCallback('asc_onPrAlign', (align) => { + storeTextSettings.resetParagraphAlign(align); + }); + this.api.asc_registerCallback('asc_onTextColor', (color) => { + storeTextSettings.resetTextColor(color); + }); + this.api.asc_registerCallback('asc_onParaSpacingLine', (vc) => { + storeTextSettings.resetLineSpacing(vc); + }); + this.api.asc_registerCallback('asc_onTextShd', (shd) => { + let color = shd.get_Color(); + storeTextSettings.resetBackgroundColor(color); + }); + } + + render() { + return + } +} + +export default MainController; diff --git a/apps/documenteditor/mobile/src/css/app-ios.less b/apps/documenteditor/mobile/src/css/app-ios.less new file mode 100644 index 000000000..a6daf5e24 --- /dev/null +++ b/apps/documenteditor/mobile/src/css/app-ios.less @@ -0,0 +1,3 @@ + +.device-ios { +} diff --git a/apps/documenteditor/mobile/src/css/app-material.less b/apps/documenteditor/mobile/src/css/app-material.less new file mode 100644 index 000000000..f83168105 --- /dev/null +++ b/apps/documenteditor/mobile/src/css/app-material.less @@ -0,0 +1,12 @@ + +// Colors +@themeColor: #446995; // (64,102,215) +@themeColorLight: #a2bdde; +@navBarIconColor: #fff; + + +.device-android { + --f7-navbar-bg-color: @themeColor; + --f7-navbar-link-color: @navBarIconColor; + --f7-navbar-text-color: @navBarIconColor; +} \ No newline at end of file diff --git a/apps/documenteditor/mobile/src/css/app.less b/apps/documenteditor/mobile/src/css/app.less index 98c60ef58..84e291b6c 100644 --- a/apps/documenteditor/mobile/src/css/app.less +++ b/apps/documenteditor/mobile/src/css/app.less @@ -1,5 +1,9 @@ @import '../../../../common/mobile/resources/less/collaboration.less'; +@import '../../../../common/mobile/resources/less/common-ios.less'; +@import '../../../../common/mobile/resources/less/common-material.less'; +@import './app-material.less'; +@import './app-ios.less'; /* Left Panel right border when it is visible by breakpoint */ .panel-left.panel-in-breakpoint:before { @@ -31,4 +35,8 @@ background: rgba(0,0,0,0.1); content: ''; z-index: 6000; -} \ No newline at end of file +} + +:root { + --f7-popover-width: 360px; +} diff --git a/apps/documenteditor/mobile/src/index_dev.html b/apps/documenteditor/mobile/src/index_dev.html index 211e8426b..e6206d4cb 100644 --- a/apps/documenteditor/mobile/src/index_dev.html +++ b/apps/documenteditor/mobile/src/index_dev.html @@ -28,6 +28,11 @@