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

Web:Common: fixed catalog on big screen tablet or mobile

Browse Source
This commit is contained in:
Timofey Boyko 2021-09-30 17:05:04 +08:00
parent e5807a43fc
commit b36f141cfb
17 changed files with 261 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/asc-web-common/components/Loaders/DocumentCatalogFolderLoader/DocumentCatalogFolderLoader.js
View File

@ -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 (
<StyledContainer>
<StyledBlock id={id} className={className} style={style}>
<RectangleLoader width="100%" height="36px" {...rest} />
<RectangleLoader width="100%" height="36px" {...rest} />
<RectangleLoader width="100%" height="36px" {...rest} />
<RectangleLoader width="100%" height="36px" {...rest} />
<StyledContainer id={id} className={className} style={style} showText={showText}>
<StyledBlock>
<StyledRectangleLoader width="100%" {...rest} />
<StyledRectangleLoader width="100%" {...rest} />
<StyledRectangleLoader width="100%" {...rest} />
<StyledRectangleLoader width="100%" {...rest} />
</StyledBlock>
<StyledBlock>
<RectangleLoader width="100%" height="36px" {...rest} />
<RectangleLoader width="100%" height="36px" {...rest} />
<StyledRectangleLoader width="100%" {...rest} />
<StyledRectangleLoader width="100%" {...rest} />
</StyledBlock>
<StyledBlock>
<RectangleLoader width="100%" height="36px" {...rest} />
<StyledRectangleLoader width="100%" {...rest} />
</StyledBlock>
<StyledBlock>
<RectangleLoader width="100%" height="36px" {...rest} />
<StyledRectangleLoader width="100%" {...rest} />
</StyledBlock>
</StyledContainer>
);
@ -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),
);

19
packages/asc-web-common/components/Loaders/DocumentCatalogFolderLoader/StyledDocumentCatalogFolderLoader.js
View File

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

40
packages/asc-web-common/components/PageLayout/index.js
View File

