Merge pull request #62 from ONLYOFFICE/bugfix/file-badges

Bugfix/file badges
2023-11-04 01:44:58 +04:00 · 2023-11-04 01:44:58 +04:00 · cf96a0beb1
commit cf96a0beb1
parent 4dc7a8fef7 4bb43fcb95
16 changed files with 127 additions and 70 deletions
--- a/packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockMessage.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/views/History/HistoryBlockMessage.js
@ -16,7 +16,7 @@ const HistoryBlockMessage = ({
 }) => {
  const message = getBlockMessageTranslation(
    t,
-    action.Action,
+    action.hasOwnProperty("Action") ? action.Action : action.Actions,
    action.Item,
    action.Item === FeedItemTypes.File || action.Item === FeedItemTypes.Folder
      ? !!groupedActions.length
--- a/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableContainer.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableContainer.js
@ -43,11 +43,11 @@ const contextCss = css`
    props.theme.interfaceDirection === "rtl"
      ? css`
          margin-left: -20px;
-          padding-left: 18px;
+          padding-left: 20px;
        `
      : css`
          margin-right: -20px;
-          padding-right: 18px;
+          padding-right: 20px;
        `}

  ${marginCss}
--- a/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js
+++ b/packages/client/src/pages/Home/Section/AccountsBody/TableView/TableRow.js
@ -23,15 +23,15 @@ const StyledPeopleRow = styled(TableRow)`
  :hover {
    .table-container_cell {
      cursor: pointer;
-      background: ${props =>
+      background: ${(props) =>
        `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
-      border-top: ${props =>
+      border-top: ${(props) =>
        `1px solid ${props.theme.filesSection.tableView.row.borderColor}`};
      margin-top: -1px;
    }

    .table-container_user-name-cell {
-      ${props =>
+      ${(props) =>
        props.theme.interfaceDirection === "rtl"
          ? css`
              margin-right: -24px;
@ -43,15 +43,15 @@ const StyledPeopleRow = styled(TableRow)`
            `}
    }
    .table-container_row-context-menu-wrapper {
-      ${props =>
+      ${(props) =>
        props.theme.interfaceDirection === "rtl"
          ? css`
              margin-left: -20px;
-              padding-left: 18px;
+              padding-left: 20px;
            `
          : css`
              margin-right: -20px;
-              padding-right: 18px;
+              padding-right: 20px;
            `}
    }
  }
@ -60,13 +60,13 @@ const StyledPeopleRow = styled(TableRow)`
    height: 48px;
    max-height: 48px;

-    background: ${props =>
+    background: ${(props) =>
      (props.checked || props.isActive) &&
      `${props.theme.filesSection.tableView.row.backgroundActive} !important`};
  }

  .table-container_row-checkbox-wrapper {
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            padding-left: 0px;
@ -77,7 +77,7 @@ const StyledPeopleRow = styled(TableRow)`
    min-width: 48px;

    .table-container_row-checkbox {
-      ${props =>
+      ${(props) =>
        props.theme.interfaceDirection === "rtl"
          ? css`
              margin-right: -4px;
@ -91,7 +91,7 @@ const StyledPeopleRow = styled(TableRow)`
  }

  .link-with-dropdown-group {
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            margin-left: 12px;
@ -102,7 +102,7 @@ const StyledPeopleRow = styled(TableRow)`
  }

  .table-cell_username {
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            margin-left: 12px;
@ -113,7 +113,9 @@ const StyledPeopleRow = styled(TableRow)`
  }

  .table-container_row-context-menu-wrapper {
-    ${props =>
+    justify-content: flex-end;
+
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            padding-left: 0px;
@ -125,7 +127,7 @@ const StyledPeopleRow = styled(TableRow)`

  .table-cell_type,
  .table-cell_room {
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            margin-right: -8px;
@ -136,8 +138,8 @@ const StyledPeopleRow = styled(TableRow)`
  }

  .type-combobox {
-    visibility: ${props => (props.hideColumns ? "hidden" : "visible")};
-    opacity: ${props => (props.hideColumns ? 0 : 1)};
+    visibility: ${(props) => (props.hideColumns ? "hidden" : "visible")};
+    opacity: ${(props) => (props.hideColumns ? 0 : 1)};

    & > div {
      max-width: fit-content;
@ -146,7 +148,7 @@ const StyledPeopleRow = styled(TableRow)`

  .type-combobox,
  .room-combobox {
-    ${props =>
+    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
            padding-right: 8px;
@ -156,7 +158,7 @@ const StyledPeopleRow = styled(TableRow)`
          `}
    overflow: hidden;
    .combo-button {
-      ${props =>
+      ${(props) =>
        props.theme.interfaceDirection === "rtl"
          ? css`
              padding-right: 8px;
@ -194,7 +196,7 @@ const fakeRooms = [
  },
 ];

-const PeopleTableRow = props => {
+const PeopleTableRow = (props) => {
  const {
    t,
    item,
@ -315,7 +317,7 @@ const PeopleTableRow = props => {
  //   return <>{options.map((option) => option)}</>;
  // }, []);

-  const getUserTypeLabel = React.useCallback(role => {
+  const getUserTypeLabel = React.useCallback((role) => {
    switch (role) {
      case "owner":
        return t("Common:Owner");
@ -340,7 +342,9 @@ const PeopleTableRow = props => {
    const combobox = (
      <ComboBox
        className="type-combobox"
-        selectedOption={typesOptions.find(option => option.key === role) || {}}
+        selectedOption={
+          typesOptions.find((option) => option.key === role) || {}
+        }
        options={typesOptions}
        onSelect={onTypeChange}
        scaled
@ -361,7 +365,8 @@ const PeopleTableRow = props => {
        color={sideInfoColor}
        truncate
        noSelect
-        style={{ paddingLeft: "8px" }}>
+        style={{ paddingLeft: "8px" }}
+      >
        {typeLabel}
      </Text>
    );
@ -373,7 +378,7 @@ const PeopleTableRow = props => {

  const typeCell = renderTypeCell();

-  const onChange = e => {
+  const onChange = (e) => {
    //console.log("onChange");
    onContentRowSelect && onContentRowSelect(e.target.checked, item);
  };
@ -383,7 +388,7 @@ const PeopleTableRow = props => {
    onContentRowClick && onContentRowClick(!isChecked, item, false);
  }, [isChecked, item, onContentRowClick]);

-  const onRowClick = e => {
+  const onRowClick = (e) => {
    if (
      e.target.closest(".checkbox") ||
      e.target.closest(".table-container_row-checkbox") ||
@ -406,7 +411,8 @@ const PeopleTableRow = props => {
      className={`user-item ${
        isChecked || isActive ? "table-row-selected" : ""
      }`}
-      value={value}>
+      value={value}
+    >
      <StyledPeopleRow
        key={item.id}
        className="table-row"
@ -416,12 +422,14 @@ const PeopleTableRow = props => {
        onClick={onRowClick}
        fileContextClick={onRowContextClick}
        hideColumns={hideColumns}
-        {...contextOptionsProps}>
+        {...contextOptionsProps}
+      >
        <TableCell className={"table-container_user-name-cell"}>
          <TableCell
            hasAccess={true}
            className="table-container_row-checkbox-wrapper"
-            checked={isChecked}>
+            checked={isChecked}
+          >
            <div className="table-container_element">{element}</div>
            <Checkbox
              className="table-container_row-checkbox"
@ -438,7 +446,8 @@ const PeopleTableRow = props => {
            color={nameColor}
            isTextOverflow
            className="table-cell_username"
-            noHover>
+            noHover
+          >
            {statusType === "pending"
              ? email
              : displayName?.trim()
@ -500,7 +509,8 @@ const PeopleTableRow = props => {
            color={sideInfoColor}
            onClick={onEmailClick}
            isTextOverflow
-            enableUserSelect>
+            enableUserSelect
+          >
            {email}
          </Link>
        </TableCell>
--- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
@ -14,7 +14,7 @@ import Text from "@docspace/components/text";
 import RowContent from "@docspace/components/row-content";

 import withContent from "../../../../../HOCs/withContent";
-import withBadges from "../../../../../HOCs/withBadges";
+
 import { Base } from "@docspace/components/themes";
 import { RoomsTypeTranslations } from "@docspace/common/constants";
 import { desktop } from "@docspace/components/utils/device";
@ -294,7 +294,7 @@ export default inject(({ auth, treeFoldersStore, filesStore }) => {
 })(
  observer(
    withTranslation(["Files", "Translations", "Notifications"])(
-      withContent(withBadges(FilesRowContent))
+      withContent(FilesRowContent)
    )
  )
 );
--- a/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/SimpleFilesRow.js
@ -6,8 +6,11 @@ import Row from "@docspace/components/row";
 import FilesRowContent from "./FilesRowContent";
 import { isMobile, isMobileOnly } from "react-device-detect";

+import { isMobile as isMobileUtile } from "@docspace/components/utils/device";
+
 import withFileActions from "../../../../../HOCs/withFileActions";
 import withQuickButtons from "../../../../../HOCs/withQuickButtons";
+import withBadges from "../../../../../HOCs/withBadges";
 import ItemIcon from "../../../../../components/ItemIcon";
 import marginStyles from "./CommonStyles";
 import { Base } from "@docspace/components/themes";
@ -154,7 +157,6 @@ const StyledSimpleFilesRow = styled(Row)`
  .badges {
    display: flex;
    align-items: center;
-    margin-bottom: 26px;
  }

  .lock-file {
@ -214,7 +216,7 @@ const StyledSimpleFilesRow = styled(Row)`
  }

  .badges {
-    margin-top: ${(props) => (props.isRooms ? "4px" : "2px")};
+    margin-top: 0px;
    margin-bottom: 0px;
  }

@ -258,20 +260,10 @@ const StyledSimpleFilesRow = styled(Row)`

  @media ${tablet} {
    .badges {
+      flex-direction: row-reverse;
      gap: 24px;
    }

-    .badges__quickButtons:not(:empty) {
-      ${(props) =>
-        props.theme.interfaceDirection === "rtl"
-          ? css`
-              margin-right: 24px;
-            `
-          : css`
-              margin-left: 24px;
-            `}
-    }
-
    .file__badges,
    .room__badges,
    .folder__badges {
@ -281,18 +273,18 @@ const StyledSimpleFilesRow = styled(Row)`
      }
    }

+    .file__badges,
    .room__badges,
    .folder__badges {
      > div {
-        margin-top: 3px;
+        margin-top: 0px;
      }
    }

-    .folder__badges {
-      margin-top: 4px;
-    }
+    .file__badges,
+    .folder__badges,
    .room__badges {
-      margin-top: 2px;
+      margin-top: 0px;
    }
  }

@ -368,8 +360,11 @@ const SimpleFilesRow = (props) => {

    folderCategory,
    isHighlight,
+    badgesComponent,
  } = props;

+  const isMobileDevice = isMobileUtile();
+
  const [isDragOver, setIsDragOver] = React.useState(false);

  const withAccess = item.security?.Lock;
@ -445,6 +440,7 @@ const SimpleFilesRow = (props) => {
          contentElement={
            isSmallContainer || isRooms ? null : quickButtonsComponent
          }
+          badgesComponent={!isMobileDevice && badgesComponent}
          onSelect={onContentFileSelect}
          onContextClick={fileContextClick}
          isPrivacy={isPrivacy}
@ -478,6 +474,7 @@ const SimpleFilesRow = (props) => {
              isSmallContainer || isRooms ? quickButtonsComponent : null
            }
            isRooms={isRooms}
+            badgesComponent={isMobileDevice && badgesComponent}
          />
        </StyledSimpleFilesRow>
      </DragAndDrop>
@ -490,4 +487,4 @@ export default withTranslation([
  "Translations",
  "InfoPanel",
  "Notifications",
-])(withFileActions(withQuickButtons(SimpleFilesRow)));
+])(withFileActions(withQuickButtons(withBadges(SimpleFilesRow))));
--- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
@ -90,11 +90,11 @@ const StyledTableRow = styled(TableRow)`
            props.theme.interfaceDirection === "rtl"
              ? css`
                  margin-left: -20px;
-                  padding-left: 18px;
+                  padding-left: 20px;
                `
              : css`
                  margin-right: -20px;
-                  padding-right: 18px;
+                  padding-right: 20px;
                `}
        }
      }
@ -201,6 +201,7 @@ const StyledTableRow = styled(TableRow)`
        : css`
            padding-right: 0px;
          `}
+    justify-content:flex-end;

    ${(props) => props.dragging && contextMenuWrapperDraggingStyle};
    ${(props) =>
@ -210,11 +211,11 @@ const StyledTableRow = styled(TableRow)`
          props.theme.interfaceDirection === "rtl"
            ? css`
                margin-left: -20px;
-                padding-left: 18px;
+                padding-left: 20px;
              `
            : css`
                margin-right: -20px;
-                padding-right: 18px;
+                padding-right: 20px;
              `}

        ${hotkeyBorderStyle}
@ -306,11 +307,11 @@ const StyledTableRow = styled(TableRow)`
          props.theme.interfaceDirection === "rtl"
            ? css`
                margin-left: -20px;
-                padding-left: 18px;
+                padding-left: 20px;
              `
            : css`
                margin-right: -20px;
-                padding-right: 18px;
+                padding-right: 20px;
              `}
      }
    `}
--- a/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/TableContainer.js
@ -41,11 +41,11 @@ const contextCss = css`
    props.theme.interfaceDirection === "rtl"
      ? css`
          margin-left: -20px;
-          padding-left: 18px;
+          padding-left: 20px;
        `
      : css`
          margin-right: -20px;
-          padding-right: 18px;
+          padding-right: 20px;
        `}

  ${marginCss}
--- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/RoomsRowData.js
@ -134,6 +134,10 @@ const RoomsRowDataComponent = (props) => {
              : dragStyles.style
          }
          {...selectionProp}
+          className={classNames(
+            selectionProp?.className,
+            "table-container_quick-buttons-wrapper"
+          )}
        >
          <StyledQuickButtonsContainer>
            {quickButtonsComponent}
--- a/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
+++ b/packages/client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
@ -379,6 +379,20 @@ const StyledContent = styled.div`
    margin-left: 12px;
  }

+  .badges {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+
+    :not(:empty) {
+      margin-inline-start: 12px;
+    }
+
+    > div {
+      margin: 0;
+    }
+  }
+
  @media ${tablet} {
    white-space: nowrap;
    overflow: hidden;
@ -411,10 +425,10 @@ const StyledOptionButton = styled.div`
    ${(props) =>
      props.theme.interfaceDirection === "rtl"
        ? css`
-            padding: 8px 8px 8px 21px;
+            padding: 8px 12px 8px 21px;
          `
        : css`
-            padding: 8px 21px 8px 8px;
+            padding: 8px 21px 8px 12px;
          `}
  }
 `;
--- a/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js
+++ b/packages/common/components/Navigation/sub-components/toggle-infopanel-btn.js
@ -22,6 +22,10 @@ const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)`
  margin-bottom: 1px;
  padding: 0;

+  .info-panel-toggle {
+    margin-inline-end: 8px;
+  }
+
  ${(props) =>
    props.isInfoPanelVisible &&
    css`
@ -34,6 +38,7 @@ const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)`
        .info-panel-toggle {
          margin: auto;
          margin-top: 25%;
+          margin-inline-end: 8px;
        }
      }
    `}
--- a/packages/common/utils/catalogIcon.helper.ts
+++ b/packages/common/utils/catalogIcon.helper.ts
@ -47,7 +47,7 @@ import CatalogSettingsGift20ReactSvgUrl from "PUBLIC_DIR/images/icons/20/catalog
 type FolderUnionType = (typeof FolderType)[keyof typeof FolderType];
 type SettingsPageUnionType = (typeof PageType)[keyof typeof PageType];

-type PageType = FolderUnionType | SettingsPageUnionType;
+type PageUnionType = FolderUnionType | SettingsPageUnionType;
 type SizeType = 16 | 20;
 type OptionsType = {
  [P in string]: any;
@ -58,7 +58,7 @@ const defaultIcon: Record<SizeType, string> = {
  20: CatalogFolder20ReactSvgUrl,
 };

-const icons: Record<SizeType, Partial<Record<PageType, string>>> = {
+const icons: Record<SizeType, Partial<Record<PageUnionType, string>>> = {
  16: {
    [FolderType.USER]: CatalogUserReactSvgUrl,
    [FolderType.Rooms]: CatalogRoomsReactSvgUrl,
@ -110,13 +110,13 @@ const DesktopIconSize = 16;
 const NullURL = "";

 const isSettingsCatalog = (
-  pageType: PageType
+  pageType: PageUnionType
 ): pageType is SettingsPageUnionType => {
  return typeof pageType === "string";
 };

 export const getCatalogIconUrlByType = (
-  pageType: PageType,
+  pageType: PageUnionType,
  options?: OptionsType
 ): string => {
  const size: SizeType =
--- a/packages/components/row/index.js
+++ b/packages/components/row/index.js
@ -40,6 +40,7 @@ class Row extends React.Component {
      isRoom,
      withoutBorder,
      contextTitle,
+      badgesComponent,
      isArchive,
    } = this.props;

@ -162,6 +163,7 @@ class Row extends React.Component {
          className="row_context-menu-wrapper"
          spacerWidth={contextButtonSpacerWidth}
        >
+          {badgesComponent && badgesComponent}
          {renderContentElement && (
            <StyledContentElement>{contentElement}</StyledContentElement>
          )}
--- a/packages/components/row/styled-row.js
+++ b/packages/components/row/styled-row.js
@ -136,14 +136,29 @@ const StyledElement = styled.div`
 StyledElement.defaultProps = { theme: Base };

 const StyledContentElement = styled.div`
-  margin-top: 6px;
+  margin-top: 0px;
  user-select: none;
+
+  ${(props) =>
+    props.theme.interfaceDirection === "rtl"
+      ? css`
+          margin-right: 24px;
+        `
+      : css`
+          margin-left: 24px;
+        `}
+
+  :empty, :has(.badges__quickButtons:empty) {
+    display: none;
+  }
 `;

 const StyledOptionButton = styled.div`
  display: flex;
  width: ${(props) => props.spacerWidth && props.spacerWidth};
  justify-content: flex-end;
+  align-items: center;
+  height: 100%;

  .expandButton > div:first-child {
    padding: ${({ theme }) =>
--- a/packages/components/table-container/StyledTableContainer.js
+++ b/packages/components/table-container/StyledTableContainer.js
@ -219,6 +219,10 @@ const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)`
  height: 100%;
  width: auto;

+  .info-panel-toggle {
+    margin-inline-end: 8px;
+  }
+
  ${(props) =>
    props.isInfoPanelVisible &&
    css`
@ -231,6 +235,7 @@ const StyledInfoPanelToggleColorThemeWrapper = styled(ColorTheme)`
        .info-panel-toggle {
          margin: auto;
          margin-top: 25%;
+          margin-inline-end: 8px;
        }
      }
    `}
@ -392,6 +397,10 @@ const StyledTableRow = styled.div`
    }
  }

+  .table-container_header-settings {
+    justify-self: flex-end;
+  }
+
  .droppable-hover {
    background: ${(props) =>
      props.dragging
@ -456,7 +465,7 @@ StyledTableCell.defaultProps = {

 const StyledTableSettings = styled.div`
  margin: ${({ theme }) =>
-    getCorrectFourValuesStyle("14px 0 0px 2px", theme.interfaceDirection)};
+    getCorrectFourValuesStyle("14px 2px 0px 0px", theme.interfaceDirection)};
  display: inline-block;
  position: relative;
  cursor: pointer;
--- a/packages/components/themes/base.js
+++ b/packages/components/themes/base.js
@ -545,7 +545,7 @@ const Base = {
    },

    optionButton: {
-      padding: "8px 9px 9px 7px",
+      padding: "8px 0px 9px 7px",
    },
  },

--- a/packages/components/themes/dark.js
+++ b/packages/components/themes/dark.js
@ -539,7 +539,7 @@ const Dark = {
    },

    optionButton: {
-      padding: "8px 9px 9px 7px",
+      padding: "8px 0px 9px 7px",
    },
  },