[PE mobile] Add settings popover/popup

apps/presentationeditor/mobile/locale/en.json

@@ -23,5 +23,19 @@
         "Slide title": "Slide title"
       }
     }
+  },
+  "View": {
+    "Settings": {
+      "textDone": "Done",
+      "textSettings": "Settings",
+      "textFindAndReplace": "Find and replace",
+      "textPresentationSettings": "Presentation Settings",
+      "textApplicationSettings": "Application Settings",
+      "textDownload": "Download",
+      "textPrint": "Print",
+      "textPresentationInfo": "Presentation Info",
+      "textHelp": "Help",
+      "textAbout": "About"
+    }
   }
 }

apps/presentationeditor/mobile/src/page/main.jsx

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-react';
 
 // import EditOptions from '../view/edit/Edit';
-// import Settings from '../view/settings/Settings';
+import Settings from '../view/settings/Settings';
 import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
 
 export default class MainPage extends Component {
@@ -44,12 +44,11 @@ export default class MainPage extends Component {
     };
 
   render() {
-    console.log(this.$f7router)
     return (
         <Page name="home">
             {/* Top Navbar */}
             <Navbar id='editor-navbar'>
-                <div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>
+                {/*<div slot="before-inner" className="main-logo"><Icon icon="icon-logo"></Icon></div>*/}
                 <NavLeft>
                     <Link icon='icon-undo'></Link>
                     <Link icon='icon-redo'></Link>
@@ -66,10 +65,10 @@ export default class MainPage extends Component {
                 {/*!this.state.editOptionsVisible ? null :*/}
                     {/*<EditOptions onclosed={this.handleOptionsViewClosed.bind(this, 'edit')} />*/}
             {/*}*/}
-            {/*{*/}
+            {
-                {/*!this.state.settingsVisible ? null :*/}
+                !this.state.settingsVisible ? null :
-                    {/*<Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />*/}
+                    <Settings onclosed={this.handleOptionsViewClosed.bind(this, 'settings')} />
-            {/*}*/}
+            }
             {
                 !this.state.collaborationVisible ? null :
                     <CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />

apps/presentationeditor/mobile/src/view/settings/Settings.jsx

@@ -0,0 +1,116 @@
+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 {f7} from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device';
+
+const routes = [
+    {
+        path: '/',
+        component: 'TSettingsView'
+    },
+    /*{
+        path: '/presentation-settings/',
+        component: PresentationSettingsController,
+    },
+    {
+        path: "/presentation-info/",
+        component: PresentationInfoController,
+    }*/
+];
+
+
+const SettingsList = withTranslation()(props => {
+    const {t} = props;
+    const _t = t('View.Settings', {returnObjects: true});
+    const navbar = <Navbar title={_t.textSettings}>
+        {!props.inPopover  && <NavRight><Link popupClose=".settings-popup">{_t.textDone}</Link></NavRight>}
+    </Navbar>;
+
+    const onoptionclick = page => {
+        if ( props.onOptionClick )
+            props.onOptionClick(page)
+    };
+
+    return (
+        <View style={props.style} stackPages={true} routes={routes}>
+            <Page>
+                {navbar}
+                <List>
+                    {!props.inPopover &&
+                    <ListItem title={_t.textFindAndReplace}>
+                        <Icon slot="media" icon="icon-search"></Icon>
+                    </ListItem>
+                    }
+                    <ListItem link="#" title={_t.textPresentationSettings} onClick={onoptionclick.bind(this, '/presentation-settings/')}>
+                        <Icon slot="media" icon="icon-setup"></Icon>
+                    </ListItem>
+                    <ListItem title={_t.textApplicationSettings} link="#">
+                        <Icon slot="media" icon="icon-app-settings"></Icon>
+                    </ListItem>
+                    <ListItem title={_t.textDownload} link="#">
+                        <Icon slot="media" icon="icon-download"></Icon>
+                    </ListItem>
+                    <ListItem title={_t.textPrint}>
+                        <Icon slot="media" icon="icon-print"></Icon>
+                    </ListItem>
+                    <ListItem title={_t.textPresentationInfo} link="#" onClick={onoptionclick.bind(this, "/presentation-info/")}>
+                        <Icon slot="media" icon="icon-info"></Icon>
+                    </ListItem>
+                    <ListItem title={_t.textHelp} link="#">
+                        <Icon slot="media" icon="icon-help"></Icon>
+                    </ListItem>
+                    <ListItem title={_t.textAbout} link="#">
+                        <Icon slot="media" icon="icon-about"></Icon>
+                    </ListItem>
+                </List>
+            </Page>
+        </View>
+    )
+});
+
+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 ?
+                <Popover id="settings-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
+                    <SettingsList inPopover={true} onOptionClick={this.onoptionclick} style={{height: '410px'}} />
+                </Popover> :
+                <Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
+                    <SettingsList onOptionClick={this.onoptionclick} />
+                </Popup>
+        )
+    }
+}
+
+const Settings = props => {
+    useEffect(() => {
+        if ( Device.phone )
+            f7.popup.open('.settings-popup');
+        else f7.popover.open('#settings-popover', '#btn-settings');
+
+        return () => {
+        }
+    });
+
+
+    const onviewclosed = () => {
+        if ( props.onclosed )
+            props.onclosed();
+    };
+
+    return <SettingsView usePopover={!Device.phone} onclosed={onviewclosed} />
+};
+
+export default Settings;