Merge branch 'feature/mobile-apps-on-reactjs' of https://github.com/ONLYOFFICE/web-apps into feature/mobile-apps-on-reactjs

apps/documenteditor/mobile/src/components/edit/Edit.jsx

@@ -0,0 +1,57 @@
+import React, {Component} from 'react';
+import {
+    Page,
+    Navbar,
+    NavRight,
+    NavLeft,
+    Link,
+    Popup,
+    Tabs,
+    Tab
+} from 'framework7-react';
+import EditText from "./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) =>
+            <Link key={"de-tablink-" + item}  tabLink={"#" + item} tabLinkActive={index === 0}>{item}</Link>
+        );
+        const tabs = editors.map((item, index) =>
+            <Tab key={"de-tab-" + item} id={item} className="page-content" tabActive={index === 0}>
+                {item === 'text' && <EditText />}
+                {item === 'paragraph' && <EditParagraph />}
+                {/*{item === 'table' && <EditTable />}
+                  {item === 'header' && <EditHeader />}
+                  {item === 'shape' && <EditShape />}
+                  {item === 'image' && <EditImage />}
+                  {item === 'chart' && <EditChart />}
+                  {item === 'hyperlink' && <EditHyperlink />}*/}
+            </Tab>
+        );
+        return (
+            <Popup className="edit-popup" opened={this.state.popupOpened} onPopupClosed={() => this.setState({popupOpened : false})}>
+                <Page pageContent={false}>
+                    <Navbar>
+                        <NavLeft tabbar>
+                            {tabLinks}
+                        </NavLeft>
+                        <NavRight>
+                            <Link popupClose=".edit-popup">Close</Link>
+                        </NavRight>
+                    </Navbar>
+                    <Tabs animated>
+                        {tabs}
+                    </Tabs>
+                </Page>
+            </Popup>
+        )
+    }
+};

apps/documenteditor/mobile/src/components/edit/EditParagraph.jsx

@@ -0,0 +1,33 @@
+import React, {Component, Fragment} from 'react';
+import {
+    List,
+    ListItem,
+    BlockTitle
+} from 'framework7-react';
+
+export default class EditText extends Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const textBackground = "Background";
+        const textAdvancedSettings = "Advanced settings";
+        const textParagraphStyles = "Paragraph styles";
+
+        return (
+            <Fragment>
+                <List>
+                    <ListItem title={textBackground} link="#">
+                        <span className="color-preview" slot="after"></span>
+                    </ListItem>
+                </List>
+                <List>
+                    <ListItem title={textAdvancedSettings} link="#"></ListItem>
+                </List>
+                <BlockTitle>{textParagraphStyles}</BlockTitle>
+                <List>
+                </List>
+            </Fragment>
+        )
+    }
+};

apps/documenteditor/mobile/src/components/edit/EditText.jsx

@@ -0,0 +1,96 @@
+import React, {Component, Fragment} from 'react';
+import {
+    List,
+    ListItem,
+    Icon,
+    Row,
+    Col,
+    Button
+} from 'framework7-react';
+
+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 (
+            <Fragment>
+            <List>
+                <ListItem title={fontName} link="#" after={fontSize}></ListItem>
+                <ListItem>
+                    <Row>
+                        <Col>
+                            <Button>Button</Button>
+                        </Col>
+                        <Col>
+                            <Button>Button</Button>
+                        </Col>
+                        <Col>
+                            <Button>Button</Button>
+                        </Col>
+                        <Col>
+                            <Button>Button</Button>
+                        </Col>
+                    </Row>
+                </ListItem>
+                <ListItem title={textFontColor} link="#">
+                    <Icon slot="media" icon="icon-text-color"></Icon>
+                    <span className="color-preview"></span>
+                </ListItem>
+                <ListItem title={textHighlightColor} link="#">
+                    <Icon slot="media" icon="icon-text-selection"></Icon>
+                </ListItem>
+                <ListItem title={textAdditionalFormatting} link="#">
+                    <Icon slot="media" icon="icon-text-additional"></Icon>
+                </ListItem>
+            </List>
+            <List>
+                <ListItem>
+                    <Row>
+                        <Col>
+                            <Button>Button</Button>
+                        </Col>
+                        <Col>
+                            <Button>Button</Button>
+                        </Col>
+                        <Col>
+                            <Button>Button</Button>
+                        </Col>
+                        <Col>
+                            <Button>Button</Button>
+                        </Col>
+                    </Row>
+                </ListItem>
+                <ListItem>
+                    <Row>
+                        <Col>
+                            <Button>Button</Button>
+                        </Col>
+                        <Col>
+                            <Button>Button</Button>
+                        </Col>
+                    </Row>
+                </ListItem>
+                <ListItem title={textBullets} link="#">
+                    <Icon slot="media" icon="icon-bullets"></Icon>
+                </ListItem>
+                <ListItem title={textNumbers} link="#">
+                    <Icon slot="media" icon="icon-numbers"></Icon>
+                </ListItem>
+                <ListItem title={textLineSpacing} link="#">
+                    <Icon slot="media" icon="icon-linespacing"></Icon>
+                </ListItem>
+            </List>
+            </Fragment>
+        )
+    }
+};

