Merge branch 'develop' into table-group-menu

# Conflicts: # products/ASC.Files/Client/src/store/FilesStore.js
2021-10-22 12:20:20 +03:00 · 2021-10-22 12:20:20 +03:00 · 5bd9c06c1a
commit 5bd9c06c1a
parent c2d0ff17d0 94a466ed48
51 changed files with 657 additions and 389 deletions
--- a/package.json
+++ b/package.json
@ -26,6 +26,7 @@
    "deploy:personal": "shx rm -rf build/deploy/products && shx rm -rf build/deploy/public && shx rm -rf build/deploy/studio && lerna run deploy --parallel --scope {@appserver/studio,@appserver/people,@appserver/files,@appserver/editor} && shx cp -r public build/deploy",
    "serve": "lerna run serve --parallel  --ignore @appserver/common --ignore @appserver/components --ignore @appserver/browserslist-config-asc --ignore @appserver/debug-info",
    "start": "lerna run start --parallel --ignore @appserver/common --ignore @appserver/components --ignore @appserver/browserslist-config-asc --ignore @appserver/debug-info",
+    "start:personal": "lerna run start --parallel --scope {@appserver/studio,@appserver/people,@appserver/files,@appserver/editor}",
    "start-prod": "lerna run start-prod --parallel --ignore @appserver/common --ignore @appserver/components --ignore @appserver/browserslist-config-asc --ignore @appserver/debug-info",
    "storybook": "yarn workspace @appserver/components storybook",
    "storybook-build": "yarn workspace @appserver/components run storybook-build",
