Merge pull request #222 from ONLYOFFICE/bugfix/trash-warning

bugfix/trash-warning
2024-02-02 19:25:38 +04:00 · 2024-02-02 19:25:38 +04:00 · 426eeaff26
commit 426eeaff26
parent 8c775468e0 97cdf17362
4 changed files with 60 additions and 60 deletions
--- a/packages/shared/components/navigation/Navigation.styled.ts
+++ b/packages/shared/components/navigation/Navigation.styled.ts
@ -33,8 +33,6 @@ const StyledContainer = styled.div<{
  display: grid;
  align-items: center;

-  margin-right: ${(props) => (props.isTrashFolder ? "16px" : 0)};
-
  grid-template-columns: ${({ isRootFolder, withLogo }) =>
    isRootFolder
      ? withLogo
@ -48,11 +46,11 @@ const StyledContainer = styled.div<{
    display: flex;
    height: 24px;
    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
+    props.theme.interfaceDirection === "rtl"
+      ? css`
            margin-left: 16px;
          `
-        : css`
+      : css`
            margin-right: 16px;
          `}

@ -65,12 +63,12 @@ const StyledContainer = styled.div<{
    .header_separator {
      display: ${({ isRootFolder }) => (isRootFolder ? "block" : "none")};
      ${(props) =>
-        props.theme.interfaceDirection === "rtl"
-          ? css`
+    props.theme.interfaceDirection === "rtl"
+      ? css`
              border-right: 1px solid #dfe2e3;
              margin: 0 15px 0 0;
            `
-          : css`
+      : css`
              border-left: 1px solid #dfe2e3;
              margin: 0 0 0 15px;
            `}
@ -125,7 +123,7 @@ const StyledContainer = styled.div<{

    svg {
      ${({ theme }) =>
-        theme.interfaceDirection === "rtl" && `transform: scaleX(-1);`}
+    theme.interfaceDirection === "rtl" && `transform: scaleX(-1);`}
    }
  }

@ -144,12 +142,12 @@ const StyledContainer = styled.div<{
  .navigation-header-separator {
    display: block;
    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
+    props.theme.interfaceDirection === "rtl"
+      ? css`
            padding-right: 16px;
            border-left: ${`1px solid ${props.theme.navigation.icon.stroke}`};
          `
-        : css`
+      : css`
            padding-left: 16px;
            border-right: ${`1px solid ${props.theme.navigation.icon.stroke}`};
          `}
@ -188,13 +186,13 @@ const StyledContainer = styled.div<{
  @media ${tablet} {
    width: 100%;
    grid-template-columns: ${({ isRootFolder, withLogo }) =>
-      isRootFolder
-        ? withLogo
-          ? "59px 1fr auto"
-          : "1fr auto"
-        : withLogo
-          ? "43px 49px 1fr auto"
-          : "49px 1fr auto"};
+    isRootFolder
+      ? withLogo
+        ? "59px 1fr auto"
+        : "1fr auto"
+      : withLogo
+        ? "43px 49px 1fr auto"
+        : "49px 1fr auto"};
  }

  @media ${mobile} {
@ -203,11 +201,11 @@ const StyledContainer = styled.div<{
    }

    grid-template-columns: ${(props) =>
-      props.isRootFolder ? "auto 1fr" : "29px auto 1fr"};
+    props.isRootFolder ? "auto 1fr" : "29px auto 1fr"};
  }
 `;

-const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)<{
+const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme) <{
  isInfoPanelVisible?: boolean;
  isRootFolder?: boolean;
 }>`
@ -249,11 +247,11 @@ const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)<{
  @media ${tablet} {
    display: none;
    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
+    props.theme.interfaceDirection === "rtl"
+      ? css`
            margin-right: ${props.isRootFolder ? "auto" : "0"};
          `
-        : css`
+      : css`
            margin-left: ${props.isRootFolder ? "auto" : "0"};
          `}
  }
@ -294,21 +292,21 @@ const StyledControlButtonContainer = styled.div<{ isFrame?: boolean }>`
    min-width: 17px;

    /* ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
+    props.theme.interfaceDirection === "rtl"
+      ? css`
            margin-left: 16px;
          `
-        : css`
+      : css`
            margin-right: 16px;
          `} */

    /* @media ${tablet} {
      ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
+    props.theme.interfaceDirection === "rtl"
+      ? css`
            margin-left: 9px;
          `
-        : css`
+      : css`
            margin-right: 9px;
          `}
    } */
@ -316,11 +314,11 @@ const StyledControlButtonContainer = styled.div<{ isFrame?: boolean }>`

  .trash-button {
    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
+    props.theme.interfaceDirection === "rtl"
+      ? css`
            margin-left: 16px;
          `
-        : css`
+      : css`
            margin-right: 16px;
          `}
    min-width: 15px;
@ -346,11 +344,11 @@ const StyledInfoPanelToggleWrapper = styled.div<{

  @media ${tablet} {
    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
+    props.theme.interfaceDirection === "rtl"
+      ? css`
            margin-right: ${props.isRootFolder ? "auto" : "0"};
          `
-        : css`
+      : css`
            margin-left: ${props.isRootFolder ? "auto" : "0"};
          `}
  }
@ -363,15 +361,15 @@ const StyledInfoPanelToggleWrapper = styled.div<{
    justify-content: center;
    border-radius: 50%;
    background-color: ${(props) =>
-      props.isInfoPanelVisible
-        ? props.theme.infoPanel.sectionHeaderToggleBgActive
-        : props.theme.infoPanel.sectionHeaderToggleBg};
+    props.isInfoPanelVisible
+      ? props.theme.infoPanel.sectionHeaderToggleBgActive
+      : props.theme.infoPanel.sectionHeaderToggleBg};

    path {
      fill: ${(props) =>
-        props.isInfoPanelVisible
-          ? props.theme.infoPanel.sectionHeaderToggleIconActive
-          : props.theme.infoPanel.sectionHeaderToggleIcon};
+    props.isInfoPanelVisible
+      ? props.theme.infoPanel.sectionHeaderToggleIconActive
+      : props.theme.infoPanel.sectionHeaderToggleIcon};
    }
  }
 `;
@ -432,7 +430,7 @@ const StyledTextContainer = styled.div<{
    `};
 `;

-const StyledHeading = styled(Heading)<{ isRootFolderTitle: boolean }>`
+const StyledHeading = styled(Heading) <{ isRootFolderTitle: boolean }>`
  font-weight: 700;
  font-size: ${(props) => props.theme.getCorrectFontSize("18px")};
  line-height: 24px;
@ -528,14 +526,14 @@ const StyledItem = styled.div<{ isRoot: boolean; withLogo: boolean }>`

  @media ${tablet} {
    ${({ withLogo }) =>
-      withLogo &&
-      css`
+    withLogo &&
+    css`
        ${(props) =>
-          props.theme.interfaceDirection === "rtl"
-            ? css`
+        props.theme.interfaceDirection === "rtl"
+          ? css`
                margin-right: 44px;
              `
-            : css`
+          : css`
                margin-left: 44px;
              `}
      `};
@ -543,17 +541,17 @@ const StyledItem = styled.div<{ isRoot: boolean; withLogo: boolean }>`

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

-const StyledText = styled(Text)<{ isRoot: boolean }>`
+const StyledText = styled(Text) <{ isRoot: boolean }>`
  ${(props) =>
    props.theme.interfaceDirection === "rtl"
      ? css`
@ -610,11 +608,11 @@ const StyledBox = styled.div<{
  @media ${tablet} {
    width: ${({ dropBoxWidth }) => `${dropBoxWidth}px`};
    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
+    props.theme.interfaceDirection === "rtl"
+      ? css`
            right: -16px;
          `
-        : css`
+      : css`
            left: -16px;
          `}
    padding: 0 16px;
--- a/packages/shared/components/navigation/Navigation.tsx
+++ b/packages/shared/components/navigation/Navigation.tsx
@ -10,7 +10,6 @@ import ArrowButton from "./sub-components/ArrowBtn";
 import Text from "./sub-components/Text";
 import ControlButtons from "./sub-components/ControlBtn";
 import ToggleInfoPanelButton from "./sub-components/ToggleInfoPanelBtn";
-import TrashWarning from "./sub-components/TrashWarning";
 import NavigationLogo from "./sub-components/LogoBlock";
 import DropBox from "./sub-components/DropBox";

@ -261,11 +260,9 @@ const Navigation = ({
              onNavigationButtonClick={onNavigationButtonClick}
              tariffBar={tariffBar}
              title={title}
+              isEmptyPage={isEmptyPage}
            />
          </StyledContainer>
-          {isDesktop && isTrashFolder && !isEmptyPage && (
-            <TrashWarning title={titles.trashWarning} />
-          )}
          {infoPanelIsVisible && !hideInfoPanel && (
            <ToggleInfoPanelButton
              id="info-panel-toggle--open"
--- a/packages/shared/components/navigation/Navigation.types.ts
+++ b/packages/shared/components/navigation/Navigation.types.ts
@ -64,6 +64,7 @@ export interface IControlButtonProps {
  onNavigationButtonClick?: () => void;
  tariffBar?: React.ReactNode;
  title?: string;
+  isEmptyPage?: boolean;
 }

 export interface ITextProps {
--- a/packages/shared/components/navigation/sub-components/ControlBtn.tsx
+++ b/packages/shared/components/navigation/sub-components/ControlBtn.tsx
@ -9,6 +9,7 @@ import { IControlButtonProps } from "../Navigation.types";
 import ToggleInfoPanelButton from "./ToggleInfoPanelBtn";
 import PlusButton from "./PlusBtn";
 import ContextButton from "./ContextBtn";
+import TrashWarning from "./TrashWarning";
 import { Button, ButtonSize } from "../../button";
 import { isTablet } from "../../../utils";

@ -33,6 +34,7 @@ const ControlButtons = ({
  onNavigationButtonClick,
  tariffBar,
  title,
+  isEmptyPage,
 }: IControlButtonProps) => {
  const toggleInfoPanelAction = () => {
    toggleInfoPanel?.();
@ -144,7 +146,9 @@ const ControlButtons = ({
          )}
        </>
      )}
-
+      {isDesktop && isTrashFolder && !isEmptyPage && (
+        <TrashWarning title={titles?.trashWarning} />
+      )}
      {navigationButtonLabel && !isTabletView && navigationButtonBlock}
      <StyledTariffWrapper>{children && children}</StyledTariffWrapper>
      {navigationButtonLabel && isTabletView && navigationButtonBlock}