apps/documenteditor/mobile/src/components/settings/Settings.jsx

@@ -0,0 +1,73 @@
+import React, {Component} from 'react';
+import {
+    View,
+    Page,
+    Navbar,
+    NavRight,
+    Link,
+    Popup,
+    Icon,
+    ListItem,
+    List
+} from 'framework7-react';
+
+export default class Settings extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            popupOpened: false,
+        };
+    }
+    render() {
+        const textSettings = "Settings";
+        const textDone = "Done";
+        const textFindAndReplace = "Find and Replace";
+        const textDocumentSettings = "Document Settings";
+        const textApplicationSettings = "Application Settings";
+        const textDownload = "Download";
+        const textPrint = "Print";
+        const textDocumentInfo = "Document Info";
+        const textHelp = "Help";
+        const textAbout = "About";
+
+        return (
+            <Popup className="settings-popup" opened={this.state.popupOpened} onPopupClosed={() => this.setState({popupOpened : false})}>
+                <View>
+                <Page>
+                    <Navbar title={textSettings}>
+                        <NavRight>
+                            <Link popupClose=".settings-popup">{textDone}</Link>
+                        </NavRight>
+                    </Navbar>
+                    <List>
+                        <ListItem title={textFindAndReplace}>
+                            <Icon slot="media" icon="icon-search"></Icon>
+                        </ListItem>
+                        <ListItem title={textDocumentSettings} link="/document-settings/">
+                            <Icon slot="media" icon="icon-doc-setup"></Icon>
+                        </ListItem>
+                        <ListItem title={textApplicationSettings} link="#">
+                            <Icon slot="media" icon="icon-app-settings"></Icon>
+                        </ListItem>
+                        <ListItem title={textDownload} link="#">
+                            <Icon slot="media" icon="icon-download"></Icon>
+                        </ListItem>
+                        <ListItem title={textPrint}>
+                            <Icon slot="media" icon="icon-print"></Icon>
+                        </ListItem>
+                        <ListItem title={textDocumentInfo} link="#">
+                            <Icon slot="media" icon="icon-info"></Icon>
+                        </ListItem>
+                        <ListItem title={textHelp} link="#">
+                            <Icon slot="media" icon="icon-help"></Icon>
+                        </ListItem>
+                        <ListItem title={textAbout} link="#">
+                            <Icon slot="media" icon="icon-about"></Icon>
+                        </ListItem>
+                    </List>
+                </Page>
+                </View>
+            </Popup>
+        )
+    }
+};

apps/documenteditor/mobile/src/components/settings/document-settings/DocumentFormats.jsx

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+import {
+    Page,
+    Navbar
+} from 'framework7-react';
+
+export default class DocumentFormats extends Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const textDocumentFormats = "Document Formats";
+        const textBack = "Back";
+
+        return (
+            <Page>
+                <Navbar title={textDocumentFormats} backLink={textBack} />
+                <div>{textDocumentFormats}</div>
+            </Page>
+        )
+    }
+};

apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx

