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

[mobile] Edit collaboration

Browse source
This commit is contained in:
JuliaSvinareva 2021-02-08 19:32:25 +03:00
parent 796f84932e
commit 3912fe4620
8 changed files with 85 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

144
apps/common/mobile/lib/view/Collaboration.jsx
View file

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

10
apps/documenteditor/mobile/locale/en.json
View file

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

6
apps/documenteditor/mobile/src/page/main.jsx
View file

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

8
apps/documenteditor/mobile/src/router/routes.js
View file

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

2
apps/presentationeditor/mobile/src/page/main.jsx
View file

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

8
apps/presentationeditor/mobile/src/router/routes.js
View file

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

2
apps/spreadsheeteditor/mobile/src/page/main.jsx
View file

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

8
apps/spreadsheeteditor/mobile/src/router/routes.js
View file

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