Lea/web-apps
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Maxim Kadushkin 2020-08-11 16:08:22 +03:00
parent e0a723d7a2 d44da96158
commit 3465aac7d9
9 changed files with 396 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

57
apps/documenteditor/mobile/src/components/edit/Edit.jsx Normal file
View file

@ -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>
)
}
};

33
apps/documenteditor/mobile/src/components/edit/EditParagraph.jsx Normal file
View file

@ -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>
)
}
};

96
apps/documenteditor/mobile/src/components/edit/EditText.jsx Normal file
View file

@ -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>
)
}
};

73
apps/documenteditor/mobile/src/components/settings/Settings.jsx Normal file
View file

@ -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>
)
}
};

22
apps/documenteditor/mobile/src/components/settings/document-settings/DocumentFormats.jsx Normal file
View file

@ -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>
)
}
};

42
apps/documenteditor/mobile/src/components/settings/document-settings/DocumentSettings.jsx Normal file
View file

@ -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>
)
}
};

22
apps/documenteditor/mobile/src/components/settings/document-settings/Margins.jsx Normal file
View file

@ -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>
)
}
};

15
apps/documenteditor/mobile/src/js/routes.js
View file

@ -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,

57
apps/documenteditor/mobile/src/pages/home.jsx
View file

@ -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 () => (
<Page name="home">
{/* Top Navbar */}
<Navbar large sliding={false}>
<NavLeft>
<Link iconIos="f7:menu" iconAurora="f7:menu" iconMd="material:menu" panelOpen="left" />
</NavLeft>
<NavTitle sliding>Desktop Editor</NavTitle>
<NavRight>
<Link iconIos="f7:menu" iconAurora="f7:menu" iconMd="material:menu" panelOpen="right" />
</NavRight>
<NavTitleLarge>Desktop Editor</NavTitleLarge>
</Navbar>
{/* Page content */}
<View id="editor_sdk">
</View>
</Page>
);
import EditPopup from '../components/edit/Edit.jsx';
import SettingsPopup from '../components/settings/Settings.jsx';
export default class Home extends Component {
constructor(props) {
super(props);
}
render() {
console.log(this.$f7router)
return (
<Page name="home">
{/* Top Navbar */}
<Navbar>
<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>
<NavLeft>
<Link>Undo</Link>
<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>
)
}
};