Merge pull request #574 from ONLYOFFICE/feature/display-file-extension

feature/display-file-extension
2024-08-30 12:56:42 +04:00 · 2024-08-30 12:56:42 +04:00 · 1a9a2da99d
commit 1a9a2da99d
parent ee7fe469b2 7e0cb53c69
15 changed files with 125 additions and 17 deletions
--- a/packages/client/public/locales/en/FilesSettings.json
+++ b/packages/client/public/locales/en/FilesSettings.json
@ -4,6 +4,7 @@
  "DisplayNotification": "Display notification when moving items to Trash",
  "DisplayRecent": "Display Recent",
  "DisplayTemplates": "Display Templates",
+  "DisplayFileExtension": "Display file extension next to file name",
  "IntermediateVersion": "Keep all saved intermediate versions",
  "KeepIntermediateVersion": "Keep intermediate versions when editing",
  "OpenSameTab": "Open {{organizationName}} editor in same tab",
--- a/packages/client/src/HOCs/withContent.js
+++ b/packages/client/src/HOCs/withContent.js
@ -151,6 +151,7 @@ export default function withContent(WrappedContent) {
        uploadDataStore,
        publicRoomStore,
        userStore,
+        filesSettingsStore,
      },
      { item },
    ) => {
@ -170,6 +171,7 @@ export default function withContent(WrappedContent) {
      } = filesStore;

      const { isPublicRoom, publicRoomKey } = publicRoomStore;
+      const { displayFileExtension } = filesSettingsStore;

      const { clearActiveOperations, fileCopyAs } = uploadDataStore;
      const { isRecycleBinFolder, isPrivacyFolder, isArchiveFolder } =
@ -218,6 +220,7 @@ export default function withContent(WrappedContent) {
        setCreatedItem,
        isPublicRoom,
        publicRoomKey,
+        displayFileExtension,
      };
    },
  )(observer(WithContent));
--- a/packages/client/src/pages/Home/InfoPanel/Body/styles/common.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/styles/common.js
@ -110,8 +110,17 @@ const StyledTitle = styled.div`
    line-height: 22px;
    max-height: 44px;
    margin: 0 8px;
+
    overflow: hidden;
    text-overflow: ellipsis;
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    text-align: start;
+  }
+
+  .file-extension {
+    color: ${(props) => props.theme.filesSection.tableView.fileExstColor};
  }

  .free-label {
--- a/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js
+++ b/packages/client/src/pages/Home/InfoPanel/Body/sub-components/ItemTitle/Rooms/index.js
@ -27,6 +27,7 @@
 import { useRef } from "react";
 import { withTranslation } from "react-i18next";

+import { getTitleWithoutExtension } from "@docspace/shared/utils";
 import { Text } from "@docspace/shared/components/text";
 import { inject, observer } from "mobx-react";
 import PersonPlusReactSvgUrl from "PUBLIC_DIR/images/person+.react.svg?url";
@ -56,6 +57,7 @@ const RoomsItemHeader = ({
  showSearchBlock,
  setShowSearchBlock,
  roomType,
+  displayFileExtension,
 }) => {
  const itemTitleRef = useRef();

@ -75,6 +77,13 @@ const RoomsItemHeader = ({
  const badgeUrl = showPlanetIcon ? Planet12ReactSvgUrl : null;
  const isRoomMembersPanel = selection?.isRoom && roomsView === "info_members";

+  const isFile = !!selection.fileExst;
+  let title = selection.title;
+
+  if (isFile) {
+    title = getTitleWithoutExtension(selection, false);
+  }
+
  const onSelectItem = () => {
    setSelection([]);
    setBufferSelection(selection);
@ -107,7 +116,7 @@ const RoomsItemHeader = ({
      <div className="item-icon">
        <RoomIcon
          color={selection.logo?.color}
-          title={selection.title}
+          title={title}
          isArchive={isArchive}
          showDefault={showDefaultRoomIcon}
          imgClassName={`icon ${selection.isRoom && "is-room"}`}
@ -116,8 +125,11 @@ const RoomsItemHeader = ({
        />
      </div>

-      <Text className="text" title={selection.title}>
-        {selection.title}
+      <Text className="text" title={title} dir="auto">
+        {title}
+        {isFile && displayFileExtension && (
+          <span className="file-extension">{selection.fileExst}</span>
+        )}
      </Text>

      <div className="info_title-icons">
@ -161,6 +173,7 @@ export default inject(
    selectedFolderStore,
    filesStore,
    infoPanelStore,
+    filesSettingsStore,
  }) => {
    const {
      infoPanelSelection,
@ -170,6 +183,8 @@ export default inject(
      setShowSearchBlock,
    } = infoPanelStore;

+    const { displayFileExtension } = filesSettingsStore;
+
    const selection = infoPanelSelection.length > 1 ? null : infoPanelSelection;
    const isArchive = selection?.rootFolderType === FolderType.Archive;

@ -195,6 +210,8 @@ export default inject(
      isArchive,
      isShared: selection?.shared,
      roomType,
+
+      displayFileExtension,
    };
  },
 )(
--- a/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
+++ b/packages/client/src/pages/Home/Section/Body/RowsView/FilesRowContent.js
@ -96,6 +96,10 @@ const SimpleFilesRowContent = styled(RowContent)`
      props.theme.interfaceDirection === "rtl" ? "-14px" : "-12px"};
  }

