Merge branch 'release/v1.2' of github.com:ONLYOFFICE/AppServer into release/v1.2

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

@@ -1,28 +1,31 @@
 import React from "react";
 import PropTypes from "prop-types";
 
-import Loaders from "@appserver/common/components/Loaders";
-
 import StyledContainer from "./StyledNavigation";
 import ArrowButton from "./sub-components/arrow-btn";
 import Text from "./sub-components/text";
 import ControlButtons from "./sub-components/control-btn";
 import DropBox from "./sub-components/drop-box";
 
-import { isMobileOnly } from "react-device-detect";
-
 import { Consumer } from "@appserver/components/utils/context";
 
 import DomHelpers from "@appserver/components/utils/domHelpers";
 import Backdrop from "@appserver/components/backdrop";
 
+import { isMobile, isMobileOnly } from "react-device-detect";
+import {
+  isMobile as isMobileUtils,
+  isTablet as isTabletUtils,
+  isDesktop as isDesktopUtils,
+} from "@appserver/components/utils/device";
+import ToggleInfoPanelButton from "./sub-components/toggle-infopanel-btn";
+
 const Navigation = ({
   tReady,
   showText,
   isRootFolder,
   title,
   canCreate,
-  isDesktop,
   isTabletView,
   personal,
   onClickFolder,
@@ -47,6 +50,12 @@ const Navigation = ({
   const dropBoxRef = React.useRef(null);
   const containerRef = React.useRef(null);
 
+  const isDesktop =
+    (!isMobile && !isTabletUtils() && !isMobileUtils()) ||
+    (isDesktopUtils() && !isMobile);
+
+  console.log(isDesktop);
+
   const onMissClick = (e) => {
     e.preventDefault;
     const path = e.path || (e.composedPath && e.composedPath());
@@ -120,6 +129,7 @@ const Navigation = ({
               )}
               <DropBox
                 {...rest}
+                isDesktop={isDesktop}
                 ref={dropBoxRef}
                 maxHeight={maxHeight}
                 dropBoxWidth={dropBoxWidth}
@@ -146,9 +156,9 @@ const Navigation = ({
             isRootFolder={isRootFolder}
             canCreate={canCreate}
             title={title}
-            isDesktop={isDesktop}
             isTabletView={isTabletView}
             isRecycleBinFolder={isRecycleBinFolder}
+            isDesktop={isDesktop}
           >
             <ArrowButton
               isRootFolder={isRootFolder}
@@ -171,8 +181,16 @@ const Navigation = ({
               clearTrash={clearTrash}
               toggleInfoPanel={toggleInfoPanel}
               isInfoPanelVisible={isInfoPanelVisible}
+              isDesktop={isDesktop}
             />
           </StyledContainer>
+          {isDesktop && (
+            <ToggleInfoPanelButton
+              isRootFolder={isRootFolder}
+              toggleInfoPanel={toggleInfoPanel}
+              isInfoPanelVisible={isInfoPanelVisible}
+            />
+          )}
         </>
       )}
     </Consumer>

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

@@ -1,9 +1,16 @@
 import styled, { css } from "styled-components";
 import { isMobileOnly } from "react-device-detect";
-import { tablet, mobile } from "@appserver/components/utils/device";
+import { tablet, mobile, isMobile } from "@appserver/components/utils/device";
 
 const StyledContainer = styled.div`
-  width: 100% !important;
+  ${(props) =>
+    !props.isDropBox &&
+    props.isDesktop &&
+    css`
+      width: fit-content;
+      max-width: calc(100% - 72px);
+    `}
+
   display: grid;
   align-items: center;
   grid-template-columns: ${(props) =>
@@ -29,6 +36,14 @@ const StyledContainer = styled.div`
     padding: ${(props) => (props.isDropBox ? "14px 0 5px" : "14px 0 15px")};
   }
 
+  ${isMobile &&
+  css`
+    width: 100%;
+    grid-template-columns: ${(props) =>
+      props.isRootFolder ? "auto 1fr" : "29px 1fr auto"};
+    padding: ${(props) => (props.isDropBox ? "14px 0 5px" : "14px 0 15px")};
+  `}
+
   @media ${mobile} {
     padding: ${(props) =>
       props.isDropBox ? "10px 0 5px" : "10px 0 11px"} !important;

packages/asc-web-common/components/Navigation/sub-components/control-btn.js

@@ -6,27 +6,26 @@ 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";
+import ToggleInfoPanelButton from "./toggle-infopanel-btn";
 
 const StyledContainer = styled.div`
   margin-left: 20px;
   display: flex;
   align-items: center;
 
+  height: 32px;
+
   .add-button {
     margin-right: 16px;
     min-width: 15px;
 
-    ${(props) =>
+    @media ${tablet} {
-      !props.isDropBox &&
+      display: none;
-      css`
+    }
-        @media ${tablet} {
-          display: none;
-        }
-      `}
 
     ${isMobile &&
     css`
-      ${(props) => !props.isDropBox && "display: none"};
+      display: none;
     `}
   }
 
@@ -127,20 +126,11 @@ const ControlButtons = ({
             />
           )}
           {!isDesktop && (
-            <StyledInfoPanelToggleWrapper
+            <ToggleInfoPanelButton
               isRootFolder={isRootFolder}
               isInfoPanelVisible={isInfoPanelVisible}
-            >
+              toggleInfoPanelAction={toggleInfoPanelAction}
-              <div className="info-panel-toggle-bg">
+            />
-                <IconButton
-                  className="info-panel-toggle"
-                  iconName="images/panel.react.svg"
-                  size="16"
-                  isFill={true}
-                  onClick={toggleInfoPanelAction}
-                />
-              </div>
-            </StyledInfoPanelToggleWrapper>
           )}
         </>
       ) : canCreate ? (
@@ -157,20 +147,13 @@ const ControlButtons = ({
               isDisabled={false}
             />
           )}
-          <StyledInfoPanelToggleWrapper
+          {!isDesktop && (
-            isRootFolder={isRootFolder}
+            <ToggleInfoPanelButton
-            isInfoPanelVisible={isInfoPanelVisible}
+              isRootFolder={isRootFolder}
-          >
+              isInfoPanelVisible={isInfoPanelVisible}
-            <div className="info-panel-toggle-bg">
+              toggleInfoPanel={toggleInfoPanelAction}
-              <IconButton
+            />
-                className="info-panel-toggle"
+          )}
-                iconName="images/panel.react.svg"
-                size="16"
-                isFill={true}
-                onClick={toggleInfoPanelAction}
-              />
-            </div>
-          </StyledInfoPanelToggleWrapper>
         </>
       ) : isRecycleBinFolder && !isEmptyFilesList ? (
         <>
@@ -181,37 +164,23 @@ const ControlButtons = ({
             onClick={clearTrash}
             className="trash-button"
           />
-          <StyledInfoPanelToggleWrapper
+          {!isDesktop && (
-            isRootFolder={isRootFolder}
+            <ToggleInfoPanelButton
-            isInfoPanelVisible={isInfoPanelVisible}
+              isRootFolder={isRootFolder}
-          >
+              isInfoPanelVisible={isInfoPanelVisible}
-            <div className="info-panel-toggle-bg">
+              toggleInfoPanelAction={toggleInfoPanelAction}
-              <IconButton
+            />
-                className="info-panel-toggle"
+          )}
-                iconName="images/panel.react.svg"
-                size="16"
-                isFill={true}
-                onClick={toggleInfoPanelAction}
-              />
-            </div>
-          </StyledInfoPanelToggleWrapper>
         </>
       ) : (
         <>
-          <StyledInfoPanelToggleWrapper
+          {!isDesktop && (
-            isRootFolder={isRootFolder}
+            <ToggleInfoPanelButton
-            isInfoPanelVisible={isInfoPanelVisible}
+              isRootFolder={isRootFolder}
-          >
+              isInfoPanelVisible={isInfoPanelVisible}
-            <div className="info-panel-toggle-bg">
+              toggleInfoPanelAction={toggleInfoPanelAction}
-              <IconButton
+            />
-                className="info-panel-toggle"
+          )}
-                iconName="images/panel.react.svg"
-                size="16"
-                isFill={true}
-                onClick={toggleInfoPanelAction}
-              />
-            </div>
-          </StyledInfoPanelToggleWrapper>
         </>
       )}
     </StyledContainer>

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

@@ -14,10 +14,8 @@ import StyledContainer from "../StyledNavigation";
 import { isMobile, isMobileOnly } from "react-device-detect";
 import {
   tablet,
-  mobile,
   isMobile as isMobileUtils,
   isTablet as isTabletUtils,
-  isDesktop as isDesktopUtils,
 } from "@appserver/components/utils/device";
 
 import { Base } from "@appserver/components/themes";
@@ -29,7 +27,7 @@ const StyledBox = styled.div`
 
   padding: ${isMobile ? "0 16px " : "0 20px"};
 
-  ${(props) => !props.isDesktop && `width: ${props.dropBoxWidth}px;`};
+  ${(props) => `width: ${props.dropBoxWidth}px;`};
 
   height: ${(props) => (props.height ? `${props.height}px` : "fit-content")};
   max-height: calc(100vh - 48px);
@@ -92,14 +90,13 @@ const DropBox = React.forwardRef(
       isInfoPanelVisible,
       maxHeight,
       isOpen,
+      isDesktop,
     },
     ref
   ) => {
     const [dropBoxHeight, setDropBoxHeight] = React.useState(0);
     const countItems = navigationItems.length;
 
-    const isDesktop = !isMobile || isDesktopUtils();
-
     const getItemSize = (index) => {
       if (index === countItems - 1) return 51;
       return isMobile || isMobileUtils() || isTabletUtils() ? 36 : 30;

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

@@ -4,32 +4,37 @@ import PropTypes from "prop-types";
 
 import ExpanderDownIcon from "@appserver/components/public/static/images/expander-down.react.svg";
 import commonIconsStyles from "@appserver/components/utils/common-icons-style";
-
+import Heading from "@appserver/components/heading";
-import Headline from "@appserver/common/components/Headline";
 
 import { tablet } from "@appserver/components/utils/device";
 import { isMobile } from "react-device-detect";
 import { Base } from "@appserver/components/themes";
 
 const StyledTextContainer = styled.div`
-  width: fit-content;
+  display: flex;
-
-  position: relative;
-  display: grid;
-
-  grid-template-columns: ${(props) =>
-    props.isRootFolder ? "auto" : "auto 12px"};
 
   align-items: center;
 
+  flex-direction: row;
+
+  position: relative;
+
+  overflow: hidden;
+
   ${(props) => !props.isRootFolder && "cursor: pointer"};
+
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 `;
 
-const StyledHeadline = styled(Headline)`
+const StyledHeading = styled(Heading)`
-  width: 100%;
   font-weight: 700;
   font-size: ${isMobile ? "21px !important" : "18px"};
   line-height: ${isMobile ? "28px !important" : "24px"};
+
+  margin: 0;
+
   @media ${tablet} {
     font-size: 21px;
     line-height: 28px;
@@ -54,7 +59,7 @@ const StyledExpanderDownIconRotate = styled(ExpanderDownIcon)`
   min-width: 8px !important;
   width: 8px !important;
   min-height: 18px !important;
-  padding: 0 4px 0 1px;
+  padding: 0 4px 0 2px;
   transform: rotate(-180deg);
 
   path {
@@ -73,9 +78,9 @@ const Text = ({ title, isRootFolder, isOpen, onClick, ...rest }) => {
       onClick={onClick}
       {...rest}
     >
-      <StyledHeadline type="content" truncate={true}>
+      <StyledHeading type="content" truncate={true}>
         {title}
-      </StyledHeadline>
+      </StyledHeading>
       {!isRootFolder ? (
         isOpen ? (
           <StyledExpanderDownIconRotate />

packages/asc-web-common/components/Navigation/sub-components/toggle-infopanel-btn.js

@@ -0,0 +1,102 @@
+import React from "react";
+import styled, { css } from "styled-components";
+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;
+  display: flex;
+  align-items: center;
+
+  height: 32px;
+
+  .add-button {
+    margin-right: 16px;
+    min-width: 15px;
+
+    @media ${tablet} {
+      display: none;
+    }
+
+    ${isMobile &&
+    css`
+      display: none;
+    `}
+  }
+
+  .option-button {
+    margin-right: 16px;
+    min-width: 15px;
+  }
+
+  .trash-button {
+    margin-right: 16px;
+    min-width: 15px;
+  }
+`;
+
+const StyledInfoPanelToggleWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+  margin-left: auto;
+
+  @media ${tablet} {
+    margin-left: ${(props) => (props.isRootFolder ? "auto" : "0")};
+  }
+
+  ${isMobile &&
+  css`
+    margin-left: ${(props) => (props.isRootFolder ? "auto" : "0")};
+  `}
+
+  .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 ToggleInfoPanelButton = ({
+  isRootFolder,
+  isInfoPanelVisible,
+  toggleInfoPanel,
+}) => {
+  return (
+    <StyledInfoPanelToggleWrapper
+      isRootFolder={isRootFolder}
+      isInfoPanelVisible={isInfoPanelVisible}
+    >
+      <div className="info-panel-toggle-bg">
+        <IconButton
+          className="info-panel-toggle"
+          iconName="images/panel.react.svg"
+          size="16"
+          isFill={true}
+          onClick={toggleInfoPanel}
+        />
+      </div>
+    </StyledInfoPanelToggleWrapper>
+  );
+};
+
+export default ToggleInfoPanelButton;

packages/asc-web-common/components/Section/sub-components/section-header.js

@@ -24,6 +24,10 @@ const StyledSectionHeader = styled.div`
   width: 100%;
   max-width: 100%;
 
+  .header-container {
+    display: flex;
+  }
+
   @media ${tablet} {
     padding-right: 16px;
     margin-right: 0px;

packages/asc-web-components/empty-screen-container/index.js

@@ -7,6 +7,8 @@ import {
   EmptyContentImage,
 } from "./styled-empty-screen-container";
 
+import { isMobile } from "react-device-detect";
+
 const EmptyScreenContainer = (props) => {
   const {
     imageSrc,
@@ -15,12 +17,15 @@ const EmptyScreenContainer = (props) => {
     subheadingText,
     descriptionText,
     buttons,
+    imageStyle,
+    buttonStyle,
   } = props;
   return (
     <EmptyContentBody {...props}>
       <EmptyContentImage
         imageSrc={imageSrc}
         imageAlt={imageAlt}
+        style={!isMobile ? imageStyle : {}}
         className="ec-image"
       />
 
@@ -54,7 +59,11 @@ const EmptyScreenContainer = (props) => {
         </Text>
       )}
 
-      {buttons && <div className="ec-buttons">{buttons}</div>}
+      {buttons && (
+        <div className="ec-buttons" style={buttonStyle}>
+          {buttons}
+        </div>
+      )}
     </EmptyContentBody>
   );
 };

packages/asc-web-components/empty-screen-container/styled-empty-screen-container.js

@@ -24,7 +24,7 @@ const EmptyContentBody = styled.div`
   grid-template-rows: max-content;
   .ec-image {
     grid-area: img;
-    margin: 0 0 0 auto;
+    margin: 16px 0 0 auto;
     ${NoUserSelect}
   }
 

products/ASC.Files/Client/public/locales/en/Home.json

@@ -17,6 +17,8 @@
   "EmptyFilterDescriptionText": "No files or folders match this filter. Try a different one or clear filter to view all files. ",
   "EmptyFilterSubheadingText": "No files to be displayed for this filter here",
   "EmptyFolderHeader": "No files in this folder",
+  "EmptyScreenFolder": "No docs here yet",
+  "EmptyFolderDecription": "Drop files here or create new ones.",
   "EmptyRecycleBin": "Empty Trash",
   "FavoritesEmptyContainerDescription": "To mark files as favorites or remove them from this list, use the context menu.",
   "FileRemoved": "File moved to Trash",
@@ -75,6 +77,7 @@
   "TooltipElementsCopyMessage": "Copy {{element}} elements",
   "TooltipElementsMoveMessage": "Move {{element}} elements",
   "TrashEmptyContainerDescription": "Trash is where all the deleted files are moved. You can restore or delete them permanently by emptying Trash. ",
+  "TrashEmptyDescription": "All deleted files are moved to 'Trash'. Restore files deleted by mistake or delete them permanently. Please note, that the files deleted from the 'Trash' cannot be restored any longer.",
   "UnblockVersion": "Unblock/Check-in",
   "UploadToFolder": "Upload to folder",
   "ViewList": "List",

products/ASC.Files/Client/public/locales/en/Settings.json

@@ -3,9 +3,11 @@
   "Common": "Common",
   "CommonSettings": "Common settings",
   "ConnectAccounts": "Connect Accounts",
+  "ConnectEmpty": "There's nothing here",
   "ConnectAccountsSubTitle": "No connected accounts",
   "ConnectAdminDescription": "For successful connection, enter the necessary data on <1>this page</1>.",
   "ConnectDescription": "You can connect the following accounts to the ONLYOFFICE Documents. The documents from these accounts will be available for editing in 'My Documents' section. ",
+  "ConnectDescriptionText": "You haven't connected any third-party clouds yet.",
   "ConnectedCloud": "Connected cloud",
   "ConnectMakeShared": "Make shared and put into the 'Common' folder",
   "ConnextOtherAccount": "Other account",

products/ASC.Files/Client/src/components/EmptyContainer/EmptyContainer.js

@@ -55,14 +55,20 @@ const EmptyFoldersContainer = (props) => {
     subheadingText,
     descriptionText,
     buttons,
+    style,
+    imageStyle,
+    buttonStyle,
   } = props;
 
   return (
     <EmptyFolderWrapper>
       <EmptyScreenContainer
         className="empty-folder_container"
+        style={style}
+        imageStyle={imageStyle}
         imageSrc={imageSrc}
         imageAlt={imageAlt}
+        buttonStyle={buttonStyle}
         headerText={headerText}
         subheadingText={subheadingText}
         descriptionText={descriptionText}

products/ASC.Files/Client/src/components/EmptyContainer/EmptyFolderContainer.js

@@ -75,8 +75,10 @@ const EmptyFolderContainer = ({
 
   return (
     <EmptyContainer
-      headerText={t("EmptyFolderHeader")}
+      headerText={t("EmptyScreenFolder")}
-      imageSrc="/static/images/empty_screen.png"
+      style={{ gridColumnGap: "39px" }}
+      descriptionText={t("EmptyFolderDecription")}
+      imageSrc="/static/images/empty_screen_alt.svg"
       buttons={buttons}
     />
   );

products/ASC.Files/Client/src/components/EmptyContainer/RootFolderContainer.js

@@ -12,6 +12,7 @@ const RootFolderContainer = (props) => {
     t,
     theme,
     isPrivacyFolder,
+    isRecycleBinFolder,
     isDesktop,
     isEncryptionSupport,
     organizationName,
@@ -29,7 +30,8 @@ const RootFolderContainer = (props) => {
   const myDescription = t("MyEmptyContainerDescription");
   const shareDescription = t("SharedEmptyContainerDescription");
   const commonDescription = t("CommonEmptyContainerDescription");
-  const trashDescription = t("TrashEmptyContainerDescription");
+  const trashHeader = t("EmptyScreenFolder");
+  const trashDescription = t("TrashEmptyDescription");
   const favoritesDescription = t("FavoritesEmptyContainerDescription");
   const recentDescription = t("RecentEmptyContainerDescription");
 
@@ -70,6 +72,7 @@ const RootFolderContainer = (props) => {
       case FolderType.Favorites:
         return {
           descriptionText: favoritesDescription,
+          imageStyle: { margin: "0px 0 0 auto" },
           imageSrc: "images/empty_screen_favorites.png",
         };
       case FolderType.Recent:
@@ -85,10 +88,12 @@ const RootFolderContainer = (props) => {
         };
       case FolderType.TRASH:
         return {
+          headerText: trashHeader,
           descriptionText: trashDescription,
+          style: { gridColumnGap: "39px", gridTemplateColumns: "150px" },
           imageSrc: theme.isBase
-            ? "images/empty_screen_trash.png"
+            ? "images/empty_screen_trash_alt.png"
-            : "images/empty_screen_trash_dark.png",
+            : "images/empty_screen_trash_alt.png",
           buttons: trashButtons,
         };
       default:
@@ -186,7 +191,8 @@ const RootFolderContainer = (props) => {
   );
 
   const headerText = isPrivacyFolder ? privateRoomHeader : title;
-  const subheadingTextProp = isPrivacyFolder ? {} : { subheadingText };
+  const subheadingTextProp =
+    isPrivacyFolder || isRecycleBinFolder ? {} : { subheadingText };
   const emptyFolderProps = getEmptyFolderProps();
 
   return (
@@ -214,11 +220,16 @@ export default inject(
       setIsLoading,
     } = filesStore;
     const { title, rootFolderType } = selectedFolderStore;
-    const { isPrivacyFolder, myFolderId } = treeFoldersStore;
+    const {
+      isPrivacyFolder,
+      myFolderId,
+      isRecycleBinFolder,
+    } = treeFoldersStore;
 
     return {
       theme,
       isPrivacyFolder,
+      isRecycleBinFolder,
       isDesktop: isDesktopClient,
       isEncryptionSupport,
       organizationName,

products/ASC.Files/Client/src/pages/Settings/Section/Body/ConnectedClouds.js

@@ -265,9 +265,11 @@ class ConnectClouds extends React.Component {
           </>
         ) : (
           <EmptyFolderContainer
-            headerText={t("ConnectAccounts")}
+            headerText={t("ConnectEmpty")}
-            subheadingText={t("ConnectAccountsSubTitle")}
+            descriptionText={t("ConnectDescriptionText")}
-            imageSrc="/static/images/empty_screen.png"
+            style={{ gridColumnGap: "39px" }}
+            buttonStyle={{ marginTop: "16px" }}
+            imageSrc="/static/images/empty_screen_alt.svg"
             buttons={
               <div className="empty-folder_container-links empty-connect_container-links">
                 <img
@@ -278,7 +280,7 @@ class ConnectClouds extends React.Component {
                 />
                 <Box className="flex-wrapper_container">
                   <Link onClick={this.onShowThirdPartyDialog} {...linkStyles}>
-                    {t("Translations:AddAccount")}
+                    {t("Common:Connect")}
                   </Link>
                 </Box>
               </div>
@@ -327,7 +329,7 @@ export default inject(
     };
   }
 )(
-  withTranslation(["Settings", "Translations"])(
+  withTranslation(["Settings", "Translations", "Common"])(
     observer(withRouter(ConnectClouds))
   )
 );

products/ASC.Files/Core/Helpers/Global.cs

@@ -131,7 +131,7 @@ namespace ASC.Web.Files.Classes
             CustomNamingPeople = customNamingPeople;
             FileSecurityCommon = fileSecurityCommon;
 
-            ThumbnailExtension = configuration["files:thumbnail:exts"] ?? "png";
+            ThumbnailExtension = configuration["files:thumbnail:exts"] ?? "jpg";
         }
 
         #region Property

products/ASC.Files/Service/Thumbnail/Builder.cs

@@ -20,7 +20,6 @@ using System.Collections.Generic;
 using System.IO;
 using System.Linq;
 using System.Net.Http;
-using System.Threading;
 using System.Threading.Tasks;
 
 using ASC.Common;
@@ -31,7 +30,6 @@ using ASC.Files.Core;
 using ASC.Web.Core.Files;
 using ASC.Web.Core.Users;
 using ASC.Web.Files.Classes;
-using ASC.Web.Files.Core;
 using ASC.Web.Files.Services.DocumentService;
 using ASC.Web.Files.Utils;
 
@@ -39,7 +37,6 @@ using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Options;
 
 using SixLabors.ImageSharp;
-using SixLabors.ImageSharp.Formats.Png;
 
 namespace ASC.Files.ThumbnailBuilder
 {
@@ -248,7 +245,7 @@ namespace ASC.Files.ThumbnailBuilder
                     attempt++;
                 }
 
-                Thread.Sleep(config.AttemptWaitInterval);
+                await Task.Delay(config.AttemptWaitInterval);
             }
             while (string.IsNullOrEmpty(thumbnailUrl));
 
@@ -306,7 +303,7 @@ namespace ASC.Files.ThumbnailBuilder
 
             var httpClient = ClientFactory.CreateClient();
             using var response = httpClient.Send(request);
-            using (var stream = new ResponseStream(response))
+            using (var stream = await response.Content.ReadAsStreamAsync())
             {
                 await Crop(fileDao, file, stream);
             }
@@ -334,13 +331,13 @@ namespace ASC.Files.ThumbnailBuilder
 
         private async Task Crop(IFileDao<T> fileDao, File<T> file, Stream stream)
         {
-            using (var sourceImg = Image.Load(stream))
+            using (var sourceImg = await Image.LoadAsync(stream))
             {
                 using (var targetImg = GetImageThumbnail(sourceImg))
                 {
                     using (var targetStream = new MemoryStream())
                     {
-                        targetImg.Save(targetStream, PngFormat.Instance);
+                        await targetImg.SaveAsJpegAsync(targetStream);
                         //targetImg.Save(targetStream, JpegFormat.Instance);
                         await fileDao.SaveThumbnailAsync(file, targetStream);
                     }

public/images/empty_screen_alt.svg

@@ -0,0 +1,27 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.668 55.166H17.168V54.666V30.666V30.166H16.668H10.668C8.70904 30.166 7.08251 31.0468 5.95291 32.2502C4.8314 33.445 4.16797 34.9917 4.16797 36.3812V54.666V55.166H4.66797H16.668Z" fill="#BDECFF" stroke="#333333"/>
+<path d="M81.3359 30.166H80.8359V30.666V46.666V47.166H81.3359H93.3359H93.8359V46.666V35.8756C93.8359 32.3422 90.8952 30.166 88.0026 30.166H81.3359Z" fill="#BDECFF" stroke="#333333"/>
+<path d="M74.668 2.16602H75.168V2.66602V55.9993V56.4993H74.668H10.668H10.168V55.9993V15.1116V14.9027L10.3166 14.7559L22.9128 2.31034L23.0588 2.16602H23.2642H74.668Z" fill="white" stroke="#333333"/>
+<path d="M22.3144 2.31246C22.4574 2.16946 22.6725 2.12669 22.8593 2.20408C23.0461 2.28147 23.168 2.46378 23.168 2.66602V14.666C23.168 14.9422 22.9441 15.166 22.668 15.166H10.668C10.4657 15.166 10.2834 15.0442 10.206 14.8574C10.1286 14.6705 10.1714 14.4555 10.3144 14.3125L22.3144 2.31246Z" fill="url(#paint0_linear_22900_255027)" stroke="#333333" stroke-linejoin="round"/>
+<path d="M87.3359 12.832H87.8359V13.332V66.6654V67.1654H87.3359H23.3359H22.8359V66.6654V25.7776V25.5687L22.9845 25.4219L35.5807 12.9764L35.7268 12.832H35.9322H87.3359Z" fill="white" stroke="#333333"/>
+<path d="M34.9824 12.9785C35.1254 12.8355 35.3404 12.7927 35.5273 12.8701C35.7141 12.9475 35.8359 13.1298 35.8359 13.332V25.332C35.8359 25.6082 35.6121 25.832 35.3359 25.832H23.3359C23.1337 25.832 22.9514 25.7102 22.874 25.5234C22.7966 25.3365 22.8394 25.1215 22.9824 24.9785L34.9824 12.9785Z" fill="#BDECFF" stroke="#333333" stroke-linejoin="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M79.3359 33.166C79.6121 33.166 79.8359 33.3899 79.8359 33.666C79.8359 33.9422 79.6121 34.166 79.3359 34.166H41.3359C41.0598 34.166 40.8359 33.9422 40.8359 33.666C40.8359 33.3899 41.0598 33.166 41.3359 33.166H79.3359ZM78.0026 48.8327H79.0026C79.2788 48.8327 79.5026 48.6088 79.5026 48.3327C79.5026 48.0565 79.2788 47.8327 79.0026 47.8327H78.0026H59.6693H30.6693C30.3931 47.8327 30.1693 48.0565 30.1693 48.3327C30.1693 48.6088 30.3931 48.8327 30.6693 48.8327H59.6693H78.0026ZM79.8359 40.9993C79.8359 40.7232 79.6121 40.4993 79.3359 40.4993H30.6693C30.3931 40.4993 30.1693 40.7232 30.1693 40.9993C30.1693 41.2755 30.3931 41.4993 30.6693 41.4993H79.3359C79.6121 41.4993 79.8359 41.2755 79.8359 40.9993Z" fill="#333333"/>
+<path d="M68.3359 24.332H46.3359" stroke="url(#paint1_linear_22900_255027)" stroke-width="2" stroke-linecap="round"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M46.889 47.7391L40.8256 54.5228H5.76494C2.86851 54.5228 0.378523 57.1271 0.695217 59.2445L6.34072 93.6567C6.66401 95.7742 8.92376 98 11.8202 98H89.363C92.2594 98 93.8473 96.1149 94.0122 93.9908L99.3019 49.1927C99.5658 47.8586 98.2198 46 95.8512 46H51.0126C49.4357 46 48.0172 46.5974 46.889 47.7391Z" fill="url(#paint2_linear_22900_255027)" stroke="#333333"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M42.668 58.666V64.0634C42.668 64.7822 42.3767 65.4329 41.9058 65.9038C41.4348 66.3748 40.7842 66.666 40.0653 66.666H34.668V65.8295H40.0653C40.5487 65.8295 40.9948 65.6312 41.3109 65.3089C41.6331 64.9867 41.8314 64.5467 41.8314 64.0634V58.666H42.668Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M65.1468 60.6223V60.5214C65.1468 60.0865 64.9586 59.6831 64.6575 59.3868C64.3501 59.0842 63.9235 58.8825 63.4719 58.851H42.2807L34.872 66.3018L36.6473 88.6543C36.6912 89.1775 36.9045 89.6503 37.237 89.9844C37.5444 90.2932 37.9647 90.4887 38.4415 90.4887H61.5334C62.0102 90.4887 62.4368 90.2932 62.7504 89.9781C63.0829 89.644 63.2962 89.1775 63.3276 88.6606L65.1468 60.6223ZM66 60.5214L64.1745 88.711C64.1243 89.436 63.8232 90.0978 63.3527 90.5769C62.8884 91.0434 62.2548 91.3333 61.5397 91.3333H38.4415C37.7263 91.3333 37.1053 91.0434 36.641 90.5832C36.1706 90.1104 35.8632 89.4423 35.8067 88.7237L34 65.9803L41.9357 58H63.3589L63.5283 58.0063C64.187 58.0504 64.8018 58.3404 65.2535 58.7816C65.7051 59.2355 66 59.8406 66 60.5214Z" fill="white"/>
+<defs>
+<linearGradient id="paint0_linear_22900_255027" x1="25.2533" y1="2.02382" x2="18.4782" y2="12.9805" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC671"/>
+<stop offset="1" stop-color="#FF6F3D"/>
+</linearGradient>
+<linearGradient id="paint1_linear_22900_255027" x1="68.3359" y1="24.293" x2="68.2485" y2="26.2906" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF8E3D"/>
+<stop offset="1" stop-color="#FF6F3D"/>
+</linearGradient>
+<linearGradient id="paint2_linear_22900_255027" x1="25.41" y1="28.8275" x2="61.3318" y2="83.9258" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FFC671"/>
+<stop offset="1" stop-color="#FF6F3D"/>
+</linearGradient>
+</defs>
+</svg>

web/ASC.Web.Core/Users/UserPhotoThumbnailManager.cs

@@ -85,12 +85,12 @@ namespace ASC.Web.Core.Users
                                      width,
                                      height);
 
-            var destRound = mainImg.Clone(x => x.Crop(rect).Resize(new ResizeOptions
+            mainImg.Mutate(x => x.BackgroundColor(Color.White).Crop(rect).Resize(new ResizeOptions
             {
                 Size = size
             }));
 
-            return destRound;
+            return mainImg;
         }
     }