Merge branch 'release/v2.0.0' of https://github.com/ONLYOFFICE/DocSpace-client into release/v2.0.0

2023-10-26 12:24:12 +03:00 · 2023-10-26 12:24:12 +03:00 · ac18e18502
commit ac18e18502
parent bea7a2657a 4bf29b197f
10 changed files with 79 additions and 20 deletions
--- a/packages/client/src/pages/Home/InfoPanel/Body/styles/common.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/styles/common.js
@ -1,7 +1,7 @@
 import styled, { css } from "styled-components";

 import { Base } from "@docspace/components/themes";
-import { mobile, tablet } from "@docspace/components/utils/device";
+import { mobile, tablet, desktop } from "@docspace/components/utils/device";

 const StyledInfoPanelBody = styled.div`
  height: auto;
@ -127,6 +127,10 @@ const StyledTitle = styled.div`
        `solid 1px ${props.theme.infoPanel.borderColor}`};
    `}

+  @media ${desktop} {
+    max-width: 360px;
+  }
+
  @media ${tablet} {
    width: 440px;
    padding: 24px 20px 24px 20px;
--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/ItemContextOptions.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/ItemContextOptions.js
@ -22,7 +22,7 @@ const ItemContextOptions = ({

  const contextMenuRef = useRef();

-  const onContextMenu = e => {
+  const onContextMenu = (e) => {
    e.button === 2;
    if (!contextMenuRef.current.menuRef.current) itemTitleRef.current.click(e);
    contextMenuRef.current.show(e);
@ -63,7 +63,8 @@ const ItemContextOptions = ({
      <ContextMenu
        ref={contextMenuRef}
        getContextModel={getData}
-        withBackdrop={false}
+        withBackdrop={true}
+        baseZIndex={310}
      />
      {options?.length > 0 && (
        <ContextMenuButton
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/User.js
@ -268,8 +268,7 @@ const User = ({
              isLoading={isLoading}
              isMobileView={isMobileOnly}
              directionY="both"
-              //Uncomment when scroll lock will work
-              // onToggle={onToggle}
+              onToggle={onToggle}
              displaySelectedOption
            />
          ) : (
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/index.js
@ -228,6 +228,7 @@ const Members = ({
          t={t}
          roomType={roomType}
          roomId={selectionParentRoom.id}
+          setIsScrollLocked={setIsScrollLocked}
        />
      )}
      <MembersList
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/LinkRow.js
@ -36,6 +36,7 @@ const LinkRow = (props) => {
    setEmbeddingPanelIsVisible,
    isArchiveFolder,
    theme,
+    setIsScrollLocked,
    ...rest
  } = props;

@ -62,6 +63,7 @@ const LinkRow = (props) => {
  const onEditLink = () => {
    setEditLinkPanelIsVisible(true);
    setLinkParams({ isEdit: true, link });
+    onCloseContextMenu();
  };

  const onDisableLink = () => {
@ -96,16 +98,27 @@ const LinkRow = (props) => {
  const onEmbeddingClick = () => {
    setLinkParams({ link, roomId });
    setEmbeddingPanelIsVisible(true);
+    onCloseContextMenu();
  };

  const onDeleteLink = () => {
    setLinkParams({ link });
    setDeleteLinkDialogVisible(true);
+    onCloseContextMenu();
  };

  const onCopyExternalLink = () => {
    copy(shareLink);
    toastr.success(t("Files:LinkSuccessfullyCopied"));
+    onCloseContextMenu();
+  };
+
+  const onOpenContextMenu = () => {
+    setIsScrollLocked(true);
+  };
+
+  const onCloseContextMenu = () => {
+    setIsScrollLocked(false);
  };

  const getData = () => {
@ -227,6 +240,8 @@ const LinkRow = (props) => {
            isDisabled={isLoading}
            title={t("Files:ShowLinkActions")}
            directionY="both"
+            onClick={onOpenContextMenu}
+            onClose={onCloseContextMenu}
          />
        )}
      </div>
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/PublicRoomBlock.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/PublicRoomBlock.js
@ -32,6 +32,7 @@ const PublicRoomBlock = (props) => {
    getPrimaryLink,
    roomId,
    setExternalLink,
+    setIsScrollLocked,
  } = props;

  const isPublicRoom = roomType === RoomsType.PublicRoom;
@ -67,7 +68,7 @@ const PublicRoomBlock = (props) => {
            </LinksBlock>
          )}
          {primaryLink ? (
-            <LinkRow link={primaryLink} />
+            <LinkRow link={primaryLink} setIsScrollLocked={setIsScrollLocked} />
          ) : (
            !isArchiveFolder && (
              <StyledLinkRow onClick={onAddNewLink}>
@ -128,7 +129,11 @@ const PublicRoomBlock = (props) => {

      {externalLinks.length
        ? externalLinks.map((link) => (
-            <LinkRow link={link} key={link?.sharedTo?.id} />
+            <LinkRow
+              link={link}
+              key={link?.sharedTo?.id}
+              setIsScrollLocked={setIsScrollLocked}
+            />
          ))
        : !isArchiveFolder &&
          primaryLink && (
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/StyledPublicRoom.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/Members/sub-components/StyledPublicRoom.js
@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
 import CrossReactSvg from "PUBLIC_DIR/images/cross.react.svg";
 import commonIconsStyles from "@docspace/components/utils/common-icons-style";
+import { tablet, desktop } from "@docspace/components/utils/device";

 const StyledPublicRoomBlock = styled.div`
  margin-bottom: -8px;
