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

[DE mobile] Add snackbar for android

Browse source
This commit is contained in:
SergeyEzhin 2022-08-23 21:38:23 +03:00
parent e096d0cddb
commit 7d6f4dbd8c
10 changed files with 105 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

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

13
apps/documenteditor/mobile/src/components/Snackbar/Snackbar.jsx Normal file
View file

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

1
apps/documenteditor/mobile/src/controller/Toolbar.jsx
View file

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

4
apps/documenteditor/mobile/src/controller/settings/Settings.jsx
View file

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

1
apps/documenteditor/mobile/src/less/app-ios.less
View file

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

43
apps/documenteditor/mobile/src/less/app-material.less
View file

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

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

@ -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;
// console.log(isViewer);
const isMobileView = appOptions.isMobileView;
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)));

10
apps/documenteditor/mobile/src/view/Toolbar.jsx
View file

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

11
apps/documenteditor/mobile/src/view/settings/Settings.jsx
View file

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

1
vendor/framework7-react/package.json vendored
View file

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