From b36f141cfbbaca78267e8d6a24f2abf6a68c118a Mon Sep 17 00:00:00 2001 From: TimofeyBoyko Date: Thu, 30 Sep 2021 17:05:04 +0800 Subject: [PATCH] Web:Common: fixed catalog on big screen tablet or mobile --- .../DocumentCatalogFolderLoader.js | 35 ++-- .../StyledDocumentCatalogFolderLoader.js | 19 +- .../components/PageLayout/index.js | 66 ++++--- .../sub-components/catalog-backdrop.js | 28 +-- .../PageLayout/sub-components/catalog-body.js | 2 - .../sub-components/catalog-header.js | 40 ++++- .../sub-components/catalog-main-button.js | 20 ++- .../PageLayout/sub-components/catalog.js | 45 +++-- .../PageLayout/sub-components/section.js | 7 +- .../asc-web-common/store/SettingsStore.js | 2 +- .../catalog-item/styled-catalog-item.js | 2 + .../components/Catalog/Body/SettingsItems.js | 3 +- .../src/components/Catalog/Body/index.js | 6 +- .../components/Catalog/MainButton/index.js | 9 +- .../sub-components/header-catalog-burger.js | 10 +- .../NavMenu/sub-components/header.js | 167 +++++++----------- .../NavMenu/sub-components/profile-actions.js | 4 +- 17 files changed, 261 insertions(+), 204 deletions(-) diff --git a/packages/asc-web-common/components/Loaders/DocumentCatalogFolderLoader/DocumentCatalogFolderLoader.js b/packages/asc-web-common/components/Loaders/DocumentCatalogFolderLoader/DocumentCatalogFolderLoader.js index 9b234b92cd..f0271df782 100644 --- a/packages/asc-web-common/components/Loaders/DocumentCatalogFolderLoader/DocumentCatalogFolderLoader.js +++ b/packages/asc-web-common/components/Loaders/DocumentCatalogFolderLoader/DocumentCatalogFolderLoader.js @@ -1,26 +1,30 @@ import React from 'react'; import PropTypes from 'prop-types'; -import RectangleLoader from '../RectangleLoader'; -import { StyledContainer, StyledBlock } from './StyledDocumentCatalogFolderLoader'; +import { + StyledContainer, + StyledBlock, + StyledRectangleLoader, +} from './StyledDocumentCatalogFolderLoader'; +import { inject, observer } from 'mobx-react'; -const DocumentCatalogFolderLoader = ({ id, className, style, ...rest }) => { +const DocumentCatalogFolderLoader = ({ id, className, style, showText, ...rest }) => { return ( - - - - - - + + + + + + - - + + - + - + ); @@ -30,6 +34,7 @@ DocumentCatalogFolderLoader.propTypes = { id: PropTypes.string, className: PropTypes.string, style: PropTypes.object, + showText: PropTypes.func, }; DocumentCatalogFolderLoader.defaultProps = { @@ -38,4 +43,6 @@ DocumentCatalogFolderLoader.defaultProps = { style: undefined, }; -export default DocumentCatalogFolderLoader; +export default inject(({ auth }) => ({ showText: auth.settingsStore.showText }))( + observer(DocumentCatalogFolderLoader), +); diff --git a/packages/asc-web-common/components/Loaders/DocumentCatalogFolderLoader/StyledDocumentCatalogFolderLoader.js b/packages/asc-web-common/components/Loaders/DocumentCatalogFolderLoader/StyledDocumentCatalogFolderLoader.js index 54e2c2971d..db7ffb1da4 100644 --- a/packages/asc-web-common/components/Loaders/DocumentCatalogFolderLoader/StyledDocumentCatalogFolderLoader.js +++ b/packages/asc-web-common/components/Loaders/DocumentCatalogFolderLoader/StyledDocumentCatalogFolderLoader.js @@ -1,13 +1,15 @@ import styled from 'styled-components'; +import RectangleLoader from '../RectangleLoader'; import { tablet, mobile } from '@appserver/components/utils/device'; const StyledContainer = styled.div` + margin: 0; width: 256px; padding: 0 20px; @media ${tablet} { - width: 100%; - padding: 0; + width: ${(props) => (props.showText ? '240px' : '52px')}; + padding: ${(props) => (props.showText ? '0 16px' : '0')}; } @media ${mobile} { @@ -17,6 +19,7 @@ const StyledContainer = styled.div` `; const StyledBlock = styled.div` + margin: 0; width: 100%; height: auto; @@ -27,4 +30,14 @@ const StyledBlock = styled.div` } `; -export { StyledBlock, StyledContainer }; +const StyledRectangleLoader = styled(RectangleLoader)` + height: 20px; + padding: 1px 0 11px; + + @media ${tablet} { + height: 41px; + padding: 0; + } +`; + +export { StyledBlock, StyledContainer, StyledRectangleLoader }; diff --git a/packages/asc-web-common/components/PageLayout/index.js b/packages/asc-web-common/components/PageLayout/index.js index 26450a4e5c..22df7d0200 100644 --- a/packages/asc-web-common/components/PageLayout/index.js +++ b/packages/asc-web-common/components/PageLayout/index.js @@ -1,9 +1,14 @@ import React from 'react'; import PropTypes from 'prop-types'; import Backdrop from '@appserver/components/backdrop'; -import { size, isDesktop, isTablet } from '@appserver/components/utils/device'; +import { + size, + isMobile as isMobileUtils, + isTablet as isTabletUtils, + isDesktop as isDesktopUtils, +} from '@appserver/components/utils/device'; import { Provider } from '@appserver/components/utils/context'; -import { isMobile, isFirefox, isMobileOnly } from 'react-device-detect'; +import { isMobile, isDesktop, isTablet, isFirefox, isMobileOnly } from 'react-device-detect'; import Article from './sub-components/article'; import SubArticleHeader from './sub-components/article-header'; import SubArticleMainButton from './sub-components/article-main-button'; @@ -26,6 +31,7 @@ import SubCatalogBackdrop from './sub-components/catalog-backdrop'; import SubCatalogHeader from './sub-components/catalog-header'; import SubCatalogMainButton from './sub-components/catalog-main-button'; import SubCatalogBody from './sub-components/catalog-body'; + const StyledSelectoWrapper = styled.div` .selecto-selection { z-index: 200; @@ -115,15 +121,13 @@ class PageLayout extends React.Component { ) { this.backdropClick(); } - - if (isDesktop()) return this.props.setShowText(true); - if (isTablet() && !this.props.userShowText) return this.props.setShowText(false); - if (this.props.showText && isTablet() && !this.props.userShowText) - return this.props.setShowText(false); - if (this.props.showText && isMobile && !this.props.userShowText) - return this.props.setShowText(false); - if (!isTablet() && !isMobile && !this.props.showText && !this.props.userShowText) - return this.props.setShowText(true); + console.log('rerender'); + if (isMobile && !this.props.userShowText && this.props.showText) this.props.setShowText(false); + if (isMobileUtils() && !isMobile && !this.props.userShowText && this.props.showText) + this.props.setShowText(false); + if (isTabletUtils() && !isMobile && !this.props.userShowText && this.props.showText) + this.props.setShowText(false); + if (isDesktopUtils() && !isMobile) this.props.setShowText(true); } componentDidMount() { @@ -232,6 +236,7 @@ class PageLayout extends React.Component { isArticlePinned, isDesktop, showText, + userShowText, setShowText, toggleShowText, } = this.props; @@ -311,28 +316,33 @@ class PageLayout extends React.Component { return ( <> {isCatalogAvailable && ( - - {isCatalogHeaderAvailable && ( + <> + {showText && (isMobileOnly || window.innerWidth <= 375) && ( <> - + + + + )} + + {isCatalogHeaderAvailable && ( {catalogHeaderContent ? catalogHeaderContent.props.children : null} - - )} + )} - {isCatalogMainButtonAvailable && ( - - {catalogMainButtonContent ? catalogMainButtonContent.props.children : null} - - )} + {isCatalogMainButtonAvailable && ( + + {catalogMainButtonContent ? catalogMainButtonContent.props.children : null} + + )} - {isCatalogBodyAvailable && ( - - {catalogBodyContent ? catalogBodyContent.props.children : null} - - )} - + {isCatalogBodyAvailable && ( + + {catalogBodyContent ? catalogBodyContent.props.children : null} + + )} + + )} {isBackdropAvailable && ( @@ -585,9 +595,9 @@ export default inject(({ auth }) => { setIsBackdropVisible, isDesktop: isDesktopClient, showText, - userShowText, setShowText, toggleShowText, showCatalog, + userShowText, }; })(observer(PageLayout)); diff --git a/packages/asc-web-common/components/PageLayout/sub-components/catalog-backdrop.js b/packages/asc-web-common/components/PageLayout/sub-components/catalog-backdrop.js index 1e276c1a4f..968c4daa5f 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/catalog-backdrop.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/catalog-backdrop.js @@ -1,26 +1,8 @@ import React from 'react'; import PropTypes from 'prop-types'; import styled from 'styled-components'; -import Backdrop from '@appserver/components/backdrop'; -import { mobile } from '@appserver/components/utils/device'; import CrossIcon from '@appserver/components/public/static/images/cross.react.svg'; -const StyledBackdrop = styled(Backdrop)` - display: none; - width: 100vw; - height: 64px; - position: fixed; - top: 0; - left: 0; - background: rgba(6, 22, 38, 0.15); - -webkit-backdrop-filter: blur(18px); - backdrop-filter: blur(18px); - cursor: initial; - @media ${mobile} { - display: block; - } -`; - const StyledControlContainer = styled.div` background: #9a9ea3; width: 24px; @@ -33,6 +15,7 @@ const StyledControlContainer = styled.div` display: flex; align-items: center; justify-content: center; + z-index: 290; `; const StyledCrossIcon = styled(CrossIcon)` @@ -45,13 +28,10 @@ const StyledCrossIcon = styled(CrossIcon)` const CatalogBackdrop = (props) => { const { showText, onClick, ...rest } = props; - return ( - - - - - + + + ); }; diff --git a/packages/asc-web-common/components/PageLayout/sub-components/catalog-body.js b/packages/asc-web-common/components/PageLayout/sub-components/catalog-body.js index 77a2adabae..0ceb127778 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/catalog-body.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/catalog-body.js @@ -1,6 +1,4 @@ import React from 'react'; -import styled from 'styled-components'; -import PropTypes from 'prop-types'; const CatalogBody = (props) => { return <> {props.children}; diff --git a/packages/asc-web-common/components/PageLayout/sub-components/catalog-header.js b/packages/asc-web-common/components/PageLayout/sub-components/catalog-header.js index c62c188725..a3b46a8dff 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/catalog-header.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/catalog-header.js @@ -1,9 +1,10 @@ import React from 'react'; import PropTypes from 'prop-types'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import Heading from '@appserver/components/heading'; -import { mobile, tablet } from '@appserver/components/utils/device'; +import { isMobileOnly, isTablet } from 'react-device-detect'; import MenuIcon from '@appserver/components/public/static/images/menu.react.svg'; +import { tablet, mobile } from '@appserver/components/utils/device'; const StyledCatalogHeader = styled.div` padding: 12px 20px 13px; @@ -12,14 +13,26 @@ const StyledCatalogHeader = styled.div` align-items: center; @media ${tablet} { - padding: 16px 20px 17px; + padding: 16px 16px 17px; justify-content: ${(props) => (props.showText ? 'flex-start' : 'center')}; } @media ${mobile} { border-bottom: 1px solid #eceef1; - padding: 28px 20px 12px; + padding: 8px 16px 17px; } + + ${isTablet && + css` + padding: 16px 16px 17px; + justify-content: ${(props) => (props.showText ? 'flex-start' : 'center')}; + `} + + ${isMobileOnly && + css` + border-bottom: 1px solid #eceef1 !important; + padding: 8px 16px 17px !important; + `} `; const StyledHeading = styled(Heading)` @@ -30,9 +43,18 @@ const StyledHeading = styled(Heading)` display: ${(props) => (props.showText ? 'block' : 'none')}; margin-left: ${(props) => props.showText && '12px'}; } + @media ${mobile} { margin-left: 0; } + ${isTablet && + css` { + display: ${(props) => (props.showText ? 'block' : 'none')}; + margin-left: ${(props) => props.showText && '12px'};`} + ${isMobileOnly && + css` + margin-left: 0 !important; + `} `; const StyledIconBox = styled.div` @@ -47,6 +69,16 @@ const StyledIconBox = styled.div` @media ${mobile} { display: none; } + + ${isTablet && + css` + display: flex !important; + `} + + ${isMobileOnly && + css` + display: none !important; + `} `; const StyledMenuIcon = styled(MenuIcon)` diff --git a/packages/asc-web-common/components/PageLayout/sub-components/catalog-main-button.js b/packages/asc-web-common/components/PageLayout/sub-components/catalog-main-button.js index b3a4dbac12..3218fe4a68 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/catalog-main-button.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/catalog-main-button.js @@ -1,18 +1,30 @@ import React from 'react'; -import styled from 'styled-components'; -import { tablet, mobile } from '@appserver/components/utils/device'; +import styled, { css } from 'styled-components'; +import { isMobileOnly, isTablet } from 'react-device-detect'; +import { mobile, tablet } from '@appserver/components/utils/device'; const StyledCatalogMainButton = styled.div` padding: 0px 20px 16px; @media ${tablet} { display: ${(props) => (props.showText ? 'block' : 'none')}; - padding: 0 20px 16px; + padding: 0 16px 16px; } @media ${mobile} { - padding: 16px 20px 16px; + padding: 16px 16px 16px; } + + ${isTablet && + css` + display: ${(props) => (props.showText ? 'block' : 'none')}; + padding: 0 16px 16px; + `} + + ${isMobileOnly && + css` + padding: 16px 16px 16px !important; + `} `; const CatalogMainButton = (props) => { diff --git a/packages/asc-web-common/components/PageLayout/sub-components/catalog.js b/packages/asc-web-common/components/PageLayout/sub-components/catalog.js index d79190a3c2..717b50346f 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/catalog.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/catalog.js @@ -1,29 +1,32 @@ import React from 'react'; -import styled from 'styled-components'; +import styled, { css } from 'styled-components'; import PropTypes from 'prop-types'; import { Resizable } from 're-resizable'; -import { isMobile } from 'react-device-detect'; -import { mobile, tablet, isTablet } from '@appserver/components/utils/device'; +import { isMobile, isMobileOnly, isTablet } from 'react-device-detect'; +import { mobile, tablet } from '@appserver/components/utils/device'; const StyledCatalog = styled.div` - @media (hover: none) { - position: relative; - top: 48px; + position: relative; + @media ${mobile} { + top: 8px; } + top: ${(props) => isMobileOnly && (props.showText ? '64px' : '56px')} !important; + + z-index: ${(props) => (props.showText ? '202' : '100')}; .resizable-block { display: flex; flex-direction: column; - min-width: 256px; - width: 256px; + min-width: ${(props) => (props.showText ? '256px' : '52px')}; + width: ${(props) => (props.showText ? '256px' : '52px')}; height: 100% !important; background: #f8f9f9; - overflow: hidden; + overflow-y: auto; + overflow-x: hidden; .resizable-border { div { cursor: ew-resize !important; } } - @media ${tablet} { min-width: ${(props) => (props.showText ? '240px' : '52px')}; max-width: ${(props) => (props.showText ? '240px' : '52px')}; @@ -35,10 +38,28 @@ const StyledCatalog = styled.div` @media ${mobile} { display: ${(props) => (props.showText ? 'flex' : 'none')}; min-width: 100vw; - width: 100vw; + width: 100%; margin: 0; padding: 0; } + + ${isTablet && + css` + min-width: ${(props) => (props.showText ? '240px' : '52px')}; + max-width: ${(props) => (props.showText ? '240px' : '52px')}; + .resizable-border { + display: none; + } + `} + + ${isMobileOnly && + css` + display: ${(props) => (props.showText ? 'flex' : 'none')}; + min-width: 100vw !important; + width: 100%; + margin: 0; + padding: 0; + `} } `; @@ -58,7 +79,7 @@ const Catalog = (props) => { }, []); React.useEffect(() => { - if (isMobile) { + if (isMobileOnly) { window.addEventListener('popstate', hideText); return () => window.removeEventListener('popstate', hideText); } diff --git a/packages/asc-web-common/components/PageLayout/sub-components/section.js b/packages/asc-web-common/components/PageLayout/sub-components/section.js index 99a5879f15..6357cbaf52 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/section.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/section.js @@ -1,7 +1,7 @@ import React from 'react'; import styled, { css } from 'styled-components'; import { tablet, size, mobile } from '@appserver/components/utils/device'; -import { isIOS, isTablet, isSafari, isChrome, isMobile } from 'react-device-detect'; +import { isIOS, isTablet, isSafari, isChrome, isMobileOnly, isMobile } from 'react-device-detect'; const tabletProps = css` .section-header_filter { @@ -22,6 +22,11 @@ const StyledSection = styled.section` @media ${mobile} { display: ${(props) => (!props.showText ? 'flex' : 'none')}; } + + ${isMobileOnly && + css` + display: ${(props) => (!props.showText ? 'flex' : 'none')} !important; + `} //width: ${(props) => `${props.widthProp}px`}; .layout-progress-bar { position: fixed; diff --git a/packages/asc-web-common/store/SettingsStore.js b/packages/asc-web-common/store/SettingsStore.js index af0d7d9c56..54accdf71a 100644 --- a/packages/asc-web-common/store/SettingsStore.js +++ b/packages/asc-web-common/store/SettingsStore.js @@ -334,7 +334,7 @@ class SettingsStore { toggleShowText = () => { this.showText = !this.showText; - this.userShowText = true; + this.userShowText = !this.userShowText; }; get firebaseHelper() { diff --git a/packages/asc-web-components/catalog-item/styled-catalog-item.js b/packages/asc-web-components/catalog-item/styled-catalog-item.js index 980d3b073d..f7de823bff 100644 --- a/packages/asc-web-components/catalog-item/styled-catalog-item.js +++ b/packages/asc-web-components/catalog-item/styled-catalog-item.js @@ -99,6 +99,7 @@ const StyledCatalogItemImg = styled.div` position: relative; z-index: 1; pointer-events: none; + height: ${(props) => props.theme.catalogItem.img.svg.height}; svg { width: ${(props) => props.theme.catalogItem.img.svg.width}; @@ -109,6 +110,7 @@ const StyledCatalogItemImg = styled.div` } @media ${tablet} { + height: ${(props) => props.theme.catalogItem.img.svg.tablet.height}; svg { width: ${(props) => props.theme.catalogItem.img.svg.tablet.width}; height: ${(props) => props.theme.catalogItem.img.svg.tablet.height}; diff --git a/products/ASC.Files/Client/src/components/Catalog/Body/SettingsItems.js b/products/ASC.Files/Client/src/components/Catalog/Body/SettingsItems.js index dca9748a2a..f852220c1d 100644 --- a/products/ASC.Files/Client/src/components/Catalog/Body/SettingsItems.js +++ b/products/ASC.Files/Client/src/components/Catalog/Body/SettingsItems.js @@ -8,6 +8,7 @@ import config from '../../../../package.json'; import { AppServerConfig } from '@appserver/common/constants'; import withLoader from '../../../HOCs/withLoader'; import { isMobile } from '@appserver/components/utils/device'; +import { isMobileOnly } from 'react-device-detect'; const PureSettingsItems = ({ match, @@ -40,7 +41,7 @@ const PureSettingsItems = ({ setSelectedNode(['common']); setExpandSettingsTree(['common']); - if (isMobile() && showText) toggleShowText(); + if (isMobile() || isMobileOnly) toggleShowText(); history.push(combineUrl(AppServerConfig.proxyURL, config.homepage, '/settings/common')); }; diff --git a/products/ASC.Files/Client/src/components/Catalog/Body/index.js b/products/ASC.Files/Client/src/components/Catalog/Body/index.js index 34f0d367ed..f851567f39 100644 --- a/products/ASC.Files/Client/src/components/Catalog/Body/index.js +++ b/products/ASC.Files/Client/src/components/Catalog/Body/index.js @@ -10,7 +10,7 @@ import { isMobile, tablet } from '@appserver/components/utils/device'; import FilesFilter from '@appserver/common/api/files/filter'; import SettingsItems from './SettingsItems'; import { combineUrl } from '@appserver/common/utils'; -import { isDesktop, isTablet } from 'react-device-detect'; +import { isDesktop, isTablet, isMobileOnly } from 'react-device-detect'; import ThirdPartyList from './ThirdPartyList'; import DownloadAppList from './DownloadAppList'; import Banner from './Banner'; @@ -51,7 +51,7 @@ const CatalogBodyContent = (props) => { if (window.location.pathname.indexOf('/filter') > 0) { fetchFiles(data, null, true, false) .then(() => { - isMobile() && toggleShowText(); + (isMobileOnly || isMobile()) && toggleShowText(); }) .catch((err) => toastr.error(err)) .finally(() => setIsLoading(false)); @@ -62,7 +62,7 @@ const CatalogBodyContent = (props) => { filter.folder = data; const urlFilter = filter.toUrlParams(); - + if (isMobileOnly || isMobile()) toggleShowText(); history.push(combineUrl(AppServerConfig.proxyURL, homepage, `/filter?${urlFilter}`)); } }, []); diff --git a/products/ASC.Files/Client/src/components/Catalog/MainButton/index.js b/products/ASC.Files/Client/src/components/Catalog/MainButton/index.js index 85e141e572..5df823dbdd 100644 --- a/products/ASC.Files/Client/src/components/Catalog/MainButton/index.js +++ b/products/ASC.Files/Client/src/components/Catalog/MainButton/index.js @@ -5,6 +5,7 @@ import MainButton from '@appserver/components/main-button'; import DropDownItem from '@appserver/components/drop-down-item'; import { withTranslation } from 'react-i18next'; import { isMobile } from 'react-device-detect'; +import { isMobile as isMobileUtils } from '@appserver/components/utils/device'; import Loaders from '@appserver/common/components/Loaders'; import { FileAction, AppServerConfig } from '@appserver/common/constants'; import { encryptionUploadDialog } from '../../../helpers/desktop'; @@ -22,6 +23,7 @@ class CatalogMainButtonContent extends React.Component { extension: format, id: -1, }); + if (isMobile || isMobileUtils()) this.props.toggleShowText(); }; onUploadFileClick = () => { @@ -32,6 +34,7 @@ class CatalogMainButtonContent extends React.Component { this.goToHomePage(); startUpload([encryptedFile], null, t); }); + if (isMobile || isMobileUtils()) this.props.toggleShowText(); } else { this.inputFilesElement.click(); } @@ -43,12 +46,14 @@ class CatalogMainButtonContent extends React.Component { const { homepage, history, filter } = this.props; const urlFilter = filter.toUrlParams(); history.push(combineUrl(AppServerConfig.proxyURL, homepage, `/filter?${urlFilter}`)); + if (isMobile || isMobileUtils()) this.props.toggleShowText(); }; onFileChange = (e) => { const { startUpload, t } = this.props; //this.goToHomePage(); startUpload(e.target.files, null, t); + if (isMobile || isMobileUtils()) this.props.toggleShowText(); }; onInputClick = (e) => (e.target.value = null); @@ -143,7 +148,7 @@ CatalogMainButtonContent.propTypes = { history: PropTypes.object.isRequired, }; -export default inject(({ filesStore, uploadDataStore, treeFoldersStore }) => { +export default inject(({ auth, filesStore, uploadDataStore, treeFoldersStore }) => { const { firstLoad, fileActionStore, filter, canCreate } = filesStore; const { isPrivacyFolder } = treeFoldersStore; const { startUpload } = uploadDataStore; @@ -157,6 +162,8 @@ export default inject(({ filesStore, uploadDataStore, treeFoldersStore }) => { setAction: fileActionStore.setAction, startUpload, + + toggleShowText: auth.settingsStore.toggleShowText, }; })( withRouter( diff --git a/web/ASC.Web.Client/src/components/NavMenu/sub-components/header-catalog-burger.js b/web/ASC.Web.Client/src/components/NavMenu/sub-components/header-catalog-burger.js index c1a33c6540..d34eb6c3a2 100644 --- a/web/ASC.Web.Client/src/components/NavMenu/sub-components/header-catalog-burger.js +++ b/web/ASC.Web.Client/src/components/NavMenu/sub-components/header-catalog-burger.js @@ -1,16 +1,16 @@ import React from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; -import { mobile } from '@appserver/components/utils/device'; +import { isMobileOnly } from 'react-device-detect'; import MenuIcon from '@appserver/components/public/static/images/menu.react.svg'; +import { mobile } from '@appserver/components/utils/device'; const StyledIconBox = styled.div` - display: none; - @media ${mobile} { - display: ${(props) => (props.isProduct && props.showCatalog ? 'flex' : 'none')}; - align-items: center; + display: ${(props) => (props.isProduct && props.showCatalog ? 'flex !important' : 'none')}; } + display: ${(props) => (props.isProduct && props.showCatalog && isMobileOnly ? 'flex' : 'none')}; + align-items: center; `; const StyledMenuIcon = styled(MenuIcon)` diff --git a/web/ASC.Web.Client/src/components/NavMenu/sub-components/header.js b/web/ASC.Web.Client/src/components/NavMenu/sub-components/header.js index 8bd17033ab..e2d81e5a53 100644 --- a/web/ASC.Web.Client/src/components/NavMenu/sub-components/header.js +++ b/web/ASC.Web.Client/src/components/NavMenu/sub-components/header.js @@ -1,28 +1,28 @@ -import React from "react"; -import { inject, observer } from "mobx-react"; -import PropTypes from "prop-types"; -import styled, { css } from "styled-components"; -import { Link as LinkWithoutRedirect } from "react-router-dom"; -import { isMobileOnly } from "react-device-detect"; -import NavItem from "./nav-item"; -import Headline from "@appserver/common/components/Headline"; -import Nav from "./nav"; -import NavLogoItem from "./nav-logo-item"; -import Link from "@appserver/components/link"; -import history from "@appserver/common/history"; -import { useTranslation } from "react-i18next"; +import React from 'react'; +import { inject, observer } from 'mobx-react'; +import PropTypes from 'prop-types'; +import styled, { css } from 'styled-components'; +import { Link as LinkWithoutRedirect } from 'react-router-dom'; +import { isMobileOnly } from 'react-device-detect'; +import NavItem from './nav-item'; +import Headline from '@appserver/common/components/Headline'; +import Nav from './nav'; +import NavLogoItem from './nav-logo-item'; +import Link from '@appserver/components/link'; +import history from '@appserver/common/history'; +import { useTranslation } from 'react-i18next'; -import Box from "@appserver/components/box"; -import Text from "@appserver/components/text"; -import { desktop, tablet } from "@appserver/components/utils/device"; -import i18n from "../i18n"; -import { combineUrl } from "@appserver/common/utils"; -import { AppServerConfig } from "@appserver/common/constants"; -import NoUserSelect from "@appserver/components/utils/commonStyles"; +import Box from '@appserver/components/box'; +import Text from '@appserver/components/text'; +import { desktop, tablet } from '@appserver/components/utils/device'; +import i18n from '../i18n'; +import { combineUrl } from '@appserver/common/utils'; +import { AppServerConfig } from '@appserver/common/constants'; +import NoUserSelect from '@appserver/components/utils/commonStyles'; const { proxyURL } = AppServerConfig; -const backgroundColor = "#0F4071"; +const backgroundColor = '#0F4071'; const Header = styled.header` align-items: center; @@ -74,16 +74,16 @@ const Header = styled.header` @media (max-width: 620px) { padding: 0 12px 0 0; - display: ${(props) => props.module && "block"}; + display: ${(props) => props.module && 'block'}; } } .header-logo-icon { - width: ${(props) => (props.isPersonal ? "220px" : "146px")}; + width: ${(props) => (props.isPersonal ? '220px' : '146px')}; ${(props) => props.isPersonal && `margin-left: 20px;`} height: 24px; position: relative; - padding: ${(props) => (!props.isPersonal ? "0 20px 0 6px" : "0")}; + padding: ${(props) => (!props.isPersonal ? '0 20px 0 6px' : '0')}; cursor: pointer; @media ${tablet} { @@ -94,7 +94,7 @@ const Header = styled.header` ${(props) => !props.isPersonal && css` - display: ${(props) => (props.module ? "none" : "block")}; + display: ${(props) => (props.module ? 'none' : 'block')}; padding: 0px 20px 0 6px; `} } @@ -122,9 +122,9 @@ const StyledLink = styled.div` `; const versionBadgeProps = { - color: "#7A95B0", - fontWeight: "600", - fontSize: "13px", + color: '#7A95B0', + fontWeight: '600', + fontSize: '13px', }; const HeaderComponent = ({ @@ -146,7 +146,7 @@ const HeaderComponent = ({ isPersonal, ...props }) => { - const { t } = useTranslation("Common"); + const { t } = useTranslation('Common'); const isNavAvailable = mainModules.length > 0; @@ -181,14 +181,9 @@ const HeaderComponent = ({ isLoaded={isLoaded} isPersonal={isPersonal} isAuthenticated={isAuthenticated} - className="navMenuHeader hidingHeader" - > + className="navMenuHeader hidingHeader"> {!isPersonal && ( - + )} @@ -198,29 +193,18 @@ const HeaderComponent = ({ logo ) : ( )} {!isPersonal && ( - + {currentProductName} )} @@ -231,62 +215,50 @@ const HeaderComponent = ({ opened={isNavOpened} onMouseEnter={onNavMouseEnter} onMouseLeave={onNavMouseLeave} - numberOfModules={numberOfModules} - > + numberOfModules={numberOfModules}> - {mainModules.map( - ({ - id, - separator, //iconName, - iconUrl, - notifications, - link, - title, - dashed, - }) => ( - - {id === "settings" ? i18n.t("Common:Settings") : title} - - ) - )} + {mainModules.map(( + { id, separator, iconUrl, notifications, link, title, dashed }, //iconName, + ) => ( + + {id === 'settings' ? i18n.t('Common:Settings') : title} + + ))} - {t("Common:Version")} {version} + {...versionBadgeProps}> + {t('Common:Version')} {version} - {" "} - -{" "} + {' '} + -{' '} - {t("Common:About")} + to={combineUrl(proxyURL, '/about')} + className="nav-menu-header_link"> + {t('Common:About')} @@ -296,7 +268,7 @@ const HeaderComponent = ({ ); }; -HeaderComponent.displayName = "Header"; +HeaderComponent.displayName = 'Header'; HeaderComponent.propTypes = { totalNotifications: PropTypes.number, @@ -327,12 +299,7 @@ export default inject(({ auth }) => { availableModules, version, } = auth; - const { - logoUrl, - defaultPage, - currentProductId, - personal: isPersonal, - } = settingsStore; + const { logoUrl, defaultPage, currentProductId, personal: isPersonal } = settingsStore; const { totalNotifications } = moduleStore; //TODO: restore when chat will complete -> const mainModules = availableModules.filter((m) => !m.isolateMode); @@ -348,6 +315,6 @@ export default inject(({ auth }) => { version, isAuthenticated, currentProductId, - currentProductName: (product && product.title) || "", + currentProductName: (product && product.title) || '', }; })(observer(HeaderComponent)); diff --git a/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-actions.js b/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-actions.js index 6b1b13973e..5d029aade4 100644 --- a/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-actions.js +++ b/web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-actions.js @@ -7,11 +7,13 @@ import Link from '@appserver/components/link'; import ProfileMenu from './profile-menu'; import api from '@appserver/common/api'; import { mobile } from '@appserver/components/utils/device'; +import { isMobileOnly } from 'react-device-detect'; const StyledDiv = styled.div` @media ${mobile} { - display: ${(props) => (props.isProduct && props.showCatalog ? 'none' : 'block')}; + display: ${(props) => (props.isProduct && props.showCatalog ? 'none !important' : 'block')}; } + display: ${(props) => (props.isProduct && props.showCatalog && isMobileOnly ? 'none' : 'block')}; `; class ProfileActions extends React.PureComponent { constructor(props) {