ONLYOFFICE · AlexeySafronov · May 17, 2022 · May 16, 2022 · May 17, 2022 · May 17, 2022
diff --git a/packages/asc-web-common/components/FloatingButton/FloatingButton.js b/packages/asc-web-common/components/FloatingButton/FloatingButton.js
@@ -3,6 +3,7 @@ import PropTypes from "prop-types";
 import styled from "styled-components";
 
 import {
+  StyledFloatingButtonWrapper,
   StyledFloatingButton,
   StyledAlertIcon,
   StyledCircleWrap,
@@ -19,54 +20,75 @@ import ButtonAlertIcon from "../../../../public/images/button.alert.react.svg";
 import commonIconsStyles from "@appserver/components/utils/common-icons-style";
 import ButtonPlusIcon from "../../../../public/images/actions.button.plus.react.svg";
 import ButtonMinusIcon from "../../../../public/images/actions.button.minus.react.svg";
+import CloseIcon from "../../../../public/images/close-icon.react.svg";
 
 const StyledButtonAlertIcon = styled(ButtonAlertIcon)`
   ${commonIconsStyles}
 `;
 const FloatingButton = ({ id, className, style, ...rest }) => {
-  const { icon, alert, percent, onClick, color } = rest;
+  const {
+    icon,
+    alert,
+    percent,
+    onClick,
+    color,
+    clearPrimaryProgressData,
+  } = rest;
+
+  const onProgressClear = () => {
+    clearPrimaryProgressData();
+  };
 
   return (
-    <StyledCircleWrap
-      color={color}
-      id={id}
-      className={`${className} not-selectable`}
-      style={style}
-      icon={icon}
-      onClick={onClick}
-    >
-      <StyledCircle percent={percent}>
-        <div className="circle__mask circle__full">
-          <div className="circle__fill"></div>
-        </div>
-        <div className="circle__mask">
-          <div className="circle__fill"></div>
-        </div>
+    <StyledFloatingButtonWrapper>
+      <StyledCircleWrap
+        color={color}
+        id={id}
+        className={`${className} not-selectable`}
+        style={style}
+        icon={icon}
+        onClick={onClick}
+      >
+        <StyledCircle
+          displayProgress={icon != "minus" && percent !== 100}
+          percent={percent}
+        >
+          <div className="circle__mask circle__full">
+            <div className="circle__fill"></div>
+          </div>
+          <div className="circle__mask">
+            <div className="circle__fill"></div>
+          </div>
 
-        <StyledFloatingButton className="circle__background" color={color}>
-          <IconBox>
-            {icon == "upload" ? (
-              <ButtonUploadIcon />
-            ) : icon == "file" ? (
-              <ButtonFileIcon />
-            ) : icon == "trash" ? (
-              <ButtonTrashIcon />
-            ) : icon == "move" ? (
-              <ButtonMoveIcon />
-            ) : icon == "plus" ? (
-              <ButtonPlusIcon />
-            ) : icon == "minus" ? (
-              <ButtonMinusIcon />
-            ) : (
-              <ButtonDuplicateIcon />
-            )}
-          </IconBox>
-          <StyledAlertIcon>
-            {alert ? <StyledButtonAlertIcon size="medium" /> : <></>}
-          </StyledAlertIcon>
-        </StyledFloatingButton>
-      </StyledCircle>
-    </StyledCircleWrap>
+          <StyledFloatingButton className="circle__background" color={color}>
+            <IconBox>
+              {icon == "upload" ? (
+                <ButtonUploadIcon />
+              ) : icon == "file" ? (
+                <ButtonFileIcon />
+              ) : icon == "trash" ? (
+                <ButtonTrashIcon />
+              ) : icon == "move" ? (
+                <ButtonMoveIcon />
+              ) : icon == "plus" ? (
+                <ButtonPlusIcon />
+              ) : icon == "minus" ? (
+                <ButtonMinusIcon />
+              ) : (
+                <ButtonDuplicateIcon />
+              )}
+            </IconBox>
+            <StyledAlertIcon>
+              {alert ? <StyledButtonAlertIcon size="medium" /> : <></>}
+            </StyledAlertIcon>
+          </StyledFloatingButton>
+        </StyledCircle>
+      </StyledCircleWrap>
+      <CloseIcon
+        className="layout-progress-bar_close-icon"
+        onClick={onProgressClear}
+      />
+    </StyledFloatingButtonWrapper>
   );
 };
 

diff --git a/packages/asc-web-common/components/FloatingButton/StyledFloatingButton.js b/packages/asc-web-common/components/FloatingButton/StyledFloatingButton.js
@@ -1,5 +1,41 @@
 import Base from "@appserver/components/themes/base";
 import styled, { keyframes, css } from "styled-components";
+import { desktop, tablet } from "@appserver/components/utils/device";
+
+const StyledFloatingButtonWrapper = styled.div`
+  @media ${desktop} {
+    position: absolute;
+    z-index: 300;
+    width: 100px;
+    height: 70px;
+    right: 0;
+    bottom: 0;
+  }
+
+  .layout-progress-bar_close-icon {
+    display: none;
+    position: absolute;
+    cursor: pointer;
+    right: 77px;
+    bottom: 33px;
+  }
+  :hover {
+    .layout-progress-bar_close-icon {
+      display: block;
+    }
+    @media ${tablet} {
+      .layout-progress-bar_close-icon {
+        display: none;
+      }
+    }
+  }
+
+  @media ${tablet} {
+    .layout-progress-bar_close-icon {
+      display: none;
+    }
+  }
+`;
 
 const StyledCircleWrap = styled.div`
   position: relative;
@@ -63,7 +99,10 @@ const StyledCircle = styled.div`
 
   .circle__mask .circle__fill {
     clip: rect(0px, 21px, 42px, 0px);
-    background-color: ${(props) => props.theme.floatingButton.color};
+    background-color: ${(props) =>
+      !props.displayProgress
+        ? "transparent !important"
+        : props.theme.floatingButton.color};
   }
 
   .circle__mask.circle__full {
@@ -130,6 +169,7 @@ const StyledAlertIcon = styled.div`
 `;
 
 export {
+  StyledFloatingButtonWrapper,
   StyledCircleWrap,
   StyledCircle,
   StyledFloatingButton,

diff --git a/packages/asc-web-common/components/Section/index.js b/packages/asc-web-common/components/Section/index.js
@@ -220,6 +220,7 @@ class Section extends React.Component {
       infoPanelIsVisible,
       isInfoPanelAvailable,
       settingsStudio,
+      clearPrimaryProgressData,
     } = this.props;
 
     let sectionHeaderContent = null;
@@ -445,6 +446,7 @@ class Section extends React.Component {
                           percent={primaryProgressBarValue}
                           alert={showPrimaryButtonAlert}
                           onClick={onOpenUploadPanel}
+                          clearPrimaryProgressData={clearPrimaryProgressData}
                         />
                       ) : !showPrimaryProgressBar &&
                         showSecondaryProgressBar ? (

diff --git a/packages/asc-web-components/main-button-mobile/index.js b/packages/asc-web-components/main-button-mobile/index.js
@@ -11,6 +11,7 @@ import {
   StyledBar,
   StyledButtonWrapper,
   StyledButtonOptions,
+  StyledAlertIcon,
 } from "./styled-main-button";
 import IconButton from "../icon-button";
 import Button from "../button";
@@ -19,6 +20,14 @@ import Scrollbar from "@appserver/components/scrollbar";
 import { isMobile } from "react-device-detect";
 import Backdrop from "../backdrop";
 
+import styled from "styled-components";
+import ButtonAlertIcon from "../../../public/images/main-button.alert.react.svg";
+import commonIconsStyles from "../utils/common-icons-style";
+
+const StyledButtonAlertIcon = styled(ButtonAlertIcon)`
+  ${commonIconsStyles}
+`;
+
 const ProgressBarMobile = ({
   label,
   status,
@@ -40,14 +49,14 @@ const ProgressBarMobile = ({
   return (
     <StyledProgressBarContainer isUploading={open}>
       <Text
-        onClick={onClickHeaderAction}
         className="progress-header"
         fontSize={`14`}
         // color="#657077"
+        onClick={onClickHeaderAction}
       >
         {label}
       </Text>
-      <Text className="progress_count" fontSize={`13`}>
+      <Text className="progress_count" fontSize={`13`} truncate>
         {status}
       </Text>
       <IconButton
@@ -94,6 +103,7 @@ const MainButtonMobile = (props) => {
     isOpenButton,
     onClose,
     sectionWidth,
+    alert,
   } = props;
 
   const [isOpen, setIsOpen] = useState(opened);
@@ -260,6 +270,9 @@ const MainButtonMobile = (props) => {
             children
           )}
         </StyledDropDown>
+        <StyledAlertIcon>
+          {alert && !isOpen ? <StyledButtonAlertIcon size="small" /> : <></>}
+        </StyledAlertIcon>
       </div>
     </>
   );

diff --git a/packages/asc-web-components/main-button-mobile/styled-main-button.js b/packages/asc-web-components/main-button-mobile/styled-main-button.js
@@ -14,14 +14,15 @@ const StyledFloatingButton = styled(FloatingButton)`
 
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 
+  .circle__background {
+    background: ${(props) => props.theme.mainButtonMobile.buttonColor};
+  }
+
   .circle__mask + div {
     display: flex;
     align-items: center;
     justify-content: center;
 
-    background: ${(props) =>
-      props.theme.mainButtonMobile.buttonColor} !important;
-
     div {
       padding-top: 0;
       display: flex;
@@ -236,6 +237,15 @@ const StyledBar = styled.div`
       : props.theme.mainButtonMobile.bar.background};
 `;
 
+const StyledAlertIcon = styled.div`
+  position: absolute;
+  z-index: 1010;
+  width: 12px;
+  height: 12px;
+  left: 26px;
+  top: 6px;
+`;
+
 StyledBar.defaultProps = { theme: Base };
 
 export {
@@ -249,4 +259,5 @@ export {
   StyledBar,
   StyledButtonWrapper,
   StyledButtonOptions,
+  StyledAlertIcon,
 };
diff --git a/products/ASC.Files/Client/public/locales/en/Article.json b/products/ASC.Files/Client/public/locales/en/Article.json
@@ -10,5 +10,6 @@
   "NewSpreadsheet": "New Spreadsheet",
   "UploadFiles": "Upload files",
   "UploadFolder": "Upload folder",
-  "Upload": "Upload"
+  "Upload": "Upload",
+  "FilesUploaded": "Files uploaded"
 }
diff --git a/products/ASC.Files/Client/public/locales/ru/Article.json b/products/ASC.Files/Client/public/locales/ru/Article.json
@@ -10,5 +10,6 @@
   "NewSpreadsheet": "Новая таблица",
   "UploadFiles": "Загрузить файлы",
   "UploadFolder": "Загрузить папку",
-  "Upload": "Загрузить"
+  "Upload": "Загрузить",
+  "FilesUploaded": "Файлы загружены"
 }
diff --git a/products/ASC.Files/Client/src/components/Article/MainButton/MobileView.js b/products/ASC.Files/Client/src/components/Article/MainButton/MobileView.js
@@ -38,6 +38,7 @@ const MobileView = ({
   primaryProgressDataVisible,
   primaryProgressDataPercent,
   primaryProgressDataLoadingFile,
+  primaryProgressDataAlert,
   clearPrimaryProgressData,
   secondaryProgressDataStoreVisible,
   secondaryProgressDataStorePercent,
@@ -92,13 +93,12 @@ const MobileView = ({
         key: "primary-progress",
         open: primaryProgressDataVisible,
         label: t("UploadPanel:Uploads"),
-        icon: "/static/images/mobile.actions.remove.react.svg",
+        icon: "/static/images/cross.sidebar.react.svg",
         percent: primaryProgressDataPercent,
-        status: `${
+        status:
           primaryProgressDataPercent === 100
-            ? files.length
-            : currentPrimaryNumEl
-        }/${files.length}`,
+            ? t("FilesUploaded")
+            : `${currentPrimaryNumEl}/${files.length}`,
         onClick: showUploadPanel,
         onCancel: clearUploadPanel,
       },
@@ -157,6 +157,7 @@ const MobileView = ({
       progressOptions={progressOptions}
       title={titleProp}
       withButton={true}
+      alert={primaryProgressDataAlert}
     />
   );
 };
@@ -174,6 +175,7 @@ export default inject(({ uploadDataStore }) => {
     visible: primaryProgressDataVisible,
     percent: primaryProgressDataPercent,
     loadingFile: primaryProgressDataLoadingFile,
+    alert: primaryProgressDataAlert,
     clearPrimaryProgressData,
   } = primaryProgressDataStore;
 
@@ -192,6 +194,7 @@ export default inject(({ uploadDataStore }) => {
     primaryProgressDataVisible,
     primaryProgressDataPercent,
     primaryProgressDataLoadingFile,
+    primaryProgressDataAlert,
     clearPrimaryProgressData,
     secondaryProgressDataStoreVisible,
     secondaryProgressDataStorePercent,

diff --git a/products/ASC.Files/Client/src/pages/Home/index.js b/products/ASC.Files/Client/src/pages/Home/index.js
@@ -295,6 +295,7 @@ class PureHome extends React.Component {
       primaryProgressDataPercent,
       primaryProgressDataIcon,
       primaryProgressDataAlert,
+      clearPrimaryProgressData,
 
       secondaryProgressDataStoreVisible,
       secondaryProgressDataStorePercent,
@@ -328,6 +329,7 @@ class PureHome extends React.Component {
           secondaryProgressBarValue={secondaryProgressDataStorePercent}
           secondaryProgressBarIcon={secondaryProgressDataStoreIcon}
           showSecondaryButtonAlert={secondaryProgressDataStoreAlert}
+          clearPrimaryProgressData={clearPrimaryProgressData}
           viewAs={viewAs}
           hideAside={
             !!fileActionId ||