Merge branch 'feature/files' of github.com:ONLYOFFICE/AppServer into feature/files

2020-08-19 16:14:59 +03:00 · 2020-08-19 16:14:59 +03:00 · 6130af291e
commit 6130af291e
parent 4754a84483 c34ecd5ecb
16 changed files with 185 additions and 37 deletions
--- a/products/ASC.Files/Client/src/components/pages/Home/Section/Filter/index.js
+++ b/products/ASC.Files/Client/src/components/pages/Home/Section/Filter/index.js
@ -289,6 +289,7 @@ class SectionFilterContent extends React.Component {
        language={i18n.language}
        isReady={this.state.isReady}
        {...filterColumnCount}
+        contextMenuHeader={t("AddFilter")}
      />
    );
  }
--- a/products/ASC.Files/Client/src/components/pages/Home/locales/en/translation.json
+++ b/products/ASC.Files/Client/src/components/pages/Home/locales/en/translation.json
@ -94,5 +94,6 @@
  "Convert": "Convert",
  "Duplicate": "Create a copy",
  "CopyOperation": "Copying",
-  "UnblockVersion": "Unblock/Check-in"
+  "UnblockVersion": "Unblock/Check-in",
+  "AddFilter": "Add filter"
 }
--- a/products/ASC.Files/Client/src/components/pages/Home/locales/ru/translation.json
+++ b/products/ASC.Files/Client/src/components/pages/Home/locales/ru/translation.json
@ -94,5 +94,6 @@
  "Convert": "Конвертация",
  "Duplicate": "Создать копию",
  "CopyOperation": "Копирование",
-  "UnblockVersion": "Заблокировать/Разблокировать"
+  "UnblockVersion": "Заблокировать/Разблокировать",
+  "AddFilter": "Добавить фильтр"
 }
--- a/products/ASC.People/Client/src/components/pages/Home/Section/Filter/index.js
+++ b/products/ASC.People/Client/src/components/pages/Home/Section/Filter/index.js
@ -253,6 +253,7 @@ class SectionFilterContent extends React.Component {
        placeholder={t("Search")}
        needForUpdate={this.needForUpdate}
        language={i18n.language}
+        contextMenuHeader={t("AddFilter")}
      />
    );
  }
--- a/products/ASC.People/Client/src/components/pages/Home/locales/en/translation.json
+++ b/products/ASC.People/Client/src/components/pages/Home/locales/en/translation.json
@ -51,5 +51,6 @@
  "SuccessfullyRemovedUsers": "Users have been removed successfully",
  "SendEmailAction": "Send e-mail action",
  "SuccessfullyRemovedGroup": "Group has been removed successfully",
-  "OrganizationName": "ONLYOFFICE"
+  "OrganizationName": "ONLYOFFICE",
+  "AddFilter": "Add filter"
 }
--- a/products/ASC.People/Client/src/components/pages/Home/locales/ru/translation.json
+++ b/products/ASC.People/Client/src/components/pages/Home/locales/ru/translation.json
@ -51,5 +51,6 @@
  "SuccessfullyRemovedUsers": "Пользователи были успешно удалены",
  "SendEmailAction": "Действие отправки e-mail",
  "SuccessfullyRemovedGroup": "Группа была успешно удалена",
-  "OrganizationName": "ONLYOFFICE"
+  "OrganizationName": "ONLYOFFICE",
+  "AddFilter": "Добавить фильтр"
 }