+  .item-file-exst {
+    color: ${(props) => props.theme.filesSection.tableView.fileExstColor};
+  }
+
  @media ${tablet} {
    .row-main-container-wrapper {
      display: flex;
@ -173,6 +177,7 @@ const FilesRowContent = ({
  isDefaultRoomsQuotaSet,
  isStatisticsAvailable,
  showStorageInfo,
+  displayFileExtension,
 }) => {
  const {
    contentLength,
@ -232,20 +237,21 @@ const FilesRowContent = ({
    }
  };

-  const additionalComponent = () => {
-    if (isRooms) return getRoomTypeName(item.roomType, t);
+  // const additionalComponent = () => {
+  //   if (isRooms) return getRoomTypeName(item.roomType, t);

-    if (!fileExst && !contentLength && !providerKey)
-      return `${foldersCount} ${t("Translations:Folders")} | ${filesCount} ${t(
-        "Translations:Files",
-      )}`;
+  //   if (!fileExst && !contentLength && !providerKey)
+  //     return `${foldersCount} ${t("Translations:Folders")} | ${filesCount} ${t(
+  //       "Translations:Files",
+  //     )}`;

-    if (fileExst) return `${fileExst.toUpperCase().replace(/^\./, "")}`;
+  //   if (fileExst) return `${fileExst.toUpperCase().replace(/^\./, "")}`;

-    return "";
-  };
+  //   return "";
+  // };
+
+  // const additionalInfo = additionalComponent();

-  const additionalInfo = additionalComponent();
  const mainInfo = contentComponent();

  return (
@ -269,6 +275,9 @@ const FilesRowContent = ({
          dir="auto"
        >
          {titleWithoutExt}
+          {displayFileExtension && (
+            <span className="item-file-exst">{fileExst}</span>
+          )}
        </Link>
        <div className="badges">
          {badgesComponent}
@ -287,7 +296,7 @@ const FilesRowContent = ({
          </Text>
        )}

-        {additionalInfo && (
+        {/* {additionalInfo && (
          <Text
            containerMinWidth="90px"
            containerWidth="10%"
@ -299,7 +308,7 @@ const FilesRowContent = ({
          >
            {additionalInfo}
          </Text>
-        )}
+        )} */}
      </SimpleFilesRowContent>
    </>
  );
--- a/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/StyledTable.js
@ -205,6 +205,10 @@ const StyledTableRow = styled(TableRow)`
    padding-inline: 0 8px;
  }

+  .item-file-exst {
+    color: ${(props) => props.theme.filesSection.tableView.fileExstColor};
+  }
+
  ${(props) =>
    props.isHighlight &&
    css`
--- a/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/TableRow.js
@ -72,6 +72,7 @@ const FilesTableRow = (props) => {
    badgeUrl,
    isRecentTab,
    canDrag,
+    displayFileExtension,
  } = props;
  const { acceptBackground, background } = theme.dragAndDrop;

@ -174,6 +175,7 @@ const FilesTableRow = (props) => {
        contextOptions={item.contextOptions}
        getContextModel={getContextModel}
        showHotkeyBorder={showHotkeyBorder}
+        displayFileExtension={displayFileExtension}
        title={
          item.isFolder
            ? t("Translations:TitleShowFolderActions")
--- a/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js
+++ b/packages/client/src/pages/Home/Section/Body/TableView/sub-components/FileNameCell.js
@ -26,6 +26,7 @@

 import React from "react";
 import { Link } from "@docspace/shared/components/link";
+import { Text } from "@docspace/shared/components/text";
 import { Checkbox } from "@docspace/shared/components/checkbox";
 import { TableCell } from "@docspace/shared/components/table";
 import { Loader } from "@docspace/shared/components/loader";
@ -40,8 +41,9 @@ const FileNameCell = ({
  theme,
  t,
  inProgress,
+  displayFileExtension,
 }) => {
-  const { title, viewAccessibility } = item;
+  const { title, viewAccessibility, fileExst } = item;

  const onChange = (e) => {
    onContentSelect && onContentSelect(e.target.checked, item);
@ -87,6 +89,9 @@ const FileNameCell = ({
        dir="auto"
      >
        {titleWithoutExt}
+        {displayFileExtension && (
+          <span className="item-file-exst">{fileExst}</span>
+        )}
      </Link>
    </>
  );
--- a/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js
+++ b/packages/client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js
@ -30,6 +30,7 @@ import { withTranslation } from "react-i18next";
 import styled, { css } from "styled-components";

 import { Link } from "@docspace/shared/components/link";
+import { Text } from "@docspace/shared/components/text";

 import TileContent from "./sub-components/TileContent";
 import withContent from "../../../../../HOCs/withContent";
@ -42,7 +43,8 @@ const SimpleFilesTileContent = styled(TileContent)`
  .row-main-container {
    height: auto;
    max-width: 100%;
-    align-self: flex-end;
+    display: flex;
+    align-items: flex-end;
  }

  .main-icons {
@ -90,6 +92,11 @@ const SimpleFilesTileContent = styled(TileContent)`
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
+    text-align: start;
+  }
+
+  .item-file-exst {
+    color: ${(props) => props.theme.filesSection.tableView.fileExstColor};
  }

  ${({ isRooms }) =>
@ -117,6 +124,7 @@ const FilesTileContent = ({
  theme,
  isRooms,
  currentDeviceType,
+  displayFileExtension,
 }) => {
  const { fileExst, title, viewAccessibility } = item;

@ -140,8 +148,12 @@ const FilesTileContent = ({
          {...linkStyles}
          color={theme.filesSection.tilesView.color}
          isTextOverflow
+          dir="auto"
        >
          {titleWithoutExt}
+          {displayFileExtension && (
+            <span className="item-file-exst">{fileExst}</span>
+          )}
        </Link>
      </SimpleFilesTileContent>
    </>
--- a/packages/client/src/pages/Profile/Section/Body/sub-components/file-management/index.js
+++ b/packages/client/src/pages/Profile/Section/Body/sub-components/file-management/index.js
@ -64,6 +64,9 @@ const FileManagement = ({

  openEditorInSameTab,
  setOpenEditorInSameTab,
+
+  displayFileExtension,
+  setDisplayFileExtension,
 }) => {
  const { t, ready } = useTranslation(["FilesSettings", "Common"]);

@ -90,6 +93,10 @@ const FileManagement = ({
    setKeepNewFileName(!keepNewFileName);
  }, [setKeepNewFileName, keepNewFileName]);

+  const onChangeDisplayFileExtension = React.useCallback(() => {
+    setDisplayFileExtension(!displayFileExtension);
+  }, [setDisplayFileExtension, displayFileExtension]);
+
  const onChangeOpenEditorInSameTab = React.useCallback(() => {
    setOpenEditorInSameTab(!openEditorInSameTab);
  }, [setOpenEditorInSameTab, openEditorInSameTab]);
@ -174,6 +181,16 @@ const FileManagement = ({
            </Text>
          </div>
        )}
+        {!isVisitor && (
+          <div className="toggle-btn-wrapper">
+            <ToggleButton
+              className="display-file-extension toggle-btn"
+              onChange={onChangeDisplayFileExtension}
+              isChecked={displayFileExtension}
+            />
+            <Text>{t("DisplayFileExtension")}</Text>
+          </div>
+        )}
      </Box>

      {/* <Box className="settings-section">
@ -256,6 +273,9 @@ export default inject(({ userStore, filesSettingsStore, treeFoldersStore }) => {

    openEditorInSameTab,
    setOpenEditorInSameTab,
+
+    displayFileExtension,
+    setDisplayFileExtension,
  } = filesSettingsStore;

  const { myFolderId, commonFolderId } = treeFoldersStore;
@ -290,5 +310,8 @@ export default inject(({ userStore, filesSettingsStore, treeFoldersStore }) => {

    openEditorInSameTab,
    setOpenEditorInSameTab,
+
+    displayFileExtension,
+    setDisplayFileExtension,
  };
 })(observer(FileManagement));
--- a/packages/client/src/store/FilesSettingsStore.js
+++ b/packages/client/src/store/FilesSettingsStore.js
@ -73,6 +73,7 @@ class FilesSettingsStore {
  chunkUploadSize = 1024 * 1023; // 1024 * 1023; //~0.999mb
  maxUploadThreadCount = 15;
  maxUploadFilesCount = 5;
+  displayFileExtension = null;

  settingsIsLoaded = false;

@ -219,6 +220,13 @@ class FilesSettingsStore {
      .catch((e) => toastr.error(e));
  };

+  setDisplayFileExtension = (data) => {
+    api.files
+      .enableDisplayFileExtension(data)
+      .then((res) => this.setFilesSetting("displayFileExtension", res))
+      .catch((e) => toastr.error(e));
+  };
+
  setOpenEditorInSameTab = (data) => {
    api.files
      .changeOpenEditorInSameTab(data)
--- a/packages/shared/api/files/index.ts
+++ b/packages/shared/api/files/index.ts
@ -931,6 +931,17 @@ export async function changeKeepNewFileName(val: boolean) {
  return res;
 }

+export async function enableDisplayFileExtension(val: boolean) {
+  const data = { set: val };
+  const res = (await request({
+    method: "put",
+    url: "files/displayfileextension",
+    data,
+  })) as boolean;
+
+  return res;
+}
+
 export async function changeOpenEditorInSameTab(val: boolean) {
  const data = { set: val };
  const res = (await request({
--- a/packages/shared/components/text/Text.styled.ts
+++ b/packages/shared/components/text/Text.styled.ts
@ -85,6 +85,8 @@ export const StyledAutoDirSpan = styled.span`
  pointer-events: none;
  width: inherit;
  max-width: inherit;
+  -webkit-line-clamp: inherit;
+  -webkit-box-orient: inherit;
 `;

 export default StyledText;
--- a/packages/shared/themes/base.ts
+++ b/packages/shared/themes/base.ts
@ -2044,6 +2044,7 @@ export const getBaseTheme = () => {
          linkColor: black,
          textColor: gray,
        },
+        fileExstColor: gray,

        row: {
          checkboxChecked: `linear-gradient(to right, ${lightGrayHover} 24px, ${grayLightMid} 24px)`,
--- a/packages/shared/themes/dark.ts
+++ b/packages/shared/themes/dark.ts
@ -2034,6 +2034,7 @@ const Dark: TTheme = {
        linkColor: white,
        textColor: grayDark,
      },
+      fileExstColor: gray,

      row: {
        checkboxChecked: `linear-gradient(to right, ${black} 24px, ${grayDarkStrong} 24px)`,