Merge branch 'feature/virtual-rooms-1.2' into selectors-redesign

ONLYOFFICE · Apr 10, 2022 · 34d4b5d · 34d4b5d
2 parents 87e1222 + df580e9
commit 34d4b5d
Show file tree

Hide file tree

Showing 103 changed files with 3,614 additions and 808 deletions.
diff --git a/build/install/win/AppServer.aip b/build/install/win/AppServer.aip
diff --git a/common/ASC.IPSecurity/IPRestrictionsRepository.cs b/common/ASC.IPSecurity/IPRestrictionsRepository.cs
@@ -75,6 +75,7 @@ public List<string> Save(IEnumerable<string> ips, int tenant)
             });
 
             TenantDbContext.TenantIpRestrictions.AddRange(ipsList);
+            TenantDbContext.SaveChanges();
 
             tx.Commit();
             return ips.ToList();

diff --git a/config/appsettings.json b/config/appsettings.json
@@ -159,7 +159,7 @@
         "enabled": "true"
     },
     "thumbnail": { 
-        "thumbnaillHeight": 156,
-        "thumbnaillWidth": 216
+        "thumbnaillHeight": 260,
+        "thumbnaillWidth": 360
     }
 }
diff --git a/config/kafka.json b/config/kafka.json
@@ -1,5 +1,5 @@
-{
-  "kafka": {
-    "BootstrapServers": ""
-  }
-}
+{
+  "kafka": {
+    "BootstrapServers": "localhost:9092"
+  }
+}
diff --git a/packages/asc-web-common/components/FilterInput/index.js b/packages/asc-web-common/components/FilterInput/index.js
@@ -13,103 +13,105 @@ import SortButton from "./sub-components/SortButton";
 
 import { StyledFilterInput, StyledSearchInput } from "./StyledFilterInput";
 
