[DE mobile] Add snackbar for android

apps/documenteditor/mobile/locale/en.json

@@ -677,6 +677,8 @@
     "dlgLeaveTitleText": "You leave the application",
     "leaveButtonText": "Leave this Page",
     "stayButtonText": "Stay on this page",
-    "textOk": "OK"
+    "textOk": "OK",
+    "textSwitchedMobileView": "Switched to Mobile view",
+    "textSwitchedStandardView": "Switched to Standard view"
   }
 }

apps/documenteditor/mobile/src/components/Snackbar/Snackbar.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+const Snackbar = props => {
+    return (
+        <div className="snackbar">
+            <div className="snackbar__content">
+                <p className="snackbar__text">{props.text}</p>
+            </div>
+        </div>
+    )
+}
+
+export default Snackbar;

apps/documenteditor/mobile/src/controller/Toolbar.jsx

@@ -151,6 +151,7 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto
 
     return (
         <ToolbarView openOptions={props.openOptions}
+                     closeOptions={props.closeOptions}
                      isEdit={appOptions.isEdit}
                      docTitle={docTitle}
                      isShowBack={isShowBack}

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

@@ -87,10 +87,6 @@ const Settings = props => {
 
         appOptions.changeMobileView();
         api.ChangeReaderMode();
-
-        if (Device.phone) {
-            closeModal();
-        }
     }
 
     return <SettingsView usePopover={!Device.phone}

apps/documenteditor/mobile/src/less/app-ios.less

@@ -1,5 +1,4 @@
 .ios {
-
     // Stepper 
     .content-block.stepper-block {
         margin: 20px 0;

apps/documenteditor/mobile/src/less/app-material.less

@@ -105,4 +105,47 @@
             }
         }
     }
+
+    // Snackbar
+    .snackbar {
+        position: absolute;
+        width: 344px;
+        max-width: 344px;
+        height: 48px;
+        left: 8px;
+        bottom: 16px;
+        background: #333333;
+        border-radius: 4px;
+        z-index: 1000000;
+        &__content {
+            padding: 14px 16px;
+        }
+        &__text {
+            margin: 0;
+            color: @fill-white;
+            font-style: normal;
+            font-weight: 400;
+            font-size: 14px;
+            line-height: 20px;
+            letter-spacing: 0.25px;
+        }
+    }
+
+    .snackbar-enter {
+        opacity: 0;
+    }
+
+    .snackbar-enter-active {
+        opacity: 1;
+        transition: opacity 200ms;
+    }
+
+    .snackbar-exit {
+        opacity: 1;
+    }
+
+    .snackbar-exit-active {
+        opacity: 0;
+        transition: opacity 200ms;
+    }
 }

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

@@ -1,9 +1,10 @@
 
 import React, { Component } from 'react';
+import { CSSTransition } from 'react-transition-group';
 import { f7, Link } from 'framework7-react';
 import { Page, View, Navbar, Subnavbar, Icon } from 'framework7-react';
 import { observer, inject } from "mobx-react";
-
+import { withTranslation } from 'react-i18next';
 import EditOptions from '../view/edit/Edit';
 import AddOptions from '../view/add/Add';
 import Settings from '../controller/settings/Settings';
@@ -13,6 +14,7 @@ import { Search, SearchSettings } from '../controller/Search';
 import ContextMenu from '../controller/ContextMenu';
 import { Toolbar } from "../controller/Toolbar";
 import NavigationController from '../controller/settings/Navigation';
+import Snackbar from "../components/Snackbar/Snackbar";
 
 class MainPage extends Component {
     constructor(props) {
@@ -23,7 +25,8 @@ class MainPage extends Component {
             addShowOptions: null,
             settingsVisible: false,
             collaborationVisible: false,
-            navigationVisible: false
+            navigationVisible: false,
+            snackbarVisible: false
         };
     }
 
@@ -49,6 +52,9 @@ class MainPage extends Component {
             } else if( opts === 'navigation') {
                 this.state.navigationVisible && (opened = true);
                 newState.navigationVisible = true;
+            } else if( opts === 'snackbar') {
+                this.state.snackbarVisible && (opened = true);
+                newState.snackbarVisible = true;
             }
 
             for (let key in this.state) {
@@ -82,6 +88,8 @@ class MainPage extends Component {
                     return {collaborationVisible: false};
                 else if( opts == 'navigation') 
                     return {navigationVisible: false}
+                else if( opts == 'snackbar')
+                    return {snackbarVisible: false}
             });
             if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
                 f7.navbar.show('.main-navbar');
@@ -91,9 +99,9 @@ class MainPage extends Component {
     };
 
   render() {
+      const { t } = this.props;
       const appOptions = this.props.storeAppOptions;
-      // const isViewer = appOptions.isViewer;
+      const isMobileView = appOptions.isMobileView;
-      // console.log(isViewer);
       const config = appOptions.config;
 
       let showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
@@ -177,10 +185,25 @@ class MainPage extends Component {
                     !this.state.navigationVisible ? null : 
                         <NavigationController onclosed={this.handleOptionsViewClosed.bind(this, 'navigation')} />
                 }
+                {
+                    <CSSTransition
+                        in={this.state.snackbarVisible}
+                        // timeout={300}
+                        timeout={{
+                            enter: 300,
+                            exit: 300
+                        }}
+                        classNames="snackbar"
+                        mountOnEnter
+                        unmountOnExit
+                    >
+                        <Snackbar text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")} />
+                    </CSSTransition>
+                }
                 {appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)} />}  
           </Page>
       )
   }
 }
 
