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

[DE mobile] For Bug 58655

Browse source
This commit is contained in:
SergeyEzhin 2022-11-29 18:11:36 +04:00
parent 73df55f383
commit 9d08c6bfcb
3 changed files with 46 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -79,9 +79,11 @@ const ToolbarController = inject('storeAppOptions', 'users', 'storeReview', 'sto
if(offset > navbarHeight) {
f7.navbar.hide('.main-navbar');
props.closeOptions('fab');
api.SetMobileTopOffset(undefined, 0);
} else {
} else if(offset < -navbarHeight) {
f7.navbar.show('.main-navbar');
props.openOptions('fab');
api.SetMobileTopOffset(undefined, navbarHeight);
}
}

42
apps/documenteditor/mobile/src/less/app.less
View file

@ -347,28 +347,32 @@
}
}
// Snackbar animation
.snackbar-enter {
opacity: 0;
}
.snackbar-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.snackbar-exit {
opacity: 1;
}
.snackbar-exit-active {
opacity: 0;
transition: opacity 300ms;
}
// FAB
.fab a {
background-color: @background-primary;
&:focus, &:focus-within, &:active, &.active-state {
.fab {
z-index: 10000;
a {
background-color: @background-primary;
&:focus, &:focus-within, &:active, &.active-state {
background-color: @background-primary;
}
}
}
// Snackbar and FAB animation
.snackbar-enter, fab-enter {
opacity: 0;
}
.snackbar-enter-active, fab-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.snackbar-exit, .fab-exit {
opacity: 1;
}
.snackbar-exit-active, .fab-exit-active {
opacity: 0;
transition: opacity 300ms;
}

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

@ -29,7 +29,8 @@ class MainPage extends Component {
navigationVisible: false,
addLinkSettingsVisible: false,
editLinkSettingsVisible: false,
snackbarVisible: false
snackbarVisible: false,
fabVisible: true
};
}
@ -64,6 +65,9 @@ class MainPage extends Component {
} else if( opts === 'snackbar') {
this.state.snackbarVisible && (opened = true);
newState.snackbarVisible = true;
} else if( opts === 'fab') {
this.state.fabVisible && (opened = true);
newState.fabVisible = true;
}
for (let key in this.state) {
@ -103,6 +107,8 @@ class MainPage extends Component {
return {editLinkSettingsVisible: false};
else if( opts == 'snackbar')
return {snackbarVisible: false}
else if( opts == 'fab')
return {fabVisible: false}
});
if ((opts === 'edit' || opts === 'coauth') && Device.phone) {
f7.navbar.show('.main-navbar');
@ -135,6 +141,7 @@ class MainPage extends Component {
const isMobileView = appOptions.isMobileView;
const disabledControls = storeToolbarSettings.disabledControls;
const disabledSettings = storeToolbarSettings.disabledSettings;
const isFabShow = isViewer && !disabledSettings && !disabledControls && !isDisconnected && isAvailableExt && isEdit;
const config = appOptions.config;
let showLogo = !(appOptions.canBrandingExt && (config.customization && (config.customization.loaderName || config.customization.loaderLogo)));
@ -240,10 +247,18 @@ class MainPage extends Component {
text={isMobileView ? t("Toolbar.textSwitchedMobileView") : t("Toolbar.textSwitchedStandardView")}/>
</CSSTransition>
}
{isViewer && !disabledSettings && !disabledControls && !isDisconnected && isAvailableExt && isEdit &&
<Fab position="right-bottom" slot="fixed" onClick={() => this.turnOffViewerMode()}>
<Icon icon="icon-edit-mode"/>
</Fab>
{isFabShow &&
<CSSTransition
in={this.state.fabVisible}
timeout={500}
classNames="fab"
mountOnEnter
unmountOnExit
>
<Fab position="right-bottom" slot="fixed" onClick={() => this.turnOffViewerMode()}>
<Icon icon="icon-edit-mode"/>
</Fab>
</CSSTransition>
}
{appOptions.isDocReady && <ContextMenu openOptions={this.handleClickToOpenOptions.bind(this)}/>}