-const FilterInput = ({
-  t,
-  sectionWidth,
-  getFilterData,
-  getSortData,
-  getViewSettingsData,
-  getSelectedFilterData,
-  onFilter,
-  onSearch,
-  onSort,
-  onChangeViewAs,
-  viewAs,
-  placeholder,
-  contextMenuHeader,
-  headerLabel,
-  viewSelectorVisible,
-  isRecentFolder,
-  isFavoritesFolder,
-  ...props
-}) => {
-  const [viewSettings, setViewSettings] = React.useState([]);
-  const [selectedFilterData, setSelectedFilterData] = React.useState([]);
-
-  const [inputValue, setInputValue] = React.useState("");
-
-  const getSelectedFilterDataAction = React.useCallback(async () => {
-    const data = await getSelectedFilterData();
-
-    setSelectedFilterData(data);
-    setInputValue(!!data.inputValue ? data.inputValue : "");
-  }, [getSelectedFilterData]);
-
-  React.useEffect(() => {
-    getSelectedFilterDataAction();
-  }, [getSelectedFilterData]);
-
-  React.useEffect(() => {
-    getViewSettingsData && setViewSettings(getViewSettingsData());
-  }, [getViewSettingsData]);
-
-  const onClearSearch = () => {
-    onSearch && onSearch();
-  };
-
-  return (
-    <StyledFilterInput {...props} sectionWidth={sectionWidth}>
-      <StyledSearchInput
-        placeholder={placeholder}
-        value={inputValue}
-        onChange={onSearch}
-        onClearSearch={onClearSearch}
-      />
-
-      <FilterButton
-        t={t}
-        selectedFilterData={selectedFilterData}
-        contextMenuHeader={contextMenuHeader}
-        getFilterData={getFilterData}
-        onFilter={onFilter}
-        headerLabel={headerLabel}
-      />
-
-      {viewSettings &&
-      !isMobile &&
-      viewSelectorVisible &&
-      !isMobileUtils() &&
-      !isTabletUtils() ? (
-        <ViewSelector
-          style={{ marginLeft: "8px" }}
-          onChangeView={onChangeViewAs}
-          viewAs={viewAs === "table" ? "row" : viewAs}
-          viewSettings={viewSettings}
+const FilterInput = React.memo(
+  ({
+    t,
+    sectionWidth,
+    getFilterData,
+    getSortData,
+    getViewSettingsData,
+    getSelectedFilterData,
+    onFilter,
+    onSearch,
+    onSort,
+    onChangeViewAs,
+    viewAs,
+    placeholder,
+    contextMenuHeader,
+    headerLabel,
+    viewSelectorVisible,
+    isRecentFolder,
+    isFavoritesFolder,
+    ...props
+  }) => {
+    const [viewSettings, setViewSettings] = React.useState([]);
+    const [selectedFilterData, setSelectedFilterData] = React.useState([]);
+
+    const [inputValue, setInputValue] = React.useState("");
+
+    const getSelectedFilterDataAction = React.useCallback(async () => {
+      const data = await getSelectedFilterData();
+
+      setSelectedFilterData(data);
+      setInputValue(!!data.inputValue ? data.inputValue : "");
+    }, [getSelectedFilterData]);
+
+    React.useEffect(() => {
+      getSelectedFilterDataAction();
+    }, [getSelectedFilterData]);
+
+    React.useEffect(() => {
+      getViewSettingsData && setViewSettings(getViewSettingsData());
+    }, [getViewSettingsData]);
+
+    const onClearSearch = () => {
+      onSearch && onSearch();
+    };
+
+    return (
+      <StyledFilterInput {...props} sectionWidth={sectionWidth}>
+        <StyledSearchInput
+          placeholder={placeholder}
+          value={inputValue}
+          onChange={onSearch}
+          onClearSearch={onClearSearch}
         />
-      ) : (
-        <>
-          {(isMobile || isTabletUtils() || isMobileUtils()) && (
-            <SortButton
-              t={t}
-              selectedFilterData={selectedFilterData}
-              getSortData={getSortData}
-              onChangeViewAs={onChangeViewAs}
-              viewAs={viewAs === "table" ? "row" : viewAs}
-              viewSettings={viewSettings}
-              onSort={onSort}
-              viewSelectorVisible={viewSelectorVisible}
-              isRecentFolder={isRecentFolder}
-              isFavoritesFolder={isFavoritesFolder}
-            />
-          )}
-        </>
-      )}
-    </StyledFilterInput>
-  );
-};
+
+        <FilterButton
+          t={t}
+          selectedFilterData={selectedFilterData}
+          contextMenuHeader={contextMenuHeader}
+          getFilterData={getFilterData}
+          onFilter={onFilter}
+          headerLabel={headerLabel}
+        />
+
+        {viewSettings &&
+        !isMobile &&
+        viewSelectorVisible &&
+        !isMobileUtils() &&
+        !isTabletUtils() ? (
+          <ViewSelector
+            style={{ marginLeft: "8px" }}
+            onChangeView={onChangeViewAs}
+            viewAs={viewAs === "table" ? "row" : viewAs}
+            viewSettings={viewSettings}
+          />
+        ) : (
+          <>
+            {(isMobile || isTabletUtils() || isMobileUtils()) && (
+              <SortButton
+                t={t}
+                selectedFilterData={selectedFilterData}
+                getSortData={getSortData}
+                onChangeViewAs={onChangeViewAs}
+                viewAs={viewAs === "table" ? "row" : viewAs}
+                viewSettings={viewSettings}
+                onSort={onSort}
+                viewSelectorVisible={viewSelectorVisible}
+                isRecentFolder={isRecentFolder}
+                isFavoritesFolder={isFavoritesFolder}
+              />
+            )}
+          </>
+        )}
+      </StyledFilterInput>
+    );
+  }
+);
 
 FilterInput.defaultProps = {
   viewSelectorVisible: false,
 };
 
