Web: Common: Fix RTL bugs in Navigation

2023-08-11 14:50:58 +02:00 · 2023-08-11 14:50:58 +02:00 · 2e9a4004e9
commit 2e9a4004e9
parent de78803f5e
6 changed files with 70 additions and 64 deletions
--- a/packages/common/components/Navigation/sub-components/control-btn.js
+++ b/packages/common/components/Navigation/sub-components/control-btn.js
@ -12,7 +12,7 @@ import ContextButton from "./context-btn";
 import VerticalDotsReactSvgUrl from "PUBLIC_DIR/images/vertical-dots.react.svg?url";

 const StyledContainer = styled.div`
-  ${props =>
+  ${(props) =>
    props.theme.interfaceDirection === "rtl"
      ? css`
          margin-right: 20px;
@ -26,7 +26,7 @@ const StyledContainer = styled.div`
  height: 32px;

  .add-button {
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            margin-left: 16px;
@ -37,12 +37,12 @@ const StyledContainer = styled.div`
    min-width: 15px;

    @media ${tablet} {
-      display: ${props => (props.isFrame ? "flex" : "none")};
+      display: ${(props) => (props.isFrame ? "flex" : "none")};
    }

    ${isMobile &&
    css`
-      display: ${props => (props.isFrame ? "flex" : "none")};
+      display: ${(props) => (props.isFrame ? "flex" : "none")};
    `}
  }

