From eb094069ba8e1e3bff3d380a34cf3ad2fca549aa Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Thu, 3 Mar 2022 10:04:27 +0300 Subject: [PATCH 1/7] Web:Common:Components: refactoring navigation component --- .../components/Navigation/Navigation.js | 68 ++++---- .../components/Navigation/StyledNavigation.js | 109 ++++--------- .../Navigation/sub-components/control-btn.js | 98 +++++++---- .../Navigation/sub-components/drop-box.js | 153 ++++-------------- .../Navigation/sub-components/item.js | 8 +- .../Navigation/sub-components/text.js | 13 +- 6 files changed, 165 insertions(+), 284 deletions(-) diff --git a/packages/asc-web-common/components/Navigation/Navigation.js b/packages/asc-web-common/components/Navigation/Navigation.js index 3e198aa03a..d93df7d5ff 100644 --- a/packages/asc-web-common/components/Navigation/Navigation.js +++ b/packages/asc-web-common/components/Navigation/Navigation.js @@ -34,8 +34,10 @@ const Navigation = ({ }) => { const [isOpen, setIsOpen] = React.useState(false); const [firstClick, setFirstClick] = React.useState(true); - const [changeWidth, setChangeWidth] = React.useState(false); + const [dropBoxWidth, setDropBoxWidth] = React.useState(0); + const dropBoxRef = React.useRef(null); + const containerRef = React.useRef(null); const onMissClick = (e) => { e.preventDefault; @@ -56,18 +58,12 @@ const Navigation = ({ [onClickFolder, toggleDropBox] ); - const toggleDropBox = React.useCallback(() => { + const toggleDropBox = () => { if (isRootFolder) return setIsOpen(false); + setDropBoxWidth(DomHelpers.getOuterWidth(containerRef.current)); setIsOpen((prev) => !prev); setFirstClick(true); - - setTimeout(() => { - setChangeWidth( - DomHelpers.getOuterWidth(dropBoxRef.current) + 24 === - DomHelpers.getOuterWidth(document.getElementById("section")) - ); - }, 0); - }, [isRootFolder]); + }; React.useEffect(() => { if (isOpen) { @@ -84,6 +80,7 @@ const Navigation = ({ setIsOpen((val) => !val); onBackToParentFolder && onBackToParentFolder(); }, [onBackToParentFolder]); + return ( {(context) => ( @@ -92,9 +89,8 @@ const Navigation = ({ )} -
- <> - - - - -
+ + + )} diff --git a/packages/asc-web-common/components/Navigation/StyledNavigation.js b/packages/asc-web-common/components/Navigation/StyledNavigation.js index 55c05403b6..b1f081feb4 100644 --- a/packages/asc-web-common/components/Navigation/StyledNavigation.js +++ b/packages/asc-web-common/components/Navigation/StyledNavigation.js @@ -3,88 +3,45 @@ import { isMobile, isMobileOnly } from "react-device-detect"; import { tablet, desktop, mobile } from "@appserver/components/utils/device"; const StyledContainer = styled.div` - .header-container { - margin-top: 14px; - margin-bottom: 6px; - position: relative; + padding: ${(props) => (props.isDropBox ? "14px 0 3px" : "14px 0 15px")}; - align-items: center; - max-width: ${(props) => props.width}px; + width: fit-content; - ${(props) => - props.title && - css` - display: grid; - grid-template-columns: ${(props) => - props.isRootFolder - ? "auto auto 1fr" - : props.canCreate - ? "auto auto auto auto 1fr" - : "auto auto auto 1fr"}; + display: grid; - @media ${tablet} { - margin-top: 17px; - grid-template-columns: ${(props) => - props.isRootFolder - ? "1fr auto" - : props.canCreate - ? "auto 1fr auto auto" - : "auto 1fr auto"}; - } + grid-template-columns: ${(props) => + props.isRootFolder ? "1fr auto" : "29px 1fr auto"}; - ${isMobile && - css` - margin-top: 17px; - grid-template-columns: ${(props) => - props.isRootFolder - ? "1fr auto" - : props.canCreate - ? "auto 1fr auto auto" - : "auto 1fr auto"}; - `} + align-items: center; - @media ${mobile} { - margin-top: 12px; - padding-bottom: 7px; - } - - ${isMobileOnly && - css` - margin-top: 12px; - padding-bottom: 7px; - `} - `} - - .arrow-button { - margin-right: 12px; - min-width: 17px; - - align-items: center; - } - - .add-button { - margin-right: 10px; - min-width: 17px; - - @media ${tablet} { - display: none; - } - - ${isMobile && - css` - display: none; - `} - } - - .trash-button { - min-width: 17px; - margin-left: 6px; - } - - .option-button { - min-width: 17px; - } + .arrow-button { + width: 17px; + min-width: 17px; } + + @media ${tablet} { + width: 100%; + padding: ${(props) => (props.isDropBox ? "16px 0 5px" : "16px 0 17px")}; + } + + ${isMobile && + css` + width: 100% !important; + padding: ${(props) => + props.isDropBox ? "16px 0 5px" : "16px 0 17px"} !important; + `} + + @media ${mobile} { + width: 100%; + padding: ${(props) => (props.isDropBox ? "12px 0 5px" : "12px 0 13px")}; + } + + ${isMobileOnly && + css` + width: 100% !important; + padding: ${(props) => + props.isDropBox ? "12px 0 5px" : "12px 0 13px"} !important; + `} `; export default StyledContainer; diff --git a/packages/asc-web-common/components/Navigation/sub-components/control-btn.js b/packages/asc-web-common/components/Navigation/sub-components/control-btn.js index 16ff471b92..a3754c94bc 100644 --- a/packages/asc-web-common/components/Navigation/sub-components/control-btn.js +++ b/packages/asc-web-common/components/Navigation/sub-components/control-btn.js @@ -3,12 +3,36 @@ import styled from "styled-components"; import PropTypes from "prop-types"; import ContextMenuButton from "@appserver/components/context-menu-button"; import IconButton from "@appserver/components/icon-button"; +import { isMobile } from "react-device-detect"; +import { tablet } from "@appserver/components/utils/device"; const StyledContainer = styled.div` margin-left: 20px; - padding-right: 6px; display: flex; align-items: center; + + .add-button { + margin-right: 12px; + min-width: 17px; + + @media ${tablet} { + display: none; + } + + ${isMobile && + css` + display: none; + `} + } + + .option-button { + margin-right: 8px; + min-width: 17px; + } + + .trash-button { + min-width: 17px; + } `; const ControlButtons = ({ @@ -21,49 +45,53 @@ const ControlButtons = ({ isEmptyFilesList, clearTrash, }) => { - return !isRootFolder && canCreate ? ( + return ( - - {!personal && ( + {!isRootFolder && canCreate ? ( + <> + + {!personal && ( + + )} + + ) : canCreate ? ( + ) : isRecycleBinFolder && !isEmptyFilesList ? ( + + ) : ( + <> )} - ) : canCreate ? ( - - ) : isRecycleBinFolder && !isEmptyFilesList ? ( - - ) : ( - <> ); }; diff --git a/packages/asc-web-common/components/Navigation/sub-components/drop-box.js b/packages/asc-web-common/components/Navigation/sub-components/drop-box.js index a4148f5db0..8913c71fa7 100644 --- a/packages/asc-web-common/components/Navigation/sub-components/drop-box.js +++ b/packages/asc-web-common/components/Navigation/sub-components/drop-box.js @@ -9,14 +9,16 @@ import ArrowButton from "./arrow-btn"; import Text from "./text"; import ControlButtons from "./control-btn"; import Item from "./item"; +import StyledContainer from "../StyledNavigation"; import { isMobile, isMobileOnly } from "react-device-detect"; import { tablet, mobile, - isMobile as IsMobileUtils, + isMobile as isMobileUtils, isTablet as isTabletUtils, } from "@appserver/components/utils/device"; + import { Base } from "@appserver/components/themes"; const StyledBox = styled.div` @@ -24,13 +26,13 @@ const StyledBox = styled.div` top: 0px; left: ${isMobile ? "-16px" : "-20px"}; + padding: ${isMobile ? "0 16px" : "0 20px"}; + + width: ${(props) => props.dropBoxWidth}px; + height: ${(props) => (props.height ? `${props.height}px` : "fit-content")}; - ${(props) => - props.changeWidth && - !isMobile && - css` - width: ${(props) => `calc(${props.width}px + 24px)`}; - `} + max-height: calc(100vh - 48px); + z-index: 399; display: flex; flex-direction: column; @@ -41,118 +43,13 @@ const StyledBox = styled.div` border-radius: 0px 0px 6px 6px; @media ${tablet} { - top: 0px; left: -16px; - width: ${(props) => - props.showText ? css`calc(100vw - 240px)` : css`calc(100vw - 52px)`}; - max-width: 100vw !important; + padding: 0 16px; } - - @media ${mobile} { - width: 100vw !important; - max-width: 100vw !important; - } - - ${isMobile && - css` - top: 0px; - left: -16px; - width: ${(props) => - props.showText ? css`calc(100vw - 240px)` : css`calc(100vw - 52px)`}; - max-width: 100vw !important; - `} - - ${isMobileOnly && - css` - width: 100vw !important; - max-width: 100vw !important; - `} `; StyledBox.defaultProps = { theme: Base }; -const StyledContainer = styled.div` - margin-top: 14px; - margin-bottom: 6px; - - position: relative; - top: 0px; - - align-items: center; - - min-width: 100px; - max-width: calc(100vw - 32px); - - padding: ${isMobile ? "0px 16px" : "0px 20px"}; - - display: grid; - grid-template-columns: ${(props) => - props.canCreate ? "auto auto auto auto 1fr" : "auto auto auto 1fr"}; - - @media ${tablet} { - padding: 0 16px; - margin-top: 17px; - grid-template-columns: ${(props) => - props.canCreate ? "auto 1fr auto auto" : "auto 1fr auto"}; - } - - ${ - isMobile && - css` - margin-top: 17px; - grid-template-columns: ${(props) => - props.canCreate ? "auto 1fr auto auto" : "auto 1fr auto"}; - ` - } - - @media ${mobile} { - padding: 0 16px; - margin-top: 12px; - // padding-bottom: 7px; - } - - ${ - isMobileOnly && - css` - margin-top: 12px; - padding-bottom: 7px; - ` - } - - .arrow-button { - margin-right: 12px; - min-width: 17px; - - align-items: center; - } - - .add-button { - margin-right: 10px; - min-width: 17px; - - @media ${tablet} { - display: none; - } - - ${ - isMobile && - css` - display: none; - ` - } - } - - .trash-button { - min-width: 17px; - margin-left: 6px; - } - - .option-button { - min-width: 17px; - } - } -`; - const Row = React.memo(({ data, index, style }) => { const isRoot = index === data[0].length - 1; return ( @@ -170,10 +67,9 @@ const Row = React.memo(({ data, index, style }) => { const DropBox = React.forwardRef( ( { - width, - height, + sectionHeight, showText, - changeWidth, + dropBoxWidth, isRootFolder, onBackToParentFolder, title, @@ -192,7 +88,7 @@ const DropBox = React.forwardRef( const getItemSize = (index) => { if (index === countItems - 1) return 51; - return isMobile || IsMobileUtils() || isTabletUtils() ? 36 : 30; + return isMobile || isMobileUtils() || isTabletUtils() ? 36 : 30; }; React.useEffect(() => { @@ -202,22 +98,31 @@ const DropBox = React.forwardRef( const currentHeight = itemsHeight.reduce((a, b) => a + b); + let navHeight = 41; + + if (isMobile || isTabletUtils()) { + navHeight = 49; + } + + if (isMobileOnly || isMobileUtils()) { + navHeight = 45; + } + setDropBoxHeight( - currentHeight > window.innerHeight - 99 - ? window.innerHeight - 99 + currentHeight + navHeight > sectionHeight + ? sectionHeight - navHeight : currentHeight ); - }); + }, [sectionHeight]); return ( - + (props.isRoot ? "baseline" : "end")}; grid-template-columns: 17px auto; cursor: pointer; - padding: ${isMobile ? "0px 16px" : "0px 24px"}; - - @media ${tablet} { - padding: 0px 16px; - max-width: 100vw !important; - } `; const StyledIconWrapper = styled.div` - width: 19px; + width: 17px; display: flex; align-items: ${(props) => (props.isRoot ? "center" : "flex-end")}; justify-content: center; diff --git a/packages/asc-web-common/components/Navigation/sub-components/text.js b/packages/asc-web-common/components/Navigation/sub-components/text.js index 8a51d31cc2..c354a64baa 100644 --- a/packages/asc-web-common/components/Navigation/sub-components/text.js +++ b/packages/asc-web-common/components/Navigation/sub-components/text.js @@ -13,16 +13,20 @@ import { Base } from "@appserver/components/themes"; const StyledTextContainer = styled.div` width: fit-content; + position: relative; display: grid; - grid-template-columns: auto 14px; + + grid-template-columns: ${(props) => + props.isRootFolder ? "auto" : "auto 12px"}; align-items: center; + ${(props) => !props.isRootFolder && "cursor: pointer"}; `; const StyledHeadline = styled(Headline)` - width: 100%; + width: calc(100% + 1px); font-weight: 700; font-size: ${isMobile ? "21px !important" : "18px"}; line-height: ${isMobile ? "28px !important" : "24px"}; @@ -36,8 +40,7 @@ const StyledExpanderDownIcon = styled(ExpanderDownIcon)` min-width: 8px !important; width: 8px !important; min-height: 18px !important; - padding-left: 6px; - + padding: 0 2px 0 4px; path { fill: ${(props) => props.theme.navigation.expanderColor}; } @@ -51,7 +54,7 @@ const StyledExpanderDownIconRotate = styled(ExpanderDownIcon)` min-width: 8px !important; width: 8px !important; min-height: 18px !important; - padding-right: 6px; + padding: 0 4px 0 1px; transform: rotate(-180deg); path { From d1f3260d88eb12bd9f1ee5a97ad6f2ad516c6e81 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Thu, 3 Mar 2022 10:04:54 +0300 Subject: [PATCH 2/7] Web:Common:Components: fix padding and margin for section and section header --- .../sub-components/section-header.js | 63 ++++++++----------- .../PageLayout/sub-components/section.js | 2 +- 2 files changed, 28 insertions(+), 37 deletions(-) diff --git a/packages/asc-web-common/components/PageLayout/sub-components/section-header.js b/packages/asc-web-common/components/PageLayout/sub-components/section-header.js index 82d5ad4123..48eb6e54d4 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/section-header.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/section-header.js @@ -4,52 +4,43 @@ import equal from "fast-deep-equal/react"; import classnames from "classnames"; import PropTypes from "prop-types"; import { LayoutContextConsumer } from "studio/Layout/context"; -import { isMobile } from "react-device-detect"; -import { tablet, desktop } from "@appserver/components/utils/device"; +import { isMobile, isMobileOnly } from "react-device-detect"; +import { tablet, desktop, mobile } from "@appserver/components/utils/device"; import NoUserSelect from "@appserver/components/utils/commonStyles"; import Base from "@appserver/components/themes/base"; const StyledSectionHeader = styled.div` position: relative; - height: 42px; - margin-right: 24px; + height: 53px; + margin-right: 20px; + ${NoUserSelect} - ${isMobile && - css` - height: 20px; - width: ${(props) => !props.isLoaded && "100%"}; - - margin-top: 62px; - @media ${tablet} { - margin-top: 48px; - } - `} - - @media ${desktop} { - ${(props) => - (props.viewAs === "table" || props.viewAs === "tile") && - "margin-left: -4px"}; - } - - @media ${tablet} { - ${(props) => - props.viewAs !== "tablet" && - css` - height: 49px; - - .arrow-button { - svg { - width: 14px; - } - margin-right: 10px; - } - `} - } @media ${tablet} { + height: 61px; margin-right: 16px; } + ${isMobile && + css` + height: 61px !important; + margin-top: 48px !important; + margin-right: 0px !important; + `} + + @media ${mobile} { + height: 53px; + margin-top: 48px; + margin-right: 0px; + } + + ${isMobileOnly && + css` + height: 53px !important; + margin-top: 48px !important; + margin-right: 0px !important; + `} + ${isMobile && css` .section-header, @@ -99,7 +90,7 @@ class SectionHeader extends React.Component { } render() { - console.log("PageLayout SectionHeader render"); + // console.log("PageLayout SectionHeader render"); // eslint-disable-next-line react/prop-types const { isArticlePinned, isHeaderVisible, viewAs, ...rest } = this.props; 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 20a7c5ac02..b852c7ee28 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/section.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/section.js @@ -22,7 +22,7 @@ const tabletProps = css` `; const StyledSection = styled.section` - padding: 0 0 0 24px; + padding: 0 0 0 20px; flex-grow: 1; display: flex; flex-direction: column; From ac17eca7a12008a51a37d8def53e40ba36e92a5d Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Thu, 3 Mar 2022 10:05:25 +0300 Subject: [PATCH 3/7] Web:Files:Pages: fix styles for section header --- .../src/pages/Home/Section/Header/index.js | 139 +----------------- 1 file changed, 2 insertions(+), 137 deletions(-) diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js index ab7b76fa61..250b633906 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js @@ -26,7 +26,7 @@ const StyledContainer = styled.div` width: calc(100% + 44px); ` : css` - margin: 0px -24px; + margin: 0px -20px; width: calc(100% + 48px); `} @@ -36,142 +36,6 @@ const StyledContainer = styled.div` } } `; -// .header-container { -// position: relative; -// ${(props) => -// props.title && -// css` -// display: grid; -// grid-template-columns: ${(props) => -// props.isRootFolder -// ? "auto auto 1fr" -// : props.canCreate -// ? "auto auto auto auto 1fr" -// : "auto auto auto 1fr"}; - -// @media ${tablet} { -// grid-template-columns: ${(props) => -// props.isRootFolder -// ? "1fr auto" -// : props.canCreate -// ? "auto 1fr auto auto" -// : "auto 1fr auto"}; -// ${(props) => !props.isLoading && "top: 7px;"} -// } -// `} -// align-items: center; -// max-width: calc(100vw - 32px); - -// @media ${tablet} { -// .headline-header { -// margin-left: -1px; -// } -// } -// .arrow-button { -// margin-right: 15px; -// min-width: 17px; - -// @media ${tablet} { -// padding: 8px 0 8px 8px; -// margin-left: -8px; -// margin-right: 16px; -// } -// } - -// .add-button { -// margin-bottom: -1px; -// margin-left: 16px; - -// @media ${tablet} { -// margin-left: auto; - -// & > div:first-child { -// padding: 8px 8px 8px 8px; -// margin-right: -8px; -// } -// } -// } - -// .option-button { -// margin-bottom: -1px; - -// @media (min-width: 1024px) { -// margin-left: 8px; -// } - -// @media ${tablet} { -// & > div:first-child { -// padding: 8px 8px 8px 8px; -// margin-right: -8px; -// } -// } -// } - -// .trash-button { -// margin-bottom: -1px; - -// @media (min-width: 1024px) { -// margin-left: 8px; -// } - -// @media ${tablet} { -// & > div:first-child { -// margin-right: -8px; -// } -// } -// } -// } - -// .group-button-menu-container { -// margin: 0 -16px; -// -webkit-tap-highlight-color: rgba(0, 0, 0, 0); - -// ${isMobile && -// css` -// position: sticky; -// `} - -// ${(props) => -// !props.isTabletView -// ? props.width && -// isMobile && -// css` -// width: ${props.width + 40 + "px"}; -// ` -// : props.width && -// isMobile && -// css` -// width: ${props.width + 32 + "px"}; -// `} - -// @media ${tablet} { -// padding-bottom: 0; -// ${!isMobile && -// css` -// height: 56px; -// `} -// & > div:first-child { -// ${(props) => -// !isMobile && -// props.width && -// css` -// width: ${props.width + 16 + "px"}; -// `} - -// position: absolute; -// ${(props) => -// !props.isDesktop && -// css` -// top: 48px; -// `} -// z-index: 180; -// } -// } - -// @media ${desktop} { -// margin: 0 -24px; -// } -// } class SectionHeaderContent extends React.Component { constructor(props) { @@ -472,6 +336,7 @@ class SectionHeaderContent extends React.Component { ) : ( Date: Thu, 3 Mar 2022 10:06:47 +0300 Subject: [PATCH 4/7] Web:Common:Components: add import 'css' --- .../components/Navigation/sub-components/control-btn.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/asc-web-common/components/Navigation/sub-components/control-btn.js b/packages/asc-web-common/components/Navigation/sub-components/control-btn.js index a3754c94bc..d51079f060 100644 --- a/packages/asc-web-common/components/Navigation/sub-components/control-btn.js +++ b/packages/asc-web-common/components/Navigation/sub-components/control-btn.js @@ -1,5 +1,5 @@ import React from "react"; -import styled from "styled-components"; +import styled, { css } from "styled-components"; import PropTypes from "prop-types"; import ContextMenuButton from "@appserver/components/context-menu-button"; import IconButton from "@appserver/components/icon-button"; From fe3bcca4a1f3e353320a48d0e705b2c2201e2aef Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Thu, 3 Mar 2022 12:36:18 +0300 Subject: [PATCH 5/7] Web:Common:Components: fix margins into section --- .../components/PageLayout/index.js | 4 ++-- .../PageLayout/sub-components/section-body.js | 22 +++++++++++++------ .../sub-components/section-filter.js | 16 +++----------- .../sub-components/section-header.js | 4 +++- .../PageLayout/sub-components/section.js | 2 +- 5 files changed, 24 insertions(+), 24 deletions(-) diff --git a/packages/asc-web-common/components/PageLayout/index.js b/packages/asc-web-common/components/PageLayout/index.js index 7caebd597a..0966aee900 100644 --- a/packages/asc-web-common/components/PageLayout/index.js +++ b/packages/asc-web-common/components/PageLayout/index.js @@ -44,13 +44,12 @@ const StyledMainBar = styled.div` ${!isMobile ? css` - padding-right: 24px; + padding-right: 20px; @media ${tablet} { padding-right: 16px; } ` : css` - margin-top: 10px; padding-right: 0px; @media ${desktop} { @@ -454,6 +453,7 @@ class PageLayout extends React.Component { unpinArticle={this.unpinArticle} pinned={isArticlePinned} visible={isArticleVisible} + viewAs={viewAs} > {isSectionHeaderAvailable && ( props.withScroll && ` - margin-left: -24px; + margin-left: -20px; + + @media ${tablet}{ + margin-left: -24px; + } `} .additional-scroll-height { @@ -101,7 +105,11 @@ const StyledDropZoneBody = styled(DragAndDrop)` ${(props) => props.withScroll && ` - margin-left: -24px; + margin-left: -20px; + + @media ${tablet}{ + margin-left: -24px; + } `} `; diff --git a/packages/asc-web-common/components/PageLayout/sub-components/section-filter.js b/packages/asc-web-common/components/PageLayout/sub-components/section-filter.js index 2f42aa1ee6..770e941ba2 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/section-filter.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/section-filter.js @@ -1,24 +1,14 @@ import React from "react"; import styled, { css } from "styled-components"; import equal from "fast-deep-equal/react"; +import { isMobile } from "react-device-detect"; import { tablet, desktop } from "@appserver/components/utils/device"; const StyledSectionFilter = styled.div` - margin: 11px 24px 0 0; - - @media ${desktop} { - ${(props) => - (props.viewAs === "table" || props.viewAs === "tile") && - css` - margin-left: -4px; - /* margin-right: 20px; */ - margin-right: 22px; - margin-bottom: ${props.viewAs === "tile" ? "-2px" : "0px"}; - `}; - } + margin-right: ${isMobile ? "16px" : "20px"}; @media ${tablet} { - margin-left: -4px; + margin-right: 16px; } `; diff --git a/packages/asc-web-common/components/PageLayout/sub-components/section-header.js b/packages/asc-web-common/components/PageLayout/sub-components/section-header.js index 48eb6e54d4..5772a11281 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/section-header.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/section-header.js @@ -29,13 +29,15 @@ const StyledSectionHeader = styled.div` `} @media ${mobile} { + max-width: calc(100vw - 32px); height: 53px; - margin-top: 48px; + margin-top: 0px; margin-right: 0px; } ${isMobileOnly && css` + max-width: calc(100vw - 32px); height: 53px !important; margin-top: 48px !important; margin-right: 0px !important; 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 b852c7ee28..06f78faeed 100644 --- a/packages/asc-web-common/components/PageLayout/sub-components/section.js +++ b/packages/asc-web-common/components/PageLayout/sub-components/section.js @@ -17,7 +17,7 @@ const tabletProps = css` .section-body_filter { display: block; - margin: 0 0 25px; + margin: ${(props) => (props.viewAs === "tile" ? "0 0 18px" : "0 0 30px")}; } `; From c83c09c1f1398a710572fdc50b00960f3a7eb702 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Thu, 3 Mar 2022 12:36:47 +0300 Subject: [PATCH 6/7] Web:Files:Pages: fix double header when table group is active --- .../components/Navigation/StyledNavigation.js | 10 ++++---- .../src/pages/Home/Section/Header/index.js | 24 +++++++++++++++++-- 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/packages/asc-web-common/components/Navigation/StyledNavigation.js b/packages/asc-web-common/components/Navigation/StyledNavigation.js index b1f081feb4..b427e29879 100644 --- a/packages/asc-web-common/components/Navigation/StyledNavigation.js +++ b/packages/asc-web-common/components/Navigation/StyledNavigation.js @@ -3,7 +3,7 @@ import { isMobile, isMobileOnly } from "react-device-detect"; import { tablet, desktop, mobile } from "@appserver/components/utils/device"; const StyledContainer = styled.div` - padding: ${(props) => (props.isDropBox ? "14px 0 3px" : "14px 0 15px")}; + padding: ${(props) => (props.isDropBox ? "14px 0 3px" : "14px 0 0px")}; width: fit-content; @@ -21,26 +21,26 @@ const StyledContainer = styled.div` @media ${tablet} { width: 100%; - padding: ${(props) => (props.isDropBox ? "16px 0 5px" : "16px 0 17px")}; + padding: ${(props) => (props.isDropBox ? "16px 0 5px" : "16px 0 0px")}; } ${isMobile && css` width: 100% !important; padding: ${(props) => - props.isDropBox ? "16px 0 5px" : "16px 0 17px"} !important; + props.isDropBox ? "16px 0 5px" : " 16px 0 0px"} !important; `} @media ${mobile} { width: 100%; - padding: ${(props) => (props.isDropBox ? "12px 0 5px" : "12px 0 13px")}; + padding: ${(props) => (props.isDropBox ? "12px 0 5px" : "12px 0 0")}; } ${isMobileOnly && css` width: 100% !important; padding: ${(props) => - props.isDropBox ? "12px 0 5px" : "12px 0 13px"} !important; + props.isDropBox ? "12px 0 5px" : "12px 0 0"} !important; `} `; diff --git a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js index 250b633906..a8cac51cf7 100644 --- a/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js +++ b/products/ASC.Files/Client/src/pages/Home/Section/Header/index.js @@ -7,17 +7,37 @@ import Loaders from "@appserver/common/components/Loaders"; import Headline from "@appserver/common/components/Headline"; import { FilterType, FileAction } from "@appserver/common/constants"; import { withTranslation } from "react-i18next"; -import { isMobile } from "react-device-detect"; +import { isMobile, isMobileOnly } from "react-device-detect"; import ContextMenuButton from "@appserver/components/context-menu-button"; import DropDownItem from "@appserver/components/drop-down-item"; import IconButton from "@appserver/components/icon-button"; -import { tablet, desktop } from "@appserver/components/utils/device"; +import { tablet, desktop, mobile } from "@appserver/components/utils/device"; import { Consumer } from "@appserver/components/utils/context"; import { inject, observer } from "mobx-react"; import TableGroupMenu from "@appserver/components/table-container/TableGroupMenu"; import Navigation from "@appserver/common/components/Navigation"; const StyledContainer = styled.div` + padding: 0 0 15px; + + @media ${tablet} { + padding: 0 0 17px; + } + + ${isMobile && + css` + padding: 0 0 17px; + `} + + @media ${mobile} { + padding: 0 0 13px; + } + + ${isMobileOnly && + css` + padding: 0 0 13px; + `} + .table-container_group-menu { ${(props) => props.viewAs === "table" From 5bc09fb59e135f3969bd627784b2282e57d230dc Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Thu, 3 Mar 2022 12:37:36 +0300 Subject: [PATCH 7/7] Web:Common:Components: fix sort menu for mobile devices --- packages/asc-web-common/components/NewFilterInput/index.js | 2 +- .../components/NewFilterInput/sub-components/SortButton.js | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/asc-web-common/components/NewFilterInput/index.js b/packages/asc-web-common/components/NewFilterInput/index.js index 24feebbb35..677a2e5cc8 100644 --- a/packages/asc-web-common/components/NewFilterInput/index.js +++ b/packages/asc-web-common/components/NewFilterInput/index.js @@ -84,7 +84,7 @@ const FilterInput = ({ /> ) : ( <> - {(isMobile || isTabletUtils()) && ( + {(isMobile || isTabletUtils() || isMobileUtils()) && ( { + console.log("1"); setIsOpen((val) => !val); }, []); @@ -278,6 +279,7 @@ const SortButton = ({ options={[]} selectedOption={{}} directionX={"right"} + directionY={"top"} scaled={true} size={"content"} advancedOptions={getAdvancedOptions()}