-export default React.memo(FilterInput);
+export default FilterInput;
diff --git a/packages/asc-web-common/components/Navigation/Navigation.js b/packages/asc-web-common/components/Navigation/Navigation.js
@@ -30,6 +30,10 @@ const Navigation = ({
   isRecycleBinFolder,
   isEmptyFilesList,
   clearTrash,
+  showFolderInfo,
+  isCurrentFolderInfo,
+  toggleInfoPanel,
+  isInfoPanelVisible,
   ...rest
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
@@ -101,6 +105,8 @@ const Navigation = ({
               getContextOptionsFolder={getContextOptionsFolder}
               getContextOptionsPlus={getContextOptionsPlus}
               toggleDropBox={toggleDropBox}
+              toggleInfoPanel={toggleInfoPanel}
+              isInfoPanelVisible={isInfoPanelVisible}
               onClickAvailable={onClickAvailable}
             />
           )}
@@ -133,6 +139,8 @@ const Navigation = ({
               isRecycleBinFolder={isRecycleBinFolder}
               isEmptyFilesList={isEmptyFilesList}
               clearTrash={clearTrash}
+              toggleInfoPanel={toggleInfoPanel}
+              isInfoPanelVisible={isInfoPanelVisible}
             />
           </StyledContainer>
         </>

diff --git a/packages/asc-web-common/components/Navigation/StyledNavigation.js b/packages/asc-web-common/components/Navigation/StyledNavigation.js
@@ -3,16 +3,13 @@ import { isMobile, isMobileOnly } from "react-device-detect";
 import { tablet, desktop, mobile } from "@appserver/components/utils/device";
 
 const StyledContainer = styled.div`
-  padding: ${(props) => (props.isDropBox ? "14px 0 3px" : "14px 0 0px")};
-
-  width: fit-content;
-
+  width: 100% !important;
   display: grid;
-
+  align-items: center;
   grid-template-columns: ${(props) =>
-    props.isRootFolder ? "1fr auto" : "29px 1fr auto"};
+    props.isRootFolder ? "auto 1fr" : "29px auto 1fr"};
 
-  align-items: center;
+  padding: ${(props) => (props.isDropBox ? "10px 0 5px" : "10px 0 11px")};
 
   .arrow-button {
     width: 17px;
@@ -21,25 +18,25 @@ const StyledContainer = styled.div`
 
   @media ${tablet} {
     width: 100%;
-    padding: ${(props) => (props.isDropBox ? "16px 0 5px" : "16px 0 0px")};
+    padding: ${(props) => (props.isDropBox ? "14px 0 5px" : "14px 0 15px")};
   }
   ${isMobile &&
   css`
     width: 100%;
     padding: ${(props) =>
-      props.isDropBox ? "16px 0 5px" : " 16px 0 0px"} !important;
+      props.isDropBox ? "12px 0 5px" : " 12px 0 13px"} !important;
   `}
 
   @media ${mobile} {
-    width: 100%;
-    padding: ${(props) => (props.isDropBox ? "12px 0 5px" : "12px 0 0")};
+    padding: ${(props) =>
+      props.isDropBox ? "10px 0 5px" : "10px 0 11px"} !important;
   }
 
   ${isMobileOnly &&
   css`
     width: 100% !important;
     padding: ${(props) =>
-      props.isDropBox ? "18px 0 5px" : "18px 0 0"} !important;
+      props.isDropBox ? "10px 0 5px" : "10px 0 11px"} !important;
   `}
 `;
 

diff --git a/packages/asc-web-common/components/Navigation/sub-components/control-btn.js b/packages/asc-web-common/components/Navigation/sub-components/control-btn.js
@@ -5,6 +5,7 @@ import ContextMenuButton from "@appserver/components/context-menu-button";
 import IconButton from "@appserver/components/icon-button";
 import { isMobile } from "react-device-detect";
 import { tablet } from "@appserver/components/utils/device";
+import { Base } from "@appserver/components/themes";
 
 const StyledContainer = styled.div`
   margin-left: 20px;
@@ -30,7 +31,7 @@ const StyledContainer = styled.div`
   }
 
   .option-button {
-    margin-right: 8px;
+    margin-right: 15px;
     min-width: 17px;
   }
 
@@ -39,6 +40,35 @@ const StyledContainer = styled.div`
   }
 `;
 
+const StyledInfoPanelToggleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+  margin-left: auto;
+
+  .info-panel-toggle-bg {
+    height: 32px;
+    width: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    background-color: ${(props) =>
+      props.isInfoPanelVisible
+        ? props.theme.infoPanel.sectionHeaderToggleBgActive
+        : props.theme.infoPanel.sectionHeaderToggleBg};
+
+    path {
+      fill: ${(props) =>
+        props.isInfoPanelVisible
+          ? props.theme.infoPanel.sectionHeaderToggleIconActive
+          : props.theme.infoPanel.sectionHeaderToggleIcon};
+    }
+  }
+`;
+StyledInfoPanelToggleWrapper.defaultProps = { theme: Base };
+
 const ControlButtons = ({
   personal,
   isDropBox,
@@ -49,6 +79,8 @@ const ControlButtons = ({
   isRecycleBinFolder,
   isEmptyFilesList,
   clearTrash,
+  isInfoPanelVisible,
+  toggleInfoPanel,
 }) => {
   return (
     <StyledContainer isDropBox={isDropBox}>
@@ -96,6 +128,20 @@ const ControlButtons = ({
       ) : (
         <></>
       )}
+      <StyledInfoPanelToggleWrapper
+        isRootFolder={isRootFolder}
+        isInfoPanelVisible={isInfoPanelVisible}
+      >
+        <div className="info-panel-toggle-bg">
+          <IconButton
+            className="info-panel-toggle"
+            iconName="images/panel.svg"
+            size="16"
+            isFill={true}
+            onClick={toggleInfoPanel}
+          />
+        </div>
+      </StyledInfoPanelToggleWrapper>
     </StyledContainer>
   );
 };