From efcdd6d952ca9140c410e84755999c0d3135deb5 Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Wed, 26 Apr 2023 12:27:18 +0300 Subject: [PATCH 1/4] Web:Client:Fixed the height of the list in the invitation panel to the maximum so that the dropdown with the list of user roles opens completely. --- .../panels/InvitePanel/StyledInvitePanel.js | 4 +-- .../InvitePanel/sub-components/ItemsList.js | 26 ++++++++++++------- 2 files changed, 19 insertions(+), 11 deletions(-) diff --git a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js index 72dd4e9670..8a1f80449a 100644 --- a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js +++ b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js @@ -28,7 +28,7 @@ const fillAvailableWidth = css` const StyledInvitePanel = styled.div` .invite-panel-body { height: ${(props) => - props.hasInvitedUsers ? "calc(100% - 55px - 73px)" : "calc(100% - 55px)"}; + props.hasInvitedUsers ? "calc(100% - 55px - 70px)" : "calc(100% - 55px)"}; .scroll-body { padding-right: 0px !important; @@ -39,7 +39,7 @@ const StyledInvitePanel = styled.div` const ScrollList = styled.div` width: 100%; height: ${(props) => - props.scrollAllPanelContent + props.scrollAllPanelContent && props.isTotalListHeight ? "auto" : props.offsetTop && `calc(100% - ${props.offsetTop}px)`}; `; diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js b/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js index bf2c922b96..87905ee766 100644 --- a/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js +++ b/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js @@ -54,18 +54,25 @@ const ItemsList = ({ }) => { const [bodyHeight, setBodyHeight] = useState(0); const [offsetTop, setOffsetTop] = useState(0); + const [isTotalListHeight, setIsTotalListHeight] = useState(false); const bodyRef = useRef(); const { height } = useResizeObserver({ ref: bodyRef }); const onBodyResize = useCallback(() => { const heightList = height ? height : bodyRef.current.offsetHeight; + const totalHeightItems = inviteItems.length * USER_ITEM_HEIGHT; + const listAreaHeight = heightList; + const calculatedHeight = scrollAllPanelContent - ? inviteItems.length * USER_ITEM_HEIGHT + ? Math.max(totalHeightItems, listAreaHeight) : heightList - FOOTER_HEIGHT; setBodyHeight(calculatedHeight); setOffsetTop(bodyRef.current.offsetTop); + + if (scrollAllPanelContent && totalHeightItems && listAreaHeight) + setIsTotalListHeight(totalHeightItems >= listAreaHeight); }, [ height, bodyRef?.current?.offsetHeight, @@ -83,21 +90,22 @@ const ItemsList = ({ scrollAllPanelContent, ]); - let itemCount = inviteItems.length; - //Scroll blinking fix - if (scrollAllPanelContent) { - itemCount = - bodyHeight / inviteItems.length != USER_ITEM_HEIGHT - ? inviteItems.length - 1 - : inviteItems.length; - } + const itemCount = React.useMemo(() => { + const countInviteItems = inviteItems.length; + + return scrollAllPanelContent && + countInviteItems * USER_ITEM_HEIGHT > bodyHeight + ? countInviteItems - 1 + : countInviteItems; + }, [scrollAllPanelContent, inviteItems.length, bodyHeight]); return ( Date: Tue, 2 May 2023 17:51:36 +0300 Subject: [PATCH 2/4] Web:Fixed the appearance of two scrolls in the list of added users when resizing in the invitation panel. Fixed that the list of user roles in the list of added users on mobile in a vertical position opened not nailed to the bottom. --- .../panels/InvitePanel/StyledInvitePanel.js | 17 +++++- .../panels/InvitePanel/sub-components/Item.js | 2 + .../InvitePanel/sub-components/ItemsList.js | 53 ++++++++++++++----- packages/components/combobox/index.js | 16 +++++- 4 files changed, 72 insertions(+), 16 deletions(-) diff --git a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js index 8a1f80449a..7f49cb4ad6 100644 --- a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js +++ b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js @@ -15,7 +15,7 @@ import CrossIcon from "PUBLIC_DIR/images/cross.edit.react.svg"; import DeleteIcon from "PUBLIC_DIR/images/mobile.actions.remove.react.svg"; import commonIconsStyles from "@docspace/components/utils/common-icons-style"; - +import { size } from "@docspace/components/utils/device"; import Base from "@docspace/components/themes/base"; const fillAvailableWidth = css` @@ -42,6 +42,15 @@ const ScrollList = styled.div` props.scrollAllPanelContent && props.isTotalListHeight ? "auto" : props.offsetTop && `calc(100% - ${props.offsetTop}px)`}; + + @media (max-width: ${size.smallTablet}px) { + ${(props) => + props.isOpenItemAccess && + css` + z-index: 1; + position: fixed; + `}; + } `; const StyledBlock = styled.div` @@ -148,6 +157,12 @@ const StyledComboBox = styled(ComboBox)` .combo-button { border-radius: 3px; } + + @media (max-width: ${size.smallTablet}px) { + .dropdown-container { + z-index: 560; + } + } `; const StyledInviteInputContainer = styled.div` diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/Item.js b/packages/client/src/components/panels/InvitePanel/sub-components/Item.js index ce86d44611..ebb1d8f939 100644 --- a/packages/client/src/components/panels/InvitePanel/sub-components/Item.js +++ b/packages/client/src/components/panels/InvitePanel/sub-components/Item.js @@ -27,6 +27,7 @@ const Item = ({ setHasErrors, roomType, isOwner, + setIsOpenItemAccess, }) => { const { avatar, displayName, email, id, errors, access } = item; @@ -144,6 +145,7 @@ const Item = ({ directionY="bottom" isDefaultMode={false} fixedDirection={true} + setIsOpenItemAccess={setIsOpenItemAccess} /> )} diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js b/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js index 87905ee766..708b3390c0 100644 --- a/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js +++ b/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js @@ -7,6 +7,7 @@ import Item from "./Item"; import { StyledRow, ScrollList } from "../StyledInvitePanel"; +import { size } from "@docspace/components/utils/device"; const FOOTER_HEIGHT = 70; const USER_ITEM_HEIGHT = 48; @@ -19,6 +20,7 @@ const Row = memo(({ data, index, style }) => { setHasErrors, roomType, isOwner, + setIsOpenItemAccess, } = data; if (inviteItems === undefined) return; @@ -36,6 +38,7 @@ const Row = memo(({ data, index, style }) => { setHasErrors={setHasErrors} roomType={roomType} isOwner={isOwner} + setIsOpenItemAccess={setIsOpenItemAccess} /> ); @@ -55,31 +58,46 @@ const ItemsList = ({ const [bodyHeight, setBodyHeight] = useState(0); const [offsetTop, setOffsetTop] = useState(0); const [isTotalListHeight, setIsTotalListHeight] = useState(false); + const [isOpenItemAccess, setIsOpenItemAccess] = useState(false); + const [isMobile, setIsMobile] = useState(false); + const bodyRef = useRef(); const { height } = useResizeObserver({ ref: bodyRef }); const onBodyResize = useCallback(() => { + const scrollHeight = bodyRef?.current?.firstChild.scrollHeight; const heightList = height ? height : bodyRef.current.offsetHeight; - const totalHeightItems = inviteItems.length * USER_ITEM_HEIGHT; const listAreaHeight = heightList; const calculatedHeight = scrollAllPanelContent - ? Math.max(totalHeightItems, listAreaHeight) + ? Math.max( + totalHeightItems, + listAreaHeight, + isOpenItemAccess && !isMobile ? scrollHeight : 0 + ) : heightList - FOOTER_HEIGHT; setBodyHeight(calculatedHeight); setOffsetTop(bodyRef.current.offsetTop); if (scrollAllPanelContent && totalHeightItems && listAreaHeight) - setIsTotalListHeight(totalHeightItems >= listAreaHeight); + setIsTotalListHeight( + totalHeightItems >= listAreaHeight && totalHeightItems >= scrollHeight + ); }, [ height, bodyRef?.current?.offsetHeight, inviteItems.length, scrollAllPanelContent, + isOpenItemAccess, + isMobile, ]); + const onCheckWidth = () => { + setIsMobile(window.innerWidth < size.smallTablet); + }; + useEffect(() => { onBodyResize(); }, [ @@ -88,17 +106,23 @@ const ItemsList = ({ height, inviteItems.length, scrollAllPanelContent, + isOpenItemAccess, ]); - //Scroll blinking fix - const itemCount = React.useMemo(() => { - const countInviteItems = inviteItems.length; + useEffect(() => { + onCheckWidth(); + window.addEventListener("resize", onCheckWidth); + return () => { + window.removeEventListener("resize", onCheckWidth); + }; + }, []); - return scrollAllPanelContent && - countInviteItems * USER_ITEM_HEIGHT > bodyHeight - ? countInviteItems - 1 - : countInviteItems; - }, [scrollAllPanelContent, inviteItems.length, bodyHeight]); + const overflowStyle = + isOpenItemAccess && isMobile + ? "visible" + : scrollAllPanelContent + ? "hidden" + : "scroll"; return ( {Row} diff --git a/packages/components/combobox/index.js b/packages/components/combobox/index.js index 5de830f8bb..e2750d5eeb 100644 --- a/packages/components/combobox/index.js +++ b/packages/components/combobox/index.js @@ -28,14 +28,21 @@ class ComboBox extends React.Component { stopAction = (e) => e.preventDefault(); - setIsOpen = (isOpen) => this.setState({ isOpen: isOpen }); + setIsOpen = (isOpen) => { + this.setState({ isOpen: isOpen }); + this.props.setIsOpenItemAccess(isOpen); + }; handleClickOutside = (e) => { + const { setIsOpenItemAccess } = this.props; + if (this.ref.current.contains(e.target)) return; this.setState({ isOpen: !this.state.isOpen }, () => { this.props.toggleAction && this.props.toggleAction(e, this.state.isOpen); }); + + setIsOpenItemAccess && setIsOpenItemAccess(!this.state.isOpen); }; comboBoxClick = (e) => { @@ -45,6 +52,7 @@ class ComboBox extends React.Component { isDisabled, toggleAction, isLoading, + setIsOpenItemAccess, } = this.props; if ( @@ -59,20 +67,24 @@ class ComboBox extends React.Component { this.setState({ isOpen: !this.state.isOpen }, () => { toggleAction && toggleAction(e, this.state.isOpen); }); + setIsOpenItemAccess && setIsOpenItemAccess(!this.state.isOpen); }; optionClick = (option) => { + const { setIsOpenItemAccess } = this.props; this.setState({ isOpen: !this.state.isOpen, selectedOption: option, }); - + setIsOpenItemAccess && setIsOpenItemAccess(!this.state.isOpen); this.props.onSelect && this.props.onSelect(option); }; componentDidUpdate(prevProps) { + const { setIsOpenItemAccess } = this.props; if (this.props.opened !== prevProps.opened) { this.setIsOpen(this.props.opened); + setIsOpenItemAccess && setIsOpenItemAccess(this.props.opened); } if (this.props.selectedOption !== prevProps.selectedOption) { From 580d81d2e78d64d212c2e16de8fdb4e297e30695 Mon Sep 17 00:00:00 2001 From: gazizova-vlada Date: Wed, 3 May 2023 10:44:01 +0300 Subject: [PATCH 3/4] Web:Removed an incorrect fix for opening the list of roles for a user on the phone. --- .../panels/InvitePanel/StyledInvitePanel.js | 17 +------------ .../InvitePanel/sub-components/ItemsList.js | 24 ++----------------- 2 files changed, 3 insertions(+), 38 deletions(-) diff --git a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js index 7f49cb4ad6..8a1f80449a 100644 --- a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js +++ b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js @@ -15,7 +15,7 @@ import CrossIcon from "PUBLIC_DIR/images/cross.edit.react.svg"; import DeleteIcon from "PUBLIC_DIR/images/mobile.actions.remove.react.svg"; import commonIconsStyles from "@docspace/components/utils/common-icons-style"; -import { size } from "@docspace/components/utils/device"; + import Base from "@docspace/components/themes/base"; const fillAvailableWidth = css` @@ -42,15 +42,6 @@ const ScrollList = styled.div` props.scrollAllPanelContent && props.isTotalListHeight ? "auto" : props.offsetTop && `calc(100% - ${props.offsetTop}px)`}; - - @media (max-width: ${size.smallTablet}px) { - ${(props) => - props.isOpenItemAccess && - css` - z-index: 1; - position: fixed; - `}; - } `; const StyledBlock = styled.div` @@ -157,12 +148,6 @@ const StyledComboBox = styled(ComboBox)` .combo-button { border-radius: 3px; } - - @media (max-width: ${size.smallTablet}px) { - .dropdown-container { - z-index: 560; - } - } `; const StyledInviteInputContainer = styled.div` diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js b/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js index 708b3390c0..580dc477a7 100644 --- a/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js +++ b/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js @@ -7,7 +7,6 @@ import Item from "./Item"; import { StyledRow, ScrollList } from "../StyledInvitePanel"; -import { size } from "@docspace/components/utils/device"; const FOOTER_HEIGHT = 70; const USER_ITEM_HEIGHT = 48; @@ -59,7 +58,6 @@ const ItemsList = ({ const [offsetTop, setOffsetTop] = useState(0); const [isTotalListHeight, setIsTotalListHeight] = useState(false); const [isOpenItemAccess, setIsOpenItemAccess] = useState(false); - const [isMobile, setIsMobile] = useState(false); const bodyRef = useRef(); const { height } = useResizeObserver({ ref: bodyRef }); @@ -74,7 +72,7 @@ const ItemsList = ({ ? Math.max( totalHeightItems, listAreaHeight, - isOpenItemAccess && !isMobile ? scrollHeight : 0 + isOpenItemAccess ? scrollHeight : 0 ) : heightList - FOOTER_HEIGHT; @@ -91,13 +89,8 @@ const ItemsList = ({ inviteItems.length, scrollAllPanelContent, isOpenItemAccess, - isMobile, ]); - const onCheckWidth = () => { - setIsMobile(window.innerWidth < size.smallTablet); - }; - useEffect(() => { onBodyResize(); }, [ @@ -109,20 +102,7 @@ const ItemsList = ({ isOpenItemAccess, ]); - useEffect(() => { - onCheckWidth(); - window.addEventListener("resize", onCheckWidth); - return () => { - window.removeEventListener("resize", onCheckWidth); - }; - }, []); - - const overflowStyle = - isOpenItemAccess && isMobile - ? "visible" - : scrollAllPanelContent - ? "hidden" - : "scroll"; + const overflowStyle = scrollAllPanelContent ? "hidden" : "scroll"; return ( Date: Wed, 3 May 2023 10:58:40 +0300 Subject: [PATCH 4/4] Web:Client:Fix. --- .../components/panels/InvitePanel/sub-components/ItemsList.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js b/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js index 580dc477a7..c1912fb853 100644 --- a/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js +++ b/packages/client/src/components/panels/InvitePanel/sub-components/ItemsList.js @@ -110,7 +110,6 @@ const ItemsList = ({ ref={bodyRef} scrollAllPanelContent={scrollAllPanelContent} isTotalListHeight={isTotalListHeight} - isOpenItemAccess={isOpenItemAccess} >