@@ -0,0 +1,42 @@
+import React, {Component} from 'react';
+import {
+    Page,
+    Navbar,
+    List,
+    ListItem,
+    BlockTitle
+} from 'framework7-react';
+
+export default class DocumentSettings extends Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const textDocumentSettings = "Document Settings";
+        const textBack = "Back";
+        const textOrientation = "Orientation";
+        const textPortrait = "Portrait";
+        const textLandscape = "Landscape";
+        const textFormat = "Format";
+        const textMargins = "Margins";
+
+        const format = "A4";
+        const formatSize = "21 cm x 29.7 cm";
+
+        return (
+            <Page>
+                <Navbar title={textDocumentSettings} backLink={textBack} />
+                <BlockTitle>{textOrientation}</BlockTitle>
+                <List>
+                    <ListItem checkbox title={textPortrait} name="orientation-checkbox" defaultChecked></ListItem>
+                    <ListItem checkbox title={textLandscape} name="orientation-checkbox"></ListItem>
+                </List>
+                <BlockTitle>{textFormat}</BlockTitle>
+                <List mediaList>
+                    <ListItem title={format} subtitle={formatSize} link="/document-formats/"></ListItem>
+                    <ListItem checkbox title={textMargins} link="/margins/"></ListItem>
+                </List>
+            </Page>
+        )
+    }
+};

apps/documenteditor/mobile/src/components/settings/document-settings/Margins.jsx

@@ -0,0 +1,22 @@
+import React, {Component} from 'react';
+import {
+    Page,
+    Navbar
+} from 'framework7-react';
+
+export default class Margins extends Component {
+    constructor(props) {
+        super(props);
+    }
+    render() {
+        const textMargins = "Margins";
+        const textBack = "Back";
+
+        return (
+            <Page>
+                <Navbar title={textMargins} backLink={textBack} />
+                <div>{textMargins}</div>
+            </Page>
+        )
+    }
+};

apps/documenteditor/mobile/src/js/routes.js

@@ -1,5 +1,8 @@
 
 import HomePage from '../pages/home.jsx';
+import DocumentSettings from "../components/settings/document-settings/DocumentSettings.jsx";
+import Margins from "../components/settings/document-settings/Margins.jsx";
+import DocumentFormats from "../components/settings/document-settings/DocumentFormats.jsx";
 
 import LeftPage1 from '../pages/left-page-1.jsx';
 import LeftPage2 from '../pages/left-page-2.jsx';
@@ -11,6 +14,18 @@ var routes = [
     path: '/',
     component: HomePage,
   },
+  {
+    path: '/document-settings/',
+    component: DocumentSettings,
+  },
+  {
+    path: '/margins/',
+    component: Margins,
+  },
+  {
+    path: '/document-formats/',
+    component: DocumentFormats,
+  },
   {
     path: '/left-page-1/',
     component: LeftPage1,

apps/documenteditor/mobile/src/pages/home.jsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { Component } from 'react';
 import {
   Page,
-    View,
+  View,
   Navbar,
   NavLeft,
   NavTitle,
@@ -15,24 +15,39 @@ import {
   ListItem,
   Row,
   Col,
-  Button
+  Button,
+  Icon, Popup
 } from 'framework7-react';
 
-export default () => (
+import EditPopup from '../components/edit/Edit.jsx';
-  <Page name="home">
+import SettingsPopup from '../components/settings/Settings.jsx';
-    {/* Top Navbar */}
+
-    <Navbar large sliding={false}>
+export default class Home extends Component {
-      <NavLeft>
+  constructor(props) {
-        <Link iconIos="f7:menu" iconAurora="f7:menu" iconMd="material:menu" panelOpen="left" />
+    super(props);
-      </NavLeft>
+  }
-      <NavTitle sliding>Desktop Editor</NavTitle>
+  render() {
-      <NavRight>
+    console.log(this.$f7router)
-        <Link iconIos="f7:menu" iconAurora="f7:menu" iconMd="material:menu" panelOpen="right" />
+    return (
-      </NavRight>
+        <Page name="home">
-      <NavTitleLarge>Desktop Editor</NavTitleLarge>
+          {/* Top Navbar */}
-    </Navbar>
+          <Navbar>
-    {/* Page content */}
+            <div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>
-    <View id="editor_sdk">
+            <NavLeft>
-    </View>
+              <Link>Undo</Link>
-  </Page>
+              <Link>Redu</Link>
-);
+            </NavLeft>
+            <NavRight>
+              <Link href={false} popupOpen=".edit-popup">Edit</Link>
+              <Link href={false} popupOpen=".settings-popup">Settings</Link>
+            </NavRight>
+          </Navbar>
+          {/* Page content */}
+          <View id="editor_sdk">
+          </View>
+          <EditPopup />
+          <SettingsPopup />
+        </Page>
+    )
+  }
+};