[mobile] Edit collaboration

apps/common/mobile/lib/view/Collaboration.jsx

@@ -1,95 +1,92 @@
 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 { Popover, List, ListItem, Navbar, NavRight, Sheet, BlockTitle, Page, View, Icon, Link } from 'framework7-react';
 import { f7 } from 'framework7-react';
-import { withTranslation, useTranslation } from 'react-i18next';
+import { useTranslation } from 'react-i18next';
+import {Device} from "../../utils/device";
 
-@inject('users')
-@observer
-class PageUsers extends Component {
-    constructor(props){
-        super(props)
+const PageUsers = inject("users")(observer(props => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    const storeUsers = props.users;
+    return (
+        <Page name="collab__users">
+            <Navbar title={_t.textUsers} backLink={_t.textBack}></Navbar>
+            <BlockTitle>{_t.textEditUser}</BlockTitle>
+            <List className="coauth__list">
+                {storeUsers.users.map((model, i) => (
+                    <ListItem title={model.asc_getUserName()} key={i}>
+                        <Icon slot="media" icon="coauth__list__icon"
+                              style={{backgroundColor: model.asc_getColor()}}></Icon>
+                    </ListItem>
+                ))}
+            </List>
+        </Page>
+    )
+}));
+
+const routes = [
+    {
+        path: '/users/',
+        component: PageUsers
     }
+];
 
-    render() {
-        const { t } = this.props;
-        const userlist = this.props.users;
-        return (
-            <Page name="collab__users">
-                <Navbar title="Users" backLink="Back"></Navbar>
-                <BlockTitle>{t("Collaboration.textEditUser")}</BlockTitle>
-                <List className="coauth__list">
-                    {userlist.users.map((model, i) => (
-                        <ListItem title={model.asc_getUserName()} key={i}>
-                            <Icon slot="media" icon="coauth__list__icon"
-                                  style={{backgroundColor: model.asc_getColor()}}></Icon>
-                        </ListItem>
-                    ))}
-                </List>
-            </Page>)
-    }
-};
-
-const PageCollaboration = () => {
-    "use strict";
-
-    return <Page name="collab__main">
-                <Navbar title="Collaboration">
-                    <NavRight>
-                        <Link sheetClose>Close</Link>
-                    </NavRight>
+const PageCollaboration = props => {
+    const { t } = useTranslation();
+    const _t = t('Common.Collaboration', {returnObjects: true});
+    return (
+        <View style={props.style} stackPages={true} routes={routes}>
+            <Page name="collab__main">
+                <Navbar title={_t.textCollaboration}>
+                    {props.isSheet &&
+                        <NavRight>
+                            <Link sheetClose=".coauth__sheet">
+                                <Icon icon='icon-expand-down'/>
+                            </Link>
+                        </NavRight>
+                    }
                 </Navbar>
                 <List>
-                    <ListItem href="/users/" title="Users"/>
-                    <ListItem link="#" title="Comments"/>
+                    <ListItem link={'/users/'} title={_t.textUsers}/>
+                    <ListItem link="#" title={_t.textComments}/>
                 </List>
-            </Page>;
+            </Page>
+        </View>
+    )
 
 };
 
-class CollaborationPopover extends Component {
+class CollaborationView extends Component {
     constructor(props) {
         super(props);
+
+        this.onoptionclick = this.onoptionclick.bind(this);
+    }
+    onoptionclick(page){
+        f7.views.current.router.navigate(page);
     }
     render() {
+        const show_popover = this.props.usePopover;
         return (
-            <Popover className="collab__popover">
-                <Page>
-                    <Navbar title="Collaboration"></Navbar>
-                    <List>
-                        <ListItem link="#" title="Users"/>
-                        <ListItem link="#" title="Comments"/>
-                    </List>
-                </Page>
-            </Popover>
+            show_popover ?
+                <Popover id="coauth-popover" className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
+                    <PageCollaboration style={{height: '410px'}}/>
+                </Popover> :
+                <Sheet className="coauth__sheet" push onSheetClosed={() => this.props.onclosed()}>
+                    <PageCollaboration isSheet={true}/>
+                </Sheet>
         )
     }
 }
 
-class CollaborationSheet extends Component {
-    constructor(props) {
-        super(props);
-
-        this.routes = [
-            {path: '/', component: 'PageCollaboration'},
-            {path: '/users/', component: 'PageUsers'}
-        ];
-    }
-    render() {
-        return (
-            <Sheet className="coauth__sheet" push onSheetClosed={e => this.props.onclosed()}>
-                <View>
-                    <PageCollaboration />
-                </View>
-            </Sheet>
-        )
-    }
-}
-
-const CollaborationView = props => {
+const Collaboration = props => {
     useEffect(() => {
-        f7.sheet.open('.coauth__sheet');
+        if ( Device.phone ) {
+            f7.sheet.open('.coauth__sheet');
+        } else {
+            f7.popover.open('#coauth-popover', '#btn-coauth');
+        }
 
         return () => {
             // component will unmount
@@ -101,11 +98,10 @@ const CollaborationView = props => {
     };
 
     return (
-        <CollaborationSheet onclosed={onviewclosed} />
+        <CollaborationView usePopover={!Device.phone} onclosed={onviewclosed} />
     )
 };
 
-const pageusers = withTranslation()(PageUsers);
 // export withTranslation()(CollaborationPopover);
-export {CollaborationPopover, CollaborationSheet, PageCollaboration, pageusers as PageUsers}
-export default CollaborationView;
+export {PageCollaboration}
+export default Collaboration;

apps/documenteditor/mobile/locale/en.json

@@ -32,6 +32,13 @@
       "textThemeColors": "Theme Colors",
       "textStandartColors": "Standart Colors",
       "textCustomColors": "Custom Colors"
+    },
+    "Collaboration": {
+      "textCollaboration": "Collaboration",
+      "textBack": "Back",
+      "textUsers": "Users",
+      "textEditUser": "Users who are editing the file:",
+      "textComments": "Comments"
     }
   },
   "Settings": {
@@ -102,9 +109,6 @@
     "advDRMOptions": "Protected File",
     "txtProtected": "Once you enter the password and open the file, the current password to the file will be reset"
   },
-  "Collaboration": {
-    "textEditUser": "Users who are editing the file:"
-  },
   "Edit": {
     "textClose": "Close",
     "textBack": "Back",

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

@@ -4,7 +4,7 @@ import { Page, View, Navbar, NavLeft, NavRight, Link, Icon } from 'framework7-re
 import EditOptions from '../view/edit/Edit';
 import AddOptions from '../view/add/Add';
 import Settings from '../view/settings/Settings';
-import CollaborationView from '../../../../common/mobile/lib/view/Collaboration.jsx'
+import Collaboration from '../../../../common/mobile/lib/view/Collaboration.jsx'
 import { Device } from '../../../../common/mobile/utils/device'
 import { Search, SearchSettings } from '../controller/Search';
 import { ContextMenu } from '../controller/ContextMenu';
@@ -62,7 +62,7 @@ export default class MainPage extends Component {
                       <Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
                       <Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
                       { Device.phone ? null : <Link icon='icon-search' searchbarEnable='.searchbar' href={false}></Link> }
-                      <Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
+                      <Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
                       <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
                   </NavRight>
                   { Device.phone ? null : <Search /> }
@@ -88,7 +88,7 @@ export default class MainPage extends Component {
               }
               {
                   !this.state.collaborationVisible ? null :
-                      <CollaborationView onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
+                      <Collaboration onclosed={this.handleOptionsViewClosed.bind(this, 'coauth')} />
               }
               {/*<ContextMenu />*/}
           </Page>

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

@@ -1,17 +1,11 @@
 
 import MainPage from '../page/main';
 
-import { PageUsers } from '../../../../common/mobile/lib/view/Collaboration.jsx';
-
 var routes = [
   {
     path: '/',
     component: MainPage,
-  },
-  {
-    path: '/users/',
-    component: PageUsers
-  },
+  }
 ];
 
 export default routes;

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

@@ -58,7 +58,7 @@ export default class MainPage extends Component {
                 <NavRight>
                     <Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
                     <Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
-                    <Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
+                    <Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
                     <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
                 </NavRight>
             </Navbar>

apps/presentationeditor/mobile/src/router/routes.js

@@ -1,17 +1,11 @@
 
 import MainPage from '../page/main';
 
-import { PageCollaboration, PageUsers } from '../../../../common/mobile/lib/view/Collaboration.jsx';
-
 var routes = [
     {
         path: '/',
         component: MainPage,
-    },
-    {
-        path: '/users/',
-        component: PageUsers
-    },
+    }
 ];
 
 export default routes;

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

@@ -67,7 +67,7 @@ export default class MainPage extends Component {
                   <NavRight>
                       <Link id='btn-edit' icon='icon-edit-settings' href={false} onClick={e => this.handleClickToOpenOptions('edit')}></Link>
                       <Link id='btn-add' icon='icon-plus' href={false} onClick={e => this.handleClickToOpenOptions('add')}></Link>
-                      <Link href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
+                      <Link id='btn-coauth' href={false} icon='icon-collaboration' onClick={e => this.handleClickToOpenOptions('coauth')}></Link>
                       <Link id='btn-settings' icon='icon-settings' href={false} onClick={e => this.handleClickToOpenOptions('settings')}></Link>
                   </NavRight>
               </Navbar>

apps/spreadsheeteditor/mobile/src/router/routes.js

@@ -1,17 +1,11 @@
 
 import MainPage from '../page/main';
 
-import { PageCollaboration, PageUsers } from '../../../../common/mobile/lib/view/Collaboration.jsx';
-
 var routes = [
     {
         path: '/',
         component: MainPage,
-    },
-    {
-        path: '/users/',
-        component: PageUsers
-    },
+    }
 ];
 
 export default routes;