--- a/packages/asc-web-common/components/Loaders/RectangleLoader/RectangleLoader.js
+++ b/packages/asc-web-common/components/Loaders/RectangleLoader/RectangleLoader.js
@ -36,7 +36,7 @@ RectangleLoader.propTypes = {
  backgroundOpacity: PropTypes.number,
  foregroundOpacity: PropTypes.number,
  speed: PropTypes.number,
-  animate: PropTypes.bool,
+  animate: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
 };

 RectangleLoader.defaultProps = {
--- a/packages/asc-web-common/components/MediaViewer/MediaViewer.js
+++ b/packages/asc-web-common/components/MediaViewer/MediaViewer.js
@ -13,6 +13,7 @@ import equal from "fast-deep-equal/react";
 import Hammer from "hammerjs";
 import IconButton from "@appserver/components/icon-button";
 import commonIconsStyles from "@appserver/components/utils/common-icons-style";
+import { isDesktop } from "react-device-detect";

 const StyledVideoViewer = styled(VideoViewer)`
  z-index: 301;
@ -104,7 +105,7 @@ class MediaViewer extends React.Component {
            document.getElementsByClassName("videoViewerOverlay")[0]
          );
        }
-        if (_this.hammer) {
+        if (_this.hammer && !isDesktop) {
          _this.hammer.on("swipeleft", _this.nextMedia);
          _this.hammer.on("swiperight", _this.prevMedia);
        }
--- a/packages/asc-web-common/components/PageLayout/index.js
+++ b/packages/asc-web-common/components/PageLayout/index.js
@ -357,7 +357,10 @@ class PageLayout extends React.Component {
                            paddingRight: "20px",
                          }}
                        ></div>
-                        <SubSectionFilter className="section-header_filter">
+                        <SubSectionFilter
+                          className="section-header_filter"
+                          viewAs={viewAs}
+                        >
                          {sectionFilterContent
                            ? sectionFilterContent.props.children
                            : null}
--- a/packages/asc-web-common/components/PageLayout/sub-components/section-body.js
+++ b/packages/asc-web-common/components/PageLayout/sub-components/section-body.js
@ -35,7 +35,12 @@ const commonStyles = css`
    flex: 1 0 auto;

    outline: none;
-    ${(props) => props.viewAs == "tile" && "padding-right:0;"}
+    ${(props) =>
+      props.viewAs == "tile" &&
+      css`
+        padding-right: 0;
+        padding-left: 20px;
+      `}

    .section-wrapper {
      display: flex;
--- a/packages/asc-web-common/components/PageLayout/sub-components/section-filter.js
+++ b/packages/asc-web-common/components/PageLayout/sub-components/section-filter.js
@ -1,11 +1,20 @@
 import React from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import equal from "fast-deep-equal/react";
-import { tablet } from "@appserver/components/utils/device";
+import { tablet, desktop } from "@appserver/components/utils/device";

 const StyledSectionFilter = styled.div`
  margin: 11px 24px 9px 0;

+  @media ${desktop} {
+    ${(props) =>
+      (props.viewAs === "table" || props.viewAs === "tile") &&
+      css`
+        margin-left: -4px;
+        margin-right: 20px;
+      `};
+  }
+
  @media ${tablet} {
    margin-left: -4px;
  }
--- a/packages/asc-web-common/components/PageLayout/sub-components/section-header.js
+++ b/packages/asc-web-common/components/PageLayout/sub-components/section-header.js
@ -18,6 +18,11 @@ const StyledSectionHeader = styled.div`
    margin-top: 64px;
  `}

+  @media ${desktop} {
+    ${(props) =>
+      (props.viewAs === "table" || props.viewAs === "tile") &&
+      "margin-left: -4px"};
+  }

  @media ${tablet} {
    ${(props) =>
--- a/packages/asc-web-common/utils/firebase.js
+++ b/packages/asc-web-common/utils/firebase.js
@ -53,8 +53,8 @@ class FirebaseHelper {
      this.config["projectId"] &&
      this.config["storageBucket"] &&
      this.config["messagingSenderId"] &&
-      this.config["appId"] &&
-      this.config["measurementId"]
+      this.config["appId"] /*&&
+      this.config["measurementId"]*/
    );
  }

--- a/packages/asc-web-components/aside/aside.js
+++ b/packages/asc-web-components/aside/aside.js
@ -24,7 +24,11 @@ const Aside = React.memo((props) => {
      contentPaddingBottom={contentPaddingBottom}
      className={`${className} not-selectable aside`}
    >
-      {withoutBodyScroll ? children : <Scrollbar>{children}</Scrollbar>}
+      {withoutBodyScroll ? (
+        children
+      ) : (
+        <Scrollbar stype="mediumBlack">{children}</Scrollbar>
+      )}
    </StyledAside>
  );
 });
--- a/packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js
+++ b/packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js
@ -311,7 +311,13 @@ class AvatarEditorBody extends React.Component {
    const desktopMode = isDesktop();
    return (
      <Text as="span">
-        <Link type="action" isHovered color="#316DAA" onClick={this.openDialog}>
+        <Link
+          type="action"
+          fontWeight={600}
+          isHovered
+          color="#316DAA"
+          onClick={this.openDialog}
+        >
          {selectNewPhotoLabel}
        </Link>{" "}
        {desktopMode && orDropFileHereLabel}
--- a/packages/asc-web-components/avatar/avatar.stories.js
+++ b/packages/asc-web-components/avatar/avatar.stories.js
@ -27,5 +27,4 @@ Default.args = {
  source: "",
  userName: "",
  editing: false,
-  editLabel: "Edit photo",
 };
--- a/packages/asc-web-components/avatar/index.js
+++ b/packages/asc-web-components/avatar/index.js
@ -4,7 +4,6 @@ import styled from "styled-components";

 import { GuestIcon, AdministratorIcon, OwnerIcon } from "./svg";
 import {
-  EditLink,
  EmptyIcon,
  EditContainer,
  AvatarWrapper,
@ -13,7 +12,7 @@ import {
  StyledImage,
  StyledAvatar,
 } from "./styled-avatar";
-import Link from "../link";
+import IconButton from "../icon-button";
 import commonIconsStyles from "../utils/common-icons-style";

 const whiteColor = "#FFFFFF";
@ -57,15 +56,7 @@ Initials.propTypes = {
 // eslint-disable-next-line react/display-name
 const Avatar = (props) => {
  //console.log("Avatar render");
-  const {
-    size,
-    source,
-    userName,
-    role,
-    editing,
-    editLabel,
-    editAction,
-  } = props;
+  const { size, source, userName, role, editing, editAction } = props;

  const avatarContent = source ? (
    <StyledImage src={source} />
@ -83,21 +74,13 @@ const Avatar = (props) => {
        {avatarContent}
      </AvatarWrapper>
      {editing && size === "max" && (
-        <EditContainer gradient={!!source}>
-          <EditLink>
-            <Link
-              type="action"
-              title={editLabel}
-              isTextOverflow={true}
-              isHovered={true}
-              fontSize="14px"
-              fontWeight={600}
+        <EditContainer>
+          <IconButton
            color={whiteColor}
+            iconName="/static/images/pencil.react.svg"
            onClick={editAction}
-            >
-              {editLabel}
-            </Link>
-          </EditLink>
+            size={16}
+          />
        </EditContainer>
      )}
      <RoleWrapper size={size}>{roleIcon}</RoleWrapper>
@ -112,8 +95,6 @@ Avatar.propTypes = {
  role: PropTypes.oneOf(["owner", "admin", "guest", "user"]),
  /** The address of the image for an image avatar */
  source: PropTypes.string,
-  /** Displays avatar edit layer */
-  editLabel: PropTypes.string,
  userName: PropTypes.string,
  editing: PropTypes.bool,
  /** Function called when the avatar change button is pressed */
@ -130,7 +111,6 @@ Avatar.defaultProps = {
  size: "medium",
  role: "",
  source: "",
-  editLabel: "Edit photo",
  userName: "",
  editing: false,
 };
--- a/packages/asc-web-components/avatar/styled-avatar.js
+++ b/packages/asc-web-components/avatar/styled-avatar.js
@ -5,23 +5,6 @@ import NoUserSelect from "../utils/commonStyles";
 import { CameraIcon } from "./svg";
 import commonIconsStyles from "../utils/common-icons-style";

-
-const EditLink = styled.div`
-  padding-left: ${(props) => props.theme.avatar.editLink.paddingLeft};
-  padding-right: ${(props) => props.theme.avatar.editLink.paddingRight};
-
-  a:hover {
-    border-bottom: ${(props) => props.theme.avatar.editLink.borderBottom};
-  }
-
-  span {
-    display: ${(props) => props.theme.avatar.editLink.display};
-    max-width: ${(props) => props.theme.avatar.editLink.maxWidth};
-    text-decoration: ${(props) => props.theme.avatar.editLink.textDecoration};
-  }
-`;
-EditLink.defaultProps = { theme: Base };
-
 const EmptyIcon = styled(CameraIcon)`
  ${commonIconsStyles}
  border-radius: ${(props) => props.theme.avatar.image.borderRadius};
@ -29,21 +12,17 @@ const EmptyIcon = styled(CameraIcon)`
 EmptyIcon.defaultProps = { theme: Base };

 const EditContainer = styled.div`
-  box-sizing: ${(props) => props.theme.avatar.editContainer.boxSizing};
  position: absolute;
-  width: ${(props) => props.theme.avatar.editContainer.width};
-  height: ${(props) => props.theme.avatar.editContainer.height};
-  top: ${(props) => props.theme.avatar.editContainer.top};
-  left: ${(props) => props.theme.avatar.editContainer.left};
-  transform: ${(props) => props.theme.avatar.editContainer.transform};
-  padding: ${(props) => props.theme.avatar.editContainer.padding};
-  text-align: ${(props) => props.theme.avatar.editContainer.textAlign};
-  line-height: ${(props) => props.theme.avatar.editContainer.lineHeight};
+  display: flex;
+  right: ${(props) => props.theme.avatar.editContainer.right};
+  bottom: ${(props) => props.theme.avatar.editContainer.bottom};
+  background-color: ${(props) =>
+    props.theme.avatar.editContainer.backgroundColor};
  border-radius: ${(props) => props.theme.avatar.editContainer.borderRadius};
-  background: ${(props) =>
-    props.gradient
-      ? props.theme.avatar.editContainer.linearGradient
-      : props.theme.avatar.editContainer.transparent};
+  height: ${(props) => props.theme.avatar.editContainer.height};
+  width: ${(props) => props.theme.avatar.editContainer.width};
+  align-items: center;
+  justify-content: center;
 `;
 EditContainer.defaultProps = { theme: Base };

@ -129,7 +108,6 @@ const StyledAvatar = styled.div`
 StyledAvatar.defaultProps = { theme: Base };

 export {
-  EditLink,
  EmptyIcon,
  EditContainer,
  AvatarWrapper,
--- a/packages/asc-web-components/context-menu/index.js
+++ b/packages/asc-web-components/context-menu/index.js
@ -32,7 +32,7 @@ class ContextMenuSub extends Component {
    });
  }

-  onItemClick(e, item) {
+  onItemClick(item, e) {
    if (item.disabled) {
      e.preventDefault();
      return;
@ -157,13 +157,16 @@ class ContextMenuSub extends Component {
    const dataKeys = Object.fromEntries(
      Object.entries(item).filter((el) => el[0].indexOf("data-") === 0)
    );
+    const onClick = (e) => {
+      this.onItemClick(item, e);
+    };
    let content = (
      <a
        href={item.url || "#"}
        className={linkClassName}
        target={item.target}
        {...dataKeys}
-        onClick={(event) => this.onItemClick(event, item, index)}
+        onClick={onClick}
        role="menuitem"
      >
        {icon}
@ -174,7 +177,7 @@ class ContextMenuSub extends Component {

    if (item.template) {
      const defaultContentOptions = {
-        onClick: (event) => this.onItemClick(event, item, index),
+        onClick,
        className: linkClassName,
        labelClassName: "p-menuitem-text",
        iconClassName,
--- a/packages/asc-web-components/drop-down/index.js
+++ b/packages/asc-web-components/drop-down/index.js
@ -80,7 +80,7 @@ class DropDown extends React.PureComponent {
    const left = rects.left < 0 && rects.width < container.width;
    const right =
      rects.width &&
-      rects.left < 250 &&
+      rects.left < (rects.width || 250) &&
      rects.left > rects.width &&
      rects.width < container.width;
    const top = rects.bottom > container.height && rects.top > rects.height;
--- a/packages/asc-web-components/scrollbar/custom-scrollbars-virtual-list.js
+++ b/packages/asc-web-components/scrollbar/custom-scrollbars-virtual-list.js
@ -2,7 +2,7 @@
 import React from "react";
 import Scrollbar from "../scrollbar";

-class CustomScrollbars extends React.Component {
+export class CustomScrollbars extends React.Component {
  refSetter = (scrollbarsRef, forwardedRef) => {
    if (scrollbarsRef) {
      forwardedRef(scrollbarsRef.view);
--- a/packages/asc-web-components/scrollbar/styled-scrollbar.js
+++ b/packages/asc-web-components/scrollbar/styled-scrollbar.js
@ -16,6 +16,11 @@ const StyledScrollbar = styled(Scrollbars)`
        ? props.color
        : props.theme.scrollbar.backgroundColorHorizontal};
  }
+
+  .nav-thumb-vertical:hover {
+    background-color: ${(props) =>
+      props.theme.scrollbar.hoverBackgroundColorVertical};
+  }
 `;

 StyledScrollbar.defaultProps = {
--- a/packages/asc-web-components/themes/base.js
+++ b/packages/asc-web-components/themes/base.js
@ -478,8 +478,9 @@ const Base = {
  },

  scrollbar: {
-    backgroundColorVertical: "#e5e5e5",
+    backgroundColorVertical: "rgba(208, 213, 218, 1)",
    backgroundColorHorizontal: "rgba(0, 0, 0, 0.1)",
+    hoverBackgroundColorVertical: "rgba(163, 169, 174, 1)",
  },

  modalDialog: {
@ -917,28 +918,12 @@ const Base = {
    },

    editContainer: {
-      boxSizing: "border-box",
-      width: "100%",
-      height: "100%",
-      top: "50%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
-      padding: "75% 16px 5px",
-      textAlign: "center",
-      lineHeight: "19px",
+      right: "0px",
+      bottom: "0px",
+      backgroundColor: "#265a8f",
      borderRadius: "50%",
-      linearGradient:
-        "linear-gradient(180deg, rgba(6, 22, 38, 0) 24.48%, rgba(6, 22, 38, 0.75) 100%)",
-      transparent: "transparent",
-    },
-
-    editLink: {
-      paddingLeft: "10px",
-      paddingRight: "10px",
-      borderBottom: "none",
-      display: "inline-block",
-      maxWidth: "100%",
-      textDecoration: "underline dashed",
+      height: "32px",
+      width: "32px",
    },

    image: {
@ -1403,7 +1388,7 @@ const Base = {
      maxWidth: "175px",

      lineHeightWithoutBorder: "16px",
-      lineHeightTextDecoration: "underline dashed transparent",
+      lineHeightTextDecoration: "underline dashed",
    },

    childrenButton: {
--- a/packages/asc-web-components/themes/dark.js
+++ b/packages/asc-web-components/themes/dark.js
@ -444,8 +444,9 @@ const Dark = {
  },

  scrollbar: {
-    backgroundColorVertical: "rgba(255, 255, 255, 0.5)",
+    backgroundColorVertical: "rgba(208, 213, 218, 1)",
    backgroundColorHorizontal: "rgba(255, 255, 255, 0.5)",
+    hoverBackgroundColorVertical: "rgba(163, 169, 174, 1)",
  },

  modalDialog: {
@ -880,29 +881,14 @@ const Dark = {
      },
    },
    editContainer: {
-      boxSizing: "border-box",
-      width: "100%",
-      height: "100%",
-      top: "50%",
-      left: "50%",
-      transform: "translate(-50%, -50%)",
-      padding: "75% 16px 5px",
-      textAlign: "center",
-      lineHeight: "19px",
+      right: "0px",
+      bottom: "0px",
+      backgroundColor: "#265a8f",
      borderRadius: "50%",
-      linearGradient:
-        "linear-gradient(180deg, rgba(6, 22, 38, 0) 24.48%, rgba(6, 22, 38, 0.75) 100%)",
-      transparent: "transparent",
+      height: "32px",
+      width: "32px",
    },

-    editLink: {
-      paddingLeft: "10px",
-      paddingRight: "10px",
-      borderBottom: "none",
-      display: "inline-block",
-      maxWidth: "100%",
-      textDecoration: "underline dashed",
-    },
    image: {
      width: "100%",
      height: "100%",
@ -1194,7 +1180,7 @@ const Dark = {
      maxWidth: "175px",

      lineHeightWithoutBorder: "16px",
-      lineHeightTextDecoration: "underline dashed transparent",
+      lineHeightTextDecoration: "underline dashed",
    },

    childrenButton: {
--- a/products/ASC.Files/Client/src/HOCs/withContent.js
+++ b/products/ASC.Files/Client/src/HOCs/withContent.js
@ -109,18 +109,19 @@ export default function withContent(WrappedContent) {
      return this.completeAction(e);
    };

-    onClickUpdateItem = (e) => {
+    onClickUpdateItem = (e, open = true) => {
      const { fileActionType } = this.props;
      fileActionType === FileAction.Create
-        ? this.createItem(e)
+        ? this.createItem(e, open)
        : this.updateItem(e);
    };

-    createItem = (e) => {
+    createItem = (e, open) => {
      const {
        createFile,
        item,
        setIsLoading,
+        isLoading,
        openDocEditor,
        isPrivacy,
        isDesktop,
@ -131,6 +132,8 @@ export default function withContent(WrappedContent) {
      } = this.props;
      const { itemTitle } = this.state;

+      if (isLoading) return;
+
      setIsLoading(true);

      const itemId = e.currentTarget.dataset.itemid;
@ -141,7 +144,7 @@ export default function withContent(WrappedContent) {
      }

      let tab =
-        !isDesktop && item.fileExst
+        !isDesktop && item.fileExst && open
          ? window.open(
              combineUrl(
                AppServerConfig.proxyURL,
@ -170,10 +173,12 @@ export default function withContent(WrappedContent) {
                    encryptedFile,
                    true,
                    false
-                  ).then(() => openDocEditor(file.id, file.providerKey, tab));
+                  ).then(
+                    () => open && openDocEditor(file.id, file.providerKey, tab)
+                  );
                });
              }
-              return openDocEditor(file.id, file.providerKey, tab);
+              return open && openDocEditor(file.id, file.providerKey, tab);
            })
            .then(() => this.completeAction(itemId))
            .catch((e) => toastr.error(e))
@ -315,6 +320,7 @@ export default function withContent(WrappedContent) {
      const { editCompleteAction } = filesActionsStore;
      const {
        setIsLoading,
+        isLoading,
        openDocEditor,
        updateFile,
        renameFolder,
@ -338,6 +344,7 @@ export default function withContent(WrappedContent) {

      return {
        setIsLoading,
+        isLoading,
        isTrashFolder: isRecycleBinFolder,
        openDocEditor,
        updateFile,
--- a/products/ASC.Files/Client/src/HOCs/withContextOptions.js
+++ b/products/ASC.Files/Client/src/HOCs/withContextOptions.js
@ -248,9 +248,10 @@ export default function withContextOptions(WrappedComponent) {
    };

    onClickShare = () => {
-      const { onSelectItem, setSharingPanelVisible, id, isFolder } = this.props;
-      onSelectItem({ id, isFolder });
+      const { setSharingPanelVisible } = this.props;
+      setTimeout(() => {
        setSharingPanelVisible(true);
+      }, 10); //TODO: remove delay after fix context menu callback
    };

    onClickMarkRead = () => {
--- a/products/ASC.Files/Client/src/HOCs/withFileActions.js
+++ b/products/ASC.Files/Client/src/HOCs/withFileActions.js
@ -96,7 +96,7 @@ export default function withFileActions(WrappedFileItem) {
      }
      e.preventDefault();
      setTooltipPosition(e.pageX, e.pageY);
-      setStartDrag(true);
+      !isFileName && setStartDrag(true);
      !isActive && setBufferSelection(null);
    };

--- a/products/ASC.Files/Client/src/components/EditingWrapperComponent.js
+++ b/products/ASC.Files/Client/src/components/EditingWrapperComponent.js
@ -46,6 +46,8 @@ const EditingWrapper = styled.div`
      border-bottom: 1px solid #eceef1;
      padding-bottom: 4px;
      margin-top: 4px;
+
+      margin-left: -4px;
    `}

  ${(props) =>
@ -149,6 +151,7 @@ const EditingWrapperComponent = (props) => {
  };

  const onFocus = (e) => e.target.select();
+  const onBlur = (e) => onClickUpdateItem(e, false);

  return (
    <EditingWrapper viewAs={viewAs}>
@ -164,6 +167,7 @@ const EditingWrapperComponent = (props) => {
        onKeyUp={onKeyUpUpdateItem}
        onKeyDown={onEscapeKeyPress}
        onFocus={onFocus}
+        onBlur={onBlur}
        isDisabled={isLoading}
        data-itemid={itemId}
        withBorder={!isTable}
--- a/products/ASC.Files/Client/src/components/panels/EmbeddingPanel/EmbeddingBody.js
+++ b/products/ASC.Files/Client/src/components/panels/EmbeddingPanel/EmbeddingBody.js
@ -0,0 +1,131 @@
+import React, { useEffect, useState, useCallback } from "react";
+import Text from "@appserver/components/text";
+import Link from "@appserver/components/link";
+import TextInput from "@appserver/components/text-input";
+import Textarea from "@appserver/components/textarea";
+import copy from "copy-to-clipboard";
+import toastr from "@appserver/components/toast/toastr";
+import IconButton from "@appserver/components/icon-button";
+import i18n from "./i18n";
+import { withTranslation, I18nextProvider } from "react-i18next";
+
+const EmbeddingBody = ({ embeddingLink, t }) => {
+  const [size, setSize] = useState("auto");
+  const [widthValue, setWidthValue] = useState("100%");
+  const [heightValue, setHeightValue] = useState("100%");
+  const getIframe = useCallback(
+    () =>
+      `<iframe src="${embeddingLink}" width="${widthValue}" height="${heightValue}" frameborder="0" scrolling="no" allowtransparency> </iframe>`,
+    [embeddingLink, widthValue, heightValue]
+  );
+  const [link, setLink] = useState(getIframe());
+
+  useEffect(() => {
+    const link = getIframe();
+    setLink(link);
+  }, [embeddingLink, widthValue, heightValue]);
+
+  const onSelectSizeMiddle = () => {
+    if (size === "600x800") return;
+
+    setSize("600x800");
+    setWidthValue("600");
+    setHeightValue("800");
+  };
+
+  const onSelectSizeSmall = () => {
+    if (size === "400x600") return;
+
+    setSize("400x600");
+    setWidthValue("400");
+    setHeightValue("600");
+  };
+  const onSelectSizeAuto = () => {
+    if (size === "auto") return;
+
+    setSize("auto");
+    setWidthValue("100%");
+    setHeightValue("100%");
+  };
+
+  const onChangeWidth = (e) => {
+    setWidthValue(e.target.value);
+  };
+  const onChangeHeight = (e) => {
+    setHeightValue(e.target.value);
+  };
+
+  const onCopyLink = () => {
+    copy(link);
+    toastr.success(t("CodeCopySuccess"));
+  };
+
+  return (
+    <div className="embedding-panel_body">
+      <Text className="embedding-panel_text">{t("Common:Size")}:</Text>
+      <div className="embedding-panel_links-container">
+        <Link
+          isHovered
+          type="action"
+          className="embedding-panel_link"
+          onClick={onSelectSizeMiddle}
+        >
+          600 x 800 px
+        </Link>
+        <Link
+          isHovered
+          type="action"
+          className="embedding-panel_link"
+          onClick={onSelectSizeSmall}
+        >
+          400 x 600 px
+        </Link>
+        <Link
+          isHovered
+          type="action"
+          className="embedding-panel_link"
+          onClick={onSelectSizeAuto}
+        >
+          {t("Auto")}
+        </Link>
+      </div>
+      <div className="embedding-panel_inputs-container">
+        <div>
+          <Text className="embedding-panel_text">{t("Width")}:</Text>
+          <TextInput
+            className="embedding-panel_input"
+            value={widthValue}
+            onChange={onChangeWidth}
+          />
+        </div>
+        <div>
+          <Text className="embedding-panel_text">{t("Height")}:</Text>
+          <TextInput
+            className="embedding-panel_input"
+            value={heightValue}
+            onChange={onChangeHeight}
+          />
+        </div>
+      </div>
+      <div className="embedding-panel_code-container">
+        <Text className="embedding-panel_text">{t("EmbedCode")}:</Text>
+        <IconButton
+          className="embedding-panel_copy-icon"
+          size="16"
+          iconName="/static/images/copy.react.svg"
+          color="#333"
+          onClick={onCopyLink}
+        />
+        <Textarea color="#AEAEAE" isReadOnly value={link} />
+      </div>
+    </div>
+  );
+};
+
+const EmbeddingBodyWrapper = withTranslation("EmbeddingPanel")(EmbeddingBody);
+
+export default (props) => (
+  <I18nextProvider i18n={i18n}>
+    <EmbeddingBodyWrapper {...props} />
+  </I18nextProvider>
+);
--- a/products/ASC.Files/Client/src/components/panels/EmbeddingPanel/index.js
+++ b/products/ASC.Files/Client/src/components/panels/EmbeddingPanel/index.js
@ -4,33 +4,18 @@ import Backdrop from "@appserver/components/backdrop";
 import Heading from "@appserver/components/heading";
 import Aside from "@appserver/components/aside";
 import IconButton from "@appserver/components/icon-button";
-import Text from "@appserver/components/text";
-import Link from "@appserver/components/link";
-import TextInput from "@appserver/components/text-input";
-import Textarea from "@appserver/components/textarea";
-import toastr from "@appserver/components/toast/toastr";
 import { withTranslation, I18nextProvider } from "react-i18next";
+import i18n from "./i18n";
 import {
  StyledEmbeddingPanel,
  StyledContent,
  StyledHeaderContent,
  StyledBody,
 } from "../StyledPanels";
-import copy from "copy-to-clipboard";
-import i18n from "./i18n";
+
+import EmbeddingBody from "./EmbeddingBody";

 class EmbeddingPanelComponent extends React.Component {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      size: "auto",
-      widthValue: "100%",
-      heightValue: "100%",
-      link: `<iframe src="${props.embeddingLink}" width="100%" height="100%" frameborder="0" scrolling="no" allowtransparency> </iframe>`,
-    };
-  }
-
  onArrowClick = () => this.props.onClose();

  onClosePanels = () => {
@ -38,81 +23,8 @@ class EmbeddingPanelComponent extends React.Component {
    this.props.onSharingPanelClose();
  };

-  onSelectSizeMiddle = () => {
-    this.state.size !== "600x800" &&
-      this.setState({ size: "600x800", widthValue: "600", heightValue: "800" });
-  };
-
-  onSelectSizeSmall = () => {
-    this.state.size !== "400x600" &&
-      this.setState({ size: "400x600", widthValue: "400", heightValue: "600" });
-  };
-  onSelectSizeAuto = () => {
-    this.state.size !== "auto" &&
-      this.setState({ size: "auto", widthValue: "100%", heightValue: "100%" });
-  };
-
-  onChangeWidth = (e) => {
-    this.setState({ widthValue: e.target.value });
-  };
-  onChangeHeight = (e) => {
-    this.setState({ heightValue: e.target.value });
-  };
-
-  onCopyLink = () => {
-    copy(this.state.link);
-    toastr.success(this.props.t("CodeCopySuccess"));
-  };
-
-  // shouldComponentUpdate(nextProps, nextState) {
-  //   const { size, widthValue, heightValue, link } = this.state;
-  //   const { visible, embeddingLink } = this.props;
-
-  //   if (size !== nextState.size) {
-  //     return true;
-  //   }
-
-  //   if (widthValue !== nextState.widthValue) {
-  //     return true;
-  //   }
-
-  //   if (heightValue !== nextState.heightValue) {
-  //     return true;
-  //   }
-
-  //   if (visible !== nextProps.visible) {
-  //     return true;
-  //   }
-
-  //   if (embeddingLink !== nextProps.embeddingLink) {
-  //     return true;
-  //   }
-
-  //   if (link !== nextState.link) {
-  //     return true;
-  //   }
-
-  //   return false;
-  // }
-
-  componentDidUpdate(prevProps, prevState) {
-    const { embeddingLink } = this.props;
-    const { widthValue, heightValue } = this.state;
-
-    if (
-      prevProps.embeddingLink !== embeddingLink ||
-      widthValue !== prevState.widthValue ||
-      heightValue !== prevState.heightValue
-    ) {
-      const link = `<iframe src="${embeddingLink}" width="${widthValue}" height="${heightValue}" frameborder="0" scrolling="no" allowtransparency> </iframe>`;
-      this.setState({ link });
-    }
-  }
-
  render() {
    const { visible, t } = this.props;
-    const { size, widthValue, heightValue, link } = this.state;
-
    const zIndex = 310;

    //console.log("EmbeddingPanel render");
@ -141,69 +53,8 @@ class EmbeddingPanelComponent extends React.Component {
                {t("EmbeddingDocument")}
              </Heading>
            </StyledHeaderContent>
-            <StyledBody size={size}>
-              <div className="embedding-panel_body">
-                <Text className="embedding-panel_text">
-                  {t("Common:Size")}:
-                </Text>
-                <div className="embedding-panel_links-container">
-                  <Link
-                    isHovered
-                    type="action"
-                    className="embedding-panel_link"
-                    onClick={this.onSelectSizeMiddle}
-                  >
-                    600 x 800 px
-                  </Link>
-                  <Link
-                    isHovered
-                    type="action"
-                    className="embedding-panel_link"
-                    onClick={this.onSelectSizeSmall}
-                  >
-                    400 x 600 px
-                  </Link>
-                  <Link
-                    isHovered
-                    type="action"
-                    className="embedding-panel_link"
-                    onClick={this.onSelectSizeAuto}
-                  >
-                    {t("Auto")}
-                  </Link>
-                </div>
-                <div className="embedding-panel_inputs-container">
-                  <div>
-                    <Text className="embedding-panel_text">{t("Width")}:</Text>
-                    <TextInput
-                      className="embedding-panel_input"
-                      value={widthValue}
-                      onChange={this.onChangeWidth}
-                    />
-                  </div>
-                  <div>
-                    <Text className="embedding-panel_text">{t("Height")}:</Text>
-                    <TextInput
-                      className="embedding-panel_input"
-                      value={heightValue}
-                      onChange={this.onChangeHeight}
-                    />
-                  </div>
-                </div>
-                <div className="embedding-panel_code-container">
-                  <Text className="embedding-panel_text">
-                    {t("EmbedCode")}:
-                  </Text>
-                  <IconButton
-                    className="embedding-panel_copy-icon"
-                    size="16"
-                    iconName="/static/images/copy.react.svg"
-                    color="#333"
-                    onClick={this.onCopyLink}
-                  />
-                  <Textarea color="#AEAEAE" isReadOnly value={link} />
-                </div>
-              </div>
+            <StyledBody>
+              <EmbeddingBody />
            </StyledBody>
          </StyledContent>
        </Aside>
@ -218,12 +69,12 @@ EmbeddingPanelComponent.propTypes = {
  onClose: PropTypes.func,
 };

-const EmbeddingPanel = withTranslation("EmbeddingPanel")(
+const EmbeddingBodyWrapper = withTranslation("EmbeddingPanel")(
  EmbeddingPanelComponent
 );

 export default (props) => (
  <I18nextProvider i18n={i18n}>
-    <EmbeddingPanel {...props} />
+    <EmbeddingBodyWrapper {...props} />
  </I18nextProvider>
 );
--- a/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js
+++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/index.js
@ -19,6 +19,7 @@ import {
  StyledFooter,
  StyledHeaderContent,
  StyledSharingBody,
+  StyledModalRowContainer,
 } from "../StyledPanels";
 import { AddUsersPanel, AddGroupsPanel, EmbeddingPanel } from "../index";
 import SharingRow from "./SharingRow";
@ -26,9 +27,12 @@ import { inject, observer } from "mobx-react";
 import config from "../../../../package.json";
 import i18n from "./i18n";
 import { I18nextProvider } from "react-i18next";
-import { isMobile } from "react-device-detect";
+import { isMobile, isMobileOnly } from "react-device-detect";
 import Loaders from "@appserver/common/components/Loaders";
 import withLoader from "../../../HOCs/withLoader";
+import ModalDialogContainer from "../../dialogs/ModalDialogContainer";
+import ModalDialog from "@appserver/components/modal-dialog";
+import EmbeddingBody from "../EmbeddingPanel/EmbeddingBody";

 const SharingBodyStyle = { height: `calc(100vh - 156px)` };

@ -50,6 +54,7 @@ class SharingPanelComponent extends React.Component {
      showPanel: false,
      accessOptions: [],
      filesOwnerId: null,
+      showEmbeddingContent: false,
    };

    this.ref = React.createRef();
@ -74,6 +79,7 @@ class SharingPanelComponent extends React.Component {
    newDataItems[0].access = rights;
    this.setState({
      shareDataItems: newDataItems,
+      showEmbeddingContent: false,
    });
  };

@ -343,6 +349,12 @@ class SharingPanelComponent extends React.Component {
      shareLink: link,
    });

+  onShowEmbeddingContainer = (link) =>
+    this.setState({
+      showEmbeddingContent: !this.state.showEmbeddingContent,
+      shareLink: link,
+    });
+
  onShowGroupsPanel = () =>
    this.setState({
      showAddGroupsPanel: !this.state.showAddGroupsPanel,
@ -448,6 +460,7 @@ class SharingPanelComponent extends React.Component {
      //showPanel,
      accessOptions,
      externalAccessOptions,
+      showEmbeddingContent,
    } = this.state;

    const visible = sharingPanelVisible;
@ -460,7 +473,66 @@ class SharingPanelComponent extends React.Component {
    const internalLink =
      selection.length === 1 && !isEncrypted && this.getInternalLink();

-    return (
+    return isPersonal && !isMobileOnly ? (
+      <ModalDialog
+        isLoading={!tReady}
+        visible={visible}
+        displayType="modal"
+        onClose={this.onClose}
+      >
+        <ModalDialog.Header>{t("SharingSettingsTitle")}</ModalDialog.Header>
+        <ModalDialog.Body>
+          <StyledModalRowContainer>
+            {!isLoading ? (
+              shareDataItems.map((item, index) => (
+                <SharingRow
+                  t={t}
+                  isPersonal={isPersonal}
+                  index={index}
+                  key={`${item.sharedTo.id}_${index}`}
+                  selection={selection}
+                  item={item}
+                  isMyId={isMyId}
+                  accessOptions={accessOptions}
+                  externalAccessOptions={externalAccessOptions}
+                  canShareOwnerChange={canShareOwnerChange}
+                  onChangeItemAccess={this.onChangeItemAccess}
+                  internalLink={internalLink}
+                  onRemoveUserClick={this.onRemoveUserItemClick}
+                  onShowEmbeddingPanel={this.onShowEmbeddingContainer}
+                  onToggleLink={this.onToggleLink}
+                  onShowChangeOwnerPanel={this.onShowChangeOwnerPanel}
+                  isLoading={isLoading}
+                  documentTitle={documentTitle}
+                />
+              ))
+            ) : (
+              <Loaders.Rectangle
+                height="47px"
+                animate={0}
+                foregroundColor="#f8f9f9"
+                backgroundColor="#f8f9f9"
+                backgroundOpacity={1}
+                foregroundOpacity={1}
+              />
+            )}
+            {showEmbeddingContent && (
+              <EmbeddingBody embeddingLink={shareLink} />
+            )}
+          </StyledModalRowContainer>
+        </ModalDialog.Body>
+        <ModalDialog.Footer>
+          <Button
+            className="sharing_panel-button"
+            label={t("Common:SaveButton")}
+            size="big"
+            primary
+            onClick={this.onSaveClick}
+            isDisabled={isLoading}
+          />
+        </ModalDialog.Footer>
+      </ModalDialog>
+    ) : (
      <StyledAsidePanel visible={visible}>
        <Backdrop
          onClick={this.onClose}
--- a/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js
+++ b/products/ASC.Files/Client/src/components/panels/SharingPanel/linkRow.js
@ -41,7 +41,11 @@ class LinkRow extends React.Component {
    const isDisabled = isLoading || disableLink;

    return (
-      <StyledLinkRow withToggle={withToggle} isDisabled={isDisabled}>
+      <StyledLinkRow
+        withToggle={withToggle}
+        isDisabled={isDisabled}
+        className="link-row__container"
+      >
        <Row
          className="link-row"
          key={`${linkText.replace(" ", "-")}-key_${index}`}
--- a/products/ASC.Files/Client/src/components/panels/StyledPanels.js
+++ b/products/ASC.Files/Client/src/components/panels/StyledPanels.js
@ -92,11 +92,11 @@ const StyledVersionHistoryPanel = styled.div`
  ${PanelStyles}
  .version-history-modal-dialog {
    transform: translateX(${(props) => (props.visible ? "0" : "720px")});
-    width: 720px;
+    width: 500px;
  }
  .version-history-aside-panel {
    transform: translateX(${(props) => (props.visible ? "0" : "720px")});
-    width: 720px;
+    width: 500px;
  }
  .version-history-panel-header {
    height: 53px;
@ -780,6 +780,125 @@ const StyledFilesList = styled.div`
    grid-template-columns: 22px 32px 1fr;
  }
 `;
+
+const StyledModalRowContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  min-height: 47px;
+
+  .link-row__container {
+    width: 100%;
+
+    .link-row {
+      border-bottom: none;
+    }
+
+    .link-row::after {
+      height: 0;
+    }
+  }
+
+  .panel_combo-box {
+    margin-left: 0px;
+
+    .combo-button {
+      height: 30px;
+      margin: 0;
+      padding: 0;
+      border: none;
+    }
+
+    .optionalBlock {
+      margin-right: 4px;
+      display: flex;
+    }
+
+    .combo-button-label {
+      margin: 0;
+    }
+
+    .sharing-access-combo-box-icon {
+      height: 16px;
+      path {
+        fill: ${(props) => (props.isDisabled ? "#D0D5DA" : "#A3A9AE")};
+      }
+
+      svg {
+        width: 16px;
+        min-width: 16px;
+        height: 16px;
+        min-height: 16px;
+      }
+    }
+  }
+
+  .embedding-panel_code-container {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  .embedding-panel_text {
+    padding: 8px 0 4px 0;
+  }
+
+  .embedding-panel_copy-icon {
+    position: absolute;
+    z-index: 1;
+    margin: 8px;
+    right: 0px;
+  }
+
+  .embedding-panel_links-container {
+    display: flex;
+    .embedding-panel_link {
+      margin-right: 8px;
+      height: 32px;
+      background-color: #eceef1;
+      line-height: 30px;
+      padding: 0px 8px;
+    }
+  }
+
+  .embedding-panel_inputs-container {
+    display: flex;
+
+    .embedding-panel_input {
+      margin-right: 8px;
+      width: 94px;
+    }
+  }
+
+  .embedding-panel_code-container {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  .embedding-panel_text {
+    padding: 8px 0 4px 0;
+  }
+
+  .embedding-panel_copy-icon {
+    position: absolute;
+    z-index: 1;
+    margin: 8px;
+    right: 0;
+  }
+
+  .panel-loader-wrapper {
+    margin-top: 8px;
+    padding-left: 32px;
+  }
+  .panel-loader {
+    display: inline;
+    margin-right: 10px;
+  }
+
+  @media (max-width: 1024px) {
+    .row_content {
+      height: 19px;
+      overflow: initial;
+    }
+  }
+`;
+
 export {
  StyledAsidePanel,
  StyledAddGroupsPanel,
@ -795,4 +914,5 @@ export {
  StyledSelectFolderPanel,
  StyledSelectFilePanel,
  StyledFilesList,
+  StyledModalRowContainer,
 };
--- a/products/ASC.Files/Client/src/components/panels/UploadPanel/FileList.js
+++ b/products/ASC.Files/Client/src/components/panels/UploadPanel/FileList.js
@ -1,10 +1,14 @@
 import React from "react";
-import CustomScrollbarsVirtualList from "@appserver/components/scrollbar/custom-scrollbars-virtual-list";
+import CustomScrollbars from "@appserver/components/scrollbar/custom-scrollbars-virtual-list";
 import AutoSizer from "react-virtualized-auto-sizer";
 import { FixedSizeList as List } from "react-window";
 import RowWrapper from "./RowWrapper";
 import { inject, observer } from "mobx-react";

+const CustomScrollbarsVirtualList = React.forwardRef((props, ref) => (
+  <CustomScrollbars stype="mediumBlack" {...props} forwardedRef={ref} />
+));
+
 const FileList = ({ uploadDataFiles }) => {
  //console.log("FileList render");

--- a/products/ASC.Files/Client/src/components/panels/UploadPanel/index.js
+++ b/products/ASC.Files/Client/src/components/panels/UploadPanel/index.js
@ -87,7 +87,11 @@ class UploadPanelComponent extends React.Component {
          zIndex={zIndex}
          isAside={true}
        />
-        <Aside className="header_aside-panel" visible={visible}>
+        <Aside
+          className="header_aside-panel"
+          visible={visible}
+          withoutBodyScroll
+        >
          <StyledContent>
            <StyledHeaderContent className="upload-panel_header-content">
              <Heading className="upload_panel-header" size="medium" truncate>
--- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js
+++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TableView/TableRow.js
@ -63,6 +63,10 @@ const StyledTableRow = styled(TableRow)`
      "url(images/cursor.palm.svg), auto"};
  }

+  .table-container_element {
+    margin-left: ${(props) => (props.isFolder ? "-3px" : "-4px")};
+  }
+
  &:hover {
    .table-container_row-checkbox-wrapper {
      ${(props) => props.dragging && rowCheckboxDraggingHoverStyle}
@ -236,6 +240,7 @@ const FilesTableRow = (props) => {
        onClick={onMouseClick}
        {...contextOptionsProps}
        isActive={isActive}
+        isFolder={item.isFolder}
        onHideContextMenu={onHideContextMenu}
        isThirdPartyFolder={item.isThirdPartyFolder}
        onDoubleClick={onFilesClick}
--- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js
+++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/FilesTileContent.js
@ -9,6 +9,7 @@ import Text from "@appserver/components/text";
 import TileContent from "./sub-components/TileContent";
 import withContent from "../../../../../HOCs/withContent";
 import withBadges from "../../../../../HOCs/withBadges";
+import { isMobile } from "react-device-detect";

 const SimpleFilesTileContent = styled(TileContent)`
  .row-main-container {
@ -54,7 +55,8 @@ const SimpleFilesTileContent = styled(TileContent)`
  }

  .title-link {
-    font-size: 14px;
+    font-size: ${isMobile ? "15px" : "13px"};
+    margin-top: 2px;
  }

  .favorite,
@ -83,18 +85,14 @@ const FilesTileContent = ({

  return (
    <>
-      <SimpleFilesTileContent
-        sideColor="#333"
-        isFile={fileExst}
-        //disableSideInfo
-      >
+      <SimpleFilesTileContent sideColor="#333" isFile={fileExst}>
        <Link
          className="title-link item-file-name"
          containerWidth="100%"
          type="page"
          title={title}
          fontWeight="600"
-          fontSize="14px"
+          fontSize={isMobile ? "15px" : "13px"}
          target="_blank"
          {...linkStyles}
          color="#333"
@ -106,7 +104,7 @@ const FilesTileContent = ({
              className="badge-ext"
              as="span"
              color="#A3A9AE"
-              fontSize="14px"
+              fontSize={isMobile ? "15px" : "13px"}
              fontWeight={600}
              truncate={true}
            >
--- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
+++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/Tile.js
@ -6,6 +6,7 @@ import { ReactSVG } from "react-svg";
 import styled, { css } from "styled-components";
 import ContextMenu from "@appserver/components/context-menu";
 import { tablet } from "@appserver/components/utils/device";
+import { isDesktop, isMobile } from "react-device-detect";

 import Link from "@appserver/components/link";

@ -100,9 +101,11 @@ const StyledTile = styled.div`
  }

  .checkbox {
+    display: flex;
    opacity: ${(props) => (props.checked ? 1 : 0)};
    flex: 0 0 16px;
    margin-right: 4px;
+    justify-content: center;

    @media ${tablet} {
      opacity: 1;
@ -112,11 +115,18 @@ const StyledTile = styled.div`
  .file-checkbox {
    display: ${(props) => (props.checked ? "flex" : "none")};
    flex: 0 0 16px;
-    margin-right: ${(props) => (props.isFolder ? "8px" : "4px")};
    margin-top: 3px;

+    margin-left: ${(props) =>
+      isMobile
+        ? css`
+            ${props.isFolder ? "6px" : "12px"};
+          `
+        : css`
+            ${props.isFolder ? "5px" : "8px"}
+          `};
+
    @media ${tablet} {
-      display: flex;
      margin-top: 2px;
    }
  }
@ -126,33 +136,47 @@ const StyledTile = styled.div`
    flex: 0 0 auto;
    margin-right: 4px;
    user-select: none;
-    margin-top: 3px;
-    margin-top: ${(props) => (props.isFolder ? "-6px" : "-4px")};
+    margin-top: ${(props) => (props.isFolder ? "-8px" : "-6px")};

-    height: 32px;
-    width: 32px;
+    height: ${isMobile ? "32px" : "24px"};
+    width: ${isMobile ? "32px" : "24px"};

    img {
-      height: 32px;
-      width: 32px;
+      height: ${isMobile ? "32px" : "24px"};
+      width: ${isMobile ? "32px" : "24px"};
    }

-    @media ${tablet} {
-      display: none;
-    }
+    margin-left: ${(props) =>
+      isMobile
+        ? css`
+            ${props.isFolder ? "2px" : "4px"};
+          `
+        : css`
+            ${props.isFolder ? "2px" : "4px"}
+          `};
  }

  .file-icon_container {
-    min-width: 36px;
-
-    @media ${tablet} {
-      min-width: 28px;
+    min-width: ${isMobile ? "36px" : "28px"};
  }
+
+  .styled-content {
+    padding-left: 10px;
+
+    padding-left: ${(props) =>
+      isMobile
+        ? css`
+            ${props.isFolder ? "8px" : "12px"};
+          `
+        : css`
+            ${props.isFolder ? "10px" : "13px"}
+          `};
  }

  :hover {
    ${(props) =>
      !props.dragging &&
+      props.isDesktop &&
      css`
        .checkbox {
          opacity: 1;
@ -173,8 +197,12 @@ const StyledFileTileTop = styled.div`
  align-items: baseline;
  background-color: #f8f9f9;
  padding: 13px;
-  height: 157px;
+  height: ${(props) => (props.checked || props.isActive ? "156px" : "156px")};
  position: relative;
+  border-bottom: ${(props) =>
+    props.checked || props.isActive
+      ? "1px solid #D0D5DA"
+      : "1px solid transparent"};

  .thumbnail-image,
  .temporary-icon > .injected-svg {
@ -195,8 +223,6 @@ const StyledFileTileBottom = styled.div`
  padding-right: 0;
  min-height: 56px;
  box-sizing: border-box;
-  border-top: ${(props) =>
-    (props.checked || props.isActive) && "1px solid #D0D5DA"};
 `;

 const StyledContent = styled.div`
@ -292,6 +318,13 @@ class Tile extends React.PureComponent {
    onSelect && onSelect(e.target.checked, item);
  };

+  onFileIconClick = () => {
+    if (isDesktop) return;
+
+    const { onSelect, item } = this.props;
+    onSelect && onSelect(true, item);
+  };
+
  render() {
    const {
      checked,
@ -348,12 +381,18 @@ class Tile extends React.PureComponent {
        isRecycleBin={isRecycleBin}
        checked={checked}
        isActive={isActive}
+        isDesktop={isDesktop}
      >
        {isFolder || (!fileExst && id === -1) ? (
          <>
            {renderElement && !(!fileExst && id === -1) && !isEdit && (
              <div className="file-icon_container">
-                <StyledElement className="file-icon">{element}</StyledElement>
+                <StyledElement
+                  className="file-icon"
+                  onClick={this.onFileIconClick}
+                >
+                  {element}
+                </StyledElement>
                <Checkbox
                  className="checkbox file-checkbox"
                  isChecked={checked}
@ -363,6 +402,7 @@ class Tile extends React.PureComponent {
              </div>
            )}
            <StyledContent
+              className="styled-content"
              isFolder={(isFolder && !fileExst) || (!fileExst && id === -1)}
            >
              {children}
@ -386,11 +426,15 @@ class Tile extends React.PureComponent {
          </>
        ) : (
          <>
-            <StyledFileTileTop>{icon}</StyledFileTileTop>
-            <StyledFileTileBottom checked={checked} isActive={isActive}>
+            <StyledFileTileTop checked={checked} isActive={isActive}>
+              {icon}
+            </StyledFileTileTop>
+            <StyledFileTileBottom>
              {id !== -1 && !isEdit && (
                <div className="file-icon_container">
-                  <div className="file-icon">{element}</div>
+                  <div className="file-icon" onClick={this.onFileIconClick}>
+                    {element}
+                  </div>
                  <Checkbox
                    className="file-checkbox"
                    isChecked={checked}
--- a/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js
+++ b/products/ASC.Files/Client/src/pages/Home/Section/Body/TilesView/sub-components/TileContainer.js
@ -1,35 +1,50 @@
 /* eslint-disable react/display-name */
 import React, { memo } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import PropTypes from "prop-types";
 import { FixedSizeList as List, areEqual } from "react-window";
 import AutoSizer from "react-virtualized-auto-sizer";
 import Heading from "@appserver/components/heading";
 import ContextMenu from "@appserver/components/context-menu";
 import CustomScrollbarsVirtualList from "@appserver/components/scrollbar";
-import { tablet } from "@appserver/components/utils/device";
+
+import { tablet, desktop } from "@appserver/components/utils/device";
+
+const foldersStyle = css`
+  grid-gap: 19px 14px;
+
+  @media ${desktop} {
+    margin-left: -1px;
+    padding-right: 1px;
+  }
+
+  @media ${tablet} {
+    grid-gap: 17px 12px;
+    margin-left: -1px;
+  }
+`;
+
+const filesStyle = css`
+  grid-gap: 14px 18px;
+
+  @media ${desktop} {
+    padding-right: 5px;
+  }
+
+  @media ${tablet} {
+    grid-gap: 12px 14px;
+    margin-left: -1px;
+    padding-right: 2px;
+  }
+`;

 const StyledGridWrapper = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  width: 100%;
-  grid-gap: ${(props) => (props.isFolders ? "13px 14px" : "16px 18px")};
  padding-bottom: 24px;
-  padding-right: 2px;
  box-sizing: border-box;
-  padding-left: 1px;
-
-  @media ${tablet} {
-    margin-left: -6px !important;
-  }
-
-  @media (min-width: 1024px) {
-    margin-left: -2px;
-  }
-
-  @media (max-width: 1024px) {
-    margin-left: -2px;
-  }
+  ${(props) => (props.isFolders ? foldersStyle : filesStyle)};
 `;

 const StyledTileContainer = styled.div`
@ -59,6 +74,8 @@ const StyledTileContainer = styled.div`
    &.files {
      padding-top: 8px;
    }
+
+    margin-left: -1px;
  }

  @media (min-width: 1024px) {
@ -68,6 +85,10 @@ const StyledTileContainer = styled.div`
      }
    }
  }
+
+  @media ${tablet} {
+    margin-right: -3px;
+  }
 `;

 class TileContainer extends React.PureComponent {
--- a/products/ASC.Files/Client/src/store/FilesStore.js
+++ b/products/ASC.Files/Client/src/store/FilesStore.js
@ -1062,7 +1062,7 @@ class FilesStore {
    const { getFileIcon, getFolderIcon } = this.formatsStore.iconFormatsStore;

    if (items.length && items[0].id === -1) return; //TODO: if change media collection from state remove this;
-    const iconSize = this.viewAs === "tile" ? 32 : 24;
+    const iconSize = this.viewAs === "tile" && isMobile ? 32 : 24;
    const icon = this.fileActionStore.extension
      ? getFileIcon(`.${this.fileActionStore.extension}`, iconSize)
      : getFolderIcon(null, iconSize);
@ -1134,7 +1134,7 @@ class FilesStore {
      const isThirdPartyFolder = providerKey && id === rootFolderId;

      //const isCanWebEdit = canWebEdit(item.fileExst);
-      const iconSize = this.viewAs === "table" ? 24 : 32;
+      const iconSize = this.viewAs === "table" ? 24 : this.viewAs === "tile" && isMobile ? 32 : 24;
      const icon = getIcon(iconSize, fileExst, providerKey, contentLength);

      let isFolder = false;
--- a/products/ASC.Files/Client/src/store/UploadDataStore.js
+++ b/products/ASC.Files/Client/src/store/UploadDataStore.js
@ -389,7 +389,7 @@ class UploadDataStore {
      this.uploadToFolder = null;
      this.percent = 0;
    }
-    if (this.converted) {
+    if (this.uploaded && this.converted) {
      this.files = [];
      this.filesToConversion = [];
    }
@ -874,13 +874,14 @@ class UploadDataStore {
      return;
    }

-    let operationItem = null;
+    let operationItem = data;
+    let finished = data.finished;

-    while (progress !== 100) {
-      await this.getOperationProgress(data.id)
-        .then((item) => {
+    while (!finished) {
+      const item = await this.getOperationProgress(data.id);
      operationItem = item;
      progress = item ? item.progress : 100;
+      finished = item.finished;

      setSecondaryProgressBarData({
        icon: pbData.icon,
@ -889,10 +890,9 @@ class UploadDataStore {
        visible: true,
        alert: false,
      });
-        })
-        .catch((err) => Promise.reject(err));
    }
-    return Promise.resolve(operationItem);
+
+    return operationItem;
  };

  moveToCopyTo = (destFolderId, pbData, isCopy) => {
--- a/products/ASC.Files/Core/Core/Dao/TeamlabDao/FolderDao.cs
+++ b/products/ASC.Files/Core/Core/Dao/TeamlabDao/FolderDao.cs
@ -515,6 +515,7 @@ namespace ASC.Files.Core.Data

                var toInsert = FilesDbContext.Tree
                    .Where(r => r.FolderId == toFolderId)
+                    .OrderBy(r => r.Level)
                    .ToList();

                foreach (var subfolder in subfolders)
@ -525,7 +526,7 @@ namespace ASC.Files.Core.Data
                        {
                            FolderId = subfolder.Key,
                            ParentId = f.ParentId,
-                            Level = f.Level + 1
+                            Level = subfolder.Value + 1 + f.Level
                        };
                        FilesDbContext.AddOrUpdate(r => r.Tree, newTree);
                    }
--- a/products/ASC.Files/Core/Services/WCFService/FileOperations/FileDownloadOperation.cs
+++ b/products/ASC.Files/Core/Services/WCFService/FileOperations/FileDownloadOperation.cs
@ -36,6 +36,7 @@ using ASC.Common.Threading;
 using ASC.Common.Web;
 using ASC.Core.Tenants;
 using ASC.Files.Core;
+using ASC.Files.Core.EF;
 using ASC.Files.Core.Resources;
 using ASC.MessagingSystem;
 using ASC.Web.Core.Files;
@ -117,9 +118,42 @@ namespace ASC.Web.Files.Services.WCFService.FileOperations
                    MimeMapping.GetMimeMapping(path),
                    "attachment; filename=\"" + fileName + "\"");
                Result = string.Format("{0}?{1}=bulk&ext={2}", filesLinkUtility.FileHandlerPath, FilesLinkUtility.Action, archiveExtension);
+
+                TaskInfo.SetProperty(PROGRESS, 100);
+                TaskInfo.SetProperty(RESULT, Result);
+                TaskInfo.SetProperty(FINISHED, true);
+
            }

-            FillDistributedTask();
+            TaskInfo.PublishChanges();
+        }
+
+        public override void PublishChanges(DistributedTask task)
+        {
+            var thirdpartyTask = ThirdPartyOperation.GetDistributedTask();
+            var daoTask = DaoOperation.GetDistributedTask();
+
+            var error1 = thirdpartyTask.GetProperty<string>(ERROR);
+            var error2 = daoTask.GetProperty<string>(ERROR);
+
+            if (!string.IsNullOrEmpty(error1))
+            {
+                Error = error1;
+            }
+            else if (!string.IsNullOrEmpty(error2))
+            {
+                Error = error2;
+            }
+
+            successProcessed = thirdpartyTask.GetProperty<int>(PROCESSED) + daoTask.GetProperty<int>(PROCESSED);
+
+            var progressSteps = ThirdPartyOperation.Total + DaoOperation.Total + 1;
+
+            var progress = (int)(successProcessed / (double)progressSteps * 100);
+
+            base.FillDistributedTask();
+
+            TaskInfo.SetProperty(PROGRESS, progress < 100 ? progress : progress);
            TaskInfo.PublishChanges();
        }
    }
@ -146,6 +180,7 @@ namespace ASC.Web.Files.Services.WCFService.FileOperations
            if (!Files.Any() && !Folders.Any()) return;

            entriesPathId = GetEntriesPathId(scope);
+
            if (entriesPathId == null || entriesPathId.Count == 0)
            {
                if (Files.Count > 0)
@ -157,6 +192,10 @@ namespace ASC.Web.Files.Services.WCFService.FileOperations
            }

            ReplaceLongPath(entriesPathId);
+
+            Total = entriesPathId.Count;
+
+            TaskInfo.PublishChanges();
        }

        private ItemNameValueCollection<T> ExecPathFromFile(IServiceScope scope, File<T> file, string path)
@ -345,6 +384,15 @@ namespace ASC.Web.Files.Services.WCFService.FileOperations
                        }
                        compressTo.CloseEntry();
                        counter++;
+
+                        if (!Equals(entryId, default(T)) && file != null)
+                        {
+                            ProcessedFile(entryId);
+                        }
+                        else
+                        {
+                            ProcessedFolder(default(T));
+                        }
                    }

                    ProgressStep();
--- a/products/ASC.Files/Core/Services/WCFService/FileOperations/FileOperation.cs
+++ b/products/ASC.Files/Core/Services/WCFService/FileOperations/FileOperation.cs
@ -149,7 +149,7 @@ namespace ASC.Web.Files.Services.WCFService.FileOperations
            base.FillDistributedTask();
        }

-        public void PublishChanges(DistributedTask task)
+        public virtual void PublishChanges(DistributedTask task)
        {
            var thirdpartyTask = ThirdPartyOperation.GetDistributedTask();
            var daoTask = DaoOperation.GetDistributedTask();
--- a/products/ASC.Files/Tests/ASC.Files.Tests.csproj
+++ b/products/ASC.Files/Tests/ASC.Files.Tests.csproj
@ -11,7 +11,7 @@
  </ItemGroup>

  <ItemGroup>
-    <PackageReference Include="AppLimit.CloudComputing.SharpBox" Version="1.1.0.456" />
+    <PackageReference Include="AppLimit.CloudComputing.SharpBox" Version="1.1.0.457" />
    <PackageReference Include="Autofac" Version="6.0.0" />
    <PackageReference Include="Autofac.Configuration" Version="6.0.0" />
    <PackageReference Include="Autofac.Extensions.DependencyInjection" Version="7.1.0" />
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactField.js
@ -21,8 +21,6 @@ class ContactField extends React.Component {
  }

  render() {
-    console.log("ContactField render");
-
    const {
      isDisabled,

--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactsField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/ContactsField.js
@ -66,8 +66,6 @@ class ContactsField extends React.Component {
  }

  render() {
-    console.log("ContactsField render");
-
    const {
      pattern,
      contacts,
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DateField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DateField.js
@ -9,8 +9,6 @@ class DateField extends React.Component {
  }

  render() {
-    console.log("DateField render");
-
    const {
      isRequired,
      hasError,
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/DepartmentField.js
@ -16,8 +16,6 @@ class DepartmentField extends React.Component {
  };

  render() {
-    console.log("DepartmentField render");
-
    const {
      isRequired,
      isDisabled,
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/EmailField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/EmailField.js
@ -9,8 +9,6 @@ class EmailField extends React.Component {
  }

  render() {
-    console.log("EmailField render");
-
    const {
      isRequired,
      hasError,
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/PasswordField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/PasswordField.js
@ -11,8 +11,6 @@ class PasswordField extends React.Component {
  }

  render() {
-    console.log("PasswordField render");
-
    const {
      isRequired,
      hasError,
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/RadioField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/RadioField.js
@ -9,8 +9,6 @@ class RadioField extends React.Component {
  }

  render() {
-    //console.log("RadioField render");
-
    const {
      isRequired,
      hasError,
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextChangeField.js
@ -18,8 +18,6 @@ class TextChangeField extends React.Component {
  }

  render() {
-    console.log("TextChangeField render");
-
    const {
      isRequired,
      hasError,
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextField.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/FormFields/TextField.js
@ -9,8 +9,6 @@ class TextField extends React.Component {
  }

  render() {
-    console.log("TextField render");
-
    const {
      isRequired,
      hasError,
--- a/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js
+++ b/products/ASC.People/Client/src/pages/ProfileAction/Section/Body/updateUserForm.js
@ -499,7 +499,6 @@ class UpdateUserForm extends React.Component {
    this.setState({ isLoading: true });
    const { profile, setAvatarMax, personal } = this.props;

-    console.log("profile", profile);
    if (isUpdate) {
      createThumbnailsAvatar(profile.id, {
        x: Math.round(result.x * avatar.defaultWidth - result.width / 2),
@ -727,7 +726,6 @@ class UpdateUserForm extends React.Component {
              source={this.props.avatarMax || profile.avatarMax}
              userName={profile.displayName}
              editing={true}
-              editLabel={t("Common:EditAvatar")}
              editAction={
                isMobile ? this.openAvatarEditorPage : this.openAvatarEditor
              }
--- a/public/images/pencil.react.svg
+++ b/public/images/pencil.react.svg
@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.35866 11.0127L0.366956 14.6494C0.204108 15.2466 0.752062 15.7945 1.34924 15.6317L4.98595 14.64C5.32177 14.5484 5.62787 14.3708 5.87399 14.1247L12.7918 7.20689L8.79177 3.20689L1.87399 10.1247C1.62787 10.3708 1.45024 10.6769 1.35866 11.0127ZM10.2059 1.79264L14.2059 5.79264L14.9985 4.99999C16.103 3.89541 16.103 2.1046 14.9985 1.00006C13.8939 -0.104537 12.103 -0.104507 10.9984 1.00012L10.2059 1.79264Z" fill="white"/>
+</svg>