Merge branch 'feature/files' into feature/payments-enterprise

2020-09-25 10:44:31 +03:00 · 2020-09-25 10:44:31 +03:00 · eac4556983
commit eac4556983
parent c9a8fcbd13 aca3543ec1
15 changed files with 124 additions and 35 deletions
--- a/products/ASC.Files/Client/src/components/pages/Home/index.js
+++ b/products/ASC.Files/Client/src/components/pages/Home/index.js
@ -317,7 +317,8 @@ class PureHome extends React.Component {
      progressData,
      viewAs,
      isLoading,
-      convertDialogVisible
+      convertDialogVisible,
+      fileActionId
    } = this.props;

    // const progressBarContent = (
@ -370,6 +371,7 @@ class PureHome extends React.Component {
          //progressBarDropDownContent={progressBarContent}
          progressBarLabel={progressData.label}
          viewAs={viewAs}
+          hideAside={fileActionId || progressData.visible}
        >
          <PageLayout.ArticleHeader>
            <ArticleHeaderContent />
--- a/products/ASC.People/Client/src/components/dialogs/InviteDialog/index.js
+++ b/products/ASC.People/Client/src/components/dialogs/InviteDialog/index.js
@ -2,7 +2,6 @@ import React from "react";
 import { connect } from "react-redux";
 import PropTypes from "prop-types";
 import {
-  toastr,
  ModalDialog,
  Link,
  Checkbox,
@ -36,22 +35,46 @@ class InviteDialogComponent extends React.Component {
      guestInvitationLink,
      isLoading: false,
      isLinkShort: false,
-      visible: false
+      visible: false,
+      LinkCopySuccess: false,
+      ChangeTextAnim: false
    };
  }

  onCopyLinkToClipboard = () => {
    // console.log("COPY", this.props);
-    const { t } = this.props;
    copy(
      this.state.isGuest
        ? this.state.guestInvitationLink
        : this.state.userInvitationLink
    );

-    toastr.success(t("LinkCopySuccess"));
+    this.ShowCopySuccessText();
  };

+  ShowCopySuccessText = async () => {
+
+    await this.StartChangeTextAnimation();
+
+    this.setState({ 
+      LinkCopySuccess: true
+    })
+
+    setTimeout(async () => {
+      await this.StartChangeTextAnimation();
+      this.setState({ LinkCopySuccess: false })
+    }, 1500)
+  }
+
+  StartChangeTextAnimation = () => {
+    this.setState({ChangeTextAnim: true})
+
+    return new Promise(resolve => setTimeout(() => {
+      this.setState({ChangeTextAnim: false})
+      resolve(true)
+    }, 200))
+  }
+
  onCheckedGuest = () => this.setState({ isGuest: !this.state.isGuest });

  onGetShortenedLink = () => {
@ -104,10 +127,11 @@ class InviteDialogComponent extends React.Component {
  render() {
    console.log("InviteDialog render");
    const { t, visible, settings, guestsCaption } = this.props;
+    const { LinkCopySuccess, ChangeTextAnim } = this.state;

    return (
      this.state.visible && (
-        <ModalDialogContainer>
+        <ModalDialogContainer ChangeTextAnim={ChangeTextAnim}>
          <ModalDialog visible={visible} onClose={this.onClose}>
            <ModalDialog.Header>{t("InviteLinkTitle")}</ModalDialog.Header>
            <ModalDialog.Body>
@ -120,10 +144,11 @@ class InviteDialogComponent extends React.Component {
                  <Link
                    className="link-dialog"
                    type="action"
-                    isHovered={true}
-                    onClick={this.onCopyLinkToClipboard}
+                    isHovered={LinkCopySuccess ? false : true}
+                    noHover={LinkCopySuccess}
+                    onClick={LinkCopySuccess ? undefined : this.onCopyLinkToClipboard}
                  >
-                    {t("CopyToClipboard")}
+                    {LinkCopySuccess ? t("LinkCopySuccess") : t("CopyToClipboard")}
                  </Link>
                  {settings && !this.state.isLinkShort && (
                    <Link
--- a/products/ASC.People/Client/src/components/dialogs/InviteDialog/locales/en/translation.json
+++ b/products/ASC.People/Client/src/components/dialogs/InviteDialog/locales/en/translation.json
@ -4,7 +4,7 @@
  "InviteLinkValidInterval": "This link is valid for {{ count }} days only.",
  "CopyToClipboard": "Copy the link",
  "CloseButton": "Close",
-  "LinkCopySuccess": "Link has been copied to the clipboard",
+  "LinkCopySuccess": "Link has been copied",
  "GetShortenLink": "Get shortened link",
  "InviteUsersAsCollaborators": "Add users as {{guestsCaption, lowercase}}",
  "LoadingProcessing": "Loading..."
--- a/products/ASC.People/Client/src/components/dialogs/InviteDialog/locales/ru/translation.json
+++ b/products/ASC.People/Client/src/components/dialogs/InviteDialog/locales/ru/translation.json
@ -4,7 +4,7 @@
 "InviteLinkValidInterval": "Эта ссылка действительна только в течение {{ count }} дней.",
 "CopyToClipboard": "Копировать ссылку",
 "CloseButton": "Закрыть",
-"LinkCopySuccess": "Ссылка скопирована в буфер обмена",
+"LinkCopySuccess": "Ссылка скопирована",
 "GetShortenLink": "Получить сокращенную ссылку",
 "InviteUsersAsCollaborators": "Добавить со статусом {{guestsCaption, lowercase}}",
 "LoadingProcessing": "Загрузка..."
--- a/products/ASC.People/Client/src/components/dialogs/ModalDialogContainer.js
+++ b/products/ASC.People/Client/src/components/dialogs/ModalDialogContainer.js
@ -27,7 +27,9 @@ const ModalDialogContainer = styled.div`
  }

  .link-dialog {
+    transition: opacity 0.2s;
    margin-right: 12px;
+    opacity: ${props => props.ChangeTextAnim ? 0 : 1}; 
  }

  .error-label {
--- a/web/ASC.Web.Common/package.json
+++ b/web/ASC.Web.Common/package.json
@ -1,6 +1,6 @@
 {
  "name": "asc-web-common",
-  "version": "1.0.238",
+  "version": "1.0.241",
  "description": "Ascensio System SIA common components and solutions library",
  "license": "AGPL-3.0",
  "files": [
--- a/web/ASC.Web.Common/src/components/MediaViewer/sub-components/image-viewer.js
+++ b/web/ASC.Web.Common/src/components/MediaViewer/sub-components/image-viewer.js
@ -65,6 +65,9 @@ const StyledViewer = styled(Viewer)`
    li[data-key='delete'],
    li[data-key='customDownload']{
        position: fixed;
+        @media (max-width: 600px) {
+            position: initial;
+        }
        bottom: 10px;
        .controlBtn{
            margin: 0
@ -88,8 +91,8 @@ const StyledViewer = styled(Viewer)`

    .btnContainer{
        display: block;
-        width: 20px;
-        margin: 3px 10px;
+        width: 18px;
+        margin: 4px 10px;
        line-height: 19px;
    }
    .scrollBtn{
--- a/web/ASC.Web.Common/src/components/PageLayout/index.js
+++ b/web/ASC.Web.Common/src/components/PageLayout/index.js
@ -80,6 +80,16 @@ class PageLayoutComponent extends React.Component {
    };
  }

+  componentDidUpdate(prevProps) {
+    if (
+      this.props.hideAside &&
+      !this.state.isArticlePinned &&
+      this.props.hideAside !== prevProps.hideAside
+    ) {
+      this.backdropClick();
+    }
+  }
+
  componentDidMount() {
    window.addEventListener("orientationchange", this.orientationChangeHandler);
    this.orientationChangeHandler();
@ -360,7 +370,8 @@ PageLayoutComponent.propTypes = {
  progressBarLabel: PropTypes.string,
  onDrop: PropTypes.func,
  setSelections: PropTypes.func,
-  uploadFiles: PropTypes.bool
+  uploadFiles: PropTypes.bool,
+  hideAside: PropTypes.bool
 };

 PageLayoutComponent.defaultProps = {
--- a/web/ASC.Web.Components/package.json
+++ b/web/ASC.Web.Components/package.json
@ -1,6 +1,6 @@
 {
  "name": "asc-web-components",
-  "version": "1.0.453",
+  "version": "1.0.454",
  "description": "Ascensio System SIA component library",
  "license": "AGPL-3.0",
  "main": "dist/asc-web-components.js",
--- a/web/ASC.Web.Components/src/components/icons/svg/check.toast.react.svg
+++ b/web/ASC.Web.Components/src/components/icons/svg/check.toast.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="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM5.92946 11.3447C6.38262 11.7704 7.11827 11.7704 7.57165 11.3447L12.705 6.52487C13.5659 5.66404 12.5449 4.32781 11.4764 5.39665L7.04492 9.57739C6.93026 9.68463 6.74449 9.68463 6.63005 9.57739L4.70054 7.7408C3.54497 6.58529 2.37389 8.00675 3.38509 8.95572L5.92946 11.3447Z" fill="#333333"/>
+</svg>
--- a/web/ASC.Web.Components/src/components/icons/svg/danger.toast.react.svg
+++ b/web/ASC.Web.Components/src/components/icons/svg/danger.toast.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 d="M15.6676 11.9986L10.0155 1.60877C9.10743 0.0799923 6.89378 0.0779611 5.98447 1.60877L0.332715 11.9986C-0.595597 13.5608 0.528309 15.539 2.34778 15.539H13.652C15.47 15.539 16.5959 13.5624 15.6676 11.9986ZM8 13.9375C7.48318 13.9375 7.0625 13.5168 7.0625 13C7.0625 12.4832 7.48318 12.0625 8 12.0625C8.51681 12.0625 8.9375 12.4832 8.9375 13C8.9375 13.5168 8.51681 13.9375 8 13.9375ZM8.9375 10.0625C8.9375 10.5793 8.51681 11 8 11C7.48319 11 7.0625 10.5793 7.0625 10.0625L7.0625 5C7.0625 4.48319 7.48318 4.0625 8 4.0625C8.51681 4.0625 8.9375 4.48319 8.9375 5L8.9375 10.0625Z" fill="#333333"/>
+</svg>
--- a/web/ASC.Web.Components/src/components/icons/svg/index.js
+++ b/web/ASC.Web.Components/src/components/icons/svg/index.js
@ -147,8 +147,12 @@ import OrigNavLogoIcon from "./nav.logo.react.svg";
 import OrigNavLogoOpenedIcon from "./nav.logo.opened.react.svg";

 import OrigCheckIcon from "./check.react.svg";
+import OrigCheckToastIcon from "./check.toast.react.svg";
+
 import OrigDangerIcon from "./danger.react.svg";
+import OrigDangerToastIcon from "./danger.toast.react.svg";
 import OrigInfoIcon from "./info.react.svg";
+import OrigInfoToastIcon from "./info.toast.react.svg";

 import OrigArrowPathIcon from "./arrow.path.react.svg";

@ -339,6 +343,7 @@ export const CatalogUserIcon = createStyledIcon(
 );
 export const ChatIcon = createStyledIcon(OrigChatIcon, "ChatIcon");
 export const CheckIcon = createStyledIcon(OrigCheckIcon, "CheckIcon");
+export const CheckToastIcon = createStyledIcon(OrigCheckToastIcon, "CheckToastIcon");
 export const CheckboxIcon = createStyledIcon(
  OrigCheckboxIcon,
  "CheckboxIcon",
@ -393,6 +398,7 @@ export const CrossSidebarIcon = createStyledIcon(
  "CrossSidebarIcon"
 );
 export const DangerIcon = createStyledIcon(OrigDangerIcon, "DangerIcon");
+export const DangerToastIcon = createStyledIcon(OrigDangerToastIcon, "DangerToastIcon");
 export const DocumentsIcon = createStyledIcon(
  OrigDocumentsIcon,
  "DocumentsIcon"
@ -443,6 +449,7 @@ export const HorizontalDotsIcon = createStyledIcon(
 export const IcqIcon = createStyledIcon(OrigIcqIcon, "IcqIcon");
 export const ImportIcon = createStyledIcon(OrigImportIcon, "ImportIcon");
 export const InfoIcon = createStyledIcon(OrigInfoIcon, "InfoIcon");
+export const InfoToastIcon = createStyledIcon(OrigInfoToastIcon, "InfoToastIcon");
 export const InvitationLinkIcon = createStyledIcon(
  OrigInvitationLinkIcon,
  "InvitationLinkIcon"
--- a/web/ASC.Web.Components/src/components/icons/svg/info.toast.react.svg
+++ b/web/ASC.Web.Components/src/components/icons/svg/info.toast.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="M8 16C12.4183 16 16 12.4183 16 8C16 3.58172 12.4183 0 8 0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16ZM9 7V13H7V7H9ZM9 5V3H7V5H9Z" fill="#333333"/>
+</svg>
--- a/web/ASC.Web.Components/src/components/toast/index.js
+++ b/web/ASC.Web.Components/src/components/toast/index.js
@ -181,7 +181,7 @@ const StyledToastContainer = styled(ToastContainer)`
      -webkit-border-radius: 3px;
      color: #000;
      margin: 0 0 6px;
-      padding: 13px 11px 13px 11px;
+      padding: 12px;
      min-height: 32px;
      font: normal 12px 'Open Sans', sans-serif;
      width: 100%;
@ -192,14 +192,6 @@ const StyledToastContainer = styled(ToastContainer)`
    display: flex;
    align-items: center;
  }
-
-svg {
-    width: 20px;
-    min-width: 20px;
-    height: 20px;
-    min-height: 20px;
-  }
-
 `;

 const Toast = props => {
--- a/web/ASC.Web.Components/src/components/toast/toastr.js
+++ b/web/ASC.Web.Components/src/components/toast/toastr.js
@ -2,23 +2,49 @@ import React from 'react'
 import { toast } from 'react-toastify'
 import styled from 'styled-components'
 import { Icons } from '../icons'
+import IconButton from '../icon-button'

 // eslint-disable-next-line react/prop-types
 const Icon = ({ type }) => (
  type === "success"
-    ? <Icons.CheckIcon color="#ffffff" isfill={true} />
+    ? <Icons.CheckToastIcon color="#333333" isfill={true} />
    : type === "error" || type === "warning"
-      ? <Icons.DangerIcon color="#ffffff" isfill={true} />
-      : <Icons.InfoIcon color="#ffffff" isfill={true} />
+      ? <Icons.DangerToastIcon color="#333333" isfill={true} />
+      : <Icons.InfoToastIcon color="#333333" isfill={true} />
 );

+const IconWrapper = styled.div`
+  align-self: end;
+  display: flex;
+  svg{
+    width: 16px;
+    min-width: 16px;
+    height: 16px;
+    min-height: 16px;
+  }
+`;
+
 const StyledDiv = styled.div`
  margin-left: 15px;
+  line-height: 1.3;
+  align-self: center;
+`;
+
+const StyledCloseWrapper = styled.div`
+  .closeButton{
+    opacity: 0.5;
+    padding-top: 2px;
+    &:hover{
+      opacity: 1;
+    }
+  }
 `;

 const ToastTitle = styled.p`
-  font-weight: bold;
-  margin: 0;
+    font-weight: bold;
+    margin: 0;
+    margin-bottom: 5px;
+    line-height: 16px;
 `;

 const toastr = {
@ -29,22 +55,34 @@ const toastr = {
  warning: warning
 };

+const CloseButton = ({closeToast}) => (
+  <StyledCloseWrapper>
+    <IconButton
+      className="closeButton"
+      onClick={closeToast}
+      iconName="CrossIcon"
+      size={12}
+      color="#333333"
+    />
+  </StyledCloseWrapper>
+)
+

 const notify = (type, data, title, timeout = 5000, withCross = false,  centerPosition = false) => {
  return toast(
    <>
-      <div>
-        <Icon type={type} />
-      </div>
+      <IconWrapper>
+        <Icon size="medium" type={type} />
+      </IconWrapper>
      <StyledDiv>
-        <ToastTitle>{title}</ToastTitle>
+        {title && <ToastTitle>{title}</ToastTitle>}
        {data}
      </StyledDiv>
    </>,
    {
      type: type,
      closeOnClick: !withCross,
-      closeButton: withCross,
+      closeButton: withCross && <CloseButton/>,
      autoClose: timeout === 0 ? false : timeout < 750 ? 5000 : (timeout || 5000),
      position: centerPosition && toast.POSITION.TOP_CENTER
    }