[DE] 'Settings' depends on phone/tablet

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

@@ -1,63 +1,97 @@
 import React, {Component, useEffect} from 'react';
-import {View,Page,Navbar,NavRight,Link,Popup,Icon,ListItem,List} from 'framework7-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 {f7} from 'framework7-react';
+import {Device} from '../../../../../common/mobile/utils/device'
+
+
+const SettingsView = props => {
+    const {t} = props;
+    const _t = t('ViewSettings', {returnObjects: true});
+    const navbar = <Navbar title={t('ViewSettings.textSettings')}>
+                    {!props.isPopover  && <NavRight><Link popupClose=".settings-popup">{t('ViewSettings.textDone')}</Link></NavRight>}
+                    </Navbar>;
+
+    const onoptionclick = page => {
+        if ( props.onOptionClick )
+            props.onOptionClick(page)
+    };
+
+    return (
+        <View style={props.style}>
+            <Page>
+                {navbar}
+                <List>
+                    <ListItem title={_t.textFindAndReplace}>
+                        <Icon slot="media" icon="icon-search"></Icon>
+                    </ListItem>
+                    <ListItem title={_t.textDocumentSettings} link="/document-settings/" onClick={onoptionclick.bind(this, '/document-settings/')}>
+                        <Icon slot="media" icon="icon-doc-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('ViewSettings.textPrint')}>
+                        <Icon slot="media" icon="icon-print"></Icon>
+                    </ListItem>
+                    <ListItem title={t('ViewSettings.textDocumentInfo')} link="#">
+                        <Icon slot="media" icon="icon-info"></Icon>
+                    </ListItem>
+                    <ListItem title={t('ViewSettings.textHelp')} link="#">
+                        <Icon slot="media" icon="icon-help"></Icon>
+                    </ListItem>
+                    <ListItem title={t('ViewSettings.textAbout')} link="#">
+                        <Icon slot="media" icon="icon-about"></Icon>
+                    </ListItem>
+                </List>
+            </Page>
+        </View>
+    )
+};
+
+const TSettingsView = withTranslation()(SettingsView);
 
 class SettingsPopup extends Component {
     constructor(props) {
         super(props);
     }
     render() {
-        const { t } = this.props;
-        const _trarr = t('ViewSettings', {returnObjects: true});
-
         return (
             <Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
-                <View>
+                <TSettingsView />
-                <Page>
-                    <Navbar title={t('ViewSettings.textSettings')}>
-                        <NavRight>
-                            <Link popupClose=".settings-popup">{t('ViewSettings.textDone')}</Link>
-                        </NavRight>
-                    </Navbar>
-                    <List>
-                        <ListItem title={_trarr.textFindAndReplace}>
-                            <Icon slot="media" icon="icon-search"></Icon>
-                        </ListItem>
-                        <ListItem title={_trarr.textDocumentSettings} link="/document-settings/">
-                            <Icon slot="media" icon="icon-doc-setup"></Icon>
-                        </ListItem>
-                        <ListItem title={_trarr.textApplicationSettings} link="#">
-                            <Icon slot="media" icon="icon-app-settings"></Icon>
-                        </ListItem>
-                        <ListItem title={_trarr.textDownload} link="#">
-                            <Icon slot="media" icon="icon-download"></Icon>
-                        </ListItem>
-                        <ListItem title={t('ViewSettings.textPrint')}>
-                            <Icon slot="media" icon="icon-print"></Icon>
-                        </ListItem>
-                        <ListItem title={t('ViewSettings.textDocumentInfo')} link="#">
-                            <Icon slot="media" icon="icon-info"></Icon>
-                        </ListItem>
-                        <ListItem title={t('ViewSettings.textHelp')} link="#">
-                            <Icon slot="media" icon="icon-help"></Icon>
-                        </ListItem>
-                        <ListItem title={t('ViewSettings.textAbout')} link="#">
-                            <Icon slot="media" icon="icon-about"></Icon>
-                        </ListItem>
-                    </List>
-                </Page>
-                </View>
             </Popup>
         )
     }
 }
 
-const HOCSettingsPopup = withTranslation()(SettingsPopup);
+class SettingsPopover extends Component {
+    constructor(props) {
+        super(props)
+
+        this.onoptionclick = this.onoptionclick.bind(this);
+    }
+
+    onoptionclick(page){
+        this.$f7.views.current.router.navigate(page);
+    }
+
+    render() {
+        return (
+            <Popover className="settings__popover" onPopoverClosed={() => this.props.onclosed()}>
+                <TSettingsView isPopover={true} onOptionClick={this.onoptionclick} style={{height: '430px', width: '360px'}} />
+            </Popover>
+        )
+    }
+}
 
 const Settings = props => {
     useEffect(() => {
-        f7.popup.open('.settings-popup');
+        if ( Device.phone )
+            f7.popup.open('.settings-popup');
+        else f7.popover.open('.settings__popover', '#btn-settings');
 
         return () => {
             // component will unmount
@@ -70,7 +104,11 @@ const Settings = props => {
             props.onclosed();
     };
 
-    return <HOCSettingsPopup onclosed={onviewclosed} />
+    if ( Device.phone ) {
+        return <SettingsPopup onclosed={onviewclosed} />
+    }
+
+    return <SettingsPopover onclosed={onviewclosed} />
 };
 
 export default Settings;

apps/documenteditor/mobile/src/css/app.less

@@ -31,4 +31,14 @@
   background: rgba(0,0,0,0.1);
   content: '';
   z-index: 6000;
+}
+
+:root {
+    --f7-popover-width: 360px;
+}
+
+.ios {
+    .popover-inner {
+        //border-radius: var(--f7-popover-border-radius);
+    }
 }

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

@@ -57,7 +57,7 @@ export default class Home extends Component {
             <NavRight>
               <Link href={false} onClick={e => this.handleClickToOpenOptions('edit')}>Edit</Link>
               <Link href={false} onClick={e => this.handleClickToOpenOptions('coauth')}>Users</Link>
-              <Link href={false} onClick={e => this.handleClickToOpenOptions('settings')}>Settings</Link>
+              <Link href={false} onClick={e => this.handleClickToOpenOptions('settings')} id='btn-settings'>Settings</Link>
             </NavRight>
           </Navbar>
           {/* Page content */}