Merge pull request #669 from ONLYOFFICE/feature/change-size-table-view

Feature/Change table resize with info panel

packages/asc-web-common/components/Navigation/Navigation.js

@@ -157,6 +157,7 @@ const Navigation = ({
             isTabletView={isTabletView}
             isRecycleBinFolder={isRecycleBinFolder}
             isDesktop={isDesktop}
+            isInfoPanelVisible={isInfoPanelVisible}
           >
             <ArrowButton
               isRootFolder={isRootFolder}

packages/asc-web-common/components/Navigation/StyledNavigation.js

@@ -8,7 +8,9 @@ const StyledContainer = styled.div`
     props.isDesktop &&
     css`
       width: fit-content;
-      max-width: calc(100% - 72px);
+      max-width: ${props.isInfoPanelVisible
+        ? `calc(100%)`
+        : `calc(100% - 72px)`};
     `}
 
   display: grid;

packages/asc-web-common/components/Navigation/sub-components/drop-box.js

@@ -136,7 +136,11 @@ const DropBox = React.forwardRef(
           dropBoxWidth={dropBoxWidth}
           isDesktop={isDesktop}
         >
-          <StyledContainer canCreate={canCreate} isDropBox={true}>
+          <StyledContainer
+            canCreate={canCreate}
+            isDropBox={true}
+            isInfoPanelVisible={isInfoPanelVisible}
+          >
             <ArrowButton
               isRootFolder={isRootFolder}
               onBackToParentFolder={onBackToParentFolder}

packages/asc-web-common/components/Section/index.js

@@ -467,7 +467,7 @@ class Section extends React.Component {
                     )}
                   </SectionContainer>
                   {isInfoPanelAvailable && (
-                    <InfoPanel>
+                    <InfoPanel viewAs={viewAs}>
                       <SubInfoPanelHeader>
                         {infoPanelHeaderContent}
                       </SubInfoPanelHeader>

packages/asc-web-common/components/Section/sub-components/info-panel.js

@@ -30,15 +30,16 @@ const StyledInfoPanelWrapper = styled.div.attrs(({ id }) => ({
     right: 0;
   }
 
-  ${isMobile &&
+  ${(props) =>
-  css`
+    (props.isRowView || isMobile) &&
-    z-index: 309;
+    css`
-    position: fixed;
+      z-index: 309;
-    top: 0;
+      position: fixed;
-    bottom: 0;
+      top: 0;
-    left: 0;
+      bottom: 0;
-    right: 0;
+      left: 0;
-  `}
+      right: 0;
+    `}
 `;
 
 const StyledInfoPanel = styled.div`
@@ -61,14 +62,15 @@ const StyledInfoPanel = styled.div`
     max-width: calc(100vw - 69px);
   }
 