@ -12,6 +13,14 @@ const StyledPublicRoomBlock = styled.div`
  .additional-link {
    margin-bottom: 10px;
  }
+
+  @media ${desktop} {
+    max-width: 360px;
+  }
+
+  @media ${tablet} {
+    max-width: 440px;
+  }
 `;

 const StyledPublicRoomBar = styled.div`
--- a/packages/common/components/Section/sub-components/info-panel-body.js
+++ b/packages/common/components/Section/sub-components/info-panel-body.js
@ -1,5 +1,6 @@
+import { useRef } from "react";
 import Scrollbar from "@docspace/components/scrollbar";
-
+import { isMobileOnly } from "react-device-detect";
 import React from "react";
 import styled, { css } from "styled-components";

@ -7,34 +8,49 @@ const StyledScrollbar = styled(Scrollbar)`
  ${({ $isScrollLocked }) =>
    $isScrollLocked &&
    css`
-      box-sizing: border-box;
-      & .scroll-wrapper > .scroller > .scroll-body {
+      & .scroll-wrapper > .scroller {
        overflow: hidden !important;
        ${(props) =>
          props.theme.interfaceDirection === "rtl"
            ? css`
-                padding-left: 17px !important;
-                margin-left: 0 !important;
+                margin-left: -1px !important;
              `
            : css`
-                padding-right: 17px !important;
-                margin-right: 0 !important;
+                margin-right: -1px !important;
              `}
-
-        padding-bottom: 0px !important;
-        margin-bottom: 0 !important;
      }
+      ${isMobileOnly &&
+      css`
+        & .scroll-wrapper > .scroller {
+          ${(props) =>
+            props.theme.interfaceDirection === "rtl"
+              ? css`
+                  padding-left: 20px !important;
+                  margin-left: -21px !important;
+                `
+              : css`
+                  padding-right: 20px !important;
+                  margin-right: -21px !important;
+                `}
+        }
+      `}
    `}
 `;

 const SubInfoPanelBody = ({ children, isInfoPanelScrollLocked }) => {
  const content = children?.props?.children;
+  const scrollRef = useRef(null);
+  const scrollYPossible = scrollRef?.current?.scrollValues?.scrollYPossible;
+  const scrollLocked = scrollYPossible && isInfoPanelScrollLocked;

  return (
    <StyledScrollbar
-      $isScrollLocked={isInfoPanelScrollLocked}
+      ref={scrollRef}
+      $isScrollLocked={scrollLocked}
+      noScrollY={scrollLocked}
      scrollclass="section-scroll"
-      stype="mediumBlack">
+      stype="mediumBlack"
+    >
      {content}
    </StyledScrollbar>
  );
--- a/packages/components/context-menu/index.js
+++ b/packages/components/context-menu/index.js
@ -444,9 +444,10 @@ class ContextMenu extends Component {
      <>
        {this.props.withBackdrop && (
          <Backdrop
-            visible={this.state.visible}
+            visible={this.state.visible && this.state.changeView}
            withBackground={isMobile}
            withoutBlur={!isMobile}
+            zIndex={this.props.baseZIndex}
          />
        )}
        <Portal element={element} appendTo={this.props.appendTo} />
--- a/packages/components/scrollbar/index.js
+++ b/packages/components/scrollbar/index.js
@ -102,6 +102,7 @@ const Scrollbar = React.forwardRef((props, ref) => {
    hideTrackTimer,
    scrollclass,
    stype,
+    noScrollY,
    ...rest
  } = props;

@ -170,6 +171,12 @@ const Scrollbar = React.forwardRef((props, ref) => {
    return () => clearTimeout(timerId.current);
  }, []);

+  const disableScrolling = noScrollY
+    ? {
+        height: "0",
+      }
+    : {};
+
  return (
    <StyledScrollbar
      {...rest}
@ -205,6 +212,7 @@ const Scrollbar = React.forwardRef((props, ref) => {
          ...tracksAutoHideStyles,
          marginLeft: isRtl ? "1px" : "0",
          marginRight: isRtl ? "0" : "1px",
+          ...disableScrolling,
        },
        ...tracksAutoHideHandlers,
      }}