From 13d0984abb0994900526496c4db9a3bc9d07fb6f Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Wed, 4 May 2022 17:37:54 +0300 Subject: [PATCH 01/16] Web:Common:Section: reduce blur for section info-panel --- .../components/Section/sub-components/info-panel.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/asc-web-common/components/Section/sub-components/info-panel.js b/packages/asc-web-common/components/Section/sub-components/info-panel.js index 5d403cf28f..b0630ef46d 100644 --- a/packages/asc-web-common/components/Section/sub-components/info-panel.js +++ b/packages/asc-web-common/components/Section/sub-components/info-panel.js @@ -19,7 +19,7 @@ const StyledInfoPanelWrapper = styled.div.attrs(({ id }) => ({ height: auto; width: auto; background: rgba(6, 22, 38, 0.2); - backdrop-filter: blur(18px); + backdrop-filter: blur(3px); @media ${tablet} { z-index: 309; From fd313b1f32f5289142bd6a8e0ff0ea3fe5792b19 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Wed, 4 May 2022 18:41:57 +0300 Subject: [PATCH 02/16] Web:Components:Aside: change aside width --- packages/asc-web-components/aside/styled-aside.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/asc-web-components/aside/styled-aside.js b/packages/asc-web-components/aside/styled-aside.js index f2cfc5a660..c738c2be98 100644 --- a/packages/asc-web-components/aside/styled-aside.js +++ b/packages/asc-web-components/aside/styled-aside.js @@ -23,10 +23,10 @@ const StyledAside = styled(Container)` right: ${(props) => props.theme.aside.right}; top: ${(props) => props.theme.aside.top}; transform: translateX( - ${(props) => (props.visible ? "0" : props.scale ? "100%" : "325px")} + ${(props) => (props.visible ? "0" : props.scale ? "100%" : "480px")} ); transition: ${(props) => props.theme.aside.transition}; - width: ${(props) => (props.scale ? "100%" : "325px")}; + width: ${(props) => (props.scale ? "100%" : "480px")}; z-index: ${(props) => props.zIndex}; box-sizing: border-box; From 01e28676f17eace7d7e1e1ff144139c627c94dba Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Thu, 5 May 2022 10:08:01 +0300 Subject: [PATCH 03/16] Web:Components:Aside: add close button --- packages/asc-web-components/aside/aside.js | 14 +++- .../asc-web-components/aside/styled-aside.js | 80 ++++++++++++++++++- 2 files changed, 90 insertions(+), 4 deletions(-) diff --git a/packages/asc-web-components/aside/aside.js b/packages/asc-web-components/aside/aside.js index 8ff72d7bf5..7e26d622d0 100644 --- a/packages/asc-web-components/aside/aside.js +++ b/packages/asc-web-components/aside/aside.js @@ -2,7 +2,11 @@ import React from "react"; import PropTypes from "prop-types"; import Scrollbar from "../scrollbar"; -import StyledAside from "./styled-aside"; +import { + StyledAside, + StyledControlContainer, + StyledCrossIcon, +} from "./styled-aside"; const Aside = React.memo((props) => { //console.log("Aside render"); @@ -14,6 +18,7 @@ const Aside = React.memo((props) => { className, contentPaddingBottom, withoutBodyScroll, + onClose, } = props; return ( @@ -29,6 +34,12 @@ const Aside = React.memo((props) => { ) : ( {children} )} + + {visible && ( + + + + )} ); }); @@ -46,6 +57,7 @@ Aside.propTypes = { PropTypes.node, ]), withoutBodyScroll: PropTypes.bool, + onClose: PropTypes.func, }; Aside.defaultProps = { scale: false, diff --git a/packages/asc-web-components/aside/styled-aside.js b/packages/asc-web-components/aside/styled-aside.js index c738c2be98..b71b0dc25b 100644 --- a/packages/asc-web-components/aside/styled-aside.js +++ b/packages/asc-web-components/aside/styled-aside.js @@ -2,6 +2,12 @@ import React from "react"; import styled from "styled-components"; import Base from "../themes/base"; +import CrossIcon from "@appserver/components/public/static/images/cross.react.svg"; + +import { isMobile } from "react-device-detect"; + +import { tablet } from "@appserver/components/utils/device"; + /* eslint-disable no-unused-vars */ /* eslint-disable react/prop-types */ const Container = ({ @@ -17,8 +23,7 @@ const Container = ({ const StyledAside = styled(Container)` background-color: ${(props) => props.theme.aside.backgroundColor}; height: ${(props) => props.theme.aside.height}; - overflow-x: ${(props) => props.theme.aside.overflowX}; - overflow-y: ${(props) => props.theme.aside.overflowY}; + position: fixed; right: ${(props) => props.theme.aside.right}; top: ${(props) => props.theme.aside.top}; @@ -30,6 +35,32 @@ const StyledAside = styled(Container)` z-index: ${(props) => props.zIndex}; box-sizing: border-box; + @media ${tablet} { + max-width: calc(100% - 69px); + transform: translateX( + ${(props) => + props.visible ? "0" : props.scale ? "100%" : "calc(100% - 69px)"} + ); + } + + ${isMobile && + css` + max-width: calc(100% - 69px); + transform: translateX( + ${(props) => + props.visible ? "0" : props.scale ? "100%" : "calc(100% - 69px)"} + ); + `} + + @media (max-width: 428px) { + bottom: 0; + top: unset; + height: calc(100% - 64px); + width: 100%; + max-width: 100%; + transform: translateX(${(props) => (props.visible ? "0" : "100%")}); + } + &.modal-dialog-aside { padding-bottom: ${(props) => props.contentPaddingBottom @@ -43,4 +74,47 @@ const StyledAside = styled(Container)` } `; StyledAside.defaultProps = { theme: Base }; -export default StyledAside; + +const StyledControlContainer = styled.div` + display: flex; + + width: 24px; + height: 24px; + position: absolute; + + border-radius: 100px; + cursor: pointer; + + align-items: center; + justify-content: center; + z-index: 450; + + top: 14px; + left: -34px; + + ${isMobile && + css` + top: 14px; + `} + + @media (max-width: 428px) { + top: -34px; + right: 10px; + left: unset; + } +`; + +StyledControlContainer.defaultProps = { theme: Base }; + +const StyledCrossIcon = styled(CrossIcon)` + width: 17px; + height: 17px; + z-index: 455; + path { + fill: ${(props) => props.theme.catalog.control.fill}; + } +`; + +StyledCrossIcon.defaultProps = { theme: Base }; + +export { StyledAside, StyledControlContainer, StyledCrossIcon }; From ed9cea898b118ec0aeaa625d90fb59c1595cd766 Mon Sep 17 00:00:00 2001 From: Timofey Boyko Date: Thu, 5 May 2022 10:32:58 +0300 Subject: [PATCH 04/16] Web:Files:Panels: add onClose prop for aside component of new files panel --- .../Client/src/components/panels/NewFilesPanel/index.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js b/products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js index 89dbf2b771..6358480bb4 100644 --- a/products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js +++ b/products/ASC.Files/Client/src/components/panels/NewFilesPanel/index.js @@ -168,7 +168,11 @@ class NewFilesPanel extends React.Component { zIndex={zIndex} isAside={true} /> -