-  ${isMobile &&
+  ${(props) =>
-  css`
+    (props.isRowView || isMobile) &&
-    position: absolute;
+    css`
-    border: none;
+      position: absolute;
-    right: 0;
+      border: none;
-    width: 480px;
+      right: 0;
-    max-width: calc(100vw - 69px);
+      width: 480px;
-  `}
+      max-width: calc(100vw - 69px);
+    `}
 
   @media (max-width: 428px) {
     bottom: 0;
@@ -100,13 +102,14 @@ const StyledControlContainer = styled.div`
     left: -34px;
   }
 
-  ${isMobile &&
+  ${(props) =>
-  css`
+    (props.isRowView || isMobile) &&
-    display: flex !important;
+    css`
+      display: flex !important;
 
-    top: 18px;
+      top: 18px;
-    left: -34px;
+      left: -34px;
-  `}
+    `}
 
   @media (max-width: 428px) {
     display: flex;
@@ -130,7 +133,7 @@ const StyledCrossIcon = styled(CrossIcon)`
 
 StyledCrossIcon.defaultProps = { theme: Base };
 
-const InfoPanel = ({ children, isVisible, setIsVisible }) => {
+const InfoPanel = ({ children, isVisible, setIsVisible, viewAs }) => {
   if (!isVisible) return null;
 
   const closeInfoPanel = () => setIsVisible(false);
@@ -140,16 +143,23 @@ const InfoPanel = ({ children, isVisible, setIsVisible }) => {
       if (e.target.id === "InfoPanelWrapper") closeInfoPanel();
     };
 
-    if (isTablet() || isMobile || isMobileUtils()) {
+    if (viewAs === "row" || isTablet() || isMobile || isMobileUtils()) {
       document.addEventListener("mousedown", onMouseDown);
     }
     return () => document.removeEventListener("mousedown", onMouseDown);
   }, []);
 
   return (
-    <StyledInfoPanelWrapper className="info-panel" id="InfoPanelWrapper">
+    <StyledInfoPanelWrapper
-      <StyledInfoPanel>
+      isRowView={viewAs === "row"}
-        <StyledControlContainer onClick={closeInfoPanel}>
+      className="info-panel"
+      id="InfoPanelWrapper"
+    >
+      <StyledInfoPanel isRowView={viewAs === "row"}>
+        <StyledControlContainer
+          isRowView={viewAs === "row"}
+          onClick={closeInfoPanel}
+        >
           <StyledCrossIcon />
         </StyledControlContainer>
 

packages/asc-web-components/icon-button/styled-icon-button.js

@@ -22,7 +22,11 @@ const StyledOuter = styled.div`
     svg {
       path {
         fill: ${(props) =>
-          props.color ? props.color : props.theme.iconButton.hoverColor};
+          props.isDisabled
+            ? props.theme.iconButton.color
+            : props.color
+            ? props.color
+            : props.theme.iconButton.hoverColor};
       }
     }
   }

packages/asc-web-components/table-container/StyledTableContainer.js

@@ -23,7 +23,7 @@ const StyledTableContainer = styled.div`
     display: block;
     cursor: ew-resize;
     height: 10px;
-    margin: 14px 8px 0 auto;
+    margin: 14px 0px 0 auto;
     z-index: 1;
     border-right: ${(props) => props.theme.tableContainer.borderRight};
     &:hover {
@@ -243,7 +243,11 @@ const StyledTableHeaderCell = styled.div`
   }
 
   .table-container_header-item {
-    display: flex;
+    display: grid;
+    grid-template-columns: 1fr 22px;
+
+    margin-right: 8px;
+
     user-select: none;
   }
 
@@ -304,6 +308,8 @@ const StyledTableCell = styled.div`
   display: flex;
   align-items: center;
 
+  padding-right: 30px;
+
   .react-svg-icon svg {
     margin-top: 2px;
   }

packages/asc-web-components/table-container/TableHeader.js

@@ -11,7 +11,7 @@ import TableHeaderCell from "./TableHeaderCell";
 import { size } from "../utils/device";
 
 const minColumnSize = 150;
-const defaultMinColumnSize = 90;
+const defaultMinColumnSize = 110;
 const settingsSize = 24;
 const containerMargin = 25;
 
@@ -19,7 +19,7 @@ class TableHeader extends React.Component {
   constructor(props) {
     super(props);
 
-    this.state = { columnIndex: null };
+    this.state = { columnIndex: null, hideColumns: false };
 
     this.headerRef = React.createRef();
     this.throttledResize = throttle(this.onResize, 300);
@@ -42,10 +42,11 @@ class TableHeader extends React.Component {
 
   getNextColumn = (array, index) => {
     let i = 1;
+
     while (array.length !== i) {
       const item = array[index + i];
 
-      if (!item) return null;
+      if (!item || this.state.hideColumns) return null;
       else if (!item.enable) i++;
       else return item;
     }
@@ -194,10 +195,15 @@ class TableHeader extends React.Component {
   };
 
   onMouseUp = () => {
-    localStorage.setItem(
+    !this.props.infoPanelVisible
-      this.props.columnStorageName,
+      ? localStorage.setItem(
-      this.props.containerRef.current.style.gridTemplateColumns
+          this.props.columnStorageName,
-    );
+          this.props.containerRef.current.style.gridTemplateColumns
+        )
+      : localStorage.setItem(
+          this.props.columnInfoPanelStorageName,
+          this.props.containerRef.current.style.gridTemplateColumns
+        );
 
     window.removeEventListener("mousemove", this.onMouseMove);
     window.removeEventListener("mouseup", this.onMouseUp);
@@ -214,17 +220,24 @@ class TableHeader extends React.Component {
     const {
       containerRef,
       columnStorageName,
+      columnInfoPanelStorageName,
       resetColumnsSize,
       sectionWidth,
+      infoPanelVisible,
     } = this.props;
 
+    if (!infoPanelVisible && this.state.hideColumns) {
+      this.setState({ hideColumns: false });
+    }
+
     let activeColumnIndex = null;
 
     const container = containerRef.current
       ? containerRef.current
       : document.getElementById("table-container");
 
-    const minSize = size.tablet;
+    // 400 - it is desktop info panel width
+    const minSize = infoPanelVisible ? size.tablet - 400 : size.tablet;
 
     if (
       !container ||
@@ -273,63 +286,255 @@ class TableHeader extends React.Component {
 
     if (tableContainer.length > 1) {
       const gridTemplateColumns = [];
+      let hideColumns = false;
 
-      for (let index in tableContainer) {
+      if (infoPanelVisible) {
-        const item = tableContainer[index];
+        const storageInfoPanelSize = localStorage.getItem(
+          columnInfoPanelStorageName
+        );
 
-        const column = document.getElementById("column_" + index);
+        const tableInfoPanelContainer = storageInfoPanelSize
-        const enable =
+          ? storageInfoPanelSize.split(" ")
-          index == tableContainer.length - 1 ||
+          : tableContainer;
-          (column ? column.dataset.enable === "true" : item !== "0px");
-        const defaultColumnSize = column && column.dataset.defaultSize;
 
-        const isActiveNow = item === "0px" && enable;
+        let containerMinWidth = containerWidth - defaultSize - settingsSize;
-        if (isActiveNow && column) activeColumnIndex = index;
 
-        if (!enable) {
+        tableInfoPanelContainer.forEach((item, index) => {
-          gridTemplateColumns.push("0px");
+          const column = document.getElementById("column_" + index);
+          const enable =
+            index == tableContainer.length - 1 ||
+            (column ? column.dataset.enable === "true" : item !== "0px");
 
-          let colIndex = 1;
+          if (
-          let leftEnableColumn = gridTemplateColumns[index - colIndex];
+            enable &&
-          while (leftEnableColumn === "0px") {
+            item !== `${defaultSize}px` &&
-            colIndex++;
+            item !== `${settingsSize}px`
-            leftEnableColumn = gridTemplateColumns[index - colIndex];
+          ) {
+            if (column?.dataset?.minWidth) {
+              containerMinWidth = containerMinWidth - column.dataset.minWidth;
+            } else {
+              containerMinWidth = containerMinWidth - defaultMinColumnSize;
+            }
           }
+        });
 
-          //added the size of the disabled column to the left column
+        if (containerMinWidth < 0) {
-          gridTemplateColumns[index - colIndex] =
+          hideColumns = true;
-            this.getSubstring(gridTemplateColumns[index - colIndex]) +
+        }
-            this.getSubstring(item) +
-            "px";
-        } else if (item !== `${settingsSize}px`) {
-          const percent = (this.getSubstring(item) / oldWidth) * 100;
 
-          const newItemWidth = defaultColumnSize
+        if (this.state.hideColumns !== hideColumns) {
-            ? `${defaultColumnSize}px`
+          this.setState({ hideColumns: hideColumns });
-            : percent === 0
+        }
-            ? `${minColumnSize}px`
-            : ((containerWidth - defaultSize - settingsSize) * percent) / 100 +
-              "px";
 
-          gridTemplateColumns.push(newItemWidth);
+        if (hideColumns) {
+          tableInfoPanelContainer.forEach((item, index) => {
+            const column = document.getElementById("column_" + index);
+
+            if (column?.dataset?.minWidth) {
+              gridTemplateColumns.push(
+                `${containerWidth - defaultSize - settingsSize}px`
+              );
+            } else if (
+              item === `${defaultSize}px` ||
+              item === `${settingsSize}px`
+            ) {
+              gridTemplateColumns.push(item);
+            } else {
+              gridTemplateColumns.push("0px");
+            }
+          });
         } else {
-          gridTemplateColumns.push(item);
+          let contentWidth = containerWidth - defaultSize - settingsSize;
+
+          let enabledColumnsCount = 0;
+
+          tableInfoPanelContainer.forEach((item, index) => {
+            if (
+              index != 0 &&
+              item !== "0px" &&
+              item !== `${defaultSize}px` &&
+              item !== `${settingsSize}px`
+            ) {
+              enabledColumnsCount++;
+            }
+          });
+
+          const changedWidth =
+            tableInfoPanelContainer
+              .map((column) => this.getSubstring(column))
+              .reduce((x, y) => x + y) -
+            defaultSize -
+            settingsSize;
+
+          if (
+            contentWidth - enabledColumnsCount * defaultMinColumnSize >
+            this.getSubstring(tableInfoPanelContainer[0])
+          ) {
+            const currentContentWidth =
+              contentWidth - +this.getSubstring(tableInfoPanelContainer[0]);
+
+            let overWidth = 0;
+
+            tableInfoPanelContainer.forEach((item, index) => {
+              if (index == 0) {
+                gridTemplateColumns.push(item);
+              } else {
+                const column = document.getElementById("column_" + index);
+
+                const enable =
+                  index == tableInfoPanelContainer.length - 1 ||
+                  (column ? column.dataset.enable === "true" : item !== "0px");
+
+                const defaultColumnSize = column && column.dataset.defaultSize;
+
+                if (!enable) {
+                  gridTemplateColumns.push("0px");
+                } else if (item !== `${settingsSize}px`) {
+                  const percent =
+                    (this.getSubstring(item) /
+                      (changedWidth -
+                        +this.getSubstring(tableInfoPanelContainer[0]))) *
+                    100;
+
+                  const newItemWidth = defaultColumnSize
+                    ? `${defaultColumnSize}px`
+                    : (currentContentWidth * percent) / 100 >
+                      defaultMinColumnSize
+                    ? (currentContentWidth * percent) / 100 + "px"
+                    : defaultMinColumnSize + "px";
+
+                  if (
+                    (currentContentWidth * percent) / 100 <
+                      defaultMinColumnSize &&
+                    !defaultColumnSize
+                  ) {
+                    overWidth +=
+                      defaultMinColumnSize -
+                      (currentContentWidth * percent) / 100;
+                  }
+
+                  gridTemplateColumns.push(newItemWidth);
+                } else {
+                  gridTemplateColumns.push(item);
+                }
+              }
+            });
+
+            if (overWidth > 0) {
+              gridTemplateColumns.forEach((column, index) => {
+                const columnWidth = this.getSubstring(column);
+
+                if (
+                  index !== 0 &&
+                  column !== "0px" &&
+                  column !== `${defaultSize}px` &&
+                  column !== `${settingsSize}px` &&
+                  columnWidth > defaultMinColumnSize
+                ) {
+                  const availableWidth = columnWidth - defaultMinColumnSize;
+
+                  if (availableWidth < Math.abs(overWidth)) {
+                    overWidth = Math.abs(overWidth) - availableWidth;
+                    return (gridTemplateColumns[index] =
+                      columnWidth - availableWidth + "px");
+                  } else {
+                    const temp = overWidth;
+
+                    overWidth = 0;
+
+                    return (gridTemplateColumns[index] =
+                      columnWidth - Math.abs(temp) + "px");
+                  }
+                }
+              });
+            }
+          } else {
+            tableInfoPanelContainer.forEach((item, index) => {
+              const column = document.getElementById("column_" + index);
+
+              const enable =
+                index == tableInfoPanelContainer.length - 1 ||
+                (column ? column.dataset.enable === "true" : item !== "0px");
+
+              const defaultColumnSize = column && column.dataset.defaultSize;
+
+              if (!enable) {
+                gridTemplateColumns.push("0px");
+              } else if (item !== `${settingsSize}px`) {
+                const newItemWidth = defaultColumnSize
+                  ? `${defaultColumnSize}px`
+                  : index == 0
+                  ? `${
+                      contentWidth - enabledColumnsCount * defaultMinColumnSize
+                    }px`
+                  : `${defaultMinColumnSize}px`;
+
+                gridTemplateColumns.push(newItemWidth);
+              } else {
+                gridTemplateColumns.push(item);
+              }
+            });
+          }
+        }
+      } else {
+        for (let index in tableContainer) {
+          const item = tableContainer[index];
+
+          const column = document.getElementById("column_" + index);
+          const enable =
+            index == tableContainer.length - 1 ||
+            (column ? column.dataset.enable === "true" : item !== "0px");
+          const defaultColumnSize = column && column.dataset.defaultSize;
+
+          const isActiveNow = item === "0px" && enable;
+          if (isActiveNow && column) activeColumnIndex = index;
+
+          if (!enable) {
+            gridTemplateColumns.push("0px");
+
+            let colIndex = 1;
+            let leftEnableColumn = gridTemplateColumns[index - colIndex];
+            while (leftEnableColumn === "0px") {
+              colIndex++;
+              leftEnableColumn = gridTemplateColumns[index - colIndex];
+            }
+
+            //added the size of the disabled column to the left column
+            gridTemplateColumns[index - colIndex] =
+              this.getSubstring(gridTemplateColumns[index - colIndex]) +
+              this.getSubstring(item) +
+              "px";
+          } else if (item !== `${settingsSize}px`) {
+            const percent = (this.getSubstring(item) / oldWidth) * 100;
+
+            const newItemWidth = defaultColumnSize
+              ? `${defaultColumnSize}px`
+              : percent === 0
+              ? `${minColumnSize}px`
+              : ((containerWidth - defaultSize - settingsSize) * percent) /
+                  100 +
+                "px";
+
+            gridTemplateColumns.push(newItemWidth);
+          } else {
+            gridTemplateColumns.push(item);
+          }
+        }
+
+        if (activeColumnIndex) {
+          const needReset = this.addNewColumns(
+            gridTemplateColumns,
+            activeColumnIndex,
+            containerWidth
+          );
+          if (needReset) return;
         }
       }
-
-      if (activeColumnIndex) {
-        const needReset = this.addNewColumns(
-          gridTemplateColumns,
-          activeColumnIndex,
-          containerWidth
-        );
-        if (needReset) return;
-      }
-
       str = gridTemplateColumns.join(" ");
     } else {
       this.resetColumns(true);
     }
+
     if (str) {
       container.style.gridTemplateColumns = str;
       if (this.headerRef.current) {
@@ -337,12 +542,24 @@ class TableHeader extends React.Component {
         this.headerRef.current.style.width = containerWidth + "px";
       }
 
-      localStorage.setItem(columnStorageName, str);
+      infoPanelVisible
+        ? localStorage.setItem(columnInfoPanelStorageName, str)
+        : localStorage.setItem(columnStorageName, str);
+
+      if (!infoPanelVisible) {
+        localStorage.removeItem(columnInfoPanelStorageName);
+      }
     }
   };
 
   resetColumns = (resetToDefault = false) => {
-    const { containerRef, columnStorageName, columns } = this.props;
+    const {
+      containerRef,
+      columnStorageName,
+      columnInfoPanelStorageName,
+      columns,
+      infoPanelVisible,
+    } = this.props;
     const defaultSize = this.props.columns.find((col) => col.defaultSize)
       ?.defaultSize;
 
@@ -401,7 +618,11 @@ class TableHeader extends React.Component {
       this.headerRef.current.style.width = containerWidth + "px";
     }
 
-    str && localStorage.setItem(columnStorageName, str);
+    str
+      ? !infoPanelVisible
+        ? localStorage.setItem(columnStorageName, str)
+        : localStorage.setItem(columnInfoPanelStorageName, str)
+      : null;
 
     this.onResize();
   };
@@ -413,6 +634,7 @@ class TableHeader extends React.Component {
       sorted,
       isLengthenHeader,
       sortingVisible,
+      infoPanelVisible,
       ...rest
     } = this.props;
 
@@ -449,7 +671,10 @@ class TableHeader extends React.Component {
             })}
 
             <div className="table-container_header-settings">
-              <TableSettings columns={columns} />
+              <TableSettings
+                columns={columns}
+                infoPanelVisible={infoPanelVisible}
+              />
             </div>
           </StyledTableRow>
         </StyledTableHeader>
@@ -462,6 +687,7 @@ class TableHeader extends React.Component {
 
 TableHeader.defaultProps = {
   sortingVisible: true,
+  infoPanelVisible: false,
 };
 
 TableHeader.propTypes = {
@@ -475,6 +701,7 @@ TableHeader.propTypes = {
   resetColumnsSize: PropTypes.bool,
   isLengthenHeader: PropTypes.bool,
   sortingVisible: PropTypes.bool,
+  infoPanelVisible: PropTypes.bool,
 };
 
 export default TableHeader;

packages/asc-web-components/table-container/TableSettings.js

@@ -5,13 +5,13 @@ import DropDown from "../drop-down";
 import { StyledTableSettings } from "./StyledTableContainer";
 import Checkbox from "../checkbox";
 
-const TableSettings = ({ columns }) => {
+const TableSettings = ({ columns, infoPanelVisible }) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const ref = useRef();
 
   const onClick = () => {
-    setIsOpen(!isOpen);
+    !infoPanelVisible && setIsOpen(!isOpen);
   };
 
   const clickOutsideAction = (e) => {
@@ -32,6 +32,7 @@ const TableSettings = ({ columns }) => {
         isFill
         iconName="/static/images/settings.desc.react.svg"
         onClick={onClick}
+        isDisabled={infoPanelVisible}
       />
       <DropDown
         className="table-container_settings"

products/ASC.Files/Client/src/pages/Home/Section/Body/RowsView/FilesRowContainer.js

@@ -5,6 +5,7 @@ import SimpleFilesRow from "./SimpleFilesRow";
 import { isMobile } from "react-device-detect";
 import styled from "styled-components";
 import marginStyles from "./CommonStyles";
+import { isTablet } from "@appserver/components/utils/device";
 import { Base } from "@appserver/components/themes";
 
 const StyledRowContainer = styled(RowContainer)`
@@ -57,11 +58,22 @@ const StyledRowContainer = styled(RowContainer)`
 
 StyledRowContainer.defaultProps = { theme: Base };
 
-const FilesRowContainer = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
+const FilesRowContainer = ({
+  filesList,
+  sectionWidth,
+  viewAs,
+  setViewAs,
+  infoPanelVisible,
+}) => {
   useEffect(() => {
     if ((viewAs !== "table" && viewAs !== "row") || !sectionWidth) return;
-
+    // 400 - it is desktop info panel width
-    if (sectionWidth < 1025 || isMobile) {
+    if (
+      (sectionWidth < 1025 && !infoPanelVisible) ||
+      ((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) &&
+        infoPanelVisible) ||
+      isMobile
+    ) {
       viewAs !== "row" && setViewAs("row");
     } else {
       viewAs !== "table" && setViewAs("table");
@@ -85,12 +97,14 @@ const FilesRowContainer = ({ filesList, sectionWidth, viewAs, setViewAs }) => {
   );
 };
 
-export default inject(({ filesStore }) => {
+export default inject(({ filesStore, infoPanelStore }) => {
   const { filesList, viewAs, setViewAs } = filesStore;
 
+  const { isVisible: infoPanelVisible } = infoPanelStore;
   return {
     filesList,
     viewAs,
     setViewAs,
+    infoPanelVisible,
   };
 })(observer(FilesRowContainer));

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableContainer.js

@@ -6,6 +6,7 @@ import TableHeader from "./TableHeader";
 import TableBody from "@appserver/components/table-container/TableBody";
 import { isMobile } from "react-device-detect";
 import styled, { css } from "styled-components";
+import { isTablet } from "@appserver/components/utils/device";
 import { Base } from "@appserver/components/themes";
 
 const marginCss = css`
@@ -103,13 +104,19 @@ const Table = ({
   setFirsElemChecked,
   setHeaderBorder,
   theme,
+  infoPanelVisible,
 }) => {
   const ref = useRef(null);
 
   useEffect(() => {
     if ((viewAs !== "table" && viewAs !== "row") || !setViewAs) return;
-
+    // 400 - it is desktop info panel width
-    if (sectionWidth < 1025 || isMobile) {
+    if (
+      (sectionWidth < 1025 && !infoPanelVisible) ||
+      ((sectionWidth < 625 || (viewAs === "row" && sectionWidth < 1025)) &&
+        infoPanelVisible) ||
+      isMobile
+    ) {
       viewAs !== "row" && setViewAs("row");
     } else {
       viewAs !== "table" && setViewAs("table");
@@ -135,7 +142,9 @@ const Table = ({
   );
 };
 
-export default inject(({ filesStore, auth }) => {
+export default inject(({ filesStore, infoPanelStore, auth }) => {
+  const { isVisible: infoPanelVisible } = infoPanelStore;
+
   const {
     filesList,
     viewAs,
@@ -151,5 +160,6 @@ export default inject(({ filesStore, auth }) => {
     setFirsElemChecked,
     setHeaderBorder,
     theme: auth.settingsStore.theme,
+    infoPanelVisible,
   };
 })(observer(Table));

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableHeader.js

@@ -6,6 +6,7 @@ import { withTranslation } from "react-i18next";
 const TABLE_VERSION = "2";
 const TABLE_COLUMNS = `filesTableColumns_ver-${TABLE_VERSION}`;
 const COLUMNS_SIZE = `filesColumnsSize_ver-${TABLE_VERSION}`;
+const COLUMNS_SIZE_INFO_PANEL = `filesColumnsSizeInfoPanel_ver-${TABLE_VERSION}`;
 
 class FilesTableHeader extends React.Component {
   constructor(props) {
@@ -21,7 +22,7 @@ class FilesTableHeader extends React.Component {
         enable: true,
         default: true,
         sortBy: "AZ",
-        minWidth: 180,
+        minWidth: 210,
         onClick: this.onFilter,
       },
       {
@@ -73,7 +74,7 @@ class FilesTableHeader extends React.Component {
         key: "QuickButtons",
         title: "",
         enable: true,
-        defaultSize: 120,
+        defaultSize: 75,
         resizable: false,
       },
     ];
@@ -205,11 +206,15 @@ class FilesTableHeader extends React.Component {
       userId,
       firstElemChecked,
       sortingVisible,
+      infoPanelVisible,
     } = this.props;
 
     const { sortBy, sortOrder } = filter;
     const { columns, resetColumnsSize } = this.state;
 
+    const columnStorageName = `${COLUMNS_SIZE}=${userId}`;
+    const columnInfoPanelStorageName = `${COLUMNS_SIZE_INFO_PANEL}=${userId}`;
+
     return (
       <TableHeader
         isLengthenHeader={firstElemChecked || isHeaderChecked}
@@ -218,17 +223,27 @@ class FilesTableHeader extends React.Component {
         sortBy={sortBy}
         containerRef={containerRef}
         columns={columns}
-        columnStorageName={`${COLUMNS_SIZE}=${userId}`}
+        columnStorageName={columnStorageName}
+        columnInfoPanelStorageName={columnInfoPanelStorageName}
         sectionWidth={sectionWidth}
         resetColumnsSize={resetColumnsSize}
         sortingVisible={sortingVisible}
+        infoPanelVisible={infoPanelVisible}
       />
     );
   }
 }
 
 export default inject(
-  ({ auth, filesStore, selectedFolderStore, treeFoldersStore }) => {
+  ({
+    auth,
+    filesStore,
+    selectedFolderStore,
+    treeFoldersStore,
+    infoPanelStore,
+  }) => {
+    const { isVisible: infoPanelVisible } = infoPanelStore;
+
     const {
       isHeaderChecked,
       setIsLoading,
@@ -258,6 +273,8 @@ export default inject(
 
       firstElemChecked,
       headerBorder,
+
+      infoPanelVisible,
     };
   }
 )(

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js

@@ -65,6 +65,11 @@ const StyledTableRow = styled(TableRow)`
     ${(props) => props.showHotkeyBorder && "border-color: #2DA7DB"}
   }
 
+  .table-container_element-wrapper,
+  .table-container_quick-buttons-wrapper {
+    padding-right: 0px;
+  }
+
   .table-container_element-wrapper,
   .table-container_row-loader {
     min-width: 36px;
@@ -102,6 +107,8 @@ const StyledTableRow = styled(TableRow)`
   }
 
   .table-container_row-context-menu-wrapper {
+    padding-right: 0px;
+
     ${(props) => props.dragging && contextMenuWrapperDraggingStyle};
     ${(props) =>
       props.showHotkeyBorder &&
@@ -374,7 +381,11 @@ const FilesTableRow = (props) => {
           />
         </TableCell>
 
-        <TableCell {...dragStyles} {...selectionProp}>
+        <TableCell
+          {...dragStyles}
+          {...selectionProp}
+          className={`${selectionProp?.className} table-container_quick-buttons-wrapper`}
+        >
           <StyledQuickButtonsContainer>
             {quickButtonsComponent}
           </StyledQuickButtonsContainer>

products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/sub-components/CellStyles.js

@@ -8,6 +8,7 @@ const StyledText = styled(Text)`
 
 const StyledAuthorCell = styled.div`
   display: flex;
+  width: 100%;
 
   .author-avatar-cell {
     width: 16px;

products/ASC.Files/Client/src/pages/Home/Section/Filter/index.js

@@ -60,6 +60,7 @@ const SectionFilterContent = ({
   setIsLoading,
   selectedFolderId,
   fetchFiles,
+  infoPanelVisible,
 }) => {
   const filterColumnCount =
     window.innerWidth < 500
@@ -112,8 +113,15 @@ const SectionFilterContent = ({
 
   const onChangeViewAs = (view) => {
     if (view === "row") {
-      if (sectionWidth < 1025 || isMobile) setViewAs("row");
+      if (
-      else setViewAs("table");
+        (sectionWidth < 1025 && !infoPanelVisible) ||
+        (sectionWidth < 625 && infoPanelVisible) ||
+        isMobile
+      ) {
+        setViewAs("row");
+      } else {
+        setViewAs("table");
+      }
     } else {
       setViewAs(view);
     }
@@ -343,7 +351,13 @@ const SectionFilterContent = ({
 };
 
 export default inject(
-  ({ auth, filesStore, treeFoldersStore, selectedFolderStore }) => {
+  ({
+    auth,
+    filesStore,
+    treeFoldersStore,
+    selectedFolderStore,
+    infoPanelStore,
+  }) => {
     const {
       fetchFiles,
       filter,
@@ -368,6 +382,8 @@ export default inject(
         authorType) &&
       !(treeFoldersStore.isPrivacyFolder && isMobile);
 
+    const { isVisible: infoPanelVisible } = infoPanelStore;
+
     return {
       customNames,
       user,
@@ -385,6 +401,7 @@ export default inject(
       createThumbnails,
 
       personal,
+      infoPanelVisible,
     };
   }
 )(

products/ASC.People/Client/src/pages/Home/Section/Body/TableView/TableHeader.js

@@ -23,7 +23,7 @@ class PeopleTableHeader extends React.Component {
         default: true,
         sortBy: "AZ",
         active: true,
-        minWidth: 180,
+        minWidth: 210,
         onClick: this.onFilter,
         onIconClick: this.onIconClick,
       },

products/ASC.People/Client/src/pages/Home/Section/Body/TableView/TableRow.js

@@ -17,6 +17,7 @@ const StyledPeopleRow = styled(TableRow)`
   }
 
   .table-container_row-checkbox-wrapper {
+    padding-right: 0px;
     padding-left: 4px;
     min-width: 46px;
 
@@ -33,6 +34,10 @@ const StyledPeopleRow = styled(TableRow)`
   .table-cell_username {
     margin-right: 12px;
   }
+
+  .table-container_row-context-menu-wrapper {
+    padding-right: 0px;
+  }
 `;
 
 const PeopleTableRow = (props) => {