-export default inject("storeAppOptions")(observer(MainPage));
+export default inject("storeAppOptions")(observer(withTranslation()(MainPage)));

apps/documenteditor/mobile/src/view/Toolbar.jsx

@@ -2,7 +2,7 @@ import React, {Fragment} from 'react';
 import { useTranslation } from 'react-i18next';
 import {NavLeft, NavRight, NavTitle, Link, Icon} from 'framework7-react';
 import { Device } from '../../../../common/mobile/utils/device';
-import EditorUIController from '../lib/patch'
+import EditorUIController from '../lib/patch';
 
 const ToolbarView = props => {
     const { t } = useTranslation();
@@ -44,7 +44,13 @@ const ToolbarView = props => {
                     onUndoClick: props.onUndo,
                     onRedoClick: props.onRedo
                 })}
-                {(isViewer || !Device.phone) && <Link className={props.disabledControls ? 'disabled' : ''} icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={() => props.changeMobileView()}></Link>}
+                {(isViewer || !Device.phone) && <Link className={props.disabledControls ? 'disabled' : ''} icon={isMobileView ? 'icon-standard-view' : 'icon-mobile-view'} href={false} onClick={() => {
+                    props.changeMobileView();
+                    props.openOptions('snackbar');
+                    setTimeout(() => {
+                        props.closeOptions('snackbar');
+                    },  500);
+                }}></Link>}
                 {(props.showEditDocument && !isViewer) &&
                     <Link className={props.disabledControls ? 'disabled' : ''} icon='icon-edit' href={false} onClick={props.onEditDocument}></Link>
                 }

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

@@ -163,7 +163,12 @@ const SettingsList = inject("storeAppOptions", "storeReview")(observer(props =>
                     {!isViewer && Device.phone &&
                         <ListItem title={t('Settings.textMobileView')}>
                             <Icon slot="media" icon="icon-mobile-view"></Icon>
-                            <Toggle checked={isMobileView} onToggleChange={() => props.onChangeMobileView()} />
+                            <Toggle checked={isMobileView} onToggleChange={() => {
+                                // props.onclosed();
+                                props.onChangeMobileView();
+                                props.openOptions('snackbar');
+                                // if(Device.phone) closeModal();
+                            }} />
                         </ListItem>
                     }
                     {(_isEdit && !isViewer) &&
@@ -231,10 +236,10 @@ class SettingsView extends Component {
         return (
             show_popover ?
                 <Popover id="settings-popover" closeByOutsideClick={false} className="popover__titled" onPopoverClosed={() => this.props.onclosed()}>
-                    <SettingsList inPopover={true} onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} style={{height: '410px'}} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
+                    <SettingsList inPopover={true} onOptionClick={this.onoptionclick} onclosed={this.props.onclosed} openOptions={this.props.openOptions} style={{height: '410px'}} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
                 </Popover> :
                 <Popup className="settings-popup" onPopupClosed={() => this.props.onclosed()}>
-                    <SettingsList onOptionClick={this.onoptionclick} openOptions={this.props.openOptions} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
+                    <SettingsList onOptionClick={this.onoptionclick} onclosed={this.props.onclosed} openOptions={this.props.openOptions} onChangeMobileView={this.props.onChangeMobileView} onPrint={this.props.onPrint} showHelp={this.props.showHelp} showFeedback={this.props.showFeedback} onOrthographyCheck={this.props.onOrthographyCheck} onDownloadOrigin={this.props.onDownloadOrigin}/>
                 </Popup>
         )
     }

vendor/framework7-react/package.json

@@ -38,6 +38,7 @@
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
     "react-i18next": "^11.8.5",
+    "react-transition-group": "^4.4.5",
     "swiper": "^8.2.4",
     "template7": "^1.4.2"
   },