IlyaSobolev/DocSpace-client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Web: Common: NavMenu/Layout: refactoring

Browse Source
This commit is contained in:
Artem Tarasov 2020-12-01 20:24:35 +03:00
parent e946eb42e0
commit fec2e6d685
2 changed files with 17 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
web/ASC.Web.Common/src/components/Layout/MobileLayout.js
View File

@ -1,7 +1,7 @@
import React, { Component, createRef } from "react";
import { Scrollbar, utils } from "asc-web-components";
import { LayoutContextProvider } from "./context";
import { isMobile, isSafari, isIOS } from "react-device-detect";
import { isMobile, isSafari, isIOS, isChrome } from "react-device-detect";
const { isTouchDevice } = utils.device;
class MobileLayout extends Component {
@ -39,6 +39,13 @@ class MobileLayout extends Component {
scrolledTheVerticalAxis = () => {
const { prevScrollPosition, visibleContent } = this.state;
const currentScrollPosition =
this.documentElement.scrollTop > 0
? this.documentElement.scrollTop
: window.pageYOffset;
let isVisible;
if (visibleContent && isMobile && !isTouchDevice) {
return;
}
@ -46,10 +53,6 @@ class MobileLayout extends Component {
window.scroll(0, 0);
return;
}
const currentScrollPosition =
this.documentElement.scrollTop > 0
? this.documentElement.scrollTop
: window.pageYOffset;
if (Math.abs(currentScrollPosition - prevScrollPosition) <= 54) {
return;
@ -62,7 +65,7 @@ class MobileLayout extends Component {
}
}
let isVisible = prevScrollPosition >= currentScrollPosition;
isVisible = prevScrollPosition >= currentScrollPosition;
if (
(isSafari || isIOS) &&

21
web/ASC.Web.Common/src/components/NavMenu/sub-components/header-nav.js
View File

@ -27,7 +27,6 @@ const StyledNav = styled.nav`
height: 56px;
z-index: 190;
.profile-menu {
right: 12px;
top: 66px;
@ -41,24 +40,20 @@ const StyledNav = styled.nav`
margin: 0 0 0 16px;
padding: 0;
min-width: 24px;
}
@media ${tablet} {
padding: 0 16px;
position:fixed;
position: fixed;
transition: top 0.3s cubic-bezier(0.0,0.0,0.8,1);
-moz-transition: top 0.3s cubic-bezier(0.0,0.0,0.8,1);
-ms-transition: top 0.3s cubic-bezier(0.0,0.0,0.8,1);
-webkit-transition: top 0.3s cubic-bezier(0.0,0.0,0.8,1);
-o-transition: top 0.3s cubic-bezier(0.0,0.0,0.8,1);
top: ${(props) => (props.valueTop ? "0" : "-56px")}
transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
-moz-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
-ms-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
-webkit-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
-o-transition: top 0.3s cubic-bezier(0, 0, 0.8, 1);
top: ${(props) => (props.valueTop ? "0" : "-56px")};
}
}
`;
const HeaderNav = React.memo(
({ history, homepage, modules, user, logout, isAuthenticated }) => {