--- 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.197",
+  "version": "1.0.199",
  "description": "Ascensio System SIA common components and solutions library",
  "license": "AGPL-3.0",
  "files": [
--- a/web/ASC.Web.Common/src/components/AdvancedSelector/sub-components/Selector.js
+++ b/web/ASC.Web.Common/src/components/AdvancedSelector/sub-components/Selector.js
@ -595,7 +595,7 @@ const Selector = props => {
                isDisabled={isDisabled}
                options={getSelectorGroups(groups)}
                selectedOption={currentGroup}
-                dropDownMaxHeight={200}
+                dropDownMaxHeight={220}
                scaled={true}
                scaledOptions={true}
                size="content"
@ -631,7 +631,7 @@ const Selector = props => {
                    className="options_list"
                    height={height}
                    itemCount={itemCount}
-                    itemSize={32}
+                    itemSize={36}
                    onItemsRendered={onItemsRendered}
                    ref={ref}
                    width={width + 8}
--- a/web/ASC.Web.Common/src/components/AdvancedSelector/sub-components/StyledColumn.js
+++ b/web/ASC.Web.Common/src/components/AdvancedSelector/sub-components/StyledColumn.js
@ -25,7 +25,7 @@ const StyledColumn = styled(Container)`
            }
        `
        : css`
-            width: 325px;
+            width: 320px;
            height: 100%;
        `
    }
--- a/web/ASC.Web.Common/src/components/AdvancedSelector/sub-components/StyledSelector.js
+++ b/web/ASC.Web.Common/src/components/AdvancedSelector/sub-components/StyledSelector.js
@ -1,5 +1,7 @@
 import React from "react";
 import styled, { css } from "styled-components";
+import { utils } from "asc-web-components";
+const { tablet } = utils.device;

 /* eslint-disable no-unused-vars */
 /* eslint-disable react/prop-types */
@ -92,7 +94,7 @@ const dropdownStyles = css`
 `;

 const asideStyles = css`
-  height: 100%;
+  height: calc(100% - 16px);
  grid-template-columns: 1fr;
  ${props =>
    props.isMultiSelect && props.hasSelected
@ -199,6 +201,12 @@ const StyledSelector = styled(Container)`
    .body-options {
      grid-area: body-options;
      margin-left: -8px;
+
+      @media ${tablet} {
+        width: 290px;
+        padding-top: 12px;
+      }
+      
      /* background-color: white; */

      .row-option {
@ -206,6 +214,7 @@ const StyledSelector = styled(Container)`
        padding-top: 8px;
        box-sizing: border-box;
        height: 32px;
+        margin-top: 4px;
        cursor: pointer;

        &:hover {
--- a/web/ASC.Web.Common/src/components/FilterInput/FilterInput.js
+++ b/web/ASC.Web.Common/src/components/FilterInput/FilterInput.js
@ -525,7 +525,7 @@ class FilterInput extends React.Component {
        const { className, id, style, size,
            isDisabled, scale, getFilterData, placeholder,
            getSortData, directionAscLabel, directionDescLabel,
-            filterColumnCount, viewAs } = this.props;
+            filterColumnCount, viewAs, contextMenuHeader } = this.props;
        /* eslint-enable react/prop-types */

        const { searchText, filterValues, openFilterItems,
@ -566,6 +566,7 @@ class FilterInput extends React.Component {
                    >
                        <div className='styled-filter-block' ref={this.filterWrapper}>
                            <FilterBlock
+                                contextMenuHeader={contextMenuHeader}
                                openFilterItems={openFilterItems}
                                hideFilterItems={hideFilterItems}
                                iconSize={iconSize}
@ -620,7 +621,8 @@ FilterInput.protoTypes = {
    style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
    needForUpdate: PropTypes.bool,
    filterColumnCount: PropTypes.number,
-    onChangeViewAs: PropTypes.func
+    onChangeViewAs: PropTypes.func,
+    contextMenuHeader: PropTypes.string
 };

 FilterInput.defaultProps = {
--- a/web/ASC.Web.Common/src/components/FilterInput/sub-components/FilterBlock.js
+++ b/web/ASC.Web.Common/src/components/FilterInput/sub-components/FilterBlock.js
@ -369,13 +369,22 @@ class FilterBlock extends React.Component {
    const _this = this;
    const filterItems = this.getFilterItems();
    const filterData = this.props.getFilterData();
-    const { iconSize, isDisabled } = this.props;
+    const { iconSize, isDisabled, contextMenuHeader } = this.props;
    return (
      <>
        <div className='styled-filter-block' ref={this.filterWrapper} id='filter-items-container'>
          {filterItems}
        </div>
-        {filterData.length > 0 && <FilterButton columnCount={this.props.columnCount} id='filter-button' iconSize={iconSize} getData={_this.getData} isDisabled={isDisabled} />}
+        {filterData.length > 0 && (
+          <FilterButton
+            columnCount={this.props.columnCount}
+            id='filter-button'
+            iconSize={iconSize}
+            getData={_this.getData}
+            isDisabled={isDisabled}
+            asideHeader={contextMenuHeader}
+          />
+        )}
      </>
    );
  }
@ -389,7 +398,8 @@ FilterBlock.propTypes = {
  onDeleteFilterItem: PropTypes.func,
  onRender: PropTypes.func,
  openFilterItems: PropTypes.array,
-  columnCount: PropTypes.number
+  columnCount: PropTypes.number,
+  contextMenuHeader: PropTypes.string
 }

 export default FilterBlock;
--- a/web/ASC.Web.Common/src/components/FilterInput/sub-components/FilterButton.js
+++ b/web/ASC.Web.Common/src/components/FilterInput/sub-components/FilterButton.js
@ -4,7 +4,7 @@ import PropTypes from 'prop-types';

 class FilterButton extends React.PureComponent {
  render() {
-    const { getData, id, isDisabled, iconSize, columnCount } = this.props;
+    const { getData, id, isDisabled, iconSize, columnCount, asideHeader } = this.props;
    //console.log('render FilterButton)
    return (
      <ContextMenuButton
@ -19,6 +19,8 @@ class FilterButton extends React.PureComponent {
        size={iconSize}
        title='Actions'
        columnCount={columnCount}
+        displayType="auto"
+        asideHeader={asideHeader}
      ></ContextMenuButton>
    )
  }
@ -28,6 +30,7 @@ FilterButton.propTypes = {
  iconSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
  id: PropTypes.string,
  isDisabled: PropTypes.bool,
-  columnCount: PropTypes.number
+  columnCount: PropTypes.number,
+  asideHeader: PropTypes.string
 }
 export default FilterButton
--- 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.415",
+  "version": "1.0.417",
  "description": "Ascensio System SIA component library",
  "license": "AGPL-3.0",
  "main": "dist/asc-web-components.js",
--- a/web/ASC.Web.Components/src/components/context-menu-button/index.js
+++ b/web/ASC.Web.Components/src/components/context-menu-button/index.js
@ -1,9 +1,16 @@
 import React from 'react'
-import styled from 'styled-components'
+import styled, { css } from 'styled-components'
 import PropTypes from 'prop-types'
 import DropDownItem from '../drop-down-item'
 import DropDown from '../drop-down'
 import IconButton from '../icon-button'
+import Backdrop from '../backdrop'
+import Aside from '../aside'
+import Heading from '../heading'
+import Text from '../text'
+import Link from '../link'
+import { desktop } from '../../utils/device'
+import throttle from "lodash/throttle";

 const StyledOuter = styled.div`
  display: inline-block;
@ -12,6 +19,42 @@ const StyledOuter = styled.div`
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 `;

+const Content = styled.div`
+  box-sizing: border-box;
+  position: relative;
+  width: 100%;
+  background-color: #fff;
+  padding: 0 16px 16px;
+
+  .header {
+    max-width: 500px;
+    margin: 0;
+    line-height: 56px;
+    font-weight: 700 !important;
+  }
+`;
+
+const Header = styled.div`
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid #dee2e6;
+`;
+
+const Body = styled.div`
+  position: relative;
+  padding: 16px 0;
+  display: flex;
+  flex-direction: column;
+
+  .context-menu-button_link {
+    margin-top: 16px;
+  }
+
+  .context-menu-button_link-header:not(:first-child) {
+    margin-top: 32px;
+  }
+`;
+
 class ContextMenuButton extends React.Component {
  constructor(props) {
    super(props);
@ -20,18 +63,54 @@ class ContextMenuButton extends React.Component {

    this.state = {
      isOpen: props.opened,
-      data: props.data
+      data: props.data,
+      displayType: this.getTypeByWidth()
    };
+    this.throttledResize = throttle(this.resize, 300);
+  }
+
+  getTypeByWidth = () => {
+    if (this.props.displayType !== "auto") return this.props.displayType;
+    return window.innerWidth < desktop.match(/\d+/)[0] ? "aside" : "dropdown";
+  };
+
+  resize = () => {
+    if (this.props.displayType !== "auto") return;
+    const type = this.getTypeByWidth();
+    if (type === this.state.displayType) return;
+    this.setState({ displayType: type });
+  };
+
+  popstate = () => {
+    window.removeEventListener("popstate", this.popstate, false);
+    this.onClose();
+    window.history.go(1);
+  };
+
+  componentDidMount() {
+    window.addEventListener("resize", this.throttledResize);
+  }
+
+  componentWillUnmount() {
+    window.removeEventListener("resize", this.throttledResize);
  }

-  handleClick = (e) => this.state.isOpen && !this.ref.current.contains(e.target) && this.toggle(false);
  stopAction = (e) => e.preventDefault();
  toggle = (isOpen) => this.setState({ isOpen: isOpen });
+  onClose = () => this.setState({ isOpen: !this.state.isOpen });

  componentDidUpdate(prevProps) {
    if (this.props.opened !== prevProps.opened) {
      this.toggle(this.props.opened);
    }
+
+    if (this.props.opened && this.state.displayType === "aside") {
+      window.addEventListener("popstate", this.popstate, false);
+    }
+
+    if (this.props.displayType !== prevProps.displayType) {
+      this.setState({displayType: this.getTypeByWidth()});
+    }
  }

  onIconButtonClick = () => {
@ -86,10 +165,11 @@ class ContextMenuButton extends React.Component {
      onMouseOver,
      size,
      style,
-      isFill
+      isFill,
+      asideHeader
    } = this.props;

-    const { isOpen } = this.state;
+    const { isOpen, displayType } = this.state;
    const iconButtonName = isOpen && iconOpenName ? iconOpenName : iconName;
    return (
      <StyledOuter ref={this.ref} className={className} id={id} style={style}>
@ -109,20 +189,54 @@ class ContextMenuButton extends React.Component {
          onMouseOver={onMouseOver}
          onMouseOut={onMouseOut}
        />
-        <DropDown 
-          directionX={directionX}
-          directionY={directionY}
-          open={isOpen}
-          clickOutsideAction={this.clickOutsideAction}
-          columnCount={columnCount}
-        >
-          {
-            this.state.data.map((item, index) =>
-              (item && (item.label || item.icon || item.key)) && <DropDownItem {...item} key={item.key || index} onClick={this.onDropDownItemClick.bind(this, item)}
+        {displayType === 'dropdown' ? 
+          <DropDown 
+            directionX={directionX}
+            directionY={directionY}
+            open={isOpen}
+            clickOutsideAction={this.clickOutsideAction}
+            columnCount={columnCount}
+          >
+            {
+              this.state.data.map((item, index) =>
+                (item && (item.label || item.icon || item.key)) && (
+                  <DropDownItem {...item} key={item.key || index} onClick={this.onDropDownItemClick.bind(this, item)} />
+                )
+              )
+            }
+          </DropDown>
+          : <>
+              <Backdrop
+                onClick={this.onClose}
+                visible={isOpen}
+                zIndex={310}
              />
-            )
-          }
-        </DropDown>
+              <Aside visible={isOpen} scale={false} zIndex={310}>
+                <Content>
+                  <Header>
+                    <Heading className="header" size="medium" truncate={true}>
+                      {asideHeader}
+                    </Heading>
+                  </Header>
+                  <Body>
+                    {this.state.data.map((item, index) =>
+                      (item && (item.label || item.icon || item.key)) && (
+                      <Link
+                        className={`context-menu-button_link${item.isHeader ? '-header' : ''}`}
+                        key={item.key || index}
+                        fontSize={item.isHeader ? '15px' : '13px'}
+                        noHover={item.isHeader}
+                        fontWeight={600}
+                        onClick={this.onDropDownItemClick.bind(this, item)}
+                      >
+                        {item.label}
+                      </Link>
+                      ))}
+                  </Body>
+                </Content>
+              </Aside>
+          </>
+      }
      </StyledOuter>
    );
  }
@ -156,7 +270,8 @@ ContextMenuButton.propTypes = {
  className: PropTypes.string,
  id: PropTypes.string,
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  columnCount: PropTypes.number
+  columnCount: PropTypes.number,
+  displayType: PropTypes.string
 };

 ContextMenuButton.defaultProps = {
@ -167,7 +282,8 @@ ContextMenuButton.defaultProps = {
  size: 16,
  isDisabled: false,
  directionX: 'left',
-  isFill: false
+  isFill: false,
+  displayType: 'dropdown'
 };

 export default ContextMenuButton
--- a/web/ASC.Web.Components/src/components/group-buttons-menu/index.js
+++ b/web/ASC.Web.Components/src/components/group-buttons-menu/index.js
@ -111,6 +111,7 @@ class GroupButtonsMenu extends React.PureComponent {
    this.widthsArray = groupMenuItemsArray.map(item => item.offsetWidth);

    window.addEventListener('resize', this.throttledResize);
+    window.addEventListener('orientationchange', this.throttledResize);

    this.updateMenu();
  }
@ -169,6 +170,7 @@ class GroupButtonsMenu extends React.PureComponent {

  componentWillUnmount() {
    window.removeEventListener('resize', this.throttledResize);
+    window.removeEventListener('orientationchange', this.throttledResize);
  }

  render() {