@ -51,7 +51,7 @@ const StyledContainer = styled.div`
  }

  .option-button {
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            margin-left: 16px;
@ -62,10 +62,10 @@ const StyledContainer = styled.div`
    min-width: 15px;

    @media ${tablet} {
-      ${props =>
+      ${(props) =>
        props.theme.interfaceDirection === "rtl"
          ? css`
-              margin-right: 9px;
+              margin-left: 9px;
            `
          : css`
              margin-right: 9px;
@ -74,7 +74,7 @@ const StyledContainer = styled.div`
  }

  .trash-button {
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            margin-left: 16px;
@ -91,7 +91,7 @@ const StyledInfoPanelToggleWrapper = styled.div`
  align-items: center;
  align-self: center;
  justify-content: center;
-  ${props =>
+  ${(props) =>
    props.theme.interfaceDirection === "rtl"
      ? css`
          margin-right: auto;
@ -101,25 +101,25 @@ const StyledInfoPanelToggleWrapper = styled.div`
        `}

  @media ${tablet} {
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
-            margin-right: ${props => (props.isRootFolder ? "auto" : "0")};
+            margin-right: ${(props) => (props.isRootFolder ? "auto" : "0")};
          `
        : css`
-            margin-left: ${props => (props.isRootFolder ? "auto" : "0")};
+            margin-left: ${(props) => (props.isRootFolder ? "auto" : "0")};
          `}
  }

  ${isMobile &&
  css`
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
-            margin-right: ${props => (props.isRootFolder ? "auto" : "0")};
+            margin-right: ${(props) => (props.isRootFolder ? "auto" : "0")};
          `
        : css`
-            margin-left: ${props => (props.isRootFolder ? "auto" : "0")};
+            margin-left: ${(props) => (props.isRootFolder ? "auto" : "0")};
          `}
  `}

@ -130,13 +130,13 @@ const StyledInfoPanelToggleWrapper = styled.div`
    align-items: center;
    justify-content: center;
    border-radius: 50%;
-    background-color: ${props =>
+    background-color: ${(props) =>
      props.isInfoPanelVisible
        ? props.theme.infoPanel.sectionHeaderToggleBgActive
        : props.theme.infoPanel.sectionHeaderToggleBg};

    path {
-      fill: ${props =>
+      fill: ${(props) =>
        props.isInfoPanelVisible
          ? props.theme.infoPanel.sectionHeaderToggleIconActive
          : props.theme.infoPanel.sectionHeaderToggleIcon};
--- a/packages/common/components/Navigation/sub-components/drop-box.js
+++ b/packages/common/components/Navigation/sub-components/drop-box.js
@ -27,30 +27,22 @@ const StyledBox = styled.div`
  position: absolute;
  top: 0px;

-  ${props =>
+  ${(props) =>
    props.theme.interfaceDirection === "rtl"
      ? css`
          right: ${isMobile ? "-16px" : "-20px"};
-          ${({ withLogo }) =>
-            withLogo &&
-            css`
-              right: 207px;
-            `};
+          ${props.withLogo && `right: 207px;`};
        `
      : css`
          left: ${isMobile ? "-16px" : "-20px"};
-          ${({ withLogo }) =>
-            withLogo &&
-            css`
-              left: 207px;
-            `};
+          ${props.withLogo && `left: 207px;`};
        `}
  padding: ${isMobile ? "0 16px " : "0 20px"};
  padding-top: 18px;

  width: unset;

-  height: ${props => (props.height ? `${props.height}px` : "fit-content")};
+  height: ${(props) => (props.height ? `${props.height}px` : "fit-content")};
  max-height: calc(100vh - 48px);

  z-index: 401;
@ -58,7 +50,7 @@ const StyledBox = styled.div`
  margin: auto;
  flex-direction: column;

-  background: ${props => props.theme.navigation.background};
+  background: ${(props) => props.theme.navigation.background};

  filter: drop-shadow(0px 12px 40px rgba(4, 15, 27, 0.12));
  border-radius: 0px 0px 6px 6px;
@ -70,7 +62,7 @@ const StyledBox = styled.div`

  @media ${tablet} {
    width: ${({ dropBoxWidth }) => dropBoxWidth + "px"};
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            right: -16px;
@ -94,7 +86,7 @@ const StyledBox = styled.div`

  ${isMobileOnly &&
  css`
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            margin-right: 16px;
@ -105,7 +97,7 @@ const StyledBox = styled.div`

    padding: 0 16px !important;
    padding-top: 14px !important;
-    max-height: ${props => props.maxHeight};
+    max-height: ${(props) => props.maxHeight};
  `}
 `;

@ -159,7 +151,7 @@ const DropBox = React.forwardRef(
    const [dropBoxHeight, setDropBoxHeight] = React.useState(0);
    const countItems = navigationItems.length;

-    const getItemSize = index => {
+    const getItemSize = (index) => {
      if (index === countItems - 1) return 51;
      return isMobile || isMobileUtils() || isTabletUtils() ? 36 : 30;
    };
@ -219,13 +211,15 @@ const DropBox = React.forwardRef(
          showText={showText}
          dropBoxWidth={dropBoxWidth}
          isDesktop={isDesktop}
-          withLogo={withLogo}>
+          withLogo={withLogo}
+        >
          <StyledContainer
            canCreate={canCreate}
            isDropBoxComponent={true}
            isInfoPanelVisible={isInfoPanelVisible}
            isDesktopClient={isDesktopClient}
-            withLogo={!!withLogo && isTabletView}>
+            withLogo={!!withLogo && isTabletView}
+          >
            {withLogo && (
              <NavigationLogo
                logo={withLogo}
@ -264,7 +258,8 @@ const DropBox = React.forwardRef(
              onClickAvailable,
              { withLogo: !!withLogo },
            ]}
-            outerElementType={CustomScrollbarsVirtualList}>
+            outerElementType={CustomScrollbarsVirtualList}
+          >
            {Row}
          </VariableSizeList>
        </StyledBox>
--- a/packages/common/components/Navigation/sub-components/item.js
+++ b/packages/common/components/Navigation/sub-components/item.js
@ -25,17 +25,18 @@ const StyledItem = styled.div`
  width: auto !important;
  position: relative;
  display: grid;
-  align-items: ${props => (props.isRoot ? "baseline" : "end")};
+  align-items: ${(props) => (props.isRoot ? "baseline" : "end")};
  grid-template-columns: 17px auto;
  cursor: pointer;

-  margin-left: 0;
+  ${({ theme }) =>
+    theme.interfaceDirection === "rtl" ? `margin-right: 0;` : `margin-left: 0;`}

  @media ${tablet} {
    ${({ withLogo }) =>
      withLogo &&
      css`
-        ${props =>
+        ${(props) =>
          props.theme.interfaceDirection === "rtl"
            ? css`
                margin-right: 44px;
@ -48,7 +49,7 @@ const StyledItem = styled.div`

  ${isMobile &&
  css`
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            margin-right: 0;
@ -59,7 +60,7 @@ const StyledItem = styled.div`
  `};

  @media ${hugeMobile} {
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            margin-right: 0;
@ -71,7 +72,7 @@ const StyledItem = styled.div`
 `;

 const StyledText = styled(Text)`
-  ${props =>
+  ${(props) =>
    props.theme.interfaceDirection === "rtl"
      ? css`
          margin-right: 10px;
@ -80,7 +81,7 @@ const StyledText = styled(Text)`
          margin-left: 10px;
        `}
  position: relative;
-  bottom: ${props => (props.isRoot ? "2px" : "-1px")};
+  bottom: ${(props) => (props.isRoot ? "2px" : "-1px")};
 `;

 const Item = ({
@ -102,7 +103,8 @@ const Item = ({
      isRoot={isRoot}
      onClick={onClickAvailable}
      withLogo={withLogo}
-      {...rest}>
+      {...rest}
+    >
      <ColorTheme isRoot={isRoot} themeId={ThemeType.IconWrapper}>
        {isMobile || isTablet() || IsMobileUtils() ? (
          isRoot ? (
@ -122,7 +124,8 @@ const Item = ({
        fontWeight={isRoot ? "600" : "400"}
        fontSize={"15px"}
        truncate={true}
-        title={title}>
+        title={title}
+      >
        {title}
      </StyledText>
    </StyledItem>
--- a/packages/common/components/Navigation/sub-components/text.js
+++ b/packages/common/components/Navigation/sub-components/text.js
@ -20,11 +20,15 @@ const StyledTextContainer = styled.div`

  position: relative;

-  ${props =>
+  ${(props) =>
    !props.isRootFolder && !props.isRootFolderTitle && "cursor: pointer"};
-  ${props => props.isRootFolderTitle && "padding-right: 3px"};
+  ${(props) =>
+    props.isRootFolderTitle &&
+    (props.theme.interfaceDirection === "rtl"
+      ? "padding-left: 3px;"
+      : "padding-right: 3px;")};

-  ${props =>
+  ${(props) =>
    !props.isRootFolderTitle &&
    css`
      white-space: nowrap;
@ -40,7 +44,7 @@ const StyledHeading = styled(Heading)`

  margin: 0;

-  ${props =>
+  ${(props) =>
    props.isRootFolderTitle &&
    `color: ${props.theme.navigation.rootFolderTitleColor}`};

@ -66,7 +70,7 @@ const StyledExpanderDownIcon = styled(ExpanderDownIcon)`
  min-width: 8px !important;
  width: 8px !important;
  min-height: 18px !important;
-  ${props =>
+  ${(props) =>
    props.theme.interfaceDirection === "rtl"
      ? css`
          padding: 0 4px 0 2px;
@ -75,7 +79,7 @@ const StyledExpanderDownIcon = styled(ExpanderDownIcon)`
          padding: 0 2px 0 4px;
        `}
  path {
-    fill: ${props => props.theme.navigation.expanderColor};
+    fill: ${(props) => props.theme.navigation.expanderColor};
  }

  ${commonIconsStyles};
@ -84,7 +88,7 @@ const StyledExpanderDownIcon = styled(ExpanderDownIcon)`
 const StyledArrowIcon = styled(ArrowIcon)`
  height: 12px;
  min-width: 12px;
-  ${props =>
+  ${(props) =>
    props.theme.interfaceDirection === "rtl"
      ? css`
          padding-right: 6px;
@ -93,7 +97,7 @@ const StyledArrowIcon = styled(ArrowIcon)`
          padding-left: 6px;
        `}
  path {
-    fill: ${props => props.theme.navigation.rootFolderTitleColor};
+    fill: ${(props) => props.theme.navigation.rootFolderTitleColor};
  }
 `;

@ -103,7 +107,7 @@ const StyledExpanderDownIconRotate = styled(ExpanderDownIcon)`
  min-width: 8px !important;
  width: 8px !important;
  min-height: 18px !important;
-  ${props =>
+  ${(props) =>
    props.theme.interfaceDirection === "rtl"
      ? css`
          padding: 0 2px 0 4px;
@ -114,7 +118,7 @@ const StyledExpanderDownIconRotate = styled(ExpanderDownIcon)`
  transform: rotate(-180deg);

  path {
-    fill: ${props => props.theme.navigation.expanderColor};
+    fill: ${(props) => props.theme.navigation.expanderColor};
  }

  ${commonIconsStyles};
@ -136,12 +140,14 @@ const Text = ({
      onClick={onClick}
      isOpen={isOpen}
      isRootFolderTitle={isRootFolderTitle}
-      {...rest}>
+      {...rest}
+    >
      <StyledHeading
        type="content"
        title={title}
        truncate={true}
-        isRootFolderTitle={isRootFolderTitle}>
+        isRootFolderTitle={isRootFolderTitle}
+      >
        {title}
      </StyledHeading>

--- a/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js
+++ b/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js
@ -9,7 +9,7 @@ import { ColorTheme, ThemeType } from "@docspace/components/ColorTheme";
 const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)`
  align-self: center;

-  ${props =>
+  ${(props) =>
    props.theme.interfaceDirection === "rtl"
      ? css`
          margin-right: auto;
@ -24,13 +24,13 @@ const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)`

  @media ${tablet} {
    display: none;
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
-            margin-right: ${props => (props.isRootFolder ? "auto" : "0")};
+            margin-right: ${props.isRootFolder ? "auto" : "0"};
          `
        : css`
-            margin-left: ${props => (props.isRootFolder ? "auto" : "0")};
+            margin-left: ${props.isRootFolder ? "auto" : "0"};
          `}
  }
 `;
@ -47,7 +47,8 @@ const ToggleInfoPanelButton = ({
    <StyledInfoPanelToggleColorThemeWrapper
      isRootFolder={isRootFolder}
      themeId={ThemeType.InfoPanelToggle}
-      isInfoPanelVisible={isInfoPanelVisible}>
+      isInfoPanelVisible={isInfoPanelVisible}
+    >
      <div className="info-panel-toggle-bg">
        <IconButton
          id={id}
--- a/packages/common/components/Navigation/sub-components/trash-warning.js
+++ b/packages/common/components/Navigation/sub-components/trash-warning.js
@ -10,7 +10,8 @@ const StyledTrashWarning = styled.div`

  display: flex;
  align-items: center;
-  justify-content: left;
+  justify-content: ${({ theme }) =>
+    theme.interfaceDirection === "rtl" ? `right` : `left`};

  font-weight: 400;
  font-size: 12px;