@ -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,14 +316,18 @@ class PageLayout extends React.Component {
return (
<>
{isCatalogAvailable && (
<>
{showText && (isMobileOnly || window.innerWidth <= 375) && (
<>
<SubCatalogBackdrop onClick={toggleShowText} />
<Backdrop visible={true} zIndex={201} />
</>
)}
<Catalog showText={showText} setShowText={setShowText}>
{isCatalogHeaderAvailable && (
<>
<SubCatalogBackdrop showText={showText} onClick={toggleShowText} />
<SubCatalogHeader showText={showText} onClick={toggleShowText}>
{catalogHeaderContent ? catalogHeaderContent.props.children : null}
</SubCatalogHeader>
</>
)}
{isCatalogMainButtonAvailable && (
@ -333,6 +342,7 @@ class PageLayout extends React.Component {
</SubCatalogBody>
)}
</Catalog>
</>
)}
{isBackdropAvailable && (
<Backdrop zIndex={400} visible={isBackdropVisible} onClick={this.backdropClick} />
@ -585,9 +595,9 @@ export default inject(({ auth }) => {
setIsBackdropVisible,
isDesktop: isDesktopClient,
showText,
userShowText,
setShowText,
toggleShowText,
showCatalog,
userShowText,
};
})(observer(PageLayout));

24
packages/asc-web-common/components/PageLayout/sub-components/catalog-backdrop.js
View File

@ -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 (
<StyledBackdrop visible={showText} {...rest}>
<StyledControlContainer onClick={onClick}>
<StyledControlContainer onClick={onClick} {...rest}>
<StyledCrossIcon />
</StyledControlContainer>
</StyledBackdrop>
);
};

2
packages/asc-web-common/components/PageLayout/sub-components/catalog-body.js
View File

@ -1,6 +1,4 @@
import React from 'react';
import styled from 'styled-components';
import PropTypes from 'prop-types';
const CatalogBody = (props) => {
return <> {props.children}</>;

40
packages/asc-web-common/components/PageLayout/sub-components/catalog-header.js
View File

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

20
packages/asc-web-common/components/PageLayout/sub-components/catalog-main-button.js
View File

@ -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) => {

43
packages/asc-web-common/components/PageLayout/sub-components/catalog.js
View File

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

7
packages/asc-web-common/components/PageLayout/sub-components/section.js
View File

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

2
packages/asc-web-common/store/SettingsStore.js
View File

@ -334,7 +334,7 @@ class SettingsStore {
toggleShowText = () => {
this.showText = !this.showText;
this.userShowText = true;
this.userShowText = !this.userShowText;
};
get firebaseHelper() {

2
packages/asc-web-components/catalog-item/styled-catalog-item.js
View File

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

3
products/ASC.Files/Client/src/components/Catalog/Body/SettingsItems.js
View File

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

6
products/ASC.Files/Client/src/components/Catalog/Body/index.js
View File

@ -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}`));
}
}, []);

9
products/ASC.Files/Client/src/components/Catalog/MainButton/index.js
View File

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

10
web/ASC.Web.Client/src/components/NavMenu/sub-components/header-catalog-burger.js
View File

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

139
web/ASC.Web.Client/src/components/NavMenu/sub-components/header.js
View File

@ -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 && (
<NavItem
badgeNumber={totalNotifications}
onClick={onClick}
noHover={true}
/>
<NavItem badgeNumber={totalNotifications} onClick={onClick} noHover={true} />
)}
<LinkWithoutRedirect className="header-logo-wrapper" to={defaultPage}>
@ -198,29 +193,18 @@ const HeaderComponent = ({
<img
alt="logo"
className="header-logo-icon"
src={combineUrl(
AppServerConfig.proxyURL,
"/static/images/personal.logo.react.svg"
)}
src={combineUrl(AppServerConfig.proxyURL, '/static/images/personal.logo.react.svg')}
/>
) : (
<img
className="header-logo-icon mobile-short-logo"
src={combineUrl(
AppServerConfig.proxyURL,
"/static/images/nav.logo.opened.react.svg"
)}
src={combineUrl(AppServerConfig.proxyURL, '/static/images/nav.logo.opened.react.svg')}
/>
)}
</LinkWithoutRedirect>
{!isPersonal && (
<Headline
className="header-module-title"
type="header"
color="#FFF"
onClick={onClick}
>
<Headline className="header-module-title" type="header" color="#FFF" onClick={onClick}>
{currentProductName}
</Headline>
)}
@ -231,24 +215,16 @@ const HeaderComponent = ({
opened={isNavOpened}
onMouseEnter={onNavMouseEnter}
onMouseLeave={onNavMouseLeave}
numberOfModules={numberOfModules}
>
numberOfModules={numberOfModules}>
<NavLogoItem opened={isNavOpened} onClick={onLogoClick} />
<NavItem
separator={true}
key={"nav-products-separator"}
data-id={"nav-products-separator"}
key={'nav-products-separator'}
data-id={'nav-products-separator'}
/>
{mainModules.map(
({
id,
separator, //iconName,
iconUrl,
notifications,
link,
title,
dashed,
}) => (
{mainModules.map((
{ id, separator, iconUrl, notifications, link, title, dashed }, //iconName,
) => (
<NavItem
separator={!!separator}
key={id}
@ -262,31 +238,27 @@ const HeaderComponent = ({
onClick={onItemClick}
onBadgeClick={onBadgeClick}
url={link}
dashed={dashed}
>
{id === "settings" ? i18n.t("Common:Settings") : title}
dashed={dashed}>
{id === 'settings' ? i18n.t('Common:Settings') : title}
</NavItem>
)
)}
))}
<Box className="version-box">
<Link
as="a"
href={`https://github.com/ONLYOFFICE/AppServer/releases`}
target="_blank"
{...versionBadgeProps}
>
{t("Common:Version")} {version}
{...versionBadgeProps}>
{t('Common:Version')} {version}
</Link>
<Text as="span" {...versionBadgeProps}>
{" "}
-{" "}
{' '}
-{' '}
</Text>
<StyledLink>
<LinkWithoutRedirect
to={combineUrl(proxyURL, "/about")}
className="nav-menu-header_link"
>
{t("Common:About")}
to={combineUrl(proxyURL, '/about')}
className="nav-menu-header_link">
{t('Common:About')}
</LinkWithoutRedirect>
</StyledLink>
</Box>
@ -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));

4
web/ASC.Web.Client/src/components/NavMenu/sub-components/profile-actions.js
View File

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